app/components/theme-toggle.tsx

Functions

Imports

It imports app/components/enhance.tsx. Imported by app/components/search-trigger.tsx, app/components/site-header.tsx.

Source

1import { Enhance } from "~/components/enhance";
2
3/**
4 * Capsomer's tip for a header icon control (site-header.md, "Controls"): it repeats the control's name, so it
5 * adds no description, and app/enhance/header.ts shows it on hover and keyboard focus. Hidden with no script.
6 */
7export function HeaderTip({ text, keys }: { text: string; keys?: string[] }) {
8  return (
9    <span
10      className="cap-site-header-tip cap-popover"
11      data-variant="tooltip"
12      data-side="bottom"
13      data-offset="6"
14      popover="manual"
15      role="tooltip"
16      aria-hidden="true"
17    >
18      <span className="cap-site-header-tip-text">{text}</span>
19      {keys ? (
20        <span className="cap-keys">
21          {keys.map((key) => (
22            <kbd key={key}>{key}</kbd>
23          ))}
24        </span>
25      ) : null}
26    </span>
27  );
28}
29
30/**
31 * The header's one theme icon button (theme-switch.md, "The button form"): a moon while the page is light and
32 * a sun while it is dark, its name saying what a press does. Two buttons ship and CSS shows one, because with
33 * no cookie the server cannot know the theme in effect, and each is a real submit to /theme, so it works with
34 * no script and the server writes the right `data-theme` into the next page's first byte. No `aria-pressed`:
35 * it performs an action rather than toggling a state.
36 */
37export function ThemeToggle() {
38  // No theme prop: a second input could disagree with `<html data-theme>`.
39  return (
40    <>
41      <form method="post" action="/theme" className="theme-toggle" data-theme-toggle="">
42        <button
43          type="submit"
44          name="theme"
45          value="dark"
46          className="cap-site-header-icon theme-option"
47          data-when="light"
48          aria-label="Switch to dark theme"
49        >
50          <MoonIcon />
51          <HeaderTip text="Switch to dark theme" />
52        </button>
53        <button
54          type="submit"
55          name="theme"
56          value="light"
57          className="cap-site-header-icon theme-option"
58          data-when="dark"
59          aria-label="Switch to light theme"
60        >
61          <SunIcon />
62          <HeaderTip text="Switch to light theme" />
63        </button>
64      </form>
65      <Enhance module="theme" />
66    </>
67  );
68}
69
70// The header's icon family: a 24 box drawn at 18px with a 1.6 stroke (site-header.css sets the size and stroke).
71const ICON = {
72  viewBox: "0 0 24 24",
73  "aria-hidden": true,
74  focusable: false,
75};
76
77function SunIcon() {
78  return (
79    <svg {...ICON}>
80      <circle cx="12" cy="12" r="4" />
81      <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" />
82    </svg>
83  );
84}
85
86function MoonIcon() {
87  return (
88    <svg {...ICON}>
89      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
90    </svg>
91  );
92}