dark-mode-check（深色模式检查） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：dark-mode-check（深色模式检查）
来源仓库：https://github.com/anyproto/anytype-ts
仓库路径：skills/dark-mode-check
安装命令：
npx skills add https://github.com/anyproto/anytype-ts --skill dark-mode-check
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/anyproto/anytype-ts --skill dark-mode-check

简介

dark-mode-check 审计 Anytype-TS 代码库中深色模式的样式正确性，检测硬编码颜色等问题。

适用于检查组件是否适配深色主题、验证新组件是否遵循配色规范。
自动识别缺失图标变体、内联覆盖与 CSS 变量缺口，提升主题一致性。
安装前应确认项目使用 Anytype-TS 框架，并确保主题选择器配置正确。
适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

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

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.22%

按下载量换算78

Claude

31.63%

按下载量换算70

Cursor

18.63%

按下载量换算41

Gemini CLI

9.88%

按下载量换算22

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容，本身偏只读；真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/anyproto/anytype-ts

SKILL.md 来源

github.com

/anyproto/anytype-ts/tree/main/skills/dark-mode-check

skills-sh

skills.sh

/anyproto/anytype-ts/dark-mode-check

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

dark-matter-analyzer（暗物质分析仪）

dark-matter-analyzer 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

dark-mode-testing（暗模式测试）

用于辅助测试设计、自动化测试、用例整理和回归验证。它适合让 Agent 编写单元测试、端到端测试、测试计划或根据失败日志定位问题。使用时需要确认项目测试框架、运行命令和夹具数据，避免为了通过测试而改坏真实逻辑；涉及浏览器或外部服务时，应区分本地模拟、测试环境和生产环境。

dark-mode-check（深色模式检查）

安装方式

简介

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)

适合场景

能力概览

平台分布

安全审计

权限和风险

来源信息

继续浏览同类 Skills

6. `!important` Overuse