dark-mode-check
Dark-mode-check scans codebases for dark theme violations, such as missing variable overrides or hardcoded UI colors.
Install
mkdir -p .claude/skills/dark-mode-check && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5835" && unzip -o skill.zip -d .claude/skills/dark-mode-check && rm skill.zipInstalls to .claude/skills/dark-mode-check
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Audit SCSS and TSX files for dark mode issues — missing variable usage, hardcoded colors, icon gaps, selector misuse, and inline dark overrides outside the theme folderKey capabilities
- →Locate hardcoded colors in SCSS files
- →Verify usage of theme-appropriate CSS variables
- →Detect missing icon variants for dark mode
- →Check for unstyled inline dark overrides
- →Audit theme class selector application
How it works
Scans codebase directories against a mapping of core CSS variable families and theme-specific class selectors defined in the project architecture.
Inputs & outputs
When to use dark-mode-check
- →Audit component styles for dark mode
- →Identify hardcoded colors in TSX/SCSS
- →Verify theme variable usage
- →Debug dark mode visual regressions
About this skill
Dark Mode Check Skill
Audit styles and components for dark mode correctness in the Anytype-TS codebase. Catches hardcoded colors, missing icon variants, inline dark overrides, and CSS variable gaps.
When to Use
Activate this skill when the user:
- Asks to check dark mode styles for a component or file
- Wants to verify a new component works correctly in dark mode
- Asks to audit dark mode across the codebase or a folder
- Adds new styles and wants to ensure they follow theming patterns
- Reports a visual bug that only appears in dark mode
Architecture Reference
Theme Selector
Dark mode is activated by the class themeDark on the <html> element:
html.themeDark { ... }
- Set via
S.Common.setThemeClass()insrc/ts/store/common.ts - Applied by
U.Common.addBodyClass('theme', 'dark')insrc/ts/lib/util/common.ts - Values:
'dark','light','system'(system defers tonativeThemeIsDark)
CSS Variable System
Light mode defaults: src/scss/_vars.scss
Dark mode overrides: src/scss/theme/dark/common.scss (lines 5-82)
Core variable families:
| Family | Examples | Purpose |
|---|---|---|
--color-text-* | primary, secondary, tertiary, inversion | Text colors |
--color-shape-* | primary, secondary, tertiary, highlight-dark/medium/light | Borders, dividers |
--color-bg-* | primary, secondary, loader, grey | Backgrounds |
--color-control-* | accent, active, inactive, bg | Interactive elements |
--color-system-* | accent-125, accent-50, accent-25, selection | System accents |
--color-light-* | grey, yellow, orange, red, pink, purple, blue, ice, teal, lime | Tag/highlight colors (light variants) |
--color-very-light-* | Same set as above | Even lighter tag/highlight variants |
--color-dark-* | Same set as above | Dark tag/highlight variants |
Dark Mode File Organization
src/scss/theme/dark/
├── common.scss (~485 lines) - CSS variables + shared overrides + icon paths
├── page.scss (~236 lines) - Page-specific dark styles
├── block.scss (~250 lines) - Block component dark styles
├── menu.scss (~315 lines) - Menu dark styles
├── popup.scss (~116 lines) - Popup/modal dark styles
└── widget.scss (~87 lines) - Widget dark styles
All are imported via src/scss/common.scss.
Icon Theming
Dark mode icons live in src/img/theme/dark/ mirroring src/img/icon/:
$themePath: '~img/theme/dark';
html.themeDark {
.icon.buttonAdd { background-image: url('#{$themePath}/icon/block/add0.svg'); }
.icon.buttonAdd:hover { background-image: url('#{$themePath}/icon/block/add1.svg'); }
}
Convention: name0.svg = default, name1.svg = hover/active.
In TypeScript, dynamic icon paths use S.Common.getThemePath():
// Returns 'theme/dark/' or ''
const path = `./img/${S.Common.getThemePath()}icon/file/${type}.svg`;
Dark Shadow Mixin
// In dark/common.scss
@mixin shadow {
box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px #393933 inset;
}
Review Checklist
When auditing a file or component for dark mode correctness, check every item below.
1. Hardcoded Colors
Rule: No raw hex (#xxx), rgb(), or rgba() values should appear in dark mode blocks unless they are truly one-off (e.g., a specific gradient stop with no variable equivalent).
Search pattern:
grep -E '#[0-9a-fA-F]{3,8}|rgb\(|rgba\(' src/scss/theme/dark/*.scss
Known violations (for reference):
src/scss/theme/dark/block.scss—.label { color: #464646; }, bgColor-* classes with hardcoded hexsrc/scss/theme/dark/common.scss— shadow mixin#393933, vault#393939, iconWrap#4f4f4f/#000000, markup highlight#044062src/scss/theme/dark/menu.scss— bgColor-* palette,.connected::before #294b0e,.error::before #581f0csrc/scss/theme/dark/page.scss—.btn.light .bg { background-color: #fff; }
Action: Flag each hardcoded color. Suggest the closest CSS variable or recommend creating a new one.
2. Inline Dark Overrides Outside Theme Folder
Rule: Dark mode style overrides belong in src/scss/theme/dark/. They should NOT be placed inline in component SCSS files using html.themeDark & or html.themeDark .component.
Search pattern:
grep -rn 'html\.themeDark\|\.themeDark' src/scss/ --include='*.scss' | grep -v 'src/scss/theme/dark/'
Known violations:
src/scss/popup/aiOnboarding.scss— Lines 69-91, inlinehtml.themeDark &block with hardcodedrgba()colorssrc/scss/form/button.scss— Dark mode button overridessrc/scss/page/main/settings.scss— Dark mode settings overrides
Action: Flag inline dark overrides. Recommend moving them to the appropriate file in src/scss/theme/dark/.
3. Missing Icon Dark Variants
Rule: Every icon that appears in the UI must have a dark variant in src/img/theme/dark/ if its default color doesn't work on dark backgrounds.
Check process:
- Find all
.icon.*classes that setbackground-imagein light mode SCSS - Verify each has a corresponding entry in
src/scss/theme/dark/common.scssor other dark theme files - Verify the SVG file exists in
src/img/theme/dark/icon/
Search patterns:
# Find icon background-image declarations in light mode
grep -rn 'background-image.*icon/' src/scss/ --include='*.scss' | grep -v 'theme/dark'
# Find dark mode icon overrides
grep -rn 'background-image.*themePath' src/scss/theme/dark/
Action: For each icon missing a dark variant, flag it and check whether the default icon color (typically #B6B6B6 or #252525) needs adjustment for dark backgrounds.
4. Dynamic Icon Paths in TypeScript
Rule: Any TypeScript code building icon paths must use S.Common.getThemePath() for theme awareness.
Search pattern:
grep -rn "img/icon/" src/ts/ --include='*.tsx' --include='*.ts' | grep -v 'getThemePath'
Action: Flag any hardcoded icon paths that bypass theme detection.
5. New CSS Properties Without Variable Usage
Rule: When adding new color/background/border properties, always use CSS variables from _vars.scss (which get overridden in dark mode). Never introduce raw color values.
Colors that MUST use variables:
color-> use--color-text-*background/background-color-> use--color-bg-*or--color-shape-*border-color-> use--color-shape-*box-shadow-> use variables or the@include shadowmixin in dark mode
6. !important Overuse
Rule: Avoid !important in dark mode overrides. If needed, it usually signals a specificity problem that should be fixed by adjusting selectors.
Search pattern:
grep -cn '!important' src/scss/theme/dark/*.scss
Action: Flag excessive !important usage. Suggest selector specificity fixes.
7. Missing Dark Mode Handling for New Components
When reviewing a new component, verify:
- All color properties use CSS variables (auto-handled by dark mode)
- Any custom colors have corresponding overrides in
src/scss/theme/dark/ - Icons have dark variants if needed
- Shadows use the dark mode mixin or variables
- No
opacityhacks that look wrong on dark backgrounds - Borders use
--color-shape-*variables - Hover/active states work visually on dark backgrounds
Output Format
Structure findings as:
## Dark Mode Audit: [file/component name]
### Critical Issues
[Issues that cause visible problems in dark mode]
### Hardcoded Colors
| File:Line | Value | Suggested Variable |
|-----------|-------|--------------------|
| ... | ... | ... |
### Missing Icon Variants
| Icon Class | Light Path | Dark Path (missing) |
|------------|------------|---------------------|
| ... | ... | ... |
### Inline Dark Overrides (should be in theme/dark/)
| File:Line | Selector |
|-----------|----------|
| ... | ... |
### Variable Usage Gaps
[Properties that should use CSS variables but don't]
### Recommendations
[Specific actions to fix each issue]
Quick Reference: Available Dark Mode Variables
Text
--color-text-primary --color-text-secondary --color-text-tertiary --color-text-inversion
Backgrounds
--color-bg-primary --color-bg-primary-90 --color-bg-secondary --color-bg-loader --color-bg-grey
Shapes / Borders
--color-shape-primary --color-shape-secondary --color-shape-tertiary
--color-shape-highlight-dark --color-shape-highlight-medium --color-shape-highlight-light --color-shape-highlight-light-solid
Controls
--color-control-accent --color-control-active --color-control-inactive --color-control-bg
System
--color-system-accent-125 --color-system-accent-50 --color-system-accent-25 --color-system-selection
Color Palette (tags/highlights)
Each available in --color-light-*, --color-very-light-*, and --color-dark-* variants:
grey yellow orange red pink purple blue ice teal lime
When not to use it
- →Auditing light-mode-only components
- →Debugging functional JS logic bugs
Limitations
- →Requires standardized file structure to detect overrides
- →Limited to CSS-based theming audits
How it compares
Checks specific theming compliance rather than generic visual consistency.
Compared to similar skills
dark-mode-check side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| dark-mode-check (this skill) | 1 | 6mo | No flags | Intermediate |
| accessibility-compliance | 45 | 2mo | No flags | Intermediate |
| frontend-code-review | 11 | 2mo | No flags | Advanced |
| feature-flags | 6 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by anyproto
View all by anyproto →You might also like
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
opik-frontend
comet-ml
React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.
react-useeffect
jarrodwatts
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
react-ui-patterns
ChrisWiles
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.