wip: noflash poc

endiliey · endiliey · commit 28c462302113 · 2019-11-29T23:12:41.000+07:00
diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
@@ -7,6 +7,39 @@
 
 const path = require('path');
 
+const noFlash = `(function() {
+  // Change these if you use something different in your hook.
+  var storageKey = 'theme';
+
+  function setDataThemeAttribute(theme) {
+    document.querySelector('html').setAttribute('data-theme', theme);
+  }
+  
+  var preferDarkQuery = '(prefers-color-scheme: dark)';
+  var mql = window.matchMedia(preferDarkQuery);
+  var supportsColorSchemeQuery = mql.media === preferDarkQuery;
+  var localStorageTheme = null;
+  try {
+    localStorageTheme = localStorage.getItem(storageKey);
+  } catch (err) {}
+  var localStorageExists = localStorageTheme !== null;
+
+  // Determine the source of truth
+  if (localStorageExists) {
+    // source of truth from localStorage
+    setDataThemeAttribute(localStorageTheme);
+  } else if (supportsColorSchemeQuery) {
+    // source of truth from system
+    var theme = mql.matches ? 'dark' : '';
+    setDataThemeAttribute(theme);
+    localStorage.setItem(storageKey, theme);
+  } else {
+    // source of truth from document
+    var theme = document.querySelector('html').getAttribute('data-theme');
+    localStorage.setItem(storageKey, theme);
+  }
+})();`;
+
 module.exports = function(context, options) {
   const {customCss} = options || {};
   return {
@@ -19,5 +52,19 @@ module.exports = function(context, options) {
     getClientModules() {
       return ['infima/dist/css/default/default.css', customCss];
     },
+
+    injectHtmlTags() {
+      return {
+        preBodyTags: [
+          {
+            tagName: 'script',
+            attributes: {
+              type: 'text/javascript',
+            },
+            innerHTML: noFlash,
+          },
+        ],
+      };
+    },
   };
 };
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.js b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js
@@ -8,20 +8,23 @@
 import React from 'react';
 import Toggle from 'react-toggle';
 
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
 import classnames from 'classnames';
 import styles from './styles.module.css';
 
 const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
 const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
 
 export default function(props) {
-  return (
+  const {isClient} = useDocusaurusContext();
+  return isClient ? (
     <Toggle
       icons={{
         checked: <Moon />,
         unchecked: <Sun />,
       }}
       {...props}
     />
-  );
+  ) : null;
 }
diff --git a/packages/docusaurus/src/client/App.js b/packages/docusaurus/src/client/App.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 
 import Head from '@docusaurus/Head';
 import routes from '@generated/routes';
@@ -17,9 +17,14 @@ import PendingNavigation from './PendingNavigation';
 import './client-lifecycles-dispatcher';
 
 function App() {
+  const [isClient, setIsClient] = useState(false);
   const {stylesheets, scripts} = siteConfig;
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
   return (
-    <DocusaurusContext.Provider value={{siteConfig}}>
+    <DocusaurusContext.Provider value={{siteConfig, isClient}}>
       {(stylesheets || scripts) && (
         <Head>
           {stylesheets &&
