feat: Update new theme support backdropFilter

Author: myxvisual

docs/src/routes/index.tsx

@@ -23,7 +23,7 @@ export class ThemeWrapper extends React.Component {
       <Theme
         theme={theme}
         needGenerateAcrylic={false}
-        themeWillUpdate={setStaticAcrylicTexture}
+        // themeWillUpdate={setStaticAcrylicTexture}
       >
         {children}
       </Theme>

src/Theme/index.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from "prop-types";
 
 import { handleScrollReveal } from "./handleScrollReveal";
 import darkTheme from "../styles/darkTheme";
-import getTheme, { Theme as ThemeType, ThemeConfig } from "../styles/getTheme";
+import getTheme, { Theme as ThemeType } from "../styles/getTheme";
 import RenderToBody from "../RenderToBody";
 import ToastWrapper from "../Toast/ToastWrapper";
 import { StyleManagerSheet } from "./StyleManagerSheet";
@@ -145,7 +145,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
       }
     } as ThemeType);
 
-    if (theme.useFluentDesign && theme.desktopBackgroundImage && theme.acrylicTextureCount !== 3) {
+    if (theme.useFluentDesign && theme.desktopBackgroundImage) {
       theme.generateAcrylicTextures(currTheme => {
         this.setState({ currTheme });
         this.handleThemeUpdate(currTheme);

src/styles/generateAcrylicTexture.ts

@@ -16,6 +16,11 @@ export default function generateAcrylicTexture(config: AcrylicTextureConfig) {
   const configStr = JSON.stringify({ image, tintColor, tintOpacity, blurSize });
   let acrylicTexture = acrylicTextureMap.get(configStr);
 
+  function updatAcrylicTexture() {
+    if (callback) callback(acrylicTexture);
+    acrylicTextureMap.set(configStr, acrylicTexture);
+  }
+
   if (acrylicTexture) {
     callback(acrylicTexture);
     return;
@@ -25,6 +30,7 @@ export default function generateAcrylicTexture(config: AcrylicTextureConfig) {
   const context = canvas.getContext("2d");
   const imageNode = new Image();
   imageNode.crossOrigin = "Anonymous";
+  imageNode.src = image;
 
   imageNode.onload = () => {
     let { naturalWidth, naturalHeight } = imageNode;
@@ -47,18 +53,17 @@ export default function generateAcrylicTexture(config: AcrylicTextureConfig) {
     if (HTMLCanvasElement.prototype.toBlob) {
       canvas.toBlob((blob) => {
         acrylicTexture = URL.createObjectURL(blob);
+        updatAcrylicTexture();
       });
     } else if (HTMLCanvasElement.prototype["msToBlob"]) {
       const blob = canvas["msToBlob"]();
       acrylicTexture = URL.createObjectURL(blob);
+      updatAcrylicTexture();
     } else {
       acrylicTexture = canvas.toDataURL("image/jpg");
+      updatAcrylicTexture();
     }
-
-    acrylicTextureMap.set(configStr, acrylicTexture);
-    if (callback) callback(acrylicTexture);
   };
-
 }
 
 

src/styles/getAcrylicTextureStyle.ts

@@ -1,30 +1,35 @@
 import { isSupportBackdropFilter } from "../utils/browser/backdropFilterDetector";
 
-export function getAcrylicTextureStyle(): CSSStyleDeclaration {
+export { isSupportBackdropFilter };
+
+export interface AcrylicConfig { tintColor: string; opacity: number; blurSize: number; }
+
+export function getAcrylicTextureStyle(config: AcrylicConfig) {
   const isSupported = isSupportBackdropFilter();
-  let style: CSSStyleDeclaration;
+  let style: React.CSSProperties;
+  const { tintColor, opacity, blurSize } = config;
   if (isSupported) {
     style = {
       /**
        * Add theme.baseLow color.
        */
-      backgroundColor: "",
+      backgroundColor: tintColor,
       /**
        * Add noise texture.
        */
       backgroundImage: "",
       /**
        * Add blur filter.
        */
-      backdropFilter: "blur(10px)"
+      backdropFilter: `blur(${blurSize}px)`
     } as any;
   } else {
     style = {
       /**
        * Add polyfill texture theme.acrylicText40.
        */
-      background: ""
-    } as CSSStyleDeclaration;
+      background: tintColor
+    };
   }
 
   return style;

src/styles/getTheme.ts

@@ -3,7 +3,9 @@ import prefixAll from "../utils/prefixAll";
 import { Toast } from "../Toast";
 import { StyleManager, CustomCSSProperties, StyleClasses } from "./StyleManager";
 import generateAcrylicTexture from "./generateAcrylicTexture";
+import { getAcrylicTextureStyle, AcrylicConfig, isSupportBackdropFilter } from "./getAcrylicTextureStyle";
 
+const supportedBackdropFilter = isSupportBackdropFilter();
 export function darken(color: string, coefficient: number) {
   const hsl = tinycolor(color).toHsl();
   hsl.l = hsl.l * (1 - coefficient);
@@ -17,6 +19,7 @@ export function lighten(color: string, coefficient: number) {
 }
 
 export interface AcrylicTexture {
+  style?: React.CSSProperties;
   tintColor?: string;
   tintOpacity?: number;
   blurSize?: number;
@@ -381,39 +384,68 @@ export class Theme {
       }
     } as Theme);
 
+    const blurSize = 24;
+    const acrylicTexture40Config: AcrylicConfig = {
+      tintColor: this.chromeMedium,
+      opacity: .4,
+      blurSize
+    };
+    this.acrylicTexture40.style = getAcrylicTextureStyle(acrylicTexture40Config);
+    this.acrylicTexture40.background = this.acrylicTexture40.style.background as string;
+
+    const acrylicTexture60Config: AcrylicConfig = {
+      tintColor: this.chromeMediumLow,
+      opacity: .6,
+      blurSize
+    };
+    this.acrylicTexture60.style = getAcrylicTextureStyle(acrylicTexture60Config);
+    this.acrylicTexture60.background = this.acrylicTexture60.style.background as string;
+
+    const acrylicTexture80Config: AcrylicConfig = {
+      tintColor: this.chromeLow,
+      opacity: .8,
+      blurSize
+    };
+    this.acrylicTexture80.style = getAcrylicTextureStyle(acrylicTexture80Config);
+    this.acrylicTexture80.background = this.acrylicTexture80.style.background as string;
+
     // generateAcrylicTextures method.
     this.generateAcrylicTextures = (themeCallback?: (theme?: Theme) => void) => {
+      if (supportedBackdropFilter) {
+        return;
+      }
       this.acrylicTextureCount = 0;
-      const baseConfig = {
-        blurSize: 24
-      };
 
       const callback = (image: string, key: number) => {
+        const background = `url(${image}) no-repeat fixed top left / cover`;
         if (key === 4) {
           this.acrylicTextureCount += 1;
           Object.assign(this.acrylicTexture40, {
-            tintColor: this.chromeMediumLow,
-            tintOpacity: 0.4,
-            background: `url(${image}) no-repeat fixed top left / cover`,
-            ...baseConfig
+            tintColor: acrylicTexture40Config.tintColor,
+            tintOpacity: acrylicTexture40Config.opacity,
+            style: { background },
+            background,
+            blurSize
           });
         }
         if (key === 6) {
           this.acrylicTextureCount += 1;
           Object.assign(this.acrylicTexture60, {
-            tintColor: this.chromeLow,
-            tintOpacity: 0.6,
-            background: `url(${image}) no-repeat fixed top left / cover`,
-            ...baseConfig
+            tintColor: acrylicTexture60Config.tintColor,
+            tintOpacity: acrylicTexture60Config.opacity,
+            style: { background },
+            background,
+            blurSize
           });
         }
         if (key === 8) {
           this.acrylicTextureCount += 1;
           Object.assign(this.acrylicTexture80, {
-            tintColor: this.chromeLow,
-            tintOpacity: 0.8,
-            background: `url(${image}) no-repeat fixed top left / cover`,
-            ...baseConfig
+            tintColor: acrylicTexture80Config.tintColor,
+            tintOpacity: acrylicTexture80Config.opacity,
+            style: { background },
+            background,
+            blurSize
           });
         }
 
@@ -428,21 +460,21 @@ export class Theme {
         image: this.desktopBackgroundImage,
         tintColor: this.chromeMediumLow,
         tintOpacity: 0.4,
-        blurSize: baseConfig.blurSize,
+        blurSize,
         callback: image => callback(image, 4)
       });
       generateAcrylicTexture({
         image: this.desktopBackgroundImage,
         tintColor: this.chromeLow,
         tintOpacity: 0.6,
-        blurSize: baseConfig.blurSize,
+        blurSize,
         callback: image => callback(image, 6)
       });
       generateAcrylicTexture({
         image: this.desktopBackgroundImage,
         tintColor: this.chromeLow,
         tintOpacity: 0.8,
-        blurSize: baseConfig.blurSize,
+        blurSize,
         callback: image => callback(image, 8)
       });
     };