Example - Warning color variables
In this lesson, we'll define and apply warning color variables, showing you a real life example of how to add custom variables.
Instructions
- Add warning-light: #F59E0B and warning-dark: #F59E0B to the Theme collection, setting the correct scope for both variables
- Add warning to the Mode collection, referencing the appropriate light/dark variables, and set the correct scope
- Add warning-foreground-light: #451A03 and warning-foreground-dark: #451A03 to the Theme collection with the appropriate scope
- Add warning-foreground to the Mode collection, connecting it to the light and dark values, and set the correct scope
- Apply the warning and warning-foreground variables to relevant components
Up next
Creating new themes
Learn how to create new themes in the shadcn/ui kit for Figma.