dark-mode-check
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 folder
Install
mkdir -p .claude/skills/dark-mode-check && curl -L -o skill.zip "https://mcp.directory/api/skills/download/5835" && unzip -o skill.zip -d .claude/skills/dark-mode-check && rm skill.zipInstalls to .claude/skills/dark-mode-check
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
More by anyproto
View all skills by anyproto →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
fastapi-templates
wshobson
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
Related MCP Servers
Browse all servers
Playwright Browser AutomationEnhance software testing with Playwright MCP: Fast, reliable browser automation, an innovative alternative to Selenium s
Desktop CommanderDesktop Commander MCP unifies code management with advanced source control, git, and svn support—streamlining developmen
Gemini CLIIntegrate with Gemini CLI for large-scale file analysis, secure code execution, and advanced context control using Googl
ExcelUnlock powerful Excel automation: read/write Excel files, create sheets, and automate workflows with seamless integratio
LLMs.txt ExplorerExplore websites using llms.txt files with LLMs.txt Explorer. Fetch and parse site-specific language model instructions
Claude Code ReviewGet structured & freeform code reviews with code quality analysis tools powered by OpenAI, Google & Anthropic. Supports
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.