Kaip pridėti tamsųjį režimą prie savo svetainės ar programėlės (be balto mirksėjimo)

Norėdami pridėti tamsųjį režimą, apibrėžkite spalvas kaip pavadintus žetonus (fonas, tekstas, paviršius, kraštinė, akcentas), o ne kaip kietai įrašytas reikšmes, kiekvienam žetonui nurodykite šviesią ir tamsią reikšmę ir perjunkite jas naudodami CSS prefers-color-scheme medijos požymį, kad svetainė sektų lankytojo sistemos nustatymą. Jei norite ir rankinio jungiklio, pasirinkimą išsaugokite naršyklėje ir pritaikykite mažu įterptiniu scenarijumi puslapio antraštėje, kad įkrovimo metu nebūtų baltos blyksnio. Tada patikrinkite kontrastą, nuotraukas ir diagramas abiejose temose. DI programėlių kūrimo įrankyje vienas aiškus raginimas gali atlikti didžiąją dalį to; kokybė priklauso nuo patikrinimo.

Du būdai

Daugumai programėlių geriausia antroji parinktis: pagal numatytuosius nustatymus gerbti sistemą, bet leisti žmonėms tai perrašyti.

Pradėkite nuo spalvų žetonų

Tamsųjį režimą sunku įgyvendinti, kai spalvos išbarstytos po kodą kaip white, #333 ir gray-100. Lengva, kai kiekviena spalva kyla iš nedidelio pavadintų žetonų rinkinio:

Kiekvienas komponentas naudoja žetonų pavadinimus. Perjungti temas tada reiškia pakeisti vieną reikšmių rinkinį, o ne redaguoti kiekvieną komponentą.

Patarimai tamsiai paletei:

• Venkite grynos juodos ir grynos baltos dideliems plotams; labai tamsi pilka ir nebaltas tekstas lengviau skaitomi.
• Rodykite gylį šviesesniais paviršiais, o ne šešėliais – šešėliai tamsiame fone beveik nesimato.
• Šiek tiek sumažinkite ryškių prekės ženklo spalvų sotumą; jos gali nemaloniai švytėti tamsiame fone.
• Išlaikykite skaitomą kontrastą. WCAG AA lygis reikalauja bent 4,5:1 kontrasto įprastam tekstui. Pilkas tekstas tamsiose temose dažnai to neatitinka.

Su Tailwind CSS

Tailwind daugelyje DI kurtų programėlių yra numatytasis stilių įrankis. Pagal Tailwind tamsiojo režimo dokumentaciją, dark: variantas pagal numatytuosius nustatymus naudoja prefers-color-scheme, todėl klasės, pavyzdžiui, bg-white dark:bg-gray-900, seka sistemos nustatymą be papildomo darbo.

Rankiniam jungikliui Tailwind v4 dokumentacijoje siūloma pakeisti variantą į klasę tėviniame elemente:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Tada programėlė prideda arba pašalina dark klasę šakniniame elemente. Dokumentacijoje taip pat siūlomas įterptinis scenarijus antraštėje, kuris pritaiko išsaugotą pasirinkimą (arba sistemos nustatymą) prieš puslapiui nupiešiant – būtent taip išvengiama mirksėjimo.

Baltojo mirksėjimo išvengimas

Mirksėjimas įvyksta todėl, kad puslapis nupiešiamas šviesiame režime, tada įsikrauna JavaScript, perskaito išsaugotą pasirinkimą ir perjungia į tamsų. Sprendimas:

1. Įdėkite mažą įterptinį scenarijų puslapio antraštėje, kuris perskaito išsaugotą temą ir nustato klasę šakniniame elemente prieš bet ką atvaizduojant.
2. Kiekvienai temai nustatykite CSS savybę color-scheme, kad naršyklės piešiamos dalys (slinkties juostos, formų valdikliai) atitiktų.
3. Abiejose temose nustatykite aiškią foninę spalvą puslapiui.
4. Jei programėlė atvaizduojama serveryje, įsitikinkite, kad serveris ir naršyklė sutaria dėl pradinės temos, kitaip puslapis gali perpiešti ir mirksėti.

Raginimų pavyzdžiai

Pilnas nustatymas:

Pridėk tamsųjį režimą. Pirmiausia pakeisk įkoduotas spalvas temų žetonais (fonas, paviršius, tekstas, prislopintas tekstas, kraštinė, akcentas), turinčiais šviesias ir tamsias reikšmes. Pagal numatytuosius nustatymus sek lankytojo sistemos nustatymą. Pridėk temos jungiklį antraštėje su parinktimis Šviesus, Tamsus ir Sistema, įsimink pasirinkimą localStorage ir pritaikyk jį įterptiniu scenarijumi antraštėje, kad įkrovimo metu nebūtų baltos blyksnio. Kiekvienai temai nustatyk color-scheme. Išlaikyk dabartinį šviesų dizainą visiškai nepakeistą.

