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

<div class="flex h-14 w-full items-center gap-2 px-4">
  <button
    type="button"
    onclick="window.dispatchEvent(new CustomEvent('sidebar:toggle'))"
    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>

  <button
    type="button"
    aria-label="Toggle dark mode"
    data-tooltip="Toggle dark mode"
    data-side="bottom"
    data-action="toggle-dark-mode"
    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>