dark-mode-check

To audit SCSS and TSX files for dark mode issues, run this skill against a target folder like src/ to scan for hardcoded colors, missing icon variants, and improper theme class activation, generating a prioritized remediation report.

Dark mode visual regressions are typically caused by hardcoded color values instead of CSS variables, missing dark variants for icons, and inline overrides located outside the designated theme folder, which bypass proper theme class activation.

You can find hardcoded colors in SCSS and TSX components by using this skill to statically check for direct color values, which then suggests replacing them with proper CSS variables to ensure consistent theming across your codebase.

Yes, this dark mode check validates CSS variable usage and verifies proper theme class activation, such as html.themeDark, ensuring your codebase adheres to consistent theming standards across both SCSS and TSX files.

The best way to flag missing dark variants for icons during code review is to statically audit the component folder, allowing the skill to detect missing variants and propose relocating inline dark overrides to the dark theme files.

You should relocate inline dark overrides when they exist outside the theme folder, as this skill audits for these overrides and proposes moving them to dedicated dark theme files to prevent visual regressions when switching themes.