theme-var

Manage CSS variables across multiple themes by referencing `globals.css` to discover existing color variables and systematically add new custom properties across all defined theme blocks and dark mode rules. This ensures consistency for multi-theme web applications.

Find the right CSS custom property for a specific color by querying the existing variables mapped within `globals.css`. The Skill identifies the correct variable name for needs like page backgrounds or primary text, ensuring you reuse existing design system tokens.

The best way to add a new CSS color variable to all theme blocks is to follow a systematic process that updates all 14 theme blocks (7 themes x 2 modes) at once. This enforces consistency and adheres to specific theme design principles and dark mode rules.

Yes, this theming approach works directly with existing `globals.css` files. It references the file to enforce consistency, discover current color variables, and ensure any new custom properties adhere to the established dark mode rules and design principles.

Yes, you can use this to understand dark mode rules and color design principles for your themes. It provides insights into the specific design principles governing each theme, helping you apply appropriate color variables for dark mode.

CSS variables look inconsistent across different theme modes when they are not systematically added to all defined blocks. Enforcing consistency by referencing `globals.css` and adhering to dark mode rules ensures custom properties match across all 7 themes and 2 modes.