diff --git a/docs/assets/theme-picker/theme-picker.css b/docs/assets/plugins/theme-picker/theme-picker.css
similarity index 100%
rename from docs/assets/theme-picker/theme-picker.css
rename to docs/assets/plugins/theme-picker/theme-picker.css
diff --git a/docs/assets/plugins/theme-picker/theme-picker.js b/docs/assets/plugins/theme-picker/theme-picker.js
new file mode 100644
index 00000000..35751b88
--- /dev/null
+++ b/docs/assets/plugins/theme-picker/theme-picker.js
@@ -0,0 +1,70 @@
+(() => {
+  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.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.querySelector('.content').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/assets/theme-picker/theme-picker.js b/docs/assets/theme-picker/theme-picker.js
deleted file mode 100644
index 464307e5..00000000
--- a/docs/assets/theme-picker/theme-picker.js
+++ /dev/null
@@ -1,62 +0,0 @@
-(() => {
-  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
index bc4791e5..f60b614a 100644
--- 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/theme-picker/theme-picker.css" />
+    <link rel="stylesheet" href="/assets/plugins/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,7 +45,12 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="/assets/theme-picker/theme-picker.js"></script>
+    <script>
+      // Set the initial theme to prevent flashing
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const theme = localStorage.getItem('theme') || 'auto';
+      document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+    </script>
     <script>
       window.$docsify = {
         alias: {
@@ -94,6 +99,7 @@
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/components/prism-jsx.min.js"></script>
     <script src="/assets/plugins/code-block/code-block.js"></script>
     <script src="/assets/plugins/scroll-position/scroll-position.js"></script>
+    <script src="/assets/plugins/theme-picker/theme-picker.js"></script>
     <script src="/assets/plugins/metadata/metadata.js"></script>
     <script src="/assets/plugins/sidebar/sidebar.js"></script>
   </body>