Dark Mode / Mörkt läge

Från och med version 5.0.0 finns våra komponenter både ljust och mörkt tema. Det innebär att designsystemets komponenter kan anpassa sig till användarens inställningar för mörkt läge i operativsystemet eller webbläsaren. Detta sker automatiskt om du använder vår globala stylesheet global.css.

Läs mer om hur du installerar global.css

Kontrollera val av tema

Om projektet har uppdaterat @midas-ds/components och använder vår globala stylesheet så följer komponenterna automatiskt användarens inställningar. Om du manuellt vill styra temat, t.ex. om ert projekt inte är redo att stödja mörkt läge, kan du stänga av mörkt läge genom att ändra färgschemat i CSS på vilken nivå som passar projektet.

body {
  color-scheme: light;
}

Använder du inte vår globala stylesheet kan du aktivera mörkt läge genom att definera bägge färgscheman.

body {
  color-scheme: light dark;
}

Tokens

Du kan fortfarande använda tokens för att importera färger på egen hand. Observera dock att färgerna i baseColors är fasta värden och är inte dynamiska för ljust/mörkt läge. För att få en färg som anpassar sig behöver du importera en semantisk token.

import { semantic, baseColors } from '@midas-ds/components/theme'

<div style={{ backgroundColor: semantic.background01 }}>
  <p style={{ color: semantic.textPrimary }}>
    En text som är mörk i ljust läge men ljus i mörkt läge på en bakgrund som gör tvärt om!
  </p>
  <p style={{ color: baseColors.black }}>En text som alltid är svart</p>
</div>