Tema değiştirici

sitelo-ui koyu kipi kendi başına prefers-color-scheme değerinden çözer — işletim sistemini izlemekten memnun bir sitenin bu sayfadan bir şeye ihtiyacı yoktur. Değiştirici, okurun bunu geçersiz kılmasına izin vermek içindir.

Betiğe ihtiyaç duyan beş bileşenden biridir, çünkü seçim localStorage içinde yaşar ve onu yalnızca bir betik okuyabilir. Düğme o betiği ilk basışta kendisi getirir.

Kurulum

Head içinde iki şey ve düğme, ait olduğu yerde:

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

head(
  themeScript(), // kaydedilmiş seçimi ilk boyamadan önce uygular
  styles(),
)

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

Üçüncü bir dosya yoktur. themeScript() bilerek engelleyici ve satır içidir — ertelenen her şey önce boyar, ki bu da tam olarak önlemek için var olduğu koyu parlamadır — ve çevirmenin kendisi düğmenin üzerinde gider:

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

İkisini eşleştirin. themeScript() aynı zamanda değiştiriciyi yüklemede aria-pressed olarak işaretleyen şeydir: henüz hiçbir şeye basılmamıştır, bu yüzden düğmenin kendisi hangi temanın çözüldüğünü bilemez.

Değiştirici

Simge saf CSS’tir, doğrudan tema özniteliğinden okunur — bu yüzden herhangi bir betik çalışmadan, ilk boyamada zaten doğrudur. Bir tıklamanın hangi temaya geçeceğini gösterir.

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

Bu düğmeler çalışır — bu sayfa çalışma zamanını yükler. Birine tıklamak <html> üzerinde sitelo-ui’nin kendi özniteliği olan data-su-theme değerini ayarlar, bu yüzden yalnızca bu sayfadaki sitelo-ui bileşenleri değişir. Bu sitenin geri kalanı, üst çubuktaki değiştiricinin ayarladığı kendi data-theme değerini izler. Sizin sitenizde bunlardan yalnızca biri olurdu.

Bir uygulama çubuğunda

appBar({ brand: 'sitelo' },
  appBarNav(navLink({ href: '#docs', current: true }, 'Belgeler')),
  appBarSpacer(),
  appBarActions(
    themeToggle(),
    button({ size: 'sm' }, 'Başlayın'),
  ),
)

Tema nasıl çözülür

Sırayla: herhangi bir atadaki açık bir data-theme ya da data-su-theme kazanır; o yoksa prefers-color-scheme karar verir. Her iki öznitelik adı da onurlandırılır, böylece sitelo-ui zaten kendi tema değiştiricisi olan bir sitenin içinde durabilir — bu belgelerin yaptığı tam olarak budur.

Kendiniz sürmek

Çalışma zamanı, özel bir denetim ya da üç yönlü açık / koyu / sistem seçici için düğmenin kullandığı fonksiyonların aynısını dışa aktarır.

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

getTheme()          // 'light' | 'dark' — kaydedilmiş değil, çözülmüş
toggleTheme()       // çevir
setTheme('dark')    // sabitle
setTheme('system')  // geçersiz kılmayı temizle ve yeniden işletim sistemini izle

Proplar

themeScript(), içerik güvenlik ilkesi olan bir site için isteğe bağlı bir nonce alır.