Komponenter
Theme
Theme definerer fargetema og setter bakgrunnsfarge for appen. Komponenten lar deg styre både tema (lyst/mørkt) og data-color hierarkisk gjennom CSS-cascade.
Egnet til:
- Bytte mellom lyst og mørkt tema
- Bytte app-farge (data-color) for deler av siden
- Sette standard bakgrunnsfarge
Uegnet til:
- Dynamisk tema-bytte i next.js apper
Eksempler
Standard oppsett
Wrap løsningen med Theme for å endre farge/tema for alle under-elementer.
Nøsting
Theming gjennom Aksel følger CSS-cascade, slik at elementer arver farger.
Retningslinjer
Når bør du unngå Theme?
Bruker du et rammeverk som next, er en pakke som next-themes ofte den enkleste måten å håndtere temabytte på. Theme kan fortsatt brukes til bakgrunn og data-color.
Trenger du kun å endre farge på enkeltkomponenter, kan du sette data-color direkte på komponenten i stedet for å pakke inn med Theme.
Props
Theme
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:Ref<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Forvalter
