--- name: get-design-done:darkmode description: "Audit dark mode implementation. Detects architecture (CSS custom props, Tailwind dark:, JS class toggle), checks contrast, semantic token overrides, dark-specific anti-patterns, and color-scheme meta property. Writes .design/DARKMODE-AUDIT.md (read-only — no score writeback to DESIGN.md)." argument-hint: "" user-invocable: true --- # get-design-done:darkmode — Dark Mode Audit Standalone dark mode audit command. It detects the project's dark mode architecture, runs architecture-specific checks across contrast, token completeness, anti-patterns, and meta properties, then writes a prioritized fix list to `.design/DARKMODE-AUDIT.md`. --- ## Scope This command is a **standalone audit** — not a pipeline stage: - It does NOT update DESIGN.md scores (V2-05 deferred — two-sources-of-truth risk). - It does NOT invoke design-auditor (Pitfall 4 — darkmode runs its own inline audit, separate from the DESIGN-AUDIT.md pipeline). - It does NOT write to `.design/STATE.md`, `DESIGN-CONTEXT.md`, `DESIGN-PLAN.md`, `DESIGN-SUMMARY.md`, or `DESIGN-VERIFICATION.md`. - It writes exactly ONE artifact: `.design/DARKMODE-AUDIT.md`. - It does NOT execute fixes — audit-only per V2-07 deferral (fixes belong in the design skill's color task). Output artifact prefix is `DARKMODE-AUDIT` — distinct from the pipeline namespace (`DESIGN-*.md`). No naming conflict. --- ## Pre-Flight Confirm source root exists before scanning. Try each candidate in order: 1. `src/` — preferred (most React/Vue/Svelte projects) 2. `app/` — Next.js App Router 3. `lib/` — library projects 4. `pages/` — Next.js Pages Router Set `SRC_ROOT` to the first directory that exists. If none exist, abort: > "No source directory detected. Run /get-design-done scan first." Confirm `.design/` exists (create it if absent — `mkdir -p .design/`). ### Probe Preview connection Run at stage entry, after pre-flight checks: ``` Step P1 — ToolSearch check: ToolSearch({ query: "Claude_Preview", max_results: 5 }) → Empty result → preview: not_configured (skip Dark Mode Rendering section) → Non-empty result → proceed to Step P2 Step P2 — Live tool call: call mcp__Claude_Preview__preview_list → Success → preview: available → Error → preview: unavailable Write preview status to .design/STATE.md . ``` --- ## Step 1: Architecture Detection (DARK-02) Run all three architecture greps against `$SRC_ROOT`. Use `2>/dev/null` on each to suppress missing-directory errors. ```bash # Architecture 1: CSS custom properties with dark media query arch1_count=$(grep -rEn "prefers-color-scheme.*dark|\.dark[[:space:]]*\{" "$SRC_ROOT" \ --include="*.css" --include="*.scss" 2>/dev/null | wc -l) # Architecture 2: Tailwind dark: prefix arch2_count=$(grep -rEn "dark:[a-z]" "$SRC_ROOT" \ --include="*.tsx" --include="*.jsx" --include="*.html" 2>/dev/null | wc -l) # Architecture 3: JS class toggle on / arch3_count=$(grep -rEn "classList.*dark|setAttribute.*dark|document\.documentElement" "$SRC_ROOT" \ --include="*.ts" --include="*.tsx" --include="*.js" 2>/dev/null | wc -l) ``` **Classification rules:** | Condition | Classification | |-----------|---------------| | All three counts < 3 | No dark mode — abort: "No dark mode implementation detected — nothing to audit." | | Exactly one count ≥ 3 | Primary architecture = that one | | Two or more counts ≥ 5 | Hybrid (list all detected architectures) | | One count ≥ 3, others < 5 | Primary = highest count | Record `ARCH_DETECTED` as one of: `Architecture 1 (CSS custom props)`, `Architecture 2 (Tailwind dark:)`, `Architecture 3 (JS class toggle)`, or `Hybrid`. --- ## Step 2: Contrast Audit (DARK-03) For the detected architecture, enumerate color token + background token pairs used in dark context, then compute WCAG contrast ratios. **Token extraction by architecture:** **Architecture 1 (CSS custom props):** ```bash # Extract dark-context token definitions from .dark { } blocks and @media (prefers-color-scheme: dark) blocks grep -rEn "\.dark[[:space:]]*\{|prefers-color-scheme.*dark" "$SRC_ROOT" \ --include="*.css" --include="*.scss" -A 30 2>/dev/null \ | grep -E "^\s*--[a-z].*:\s*#[0-9a-fA-F]{3,8}|^\s*--[a-z].*:\s*rgb" ``` **Architecture 2 (Tailwind dark:):** ```bash # Extract dark:bg-* and dark:text-* class combinations grep -rEhon "dark:(bg|text)-[a-z0-9-]+" "$SRC_ROOT" \ --include="*.tsx" --include="*.jsx" --include="*.html" 2>/dev/null | sort -u ``` **Architecture 3 (JS class toggle):** ```bash # Read dark CSS rules (same as Architecture 1 — the JS toggle sets .dark on ) grep -rEn "\.dark[[:space:]]*\{" "$SRC_ROOT" \ --include="*.css" --include="*.scss" -A 30 2>/dev/null \ | grep -E "color|background" ``` **WCAG contrast computation:** Use the linearized-sRGB formula from `agents/design-executor.md` Type: accessibility (pre-calibrated — do not re-derive). For each text/background pair: 1. Convert each hex channel to linear light: `c_lin = (c/255 ≤ 0.04045) ? c/255/12.92 : ((c/255 + 0.055)/1.055)^2.4` 2. Relative luminance: `L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin` 3. Contrast ratio: `(L_lighter + 0.05) / (L_darker + 0.05)` **Thresholds:** | Text type | Min ratio | Fail severity | |-----------|-----------|---------------| | Body text (< 18pt or < 14pt bold) | 4.5:1 | P0 (critical) | | Large text (≥ 18pt or ≥ 14pt bold) | 3:1 | P1 (major) | | UI component boundaries | 3:1 | P1 (major) | Flag every pair that fails its threshold. Include token names, hex values, computed ratio, and required ratio in the fix description. --- ## Step 3: Token Override Completeness (DARK-04) Check that every light-mode color token has a corresponding dark-mode override. **Enumerate light-mode tokens:** ```bash # CSS custom props approach grep -rEhon "var$--color-[a-z0-9-]+$" "$SRC_ROOT" \ --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx" 2>/dev/null \ | grep -oE "\-\-color-[a-z0-9-]+" | sort -u # Tailwind semantic classes (if Arch 2) grep -rEhon "(bg|text|border|ring)-[a-z]+-[0-9]+" "$SRC_ROOT" \ --include="*.tsx" --include="*.jsx" 2>/dev/null | sort -u ``` **Check dark overrides (architecture-specific):** - Arch 1: Token appears in `.dark { --color-* }` block or `@media (prefers-color-scheme: dark) { --color-* }` - Arch 2: A `dark:` prefixed variant of the Tailwind class exists in the same file or a shared layout - Arch 3: Token appears in the dark CSS block activated by JS class toggle **Flag:** Any light-mode color token with no dark override → P1 (major). Include token name and file location. --- ## Step 4: Dark-Specific Anti-Patterns (DARK-05) **Anti-pattern A: Images and SVGs without dark variant** ```bash # Find all and