basecoat/docs/src/_includes/partials/header.njk

<div class="flex h-14 w-full items-center gap-2 px-4">
  <button
    type="button"
    onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
    aria-label="Toggle sidebar"
    data-tooltip="Toggle sidebar"
    data-side="bottom"
    data-align="start"
    class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
  >
    {% lucide "panel-left" %}
  </button>
  <select
    class="select h-8 leading-none"
    id="theme-select"
  >
    <option value="">Default</option>
    <option value="claude">Claude</option>
    <option value="doom-64">Doom 64</option>
    <option value="supabase">Supabase</option>
  </select>
  <script>
    (() => {
      const themeSelect = document.getElementById('theme-select');
      const storedTheme = localStorage.getItem('themeVariant');
      if (themeSelect && storedTheme) themeSelect.value = storedTheme;
      themeSelect.addEventListener('change', () => {
        const newTheme = themeSelect.value;
        document.documentElement.classList.forEach(c => {
          if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
        });
        if (newTheme) {
          document.documentElement.classList.add(`theme-${newTheme}`);
          localStorage.setItem('themeVariant', newTheme);
        } else {
          localStorage.removeItem('themeVariant');
        }
      });
    })();
  </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"
    aria-label="Toggle dark mode"
    data-tooltip="Toggle dark mode"
    data-side="bottom"
    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
    class="btn-icon-outline size-8"
  >
    <span class="hidden dark:block">{% lucide "sun" %}</span>
    <span class="block dark:hidden">{% lucide "moon" %}</span>
  </button>
  <a
    href="https://github.com/hunvreus/basecoat"
    class="btn-icon size-8"
    target="_blank"
    rel="noopener noreferrer"
    data-tooltip="GitHub repository"
    data-side="bottom"
    data-align="end"
  >
    {% lucide "github" %}
  </a>
</div>