Light Theme
Defined inside :root.light { ... } in /src/global-styles/variables.css.
Dark Theme
Defined inside :root.dark { ... } in /src/global-styles/variables.css.
Usage
This page collects common usage patterns and code snippets for working with theme variables in components.
Theme Switching
How it works
Extending
To add a new variable:
Best Practices
- Use CSS variables for all colors to ensure theme compatibility
Related Pages
These are related pages that use the variables defined in this section of the docs.