Align button styles across all eight variants

docs/src/_includes/layouts/base.njk

@@ -36,6 +36,17 @@
       }
     })();
   </script>
+  {# Style variant #}
+  <script>
+    (function() {
+      try {
+        const storedStyle = localStorage.getItem('styleVariant') || 'vega';
+        document.documentElement.dataset.styleVariant = storedStyle;
+      } catch (event) {
+        console.error('Could not apply style variant from localStorage', event);
+      }
+    })();
+  </script>
   {# Meta #}
   <meta charset="utf-8">
   <meta http-equiv="Content-Language" content="en">
@@ -68,6 +79,18 @@
   <meta name="twitter:creator" content="{{ site.author.x }}">
   {# CSS #}
   <link rel="stylesheet" href="/assets/styles.css">
+  <link rel="stylesheet" id="style-variant-stylesheet">
+  <script>
+    (() => {
+      const styleLink = document.getElementById('style-variant-stylesheet');
+      const styleVariant = document.documentElement.dataset.styleVariant || 'vega';
+      if (styleVariant === 'vega') {
+        styleLink.removeAttribute('href');
+      } else {
+        styleLink.href = `/assets/style-${styleVariant}.css`;
+      }
+    })();
+  </script>
   {# JS #}
   <script src="/assets/js/basecoat.js?v={{ pkg.version }}" defer></script>
   <script src="/assets/js/command.js?v={{ pkg.version }}" defer></script>
@@ -109,4 +132,4 @@
 {% from "toast.njk" import toaster %}
 {{ toaster() }}
 </body>
-</html>
+</html>

docs/src/_includes/partials/header.njk

@@ -38,6 +38,44 @@
       });
     })();
   </script>
+  <select
+    class="select h-8 leading-none"
+    id="style-select"
+  >
+    <option value="vega">Vega</option>
+    <option value="nova">Nova</option>
+    <option value="maia">Maia</option>
+    <option value="lyra">Lyra</option>
+    <option value="mira">Mira</option>
+    <option value="luma">Luma</option>
+    <option value="sera">Sera</option>
+    <option value="rhea">Rhea</option>
+  </select>
+  <script>
+    (() => {
+      const styleSelect = document.getElementById('style-select');
+      const styleLink = document.getElementById('style-variant-stylesheet');
+      const applyStyle = (styleName) => {
+        const nextStyle = styleName || 'vega';
+        document.documentElement.dataset.styleVariant = nextStyle;
+        if (nextStyle === 'vega') {
+          styleLink.removeAttribute('href');
+        } else {
+          styleLink.href = `/assets/style-${nextStyle}.css`;
+        }
+      };
+
+      const storedStyle = localStorage.getItem('styleVariant') || 'vega';
+      if (styleSelect) styleSelect.value = storedStyle;
+      applyStyle(storedStyle);
+
+      styleSelect.addEventListener('change', () => {
+        const newStyle = styleSelect.value || 'vega';
+        applyStyle(newStyle);
+        localStorage.setItem('styleVariant', newStyle);
+      });
+    })();
+  </script>
 
   <button
     type="button"
@@ -61,4 +99,4 @@
   >
     {% lucide "github" %}
   </a>
-</div>
+</div>

docs/src/_includes/partials/sidebar.njk

@@ -173,4 +173,4 @@
   footer=footer,
   content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
   menu=menu
-) }}
+) }}