Grunnleggende

Fargar

26. november 2024

Denne artikkelen føreset at du allereie har definert fargane du skal bruke ved hjelp av Temabyggeren.

HTML data-attributt vert brukt for å definere farge på ein komponent. Komponentane kan nytte alle fargane i temaet.

Når du skal setje farge på ein komponent, er det to data-attributt som kan nyttast:

data-color-scheme som endrar fargemodus
data-color som endrar farge

`data-color-scheme`

Dette data-attributtet blir brukt for å veksle mellom lys, mørk eller andre fargemodusar. Innhald som er barn av dette data-attributtet vil få modusen spesifisert av forelder. Som standard vil lys modus bli nytta.

<body>
  <div>
    <!-- Innhaldet her vil ha lys fargemodus -->
  </div>

  <div data-color-scheme="dark">
    <!-- Innhaldet her vil ha mørk fargemodus -->
  </div>
</body>

Du kan endre data-color-scheme på heile eller delar av sida og byte mellom ulike fargemodus så ofte du vil. Til dømes kan hovudsida vere lys, men med ei mørk botnlinje (footer). Du kan då setje data-color-scheme="dark" på botnlinja.

data-color-scheme kan bli satt til light, dark eller auto. auto vil følgje systeminnstillingane til brukaren.

`data-color`

Dette data-attributtet blir brukt for å endre fargen til ein komponent. Du kan bruke alle fargane som finst i temaet ditt.

<div data-color="neutral">
  <!-- Innholdet her vil ha neutral farge -->
</div>

Nokre komponentar kan arve farge frå næraste overordna element som har data-color definert. Dette betyr at du ikkje treng å bruke data-color på alle komponentane i eit hierarki, dersom dei skal ha same farge.

Korleis komponentar blir påverka

Me delar komponentar inn i 3 grupper for farge:

Eksplisitt
Nøytral
Cascading

Eksplisitt

Komponentar brukt til validering eller systemvarslar følgjer eigne dedikerte systemfargar, og arvar ikkje farge frå næraste forelder med data-color satt. Dei dedikerte systemfargane er success, warning, danger og info.

Dette er komponentar som

Alert
ValidationMessage
ErrorSummary

Nøytral

Dette er komponentar som alltid skal være nøytrale, og blir verken påverka av arva farge eller direkte data-color. Dette er komponentar som Modal og Tooltip. Desse brukar alltid neutral fargen.

Cascading

Denne gruppa inneheld resten av komponentane, og vil arve farge frå næraste forelder med data-color satt.

<div data-color="neutral">
  <Chip>
    Denne Chip'en har neutral farge.
  </Chip>
</div>

<Button data-color="neutral">
  Eg har neutral farge.
</Button>

<div data-color="neutral">
  <Alert>
    Eg har ikkje neutral farge.
  </Alert>
</div>

Bruk `data-color-scheme` og `data-color` saman

Du kan bruke data-color-scheme og data-color saman for å endre både fargemodus og farge på komponentar.

data-color set variablar som blir resatt av data-color-scheme. Dersom du endrar fargemodus, må du setje data-color på nytt.

<div data-color="neutral">
  <!-- Innholdet her vil ha neutral farge -->
</div>

<div data-color="neutral" data-color-scheme="dark">
  <!-- Innholdet her vil ha neutral farge og mørkt fargemodus -->
</div>

<div data-color="neutral">
  <div data-color-scheme="dark">
    <!-- Innholdet her vil ikkje ha neutral farge -->
  </div>
</div>

Kort oppsummert

Du endrar farge med data-color, men denne må bli satt på nytt dersom du endrar fargemodus med data-color-scheme. Nokre komponentar arvar farge frå næraste forelder med data-color satt.

Rediger denne siden på Github (åpnes i ny fane)