Grunnleggende
Theming
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-komponent
Vi tilbyr en egen komponent for å definere fargetema og sette bakgrunnsfarge.
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:
<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.
<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".
--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-strongFor å få riktige typer når du bruker data-color, kan du legge til typen i tsconfig:
{ "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.
Forvalter
