Cambio tema

sitelo-ui risolve da sé la modalità scura a partire da prefers-color-scheme — un sito contento di seguire il sistema operativo non ha bisogno di nulla di questa pagina. Il pulsante serve a lasciare che sia chi legge a scavalcare quella scelta.

È uno dei cinque componenti che hanno bisogno di uno script, perché la scelta vive in localStorage e solo uno script può leggerla. Il pulsante si va a prendere quello script da sé, alla prima pressione.

Come si imposta

Due cose nella head, e il pulsante dove serve:

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

head(
  themeScript(), // applica la scelta salvata prima del primo paint
  styles(),
)

body(
  appBar({ brand: 'Il mio sito' },
    appBarSpacer(),
    appBarActions(themeToggle()),
  ),
)

Non c’è un terzo file. themeScript() è bloccante e inline di proposito — qualunque cosa differita dipinge per prima, che è esattamente il lampo scuro che esiste per evitare — e il passaggio vero e proprio viaggia sul pulsante:

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

Usali in coppia. themeScript() è anche ciò che marca il pulsante come aria-pressed al caricamento: non è ancora stato premuto nulla, quindi il pulsante da solo non può sapere quale tema sia stato risolto.

Il pulsante

L’icona è puro CSS, letta direttamente dall’attributo del tema — quindi è già corretta al primo paint, prima che qualunque script giri. Mostra a cosa un clic passerà.

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

Quei pulsanti funzionano — questa pagina carica il runtime. Cliccarne uno imposta data-su-theme su <html>, che è l’attributo di sitelo-ui, quindi cambiano soltanto i componenti sitelo-ui di questa pagina. Il resto di questo sito segue il proprio data-theme, impostato dal pulsante nella barra in alto. Sul tuo sito ce ne sarebbe uno solo.

In una barra applicazione

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

Come si risolve il tema

Nell’ordine: un data-theme o data-su-theme esplicito su un qualunque antenato vince; altrimenti decide prefers-color-scheme. Entrambi i nomi di attributo vengono onorati così che sitelo-ui possa stare dentro un sito che ha già il proprio selettore di tema — che è esattamente quello che fa questa documentazione.

Guidarlo da sé

Il runtime esporta le stesse funzioni che usa il pulsante, per un controllo personalizzato o un selettore a tre vie chiaro / scuro / sistema.

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

getTheme()          // 'light' | 'dark' — risolto, non salvato
toggleTheme()       // inverti
setTheme('dark')    // fissa
setTheme('system')  // togli l’override e torna a seguire il sistema

Props

themeScript() accetta un nonce facoltativo, per un sito con una content security policy.