#ffffff · Karte: rgba(255,255,255,0.08)Abas shēmas
Kas ir krāsu shēma jeb tēma?
Tēma ir nosaukta dizaina žetonu kopa — fons, virsma, teksts, sekundārais teksts, mala un akcents —, ko katrs komponents nolasa cieti kodētu krāsu vietā. Pārslēgšanās no tumšā uz gaišo vienreiz nomaina žetonu vērtības, un visa saskarne seko, tāpēc viena akcenta maiņa pārveido visu lietotni.
Piemērs: tumšā shēma savieno baltu tekstu (#ffffff) ar fonu #0f2027, bet gaišā — #1a1a2e ar #f5f7fa. Aprēķinot relatīvo gaišumu, kontrasta attiecība ir aptuveni 16,7:1 tumšajā un 15,9:1 gaišajā — abas krietni pārsniedz WCAG AA minimumu 4,5:1 parastam tekstam. Sekundārais teksts ir apzināti vājāks (apmēram 7,7:1 tumšajā un 4,4:1 gaišajā).
Kā lietot tēmu priekšskatījumu
- Pārslēdzies starp tumšo un gaišo, lai salīdzinātu abas žetonu kopas.
- Salīdzini fona, virsmas un teksta paraugus, no kā veidota katra shēma.
- Apskati akcenta krāsu, kas nosaka pogas, saites un izcēlumus.
- Izmanto tos pašus žetonus savā CSS, lai priekšskatījums atbilstu tavam veidojumam.
Tēmas un kontrasts — biežāk uzdotie jautājumi
Kas ir dizaina žetons?
Dizaina žetons ir nosaukta vērtība, piemēram, --text vai --surface, uz ko komponenti atsaucas literālu krāsu vietā. Vienreiz nomainot žetonu, atjaunojas visas lietošanas vietas — tāpēc tēmas maiņa ir acumirklīga.
Kāpēc tēmā svarīgs kontrasts?
Tekstam jāpaliek salasāmam uz jebkura fona. WCAG AA prasa vismaz 4,5:1 parastam tekstam un 3:1 lielam tekstam, tāpēc katra žetonu kopa jāpārbauda, nevis jāpieņem.
Kāpēc tumšais režīms nav tīri melns?
Ļoti tumši pelēkie, piemēram, #0f2027, mazina smērēšanos OLED ekrānos un saglabā nelielu dziļumu, tāpēc virsmas joprojām atšķiras bez skarbām tīri melnām malām.
