Hopp til innhold
Aksel

Grunnleggende

Theming

StabilOppdatert 15. januar 2026

Aksel har støtte for lyst og mørkt tema. Denne artikkelen tar for seg det tekniske aspektet for theming. For design, se Design i light og dark mode.

Vi bruker klassenavn light og dark for å bytte mellom fargetema. Dette lar deg endre mellom lyst og mørkt tema ved å sette klassen på <html>-elementet, eller scopet til bare en liten del av appen. Som standard faller systemet tilbake på light hvis du ikke har lagt til noe klassenavn.

Theme

Vi tilbyr en egen komponent for å definere fargetema og sette bakgrunnsfarge. Du kan sette hasBackground til false hvis du ikke ønsker bakgrunn.

App.tsx
<Theme theme="dark">
   <App />
</Theme>

Props

className?

  • Type:
    string

hasBackground?

  • Type:
    boolean
  • Default:
    `true` if this is the root instance and `theme` is defined, otherwise `false`.
  • Description:

    Whether to apply the default background.

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Changes default 'base'-color for application.

theme?

  • Type:
    "light" | "dark"
  • Default:
    Inherits parent theme, or "light" if root.
  • Description:

    Color theme.

asChild?

  • Type:
    boolean
  • Description:

    Renders the component and its child as a single element, merging the props of the component with the props of the child.

  • Example:
    <Component asChild data-prop>
      <ChildComponent data-child />
    </Component>
    

    Out:
    <MergedComponent data-prop data-child />

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Nextjs

For enkelte rammeverk som next så vil pakker som next-themes være den enkleste metoden for å håndtere temabytte.

Alltid mørk eller alltid lys tema

I noen tilfeller kan det være nyttig å sette et bestemt element til å alltid bruke et bestemt tema. Siden theming er basert på CSS-cascade, løser du dette slik:

Component.tsx
<Theme theme="light">
  ...
  <Theme theme="dark">
   ...
  </Theme>
</Theme>

Dette kan være relevant for en mørk header eller footer, som ofte står i kontrast til resten av innholdet på siden.

Dynamiske farger

Ved å bruke html data-attributtet data-color kan du endre farge brukt på komponenter. Vi tilbyr alle fargene våre gjennom dette API-et. Som standard er globalt "app"-tema accent, slik at alt av lenker, primærknapper osv. vil være blå.

Implementasjonen er hierarkisk, slik at du kan definere fargene brukt slik:

TSX
<div data-color="neutral">
  <!-- Innhold får neutral-tint -->
</div>


<div data-color="accent">
  <!-- Innhold får accent-tint -->
</div>

Bruk med komponenter

Dette kan være nyttig for mange komponenter, men i noen tilfeller ønsker vi å begrense muligheten (f.eks. i LocalAlert). Vi deler komponenter inn i tre grupper for hvor bra de støtter endring av farge.

Static

Error-states samt elementer med statusfarger som LocalAlert og ErrorSummary støtter kun et begrenset antall farger og vil ofte ikke kunne endres med data-color.

Neutral

Komponenter som Modal og Tooltip vil alltid være nøytrale, og vil ikke påvirkes av data-color. Men innholdet brukt på innsiden av komponentene vil bli påvirket.

Cascade

De fleste resterende komponenter vil arve data-color og da endre farge basert på dette.

TSX
<div data-color="neutral">
  <Button>
    Neutral button
  </Button>
</div>


<Button data-color="danger">
   Danger button
</Button>

Autocomplete

Dette API-et fungerer på vanlige HTML-elementer også, så lenge du har brukt tokens som støtter "fargelegging".

TSX
--ax-bg-soft
--ax-bg-softA
--ax-bg-moderate
--ax-bg-moderateA
--ax-bg-moderate-hover
--ax-bg-moderate-hoverA
--ax-bg-moderate-pressed
--ax-bg-moderate-pressedA
--ax-bg-strong
--ax-bg-strong-hover
--ax-bg-strong-pressed
--ax-text-default
--ax-text-subtle
--ax-text-decoration
--ax-text-contrast
--ax-border-default
--ax-border-subtle
--ax-border-subtleA
--ax-border-strong

For å få riktige typer når du bruker data-color, kan du legge til typen i tsconfig:

tsconfig.ts
{
  "compilerOptions": {
    "types": ["@navikt/ds-react/types/theme"]
  }
}

Egne farger

Noen subdomener i Nav har til dels egen branding, noe som er støttet gjennom themingsystemet vårt. Ta kontakt med team Aksel for hjelp med å sette opp dette i både Figma og kode.