Hoppa till huvudinnehåll

Dark Mode / Mörkt läge

Midas komponenter går att använda i 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 default.css.

App.tsx (rootfilen i din app)
import '@midas-ds/components/default.css'

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

export default App

Styr 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.

:root {
  color-scheme: light;
}

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

:root {
  color-scheme: light dark;
}

Inkludera meta-taggen <meta name="color-scheme"> i dokumentets <head> före all CSS för att meddela webbläsaren vilket färgschema som sidan stödjer. Detta förhindrar att applikationen blinkar till i vitt innan rätt färgschema har applicerats.

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 ska användas om color-scheme i din applikation är definierad på en annan DOM-nod. Detta kan du göra genom att skicka 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 att följa systemets inställningar. Default är light dark. Om du vill att ett specifikt tema är förvalt kan du skicka in standardvä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 vissa tokens har fasta värden och inte är 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 { variables } from '@midas-ds/theme'
<div style={{ backgroundColor: variables.backgroundBase }}>
  <p style={{ color: variables.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: variables.colorBlackBase }}>En text som alltid är svart</p>
</div>