Utforming for mørk modus og temaer
Utvid det visuelle språket slik at det støtter lyse og mørke temaer på en god måte, ved å bruke semantiske fargevalg som tilpasses uten at hver komponent må redesignes.
Utforming for mørk modus og temaer er en gratis leksjon i Designsystemer og komponentbiblioteker på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Designsystemer og komponentbiblioteker, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Designsystemer og komponentbiblioteker inneholder totalt 4 leksjoner.
Utover ett enkelt tema
Brukere forventer i stadig større grad mørk modus. Et visuelt språk som er laget for ett tema, bryter sammen i det øyeblikket bakgrunnen endres.
I denne leksjonen lærer De å utforme en palett som tilpasser seg på tvers av temaer, uten å kopiere hele stilguiden.
Semantiske farger, ikke bokstavelige
I stedet for å bruke white for bakgrunner bør De definere semantiske roller: surface, text-primary, border.
Hver rolle kobles til en annen konkret verdi i hvert tema. Komponenten refererer til rollen, slik at den tilpasses automatisk når temaet endres.
Koble roller til temaer
Et tema er bare en oppslagstabell fra rolle til farge. Lyse og mørke temaer deler de samme rollenavnene, men har ulike verdier.
Utdraget viser ideen.
const themes = {
light: { surface: '#ffffff', text: '#1a1a1a' },
dark: { surface: '#121212', text: '#eaeaea' }
};
function color(theme, role) {
return themes[theme][role];
}
console.log('light surface', color('light', 'surface'));
console.log('dark text', color('dark', 'text'));Mørk modus er ikke invertering
En vanlig feil er å bare invertere fargene. Rent svart på rent hvitt blir hardt når det inverteres, og kan føre til anstrengte øyne.
Gode mørke temaer bruker mørke gråtoner (ikke #000000) og litt dempet tekst for å redusere blending. Utform hvert tema med hensikt.
Heving i mørk modus
I lys modus antyder skygger heving. I mørk modus er skygger nesten usynlige, så heving vises i stedet med lysere overflatefarger.
Et hevet kort i mørk modus er en litt lysere gråtone enn siden bak det. Planlegg overflatefarger for hvert hevingsnivå.
Kontrast på tvers av temaer
Kravene til tilgjengelighetskontrast må være oppfylt i begge temaene. En tekstfarge som består testen på hvitt, kan mislykkes på mørk grå.
Kontroller alle semantiske kombinasjoner (tekst på overflate, tekst på primærfarge) mot WCAG AA i hvert tema før lansering.
Aksent- og merkevarefarger
Det kan ofte være nødvendig å justere merkevarens aksentfarge for hvert tema. En klar blåfarge som skiller seg ut på hvitt, kan virke overmettet på mørke bakgrunner.
Definer temas–pesifikke aksentverdier slik at merkevaren virker gjennomtenkt, ikke utilsiktet neonfarget, i mørk modus.
Respekter systeminnstillingen
De fleste plattformer gjør en brukerpreferanse tilgjengelig via prefers-color-scheme. Bruk systeminnstillingen som standard, og la deretter brukerne overstyre den.
Når De respekterer operativsystemets valg, åpnes appen automatisk i brukerens foretrukne tema – en liten detalj som gir et gjennomført inntrykk.
Bilder og illustrasjoner
Fotografier og illustrasjoner som er laget for hvite bakgrunner, kan skurre i mørk modus. Tilby tematilpassede ressurser, eller legg til diskrete kanter eller overlegg.
Logoer trenger spesielt ofte en lys variant. Planlegg ressursvarianter som en del av det visuelle språket, ikke som en ettertanke.
Test begge temaene
Alle nye komponenter må gjennomgås i begge temaene før de flettes inn. En komponent som ser flott ut i lys modus, kan være uleselig i mørk modus.
Bygg en temabryter inn i dokumentasjonen, slik at gjennomgåere kan bytte tema umiddelbart.
Temaer som grunnlag
Når De utformer semantiske, temabevisste farger fra starten av, blir det langt billigere å legge til fremtidige temaer – høy kontrast, sesongtemaer eller white-label.
Det visuelle språket forblir det samme; bare verditabellene endres.
Sjekk deg selv
Test kunnskapen Deres om temaer.
Oppsummering
De har lært å utvide et visuelt språk på tvers av temaer:
- Bruk semantiske fargeroller, ikke konkrete verdier.
- Utform mørk modus med hensikt – det er ikke invertering.
- Vis heving med overflatefarger, og kontroller kontrasten i hvert tema.
- Respekter systeminnstillingen, og tilby tematilpassede ressurser.
En semantisk palett gjør støtte for flere temaer til en konfigurasjon, ikke en omskriving.
Lær deg Designsystemer og komponentbiblioteker med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Utforming for mørk modus og temaer» gratis?
Ja – hele teksten i «Utforming for mørk modus og temaer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Designsystemer og komponentbiblioteker-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Designsystemer og komponentbiblioteker inneholder totalt 4 leksjoner.
Hva lærer jeg i «Utforming for mørk modus og temaer»?
Utvid det visuelle språket slik at det støtter lyse og mørke temaer på en god måte, ved å bruke semantiske fargevalg som tilpasses uten at hver komponent må redesignes. Du øver på Designsystemer og komponentbiblioteker med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Designsystemer og komponentbiblioteker?
Ingen tidligere erfaring er nødvendig. Designsystemer og komponentbiblioteker på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Utforming for mørk modus og temaer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Designsystemer og komponentbiblioteker-leksjonen?
Ja. Alle Designsystemer og komponentbiblioteker-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Fargepaletter og typografi
- Avstand, layout og ikonografi
- Opprette en visuell stilguide
- Utforming for mørk modus og temaer