components/theme-switch/theme-switch.react.tsx

Functions

Imports

It imports components/theme-switch/theme-switch.ts, components/tooltip/tooltip.ts. Imported by components/site-header/site-header.react.tsx.

Source

1import { useEffect, useId, useRef, useState, type ReactNode } from "react";
2import { attach as attachTip } from "../tooltip/tooltip.ts";
3import { applyTheme, effectiveTheme, readTheme, themeButtonLabel, THEME_PREF, toggleTheme, type ThemeChoice } from "./theme-switch.ts";
4
5export interface ThemeSwitchProps {
6  // The localStorage key; "cap-theme" by default.
7  prefKey?: string;
8  // The group's name, read by a screen reader; hidden from sight in a top bar.
9  legend?: string;
10  // What the server rendered (from a cookie), before the stored choice is read. Leave it out
11  // and the control shows the operating system's theme once it mounts.
12  initial?: ThemeChoice;
13}
14
15const Sun = () => (
16  <svg className="cap-theme-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
17    <circle cx="8" cy="8" r="3" />
18    <path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1" />
19  </svg>
20);
21const Moon = () => (
22  <svg className="cap-theme-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
23    <path d="M13.5 9.3A5.5 5.5 0 0 1 6.7 2.5a5.5 5.5 0 1 0 6.8 6.8z" />
24  </svg>
25);
26
27const CHOICES: Array<{ value: ThemeChoice; label: string; icon: ReactNode }> = [
28  { value: "light", label: "Light", icon: <Sun /> },
29  { value: "dark", label: "Dark", icon: <Moon /> },
30];
31
32export function ThemeSwitch({ prefKey = THEME_PREF, legend = "Theme", initial }: ThemeSwitchProps) {
33  const name = useId();
34  const [choice, setChoice] = useState<ThemeChoice | null>(initial ?? null);
35
36  useEffect(() => {
37    // Remembered, else what the page shows: the system's theme on a first visit.
38    setChoice(readTheme(prefKey) ?? effectiveTheme());
39    const onTheme = (e: Event) => {
40      const c = (e as CustomEvent<{ choice: ThemeChoice }>).detail?.choice;
41      if (c) setChoice(c);
42    };
43    document.addEventListener("cap-theme", onTheme);
44    return () => document.removeEventListener("cap-theme", onTheme);
45  }, [prefKey]);
46
47  return (
48    <fieldset className="cap-theme" data-cap="theme-switch">
49      <legend className="cap-sr-only">{legend}</legend>
50      <div className="cap-theme-options">
51        {CHOICES.map((c) => (
52          <label key={c.value}>
53            <input
54              type="radio"
55              name={name}
56              value={c.value}
57              checked={choice === c.value}
58              onChange={() => {
59                setChoice(c.value);
60                applyTheme(c.value, { key: prefKey });
61              }}
62            />
63            {c.icon}
64            <span className="cap-theme-text">{c.label}</span>
65          </label>
66        ))}
67      </div>
68    </fieldset>
69  );
70}
71
72export interface ThemeButtonProps {
73  // The localStorage key; "cap-theme" by default.
74  prefKey?: string;
75  // The key the app binds to toggleTheme(), shown in the tip as a key cap ("T"). The app binds it.
76  shortcut?: string;
77  // Extra classes: the site header adds its own icon-control class.
78  className?: string;
79  // What the server rendered (from a cookie); leave it out and the label follows the page once
80  // it mounts. The icon follows the page by CSS either way.
81  initial?: ThemeChoice;
82}
83
84// The 24-box icons the header's controls use (1.6 stroke): a moon while the page is light (press
85// for dark), a sun while it is dark. Both are in the markup; CSS shows the one for the theme that
86// is showing, so the picture is right before any script runs.
87const BUTTON_MOON = (
88  <svg className="cap-theme-icon" data-show="light" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
89    <path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" />
90  </svg>
91);
92const BUTTON_SUN = (
93  <svg className="cap-theme-icon" data-show="dark" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
94    <circle cx="12" cy="12" r="4" />
95    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
96  </svg>
97);
98
99// The theme as one icon button (the site header's theme control, Dustin's answer 2 of
100// 2026-10-13): Light and Dark only, no System; it says what it does, "Switch to dark theme", in
101// its name and its tip.
102export function ThemeButton({ prefKey = THEME_PREF, shortcut, className, initial }: ThemeButtonProps) {
103  const [showing, setShowing] = useState<ThemeChoice>(initial ?? "light");
104  const button = useRef<HTMLButtonElement>(null);
105  const tip = useRef<HTMLSpanElement>(null);
106  useEffect(() => {
107    const t = readTheme(prefKey);
108    if (t) applyTheme(t, { key: prefKey, remember: false });
109    setShowing(effectiveTheme());
110    const onTheme = (e: Event) => setShowing((e as CustomEvent<{ choice: ThemeChoice }>).detail?.choice ?? effectiveTheme());
111    const media = window.matchMedia("(prefers-color-scheme: dark)");
112    const onSystem = () => setShowing(effectiveTheme());
113    document.addEventListener("cap-theme", onTheme);
114    media.addEventListener("change", onSystem);
115    return () => {
116      document.removeEventListener("cap-theme", onTheme);
117      media.removeEventListener("change", onSystem);
118    };
119  }, [prefKey]);
120  useEffect(() => {
121    const b = button.current;
122    if (!b || !tip.current) return;
123    const detach = attachTip(b, tip.current);
124    b.removeAttribute("aria-describedby");
125    return detach;
126  }, []);
127  const label = themeButtonLabel(showing);
128  return (
129    <button ref={button} type="button" className={className ? `cap-theme-button ${className}` : "cap-theme-button"} data-cap="theme-switch" data-variant="button" data-cap-ready="" aria-label={label} onClick={() => setShowing(toggleTheme(prefKey))}>
130      {BUTTON_MOON}
131      {BUTTON_SUN}
132      <span ref={tip} className="cap-theme-tip cap-popover" data-variant="tooltip" data-side="bottom" data-offset="6" popover="manual" role="tooltip" aria-hidden="true">
133        <span className="cap-theme-tip-text">{label}</span>
134        {shortcut ? (
135          <span className="cap-keys">
136            <kbd>{shortcut}</kbd>
137          </span>
138        ) : null}
139      </span>
140    </button>
141  );
142}