theming-context

To override design tokens for dark mode, create a custom theme file defining CSS variables like --op-color-primary-* and import it after the main Optics styles. This ensures your token overrides take precedence and apply consistently across light and dark modes.

Design tokens are CSS variables representing visual design attributes like colors, fonts, and radii. This skill uses them to implement scalable theming by allowing teams to override Optics tokens in a custom theme file, ensuring consistent UI styling across different applications.

Create a custom CSS file that defines token overrides such as --op-color-primary-*, --op-font-family, and similar variables. Import this file after the main Optics CSS to ensure your custom theme values take precedence and apply across your application.

Yes, this skill is designed for UI projects requiring scalable theming across apps. By overriding Optics tokens in a dedicated theme file, teams can implement consistent design system theming, supporting brand-specific color adjustments and color scales across multiple applications.

Token overrides may not take effect if the custom theme file is not imported after the main Optics CSS. Ensure your theme file is loaded after the main stylesheets so that your CSS variable overrides for colors, fonts, and radii take precedence.

The best way to manage color scales is by creating a dedicated theme file that overrides Optics tokens. This approach enables safe, scalable color system customization for light and dark modes while maintaining design system consistency across applications.