菜单
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
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Commit staged/unstaged changes and push to the remote branch in one step
Analyze code changes and generate Playwright E2E tests in anytype-desktop-suite. Run after implementing features or modifying editor/component behavior to ensure new functionality has test coverage.
Update README documentation in the folder of changed components/abstractions to reflect code changes — keeps docs lean, precise, and in sync
Write and update release notes in whatsNew.ts with context-aware content generation
Perform comprehensive code reviews for TypeScript projects, analyzing type safety, best practices, performance, security, and code quality with actionable feedback
基于 SOC 职业分类
| name | dark-mode-check |
| description | 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 |
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.
Activate this skill when the user:
Dark mode is activated by the class themeDark on the <html> element:
html.themeDark { ... }
S.Common.setThemeClass() in src/ts/store/common.tsU.Common.addBodyClass('theme', 'dark') in src/ts/lib/util/common.ts'dark', 'light', 'system' (system defers to nativeThemeIsDark)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 |
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.
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`;
// In dark/common.scss
@mixin shadow {
box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px #393933 inset;
}
When auditing a file or component for dark mode correctness, check every item below.
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.
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() colorssrc/scss/form/button.scss — Dark mode button overridessrc/scss/page/main/settings.scss — Dark mode settings overridesAction: Flag inline dark overrides. Recommend moving them to the appropriate file in src/scss/theme/dark/.
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:
.icon.* classes that set background-image in light mode SCSSsrc/scss/theme/dark/common.scss or other dark theme filessrc/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.
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.
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!important OveruseRule: 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.
When reviewing a new component, verify:
src/scss/theme/dark/opacity hacks that look wrong on dark backgrounds--color-shape-* variablesStructure 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]
--color-text-primary --color-text-secondary --color-text-tertiary --color-text-inversion
--color-bg-primary --color-bg-primary-90 --color-bg-secondary --color-bg-loader --color-bg-grey
--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
--color-control-accent --color-control-active --color-control-inactive --color-control-bg
--color-system-accent-125 --color-system-accent-50 --color-system-accent-25 --color-system-selection
Each available in --color-light-*, --color-very-light-*, and --color-dark-* variants:
grey yellow orange red pink purple blue ice teal lime