Likusių dalykų taisymas:

Patikrink kiekvieną puslapį tamsiajame režime ir ištaisyk: mažo kontrasto tekstą (siekiama bent 4,5:1), įkietintus baltus fonus, kraštines, kurios dingsta, diagramas su tamsiu tekstu tamsiame fone ir logotipus, kurie nesimato. Nekeisk šviesios temos.

Nuotraukos ir diagramos:

Tamsiajame režime naudok šviesesnę logotipo versiją. Padaryk diagramų ašis, tinklelius ir etiketes naudojančias temos žetonus. Ekrano nuotraukoms tamsiajame režime duok subtilų kraštinę, kad jos nesusilietų su fonu.

Žingsnis po žingsnio

1. Sužinokite spalvas. Raskite įkoduotas spalvas ir pakeiskite jas žetonais. Tai didžioji darbo dalis.
2. Apibrėžkite tamsias reikšmes kiekvienam žetonui.
3. Sekite sistemą su prefers-color-scheme (arba numatytuoju Tailwind dark:).
4. Pridėkite jungiklį, jei norite: Šviesus, Tamsus, Sistema. Pasirinkimą saugokite naršyklėje; prisijungusioms programėlėms galite jį išsaugoti ir naudotojo profilyje.
5. Užkirskite kelią mirksėjimui įterptiniu antraštės scenarijumi ir color-scheme.
6. Patikrinkite sudėtingas vietas: logotipus, piktogramas, nuotraukas su baltais fonais, diagramas, kodo blokus, žemėlapius, įterpimus, el. laiškus.
7. Išbandykite abi temas darbalaukyje ir telefone, su sistema nustatyta į šviesų ir tamsų režimą, ir po puslapio perkrovimo.

Dažnos klaidos

• Visko invertavimas. Filtras, invertuojantis spalvas, sugadina nuotraukas ir prekės ženklo spalvas.
• Palikti įkoduotos spalvos. Viena balta kortelė tamsiame puslapyje iškart krenta į akis.
• Mažo kontrasto pilkas tekstas. Atrodo stilingai, bet neatitinka skaitomumo.
• Baltas mirksėjimas įkrovimo metu. Ypač pastebimas telefonuose naktį.
• Trečiųjų šalių įterpimų pamiršimas. Žemėlapiai, vaizdo įrašai ir valdikliai gali likti šviesūs; patikrinkite, ar yra tamsi parinktis.
• Jungiklis su dviem būsenomis. Kai žmogus jį spusteli, nebegali grįžti prie sistemos sekimo.
• Šviesios temos sugadinimas. Savo raginime aiškiai pasakykite, kad šviesus dizainas turi likti toks pat.

Kontrolinis sąrašas

• Visos spalvos ateina iš temos žetonų
• Pagal numatytuosius nustatymus sekama sistemos nustatymas
• Pasirenkamas jungiklis Šviesus, Tamsus ir Sistema, įsimenamas
• Nėra baltos blyksnio įkrovimo ar perkrovimo metu
• color-scheme nustatytas, kad formų valdikliai ir slinkties juostos atitiktų
• Teksto kontrastas bent 4,5:1 abiejose temose
• Logotipai, piktogramos, nuotraukos, diagramos ir įterpimai patikrinti tamsiajame režime
• Šviesi tema nepakitusi
• Išbandyta darbalaukyje ir telefone

Tamsusis režimas su Mythex

Mythex programėlės pagal numatytuosius nustatymus naudoja Vite, React, TypeScript ir Tailwind, todėl aukščiau aprašytas Tailwind būdas tiesiogiai tinka: įklijuokite pilną nustatymo raginimą į pokalbį, tada patikrinkite Preview abiejose temose ir telefono dydžiu. Mythex dizaino raginimų patarimas – nurodyti, ką keisti ir ką palikti, ir čia tai svarbu: pasakykite, kad šviesi tema turi likti tokia pat. Žr. Dizainas ir UI raginimai, o jei kuris nors pakeitimas nepavyksta, atkurkite iš kontrolinio taško.

Daugiau apie tai, kaip gauti gerą išvaizdą, žr. kaip sukurti gražią programėlę su DI ir kaip rašyti raginimus DI programėlių kūrimo įrankiams.

Klausimai