docs: Update new setStaticAcrylicTextrue method

myxvisual · Jul 2, 2017 · 87c9e27 · 87c9e27
1 parent 9d4bdec
commit 87c9e27
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/docs/src/common/setStaticAcrylicTexture.ts b/docs/src/common/setStaticAcrylicTexture.ts
@@ -1,27 +1,33 @@
 export default function setStaticAcrylicTexture(theme: ReactUWP.ThemeType) {
-  if (theme.isDarkTheme) {
-    Object.assign(theme, {
-      acrylicTexture40: {
-        background: `url(${require("assets/images/blurBackground/dark-40.png")}) left top / cover no-repeat fixed`
-      },
-      acrylicTexture60: {
-        background: `url(${require("assets/images/blurBackground/dark-60.png")}) left top / cover no-repeat fixed`
-      },
-      acrylicTexture80: {
-        background: `url(${require("assets/images/blurBackground/dark-80.png")}) left top / cover no-repeat fixed`
-      }
-    } as ReactUWP.ThemeType);
+  if (theme.desktopBackgroundImage === require<string>("assets/images/blurBackground/jennifer-bailey-10753.jpg")) {
+    if (theme.isDarkTheme) {
+      Object.assign(theme, {
+        acrylicTexture40: {
+          background: `url(${require("assets/images/blurBackground/dark-40.png")}) left top / cover no-repeat fixed`
+        },
+        acrylicTexture60: {
+          background: `url(${require("assets/images/blurBackground/dark-60.png")}) left top / cover no-repeat fixed`
+        },
+        acrylicTexture80: {
+          background: `url(${require("assets/images/blurBackground/dark-80.png")}) left top / cover no-repeat fixed`
+        }
+      } as ReactUWP.ThemeType);
+    } else {
+      Object.assign(theme, {
+        acrylicTexture40: {
+          background: `url(${require("assets/images/blurBackground/light-40.png")}) left top / cover no-repeat fixed`
+        },
+        acrylicTexture60: {
+          background: `url(${require("assets/images/blurBackground/light-60.png")}) left top / cover no-repeat fixed`
+        },
+        acrylicTexture80: {
+          background: `url(${require("assets/images/blurBackground/light-80.png")}) left top / cover no-repeat fixed`
+        }
+      } as ReactUWP.ThemeType);
+    }
   } else {
-    Object.assign(theme, {
-      acrylicTexture40: {
-        background: `url(${require("assets/images/blurBackground/light-40.png")}) left top / cover no-repeat fixed`
-      },
-      acrylicTexture60: {
-        background: `url(${require("assets/images/blurBackground/light-60.png")}) left top / cover no-repeat fixed`
-      },
-      acrylicTexture80: {
-        background: `url(${require("assets/images/blurBackground/light-80.png")}) left top / cover no-repeat fixed`
-      }
-    } as ReactUWP.ThemeType);
+    if (theme.useFluentDesign && !theme.haveAcrylicTextures) {
+      theme.generateAcrylicTextures(theme, newTheme => theme.updateTheme(newTheme));
+    }
   }
 }
diff --git a/docs/src/routes/index.tsx b/docs/src/routes/index.tsx
@@ -15,11 +15,17 @@ const useFluentDesign = true;
 const desktopBackgroundImage = require<string>("assets/images/blurBackground/jennifer-bailey-10753.jpg");
 const theme = getTheme({ useFluentDesign, desktopBackgroundImage });
 
+localStorage.setItem("__REACT_UWP__", "");
 export class ThemeWrapper extends React.Component {
   render() {
     const { children } = this.props;
     return (
-      <Theme theme={theme} needGenerateAcrylic={false} themeWillUpdate={setStaticAcrylicTexture}>
+      <Theme
+        theme={theme}
+        autoSaveTheme
+        needGenerateAcrylic={false}
+        themeWillUpdate={setStaticAcrylicTexture}
+      >
         {children}
       </Theme>
     );