docs(site): use color-scheme-switch-element

Render-blocking on purpose. More infos: https://fullystacked.net/render-blocking-on-purpose/
andreruffert · Feb 25, 2025 · 42790ac · 42790ac
1 parent b1e3e58
commit 42790ac
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -19,6 +19,17 @@
 
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/range-slider-element@next/dist/range-slider-element.css">
+
+    <script>
+      // Ensure the event listener is setup before the initial `color-scheme-switch` event gets fired.
+      document.addEventListener('color-scheme-switch', event => {
+        const colorScheme = event.target.value;
+        document.documentElement.style.setProperty('color-scheme', colorScheme);
+        event.target.querySelector('.icon use').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", colorScheme === 'light' ? '#sun' : '#moon');
+        event.target.setAttribute('aria-label', `Switch to ${colorScheme === 'light' ? 'dark' : 'light'} color scheme`)
+      });
+    </script>
+    <script type="module" async blocking="render" src="https://unpkg.com/color-scheme-switch-element@beta/dist/color-scheme-switch-element.js"></script>
   </head>
   <body>
     <div class="alert">
@@ -30,7 +41,9 @@
         <a href="https://andreruffert.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>Made by André Ruffert</a>
         <a href="https://github.com/andreruffert/range-slider-element" target="_blank" rel="noreferrer">Star on GitHub <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg></a>
       </div>
-      <button data-color-scheme-toggle aria-label="Toggle color scheme"><svg xmlns="http://www.w3.org/2000/svg" width="1.6em" height="1.6em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.9 4.9 1.4 1.4"/><path d="m17.7 17.7 1.4 1.4"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.3 17.7-1.4 1.4"/><path d="m19.1 4.9-1.4 1.4"/></svg></button>
+      <color-scheme-switch class="button" title="Toggle light & dark color scheme">
+        <svg class="icon" width="1.2em" height="1.2em"><use xlink:href="#sun"></use></svg>
+      </color-scheme-switch>
     </header>
     <main>
       <section data-section="intro">
@@ -192,6 +205,23 @@ <h1>Examples</h1>
       <p>Released under the MIT License.</p>
     </footer>
 
+    <svg width="0" height="0" aria-hidden="true" hidden>
+      <symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="sun">
+        <circle cx="12" cy="12" r="4"></circle>
+        <path d="M12 2v2"></path>
+        <path d="M12 20v2"></path>
+        <path d="m4.93 4.93 1.41 1.41"></path>
+        <path d="m17.66 17.66 1.41 1.41"></path>
+        <path d="M2 12h2"></path>
+        <path d="M20 12h2"></path>
+        <path d="m6.34 17.66-1.41 1.41"></path>
+        <path d="m19.07 4.93-1.41 1.41"></path>
+      </symbol>
+      <symbol xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="moon">
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+      </symbol>
+    </svg>
+
     <script type="module">
       import 'https://unpkg.com/syntax-highlight-element@next/dist/syntax-highlight-element.js';
       import 'https://unpkg.com/range-slider-element@next/dist/range-slider-element.js';
@@ -296,37 +326,5 @@ <h1>Examples</h1>
         }, 1800);
       })
     </script>
-
-    <script type="module">
-      const systemPreference = getSystemColorScheme();
-
-      document.addEventListener('click', (event) => {
-        const target = event.target.closest('[data-color-scheme-toggle]');
-        if (!target) return;
-        toggleColorScheme();
-      });
-
-      function toggleColorScheme() {
-        const currentPreference = getColorScheme();
-        const newPreference = currentPreference === 'dark' ? 'light' : 'dark';
-        setColorScheme(newPreference);
-      }
-
-      function getColorScheme() {
-        const computedStyle = window.getComputedStyle(document.documentElement);
-        const currentPreference = computedStyle.getPropertyValue('color-scheme');
-        const isSystem = currentPreference === 'light dark';
-        return isSystem ? systemPreference : currentPreference;
-      }
-
-      function setColorScheme(newPreference) {
-        document.documentElement.style.setProperty('color-scheme', newPreference);
-      }
-
-      function getSystemColorScheme() {
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
-        return 'light';
-      }
-    </script>
   </body>
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -116,10 +116,11 @@
       light-dark(var(--light-button-face), var(--dark-button-face));
     padding: var(--spacing-6) var(--spacing-4);
 
-    [data-color-scheme-toggle] {
+    color-scheme-switch.button {
       padding: var(--spacing-2);
       aspect-ratio: 1;
       align-self: flex-start;
+      user-select: none;
     }
   }