dark-mode

Solid

Use when generating or modifying any visual output that renders in a browser or artifact viewer: HTML pages, CSS, React SSR components, Egregore artifacts, markdown renderers, web components, design-system tokens, Tailwind themes, or standalone demos. Triggers on requests involving dark mode, theme toggles, color systems, card surfaces, browser rendering, or visual polish. The load-bearing lesson: if React SSR emits an inline hex color through `style={}`, CSS dark-mode overrides cannot reach it, so every theme-sensitive color must be emitted as `var(--token)` rather than a resolved hex. Do not use for TUI output, plain markdown files, or non-visual code.

Web & Frontend 288 stars 21 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
82
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Dark Mode ## Voice Complex This skill governs BROWSER VISUAL RENDERING — warm palette, CSS token system, theme behavior. The warm-brown base (#1D1611) and terracotta accent (#D4875A) are the visual expression of the same warmth that runs through all Egregore registers. Shared aesthetic: voice-bedrock (`.claude/rules/voice-bedrock.md`). For terminal rendering: `tui-design` skill. For product copy in rendered pages: `product-voice` skill. For prose content in rendered pages: `egregore-voice` skill. This skill is a behavioral constraint system for Egregore visual output. It exists to stop the most common failure mode before it happens: an otherwise correct dark palette being defeated by SSR-emitted inline styles. ## The Bitter Lesson **If React SSR renders `style="color:#2A2A2A"`, dark mode loses.** CSS variable overrides only work when the rendered value is itself a variable reference. If a color must adapt across themes, emit `var(--token)` at the render site. Not in comments. Not in a later stylesheet. In the actual rendered style. Treat this as a hard constraint: 1. Every theme-sensitive color in CSS or inline `style` props must use `var(--token)`. 2. Theme state lives on `<html data-theme="...">`. 3. Theme restoration happens before paint, in `<head>`. Everything else is secondary. ## When To Invoke - Generating standalone HTML - Building or editing React SSR output - Writing CSS for Egregore artifacts - Modifying markdown renderers that emit inline styles - Add...

Details

Author
egregore-labs
Repository
egregore-labs/egregore
Created
5 months ago
Last Updated
1 weeks ago
Language
Shell
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

theming

Use when semantic roles must map coherently across light, dark, forced-colors, or saved theme preferences without contrast or no-flash regressions.

8 Updated 5 days ago
KyaniteLabs
AI & Automation Solid

light-dark-mode

Load this skill whenever the project supports light/dark mode, colour theme switching, high-contrast mode, or responds to prefers-color-scheme. Under no circumstances hard-code colours that break in alternative themes. Absolutely always test colour contrast in both light and dark themes, and respect user OS-level colour preferences via CSS media queries.

44 Updated 2 days ago
mgifford
AI & Automation Listed

dark-terminal-doc

Use when a single-file HTML technical document should carry a dark developer / terminal aesthetic — monospace type, terminal-green accents, near-black background. Trigger on: "dark terminal doc", "terminal-style HTML", "developer-terminal aesthetic", "make it look like a terminal", "dark developer-facing HTML page", or when the user wants a reference sheet, comparison table, changelog or API cheatsheet rendered in that specific look, or one matching a document already produced in this style. For a document with no stated aesthetic, use the harness design skills instead.

2 Updated today
Tamircohen28