improve theme picker

docs/assets/plugins/theme/theme.js

@@ -1,68 +0,0 @@
-(() => {
-  if (!window.$docsify) {
-    throw new Error('Docsify must be loaded before installing this plugin.');
-  }
-
-  window.$docsify.plugins.push((hook, vm) => {
-    hook.mounted(function () {
-      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.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 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));
-
-      // Set the intial theme and sync the UI
-      setTheme(theme);
-    });
-  });
-})();

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;

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);
+})();

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>