theme-toggle.html

{{/*
  theme-toggle.html - colour-scheme switch.

  Two variants:
    "icon" – single header button that cycles light → dark
             (data-theme-toggle; icon reflects the active state).
    "menu" – mobile-menu row: a labelled segmented control with one button
             per state (data-theme-set), so the choice is a single tap and
             nothing wraps in the narrow dropdown.

  The choice is persisted in localStorage ("osd-theme": "light" | "dark")
  and applied by the synchronous head script in baseof.html
  (window.osdSyncTheme). Controls ship hidden and are revealed by main.js, so
  no-JS visitors never see a dead control.
*/}}
{{ $variant := .variant | default "icon" }}
{{ $iconLight := `<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/></svg>` }}
{{ $iconDark := `<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/></svg>` }}
{{ if eq $variant "menu" }}
  {{/* Styled to match the surrounding menu rows exactly: same padding,
       type scale, and active treatment as the nav links above it. State
       colours are all scoped through aria-pressed variants: dark-theme.css
       force-remaps bare text-slate-* classes in dark mode (!important),
       which would paint the active row's text white-on-white. */}}
  {{ $row := "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900/20 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-slate-100/30 dark:focus-visible:ring-offset-slate-900 aria-pressed:bg-slate-900 aria-pressed:text-white dark:aria-pressed:bg-slate-100 dark:aria-pressed:text-slate-900 aria-[pressed=false]:text-slate-800 aria-[pressed=false]:hover:bg-slate-50 dark:aria-[pressed=false]:text-slate-200 dark:aria-[pressed=false]:hover:bg-slate-800" }}
  <div class="mt-2 border-t border-slate-200 pt-2 dark:border-slate-700" data-theme-group hidden>
    <p class="px-3 pb-1 pt-1 text-xs font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-400" id="osd-theme-group-label">Theme</p>
    <div class="flex flex-col" role="group" aria-labelledby="osd-theme-group-label">
      <button type="button" data-theme-set="light" class="{{ $row }}">
        {{ $iconLight | safeHTML }}
        Light
      </button>
      <button type="button" data-theme-set="dark" class="{{ $row }}">
        {{ $iconDark | safeHTML }}
        Dark
      </button>
    </div>
  </div>
{{ else }}
  <button type="button"
    class="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900/20 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus-visible:ring-slate-100/30 dark:focus-visible:ring-offset-slate-950"
    data-theme-toggle data-theme-pending>
    <span class="osd-theme-icon-light">{{ replace $iconLight "h-4 w-4" "h-5 w-5" | safeHTML }}</span>
    <span class="osd-theme-icon-dark">{{ replace $iconDark "h-4 w-4" "h-5 w-5" | safeHTML }}</span>
  </button>
{{ end }}