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.

App.tsx (rootfilen i din app)

import '@midas-ds/components/global.css'

export default function App({ children }) {
  return <main>{children}</main>
}

export default App

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;
}

ColorSchemeSwitch

Vi erbjuder även en komponent för att låta användaren kontrollera val av tema i applikationen.

import { ColorSchemeSwitch } from '@midas-ds/components'

<ColorSchemeSwitch />

ColorSchemeSwitch justerar color-scheme värdet på body-elementet. Du kan justera vilken selector som skall användas om color-scheme i din applikation är definerad på en annan DOM-nod. Detta kan du göra genom att skcika in en egen selector i selector.

<ColorSchemeSwitch selector='main' />

Komponenten accepterar tre värden. light, 'dark', och light dark dvs enbart ljust läge, enbart mörkt läge eller följ systemets inställningar. Default är light dark. Om din app vill att ett specifikt tema är standardvalet kan du skicka in defaultvärdet direkt i defaultValue.

<ColorSchemeSwitch defaultValue='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.background }}>
  <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>