Grunnleggende

Sette opp prosjekt med Darkside

StabilOppdatert 3. juli 2025

Nytt prosjekt

For nye prosjekter er oppsettet like enkelt som før, men krever nå en Theme-komponent som wrappes rundt appen din. Komponenten fungerer som en lokal feature-flag for den nye implementeringen, med den ekstra fordelen at den kan bytte mellom lys og mørk modus for deg.

Steg:

Importer ny CSS @navikt/ds-css/darkside
Importer Theme-komponent fra @navikt/ds-react/Theme
Wrap appen din inn i Theme-komponenten.

TSX

import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react/Theme";

export const App = () => (
  <Theme>
    <YourApp />
  </Theme>
);

Kun Tokens/CSS

Hvis du ikke bruker noen av våre React-komponenter, kan du fortsatt bytte mellom temaer ved å sette class="light" eller class="dark" på root-elementet ditt.

Theme-bytte

Theme-komponenten har en theme-prop som kan settes til enten light eller dark. Dette setter bare en klasse på elementet av light eller dark (i tillegg til en aksel-theme klasse), og resten håndteres av CSSen. Du trenger ikke bruke denne prop-en, da andre løsninger som f.eks next-themes med attribute="class"-prop løser det for deg.

Du har muligheten til å bruke hasBackground (standard til true) for å få Theme til å inkludere en innebygd standardbakgrunn.

Siden theme-bytte ofte er rammeverkspesifikt, har vi ikke inkludert en tema-bryter komponent eller avansert logikk for cookies/localstorage. Du må implementere dette selv ved å bruke en tilpasset oppsett, eller bruke et bibliotek som next-themes.

Vi vil fortsette å jobbe med hele Theme-økosystemet, og kan inkludere flere funksjoner i fremtiden for å håndtere dette innebygd.

Theme-bytte komponent

Dette er kontekstbasert for hva som passer din applikasjon, men det er noen generelle mønstre du kan følge.

Light- eller darkmode: Her kan du bruke en enkel Switch-komponent, eller en Tertiary-knapp for å bytte mellom dem.
Light-, dark- eller systemmodus: Her kan du bruke en ToggleGroup eller Select-komponent.

TSX

isLightMode ? (
  <Button
    variant="tertiary-neutral"
    icon={<SunIcon title="Switch to dark theme" />}
  />
) : (
  <Button
    variant="tertiary-neutral"
    icon={<MoonIcon title="Switch to light theme" />}
  />
);

Merk at løsningen over vil kunne gi hydreringsfeil hvis man bruker SSR da man vil få ulike dom-noder på server og client. Bruker heller CSS for å vise/skjule elementet basert på theme da.

Jeg vil bare teste de nye tokens

Siden du kan bruke den nye token-pakken sammen med de gamle, kan du starte med å importere nye tokens som du ville gjort med det gamle systemet.

CSS

@import "@navikt/ds-tokens/darkside-css";

For SCSS, Less og JS er de også tilgjengelige under stiene.

For å støtte tematisering, er scss, less og js tokens nå basert på css-variables. Dette betyr at du må importere css-versjonen fra darkside-css sammen med dem for at alt skal fungere.

Jeg vil teste de nye React-endringene

For at det nye systemet skal fungere med våre komponenter, må du bruke den nye Theme-komponenten, og importere den nye CSS-en fra @navikt/ds-css/darkside.

TSX

import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react/Theme";

export const App = () => (
  <Theme theme="light">
    <YourApp />
  </Theme>
);

Du må sjekke alle dine tilpassede overstyringer når du gjør denne overgangen.

Delvis oppdatering

Du kan migrere deler av applikasjonen din til å bruke de nye CSS-klassene uten å måtte migrere alt på en gang.

TSX

// Old setup
import "@navikt/ds-css/darkside";
// New setup
import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react/Theme";

export const App = () => (
  <div>
    <StillOnOldCSSComponent>
    /* Only this part of your app now uses new styling */
    <Theme>
      <YourApp />
    </Theme>
  </div>
);