check_dark_mode_patterns
Checks CSS for dark mode anti-patterns in web components using Shadow DOM, identifying theme-scoped selectors that fail to style shadow internals and recommending CSS custom properties for theming.
Instructions
Detects dark mode styling anti-patterns specific to web components with Shadow DOM. Catches: (1) theme-scoped selectors (.dark, [data-theme], @media prefers-color-scheme) setting standard CSS properties on web component hosts — these won't reach shadow DOM internals, (2) descendant selectors inside theme scopes trying to pierce shadow boundaries. Suggests using CSS custom properties to communicate theme changes through shadow DOM. Run this on any CSS that implements dark mode or theming for web components.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| cssText | Yes | The CSS code to check for dark mode anti-patterns. |