Fargemodus (light og dark)
De semantiske fargevariablene i Indeks (--ix-color-*) har egne verdier for light og dark mode. Alle komponenter leser disse variablene, så de tilpasser seg automatisk.
Anbefalt: følg brukerens systempreferanse
Bruk .regard-color-scheme-preference på <body>. Da følger siden det brukeren har valgt i operativsystemet, og dere får dark og light mode uten ekstra arbeid:
<body class="ix-body regard-color-scheme-preference">
...
</body>
Brukeren skal være i samme modus gjennom hele reisen. Bytter én flate modus mens neste flate ikke gjør det, ser det ut som en feil. Avklar derfor strategien med teamene som eier flatene før og etter din.
Klassene
Fargemodus styres av en klasse på et element lenger opp i DOM-en (typisk <body> eller en wrapper). Klassen virker på alt innhold under elementet den er satt på:
- Ingen klasse — light mode. Dette er default.
.ix-light-mode— tvinger light mode..ix-dark-mode— tvinger dark mode..regard-color-scheme-preference— auto: følger brukerens systempreferanse viaprefers-color-scheme. Dark når OS/nettleser står i dark mode, ellers light.
Tving én modus
Hvis en flate av en god grunn alltid skal være lys eller mørk, kan .ix-light-mode eller .ix-dark-mode brukes i stedet. Vær oppmerksom på at dette kan bryte forventningen til brukeren hvis andre flater følger systempreferansen.
<body class="ix-body ix-light-mode">
...
</body>