use prefers-color-scheme by default

shoelace-style · Aug 11, 2021 · cd76672 · cd76672
1 parent 94f4d65
commit cd76672
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 30 deletions.
diff --git a/docs/assets/plugins/theme/theme.css b/docs/assets/plugins/theme/theme.css
@@ -1,13 +1,13 @@
-.theme-toggle {
+.theme-picker {
   position: fixed;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 1rem;
+  right: 1rem;
   z-index: 100;
 }
 
 @media screen and (max-width: 768px) {
-  .theme-toggle {
-    top: 0.25rem;
-    right: 0.25rem;
+  .theme-picker {
+    top: 0.5rem;
+    right: 0.5rem;
   }
 }
diff --git a/docs/assets/plugins/theme/theme.js b/docs/assets/plugins/theme/theme.js
@@ -5,38 +5,64 @@
 
   window.$docsify.plugins.push((hook, vm) => {
     hook.mounted(function () {
-      let isDark = localStorage.getItem('theme') === 'sl-theme-dark';
-      const documentElement = document.documentElement;
-      const sidebarToggle = document.querySelector('.sidebar-toggle');
-      const noTransitions = Object.assign(document.createElement('style'), {
-        textContent: '* { transition: none !important; }'
-      });
-      const toggle = Object.assign(document.createElement('sl-icon-button'), {
-        name: isDark ? 'sun' : 'moon',
-        label: 'Toggle dark mode'
-      });
-      toggle.classList.add('theme-toggle');
-
-      // Set initial theme
-      if (isDark) {
-        documentElement.classList.add('sl-theme-dark');
+      function getTheme() {
+        return localStorage.getItem('theme') || 'auto';
+      }
+
+      function isDark() {
+        if (theme === 'auto') {
+          return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        } else {
+          return theme === 'dark';
+        }
       }
 
-      // Toggle theme
-      toggle.addEventListener('click', () => {
-        isDark = !isDark;
-        isDark ? localStorage.setItem('theme', 'sl-theme-dark') : localStorage.removeItem('theme');
-        toggle.name = isDark ? 'sun' : 'moon';
+      function setTheme(newTheme) {
+        const noTransitions = Object.assign(document.createElement('style'), {
+          textContent: '* { transition: none !important; }'
+        });
+
+        theme = newTheme;
+        localStorage.setItem('theme', theme);
+
+        // Update the UI
+        [...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.value === theme));
+        menuIcon.name = isDark() ? 'moon' : 'sun';
 
-        // Disable transitions as the theme changes
+        // Toggle the dark mode class without transitions
         document.body.appendChild(noTransitions);
         requestAnimationFrame(() => {
-          documentElement.classList.toggle('sl-theme-dark', isDark);
+          document.documentElement.classList.toggle('sl-theme-dark', isDark());
           requestAnimationFrame(() => document.body.removeChild(noTransitions));
         });
-      });
+      }
+
+      let theme = getTheme();
+
+      // Generate the theme picker dropdown
+      const sidebarToggle = document.querySelector('.sidebar-toggle');
+      const dropdown = document.createElement('sl-dropdown');
+      dropdown.classList.add('theme-picker');
+      dropdown.innerHTML = `
+        <sl-button size="small" slot="trigger" caret>
+          <sl-icon name="sun" label="Select Theme"></sl-icon>
+        </sl-button>
+        <sl-menu>
+          <sl-menu-item value="light">Light</sl-menu-item>
+          <sl-menu-item value="dark">Dark</sl-menu-item>
+          <sl-menu-divider></sl-menu-divider>
+          <sl-menu-item value="auto">Auto</sl-menu-item>
+        </sl-menu>
+      `;
+      sidebarToggle.insertAdjacentElement('beforebegin', dropdown);
+
+      // Listen for selections
+      const menu = dropdown.querySelector('sl-menu');
+      const menuIcon = dropdown.querySelector('sl-icon');
+      menu.addEventListener('sl-select', event => setTheme(event.detail.item.value));
 
-      sidebarToggle.insertAdjacentElement('afterend', toggle);
+      // Set the intial theme and sync the UI
+      setTheme(theme);
     });
   });
 })();