dark-mode-check

anyproto/dark-mode-check

Design

6,995

5 installs

About

SKILL.md

dark-mode-check

anyproto/dark-mode-check

Design

6,995

5 installs

About

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

SKILL.md

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() in src/ts/store/common.ts
Applied by U.Common.addBodyClass('theme', 'dark') in src/ts/lib/util/common.ts
Values: 'dark', 'light', 'system' (system defers to nativeThemeIsDark)

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 hex
src/scss/theme/dark/common.scss — shadow mixin #393933, vault #393939, iconWrap #4f4f4f/#000000, markup highlight #044062
src/scss/theme/dark/menu.scss — bgColor-* palette, .connected::before #294b0e, .error::before #581f0c
src/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, inline html.themeDark & block with hardcoded rgba() colors
src/scss/form/button.scss — Dark mode button overrides
src/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 set background-image in light mode SCSS
Verify each has a corresponding entry in src/scss/theme/dark/common.scss or 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 shadow mixin 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 opacity hacks 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

About

SKILL.md

About

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

SKILL.md

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() in src/ts/store/common.ts
Applied by U.Common.addBodyClass('theme', 'dark') in src/ts/lib/util/common.ts
Values: 'dark', 'light', 'system' (system defers to nativeThemeIsDark)

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 hex
src/scss/theme/dark/common.scss — shadow mixin #393933, vault #393939, iconWrap #4f4f4f/#000000, markup highlight #044062
src/scss/theme/dark/menu.scss — bgColor-* palette, .connected::before #294b0e, .error::before #581f0c
src/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, inline html.themeDark & block with hardcoded rgba() colors
src/scss/form/button.scss — Dark mode button overrides
src/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 set background-image in light mode SCSS
Verify each has a corresponding entry in src/scss/theme/dark/common.scss or 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 shadow mixin 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 opacity hacks 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

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

dark-mode-check

About

SKILL.md

dark-mode-check

About

SKILL.md

Dark Mode Check Skill

When to Use

Architecture Reference

Theme Selector

CSS Variable System

Dark Mode File Organization

Icon Theming

Dark Shadow Mixin

Review Checklist

1. Hardcoded Colors

2. Inline Dark Overrides Outside Theme Folder

3. Missing Icon Dark Variants

4. Dynamic Icon Paths in TypeScript

5. New CSS Properties Without Variable Usage

6. !important Overuse

7. Missing Dark Mode Handling for New Components

Output Format

Quick Reference: Available Dark Mode Variables

Text

Backgrounds

Shapes / Borders

Controls

System

Color Palette (tags/highlights)

About

SKILL.md

About

SKILL.md

Dark Mode Check Skill

When to Use

Architecture Reference

Theme Selector

CSS Variable System

Dark Mode File Organization

Icon Theming

Dark Shadow Mixin

Review Checklist

1. Hardcoded Colors

2. Inline Dark Overrides Outside Theme Folder

3. Missing Icon Dark Variants

4. Dynamic Icon Paths in TypeScript

5. New CSS Properties Without Variable Usage

6. !important Overuse

7. Missing Dark Mode Handling for New Components

Output Format

Quick Reference: Available Dark Mode Variables

Text

Backgrounds

Shapes / Borders

Controls

System

Color Palette (tags/highlights)

6. `!important` Overuse

6. `!important` Overuse