Pengalih tema

sitelo-ui menyelesaikan mode gelap dari prefers-color-scheme dengan sendirinya — situs yang senang mengikuti sistem operasinya tidak butuh apa pun dari halaman ini. Pengalihnya ada untuk membiarkan pembaca menimpa itu.

Ia salah satu dari lima komponen yang butuh skrip, karena pilihannya tinggal di localStorage dan hanya skrip yang bisa membacanya. Tombolnya mengambil skrip itu sendiri, pada tekanan pertama.

Menyiapkannya

Dua hal di dalam head, dan tombolnya di mana pun ia semestinya berada:

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

head(
  themeScript(), // menerapkan pilihan tersimpan sebelum lukisan pertama
  styles(),
)

body(
  appBar({ brand: 'Situs saya' },
    appBarSpacer(),
    appBarActions(themeToggle()),
  ),
)

Tidak ada berkas ketiga. themeScript() sengaja bersifat memblokir dan sebaris — apa pun yang ditunda akan melukis lebih dulu, dan itu persis kedipan gelap yang ingin dicegahnya — sedangkan pembaliknya sendiri menumpang pada tombolnya:

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

Pasangkan keduanya. themeScript() juga yang menandai pengalihnya aria-pressed saat dimuat: belum ada yang ditekan, jadi tombolnya sendiri tidak bisa tahu tema mana yang terpilih.

Pengalihnya

Ikonnya murni CSS, dibaca langsung dari atribut temanya — jadi ia sudah benar pada lukisan pertama, sebelum skrip apa pun berjalan. Ia menunjukkan akan beralih ke tema yang mana sebuah klik itu.

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

Tombol-tombol itu berfungsi — halaman ini memuat runtime-nya. Mengeklik salah satunya menyetel data-su-theme pada <html>, yang merupakan atribut milik sitelo-ui sendiri, jadi hanya komponen sitelo-ui di halaman ini yang berubah. Sisa situs ini mengikuti data-theme-nya sendiri, yang disetel pengalih di bilah atas. Di situs Anda hanya akan ada salah satunya.

Di dalam bilah aplikasi

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

Bagaimana temanya diselesaikan

Berurutan: data-theme atau data-su-theme yang eksplisit pada leluhur mana pun menang; jika tidak ada, prefers-color-scheme yang memutuskan. Kedua nama atribut itu dihormati agar sitelo-ui bisa duduk di dalam situs yang sudah punya sakelar temanya sendiri — dan itulah persis yang dilakukan dokumentasi ini.

Menggerakkannya sendiri

Runtime-nya mengekspor fungsi yang sama dengan yang dipakai tombolnya, untuk kendali khusus, atau pemilih tiga arah terang / gelap / sistem.

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

getTheme()          // 'light' | 'dark' — hasil penyelesaian, bukan yang tersimpan
toggleTheme()       // balik
setTheme('dark')    // sematkan
setTheme('system')  // bersihkan penimpanya dan ikuti OS lagi

Props

themeScript() menerima nonce opsional, untuk situs dengan kebijakan keamanan konten.