SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<form class="contents" data-controller="theme" action="/theme" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="SLiFeavbr04pNb10C_oDijujklddEsYW1tsHdxoH5OrWu3CWuJqZX-GRlINGBC4a93dAHMIAWrZaHK-8F05-iA" />
  <details class="relative"
           data-controller="disclosure"
           data-action="keydown.esc@window->disclosure#closeOnEscape click@window->disclosure#closeOnOutside turbo:before-cache@window->disclosure#close">
    <summary class="flex size-9 cursor-pointer list-none items-center justify-center rounded-md text-ink-faint transition-colors hover:text-ink [&::-webkit-details-marker]:hidden" title="Theme — current: Match system">
      <svg viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="size-5"
             aria-hidden="true"
             data-theme-target="glyph"
             data-glyph="system"
             >
        <path d="M3.75 6.75a1.5 1.5 0 0 1 1.5-1.5h13.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5Z" /><path d="M12 15.75v3.75" /><path d="M9 19.5h6" />
      </svg>
      <svg viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="size-5"
             aria-hidden="true"
             data-theme-target="glyph"
             data-glyph="light"
             hidden="hidden">
        <path d="M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z" /><path d="M12 2.25v1.5" /><path d="M12 20.25v1.5" /><path d="M2.25 12h1.5" /><path d="M20.25 12h1.5" /><path d="M5.1 5.1 6.16 6.16" /><path d="M17.84 17.84 18.9 18.9" /><path d="M18.9 5.1 17.84 6.16" /><path d="M6.16 17.84 5.1 18.9" />
      </svg>
      <svg viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="size-5"
             aria-hidden="true"
             data-theme-target="glyph"
             data-glyph="dark"
             hidden="hidden">
        <path d="M20.25 14.25A8.25 8.25 0 0 1 9.75 3.75a8.25 8.25 0 1 0 10.5 10.5Z" />
      </svg>
      <span class="sr-only">Theme — current: Match system</span>
    </summary>
    <div role="group"
         aria-label="Theme"
         class="absolute right-0 top-full z-50 mt-2 min-w-45 rounded-lg border border-line bg-surface p-1 shadow-lg"
         data-action="click->disclosure#closeOnSelect">
      <button type="submit"
                name="theme"
                value="system"
                data-theme-target="option"
                data-action="theme#choose"
                aria-pressed="true"
                class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink aria-pressed:bg-nav-active aria-pressed:font-medium aria-pressed:text-nav-active-ink">
        <span>Match system</span>
        <svg viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="1.5"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="size-5 shrink-0"
               aria-hidden="true">
          <path d="M3.75 6.75a1.5 1.5 0 0 1 1.5-1.5h13.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5Z" /><path d="M12 15.75v3.75" /><path d="M9 19.5h6" />
        </svg>
      </button>
      <button type="submit"
                name="theme"
                value="light"
                data-theme-target="option"
                data-action="theme#choose"
                aria-pressed="false"
                class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink aria-pressed:bg-nav-active aria-pressed:font-medium aria-pressed:text-nav-active-ink">
        <span>Light</span>
        <svg viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="1.5"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="size-5 shrink-0"
               aria-hidden="true">
          <path d="M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z" /><path d="M12 2.25v1.5" /><path d="M12 20.25v1.5" /><path d="M2.25 12h1.5" /><path d="M20.25 12h1.5" /><path d="M5.1 5.1 6.16 6.16" /><path d="M17.84 17.84 18.9 18.9" /><path d="M18.9 5.1 17.84 6.16" /><path d="M6.16 17.84 5.1 18.9" />
        </svg>
      </button>
      <button type="submit"
                name="theme"
                value="dark"
                data-theme-target="option"
                data-action="theme#choose"
                aria-pressed="false"
                class="flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm text-ink-muted hover:bg-surface-sunk hover:text-ink aria-pressed:bg-nav-active aria-pressed:font-medium aria-pressed:text-nav-active-ink">
        <span>Dark</span>
        <svg viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="1.5"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="size-5 shrink-0"
               aria-hidden="true">
          <path d="M20.25 14.25A8.25 8.25 0 0 1 9.75 3.75a8.25 8.25 0 1 0 10.5 10.5Z" />
        </svg>
      </button>
    </div>
  </details>
</form>
1
render ThemeControlComponent.new(preference: preference)

A form that submits, never a link: Turbo prefetches links on mouseenter, so a state-changing GET would store a new preference on hover.

Pressing a control here really does POST to /theme and really does change the site's cookie — the preview is the component, not a picture of it. The frame's own colours come from the Lookbook toolbar, which is a separate switch.

Param Description Input

—