🎨
UI/UX

Sistem tem

Skrbniške nastavitve

Svetle, temne in sistemsko prilagojene teme z gladkimi prehodi

Pregled

Celovit sistem tem s prilagojenimi CSS lastnostmi. Podpira svetel, temen in sistemski način. Uporabnikova izbira shranjena v piškotkih. Lepe animacije prehodov med načini.

Oblikovalski premisleki

UX vzorci in opombe vizualnega oblikovanja za to funkcionalnost:

  • Dark mode isn't just inverted colors - it's a whole vibe
  • Preizkusite razmerja kontrastov v obeh načinih (WCAG AA minimum)
  • Trajanje prehoda: 200-300ms se zdi naravno
  • System mode respects user's OS preference

Ključne prednosti

Kaj naredi to funkcionalnost izjemno:

  • Trije načini: svetel, temen, sistemski
  • Brez utripanja ob nalaganju strani
  • CSS spremenljivke za enostavno prilagajanje
  • Več slogov pripomočkov (lebdeči, spustni, preklopni)
Tehnična opomba

ThemeHelper manages state. CSS uses [data-theme="dark"] selector. Widget renders in header via params['header']['widgets']['theme'].

Pomožni razredi
ThemeHelper

Konfiguracija

Legenda konfiguracijskih povezav
Baza podatkov prepiše params.php🔗 Nastavitev povezana z bazo podatkov📋 Baza podatkov hrani samo vrednost
params.php konfiguracija

Konfiguracijska pot: params['theme']

params['theme']['default'] => 'system'params['theme']['enableTransition'] => trueparams['theme']['persistChoice'] => trueparams['theme']['widget']['type'] => 'floating'params['theme']['widget']['position'] => 'top-right'
Nastavitve baze podatkov (tabela system_setting)
KljučTipOpisRelacija
default_themestringDefault theme (light/dark/system)