Przełącznik motywu

sitelo-ui samo rozstrzyga tryb ciemny na podstawie prefers-color-scheme — witryna, której odpowiada podążanie za systemem operacyjnym, nie potrzebuje z tej strony niczego. Przełącznik służy do tego, żeby czytający mógł to nadpisać.

To jeden z pięciu komponentów, które potrzebują skryptu, bo wybór żyje w localStorage, a odczytać go może tylko skrypt. Przycisk sam pobiera ten skrypt przy pierwszym naciśnięciu.

Jak to ustawić

Dwie rzeczy w head i przycisk tam, gdzie ma być:

import { styles, themeScript, themeToggle } from 'sitelo/ui'

head(
  themeScript(), // stosuje zapisany wybór przed pierwszym malowaniem
  styles(),
)

body(
  appBar({ brand: 'Moja strona' },
    appBarSpacer(),
    appBarActions(themeToggle()),
  ),
)

Nie ma trzeciego pliku. themeScript() jest blokujący i wbudowany celowo — cokolwiek odroczonego maluje się jako pierwsze, a to dokładnie ten ciemny błysk, któremu ma zapobiegać — a samo przełączenie jedzie na przycisku:

<button data-su-theme-toggle
        onclick="import('/su/theme.js').then(m=>m.toggle(this))">

Używaj ich w parze. themeScript() jest też tym, co przy załadowaniu oznacza przycisk jako aria-pressed: nic jeszcze nie zostało naciśnięte, więc sam przycisk nie może wiedzieć, jaki motyw się rozstrzygnął.

Przełącznik

Ikona jest czystym CSS-em, czytanym wprost z atrybutu motywu — więc jest poprawna już przy pierwszym malowaniu, zanim wykona się jakikolwiek skrypt. Pokazuje, na co kliknięcie przełączy.

stack({ direction: 'row', gap: 'md', align: 'center' },
  themeToggle(),
  themeToggle({ variant: 'soft' }),
  themeToggle({ variant: 'outline' }),
)

Te przyciski działają — ta strona ładuje runtime. Kliknięcie ustawia data-su-theme na <html>, czyli własny atrybut sitelo-ui, więc zmieniają się tylko komponenty sitelo-ui na tej stronie. Reszta witryny idzie za własnym data-theme, ustawianym przez przełącznik w górnym pasku. Na Twojej witrynie byłby tylko jeden z nich.

W pasku aplikacji

appBar({ brand: 'sitelo' },
  appBarNav(navLink({ href: '#docs', current: true }, 'Dokumentacja')),
  appBarSpacer(),
  appBarActions(
    themeToggle(),
    button({ size: 'sm' }, 'Zacznij'),
  ),
)

Jak rozstrzyga się motyw

Po kolei: wygrywa jawny data-theme albo data-su-theme na dowolnym przodku; w przeciwnym razie decyduje prefers-color-scheme. Honorowane są obie nazwy atrybutów, żeby sitelo-ui mogło siedzieć wewnątrz witryny, która ma już własny przełącznik motywu — a dokładnie to robi ta dokumentacja.

Sterowanie samodzielne

Runtime eksportuje te same funkcje, których używa przycisk, na własną kontrolkę albo trójstanowy wybór jasny / ciemny / systemowy.

import { getTheme, setTheme, toggleTheme } from 'sitelo/ui/client'

getTheme()          // 'light' | 'dark' — rozstrzygnięty, nie zapisany
toggleTheme()       // przełącz
setTheme('dark')    // przypnij
setTheme('system')  // zdejmij nadpisanie i znów idź za systemem

Propsy

themeScript() przyjmuje opcjonalny nonce, dla witryny z polityką bezpieczeństwa treści.