Merge pull request #86 from m417z/flashing-fix

Add a stylesheet loader script to fix flashing (issue #77)
GoogleChromeLabs · Jan 17, 2024 · b1fe6cd · b1fe6cd
2 parents fd5f3f3 + 4e05ff5
commit b1fe6cd
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -74,12 +74,13 @@ more than one file per theme. The example below illustrates the principle.
 -->
 
 ```html
-<!-- In the `<head>`
+<head>
   <link rel="stylesheet" href="common.css">
   <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
   <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
   <script type="module" src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"></script>
--->
+</head>
+<!-- ... -->
 <main>
   <h1>Hi there</h1>
   <img
@@ -102,6 +103,27 @@ more than one file per theme. The example below illustrates the principle.
 </aside>
 ```
 
+The above method might cause flashing
+([#77](https://github.com/GoogleChromeLabs/dark-mode-toggle/issues/77)) when the
+page loads, as the dark mode toggle module is loaded after the page is rendered.
+A loader script can be used to apply the saved theme before the page is
+rendered. Wrap the stylesheet tags with `<noscript
+id="dark-mode-toggle-stylesheets">...</noscript>` and add the loader script as
+following:
+
+```html
+<head>
+  <link rel="stylesheet" href="common.css">
+  <noscript id="dark-mode-toggle-stylesheets">
+    <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
+    <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+  </noscript>
+  <script src="dark-mode-toggle-stylesheets-loader.min.js"></script>
+  <script type="module" src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"></script>
+</head>
+<!-- ... -->
+```
+
 ### ② Using a CSS class that you toggle
 
 If you prefer to not split your CSS in different files based on the color

diff --git a/demo/1-mb.js b/demo/1-mb.js
diff --git a/demo/index.html b/demo/index.html
@@ -92,6 +92,10 @@ <h1>Hi there!</h1>
         <a href="dist.html">built variant</a> that uses the minified version of
         the script in the <code>dist</code> folder.
       </p>
+      <p>
+        See <a href="with-flashing.html">the flashing issue</a> and the fix
+        (<a href="https://github.com/GoogleChromeLabs/dark-mode-toggle/issues/77">#77</a>).
+      </p>
     </main>
     <aside>
       <dark-mode-toggle id="dark-mode-toggle-1"></dark-mode-toggle>

diff --git a/demo/with-flashing.html b/demo/with-flashing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
+    <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+</head>
+<body>
+    <h1>Demo with flashing</h1>
+    <div>
+        Switch theme:
+        <dark-mode-toggle permanent></dark-mode-toggle>
+    </div>
+    <div>
+        Refresh to test: <a href="with-flashing.html">Refresh</a>
+    </div>
+    <div>
+        Go to the version <a href="without-flashing.html">without flashing</a>
+    </div>
+
+    <script type="module" src="../src/dark-mode-toggle.mjs"></script>
+    <script>
+        // Load uncached script to simulate a slow loading.
+        const rand = Math.random();
+        document.write('<script src="1-mb.js?r=' + rand + '"><\/script>');
+    </script>
+</body>
+</html>
diff --git a/demo/without-flashing.html b/demo/without-flashing.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <noscript id="dark-mode-toggle-stylesheets">
+        <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
+        <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+    </noscript>
+    <script src="../src/dark-mode-toggle-stylesheets-loader.js"></script>
+</head>
+<body>
+    <h1>Demo without flashing</h1>
+    <div>
+        Switch theme:
+        <dark-mode-toggle permanent></dark-mode-toggle>
+    </div>
+    <div>
+        Refresh to test: <a href="without-flashing.html">Refresh</a>
+    </div>
+    <div>
+        Go to the version <a href="with-flashing.html">with flashing</a>
+    </div>
+
+    <script type="module" src="../src/dark-mode-toggle.mjs"></script>
+    <script>
+        // Load uncached script to simulate a slow loading.
+        const rand = Math.random();
+        document.write('<script src="1-mb.js?r=' + rand + '"><\/script>');
+    </script>
+</body>
+</html>
diff --git a/src/dark-mode-toggle-stylesheets-loader.js b/src/dark-mode-toggle-stylesheets-loader.js
@@ -0,0 +1,34 @@
+"use strict";
+
+(() => {
+  const ELEMENT_ID = "dark-mode-toggle-stylesheets";
+  const STORAGE_NAME = "dark-mode-toggle";
+  const LIGHT = "light";
+  const DARK = "dark";
+
+  let stylesheets = document.getElementById(ELEMENT_ID).textContent;
+
+  let mode = null;
+  try {
+    mode = localStorage.getItem(STORAGE_NAME);
+  } catch (e) {}
+
+  const lightCSSMediaRegex = /\(\s*prefers-color-scheme\s*:\s*light\s*\)/gi;
+  const darkCSSMediaRegex = /\(\s*prefers-color-scheme\s*:\s*dark\s*\)/gi;
+
+  switch (mode) {
+    case LIGHT:
+      stylesheets = stylesheets
+        .replace(lightCSSMediaRegex, "$&, all")
+        .replace(darkCSSMediaRegex, "$& and not all");
+      break;
+
+    case DARK:
+      stylesheets = stylesheets
+        .replace(darkCSSMediaRegex, "$&, all")
+        .replace(lightCSSMediaRegex, "$& and not all");
+      break;
+  }
+
+  document.write(stylesheets);
+})();
diff --git a/src/dark-mode-toggle-stylesheets-loader.min.js b/src/dark-mode-toggle-stylesheets-loader.min.js