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 fargemodusdata-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.
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.
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.
data-color-scheme
og data-color
saman
Bruk 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.
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.