improve theme picker

shoelace-style · Aug 12, 2021 · f8aff7d · f8aff7d
1 parent b754912
commit f8aff7d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 70 deletions.
diff --git a/docs/assets/plugins/theme/theme.js b/docs/assets/plugins/theme/theme.js
diff --git a/docs/assets/plugins/theme/theme.css → docs/assets/theme-picker/theme-picker.css b/docs/assets/plugins/theme/theme.css → docs/assets/theme-picker/theme-picker.css
@@ -5,6 +5,10 @@
   z-index: 100;
 }
 
+.theme-picker:not(:defined) {
+  display: none;
+}
+
 @media screen and (max-width: 768px) {
   .theme-picker {
     top: 0.5rem;

diff --git a/docs/assets/theme-picker/theme-picker.js b/docs/assets/theme-picker/theme-picker.js
@@ -0,0 +1,62 @@
+(() => {
+  function getTheme() {
+    return localStorage.getItem('theme') || 'auto';
+  }
+
+  function isDark() {
+    if (theme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      return theme === 'dark';
+    }
+  }
+
+  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.getAttribute('value') === theme));
+    menuIcon.name = isDark() ? 'moon' : 'sun';
+
+    // Toggle the dark mode class without transitions
+    document.body.appendChild(noTransitions);
+    requestAnimationFrame(() => {
+      document.documentElement.classList.toggle('sl-theme-dark', isDark());
+      requestAnimationFrame(() => document.body.removeChild(noTransitions));
+    });
+  }
+
+  let theme = getTheme();
+
+  // Generate the theme picker dropdown
+  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>
+  `;
+  document.body.prepend(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));
+
+  // Update the theme when the preference changes
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(event => setTheme(theme));
+
+  // Set the intial theme and sync the UI
+  setTheme(theme);
+})();
diff --git a/docs/index.html b/docs/index.html
@@ -34,7 +34,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
     <link rel="stylesheet" href="/assets/styles/docs.css" />
     <link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
-    <link rel="stylesheet" href="/assets/plugins/theme/theme.css" />
+    <link rel="stylesheet" href="/assets/theme-picker/theme-picker.css" />
     <link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
 
@@ -45,6 +45,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="/assets/theme-picker/theme-picker.js"></script>
     <script>
       window.$docsify = {
         alias: {
@@ -95,6 +96,5 @@
     <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
     <script src="/assets/plugins/metadata/metadata.js"></script>
     <script src="/assets/plugins/sidebar/sidebar.js"></script>
-    <script src="/assets/plugins/theme/theme.js"></script>
   </body>
 </html>