Light Mode Theming — Design skill for Claude Code
Add a light mode to contrast the default dark mode, and build the design system so that.
How to install Light Mode Theming
Installs to ~/.claude/skills/disler-inkwell-agent-sandboxes-and-software-factory-light-mode-theming/SKILL.md
mkdir -p ~/.claude/skills/disler-inkwell-agent-sandboxes-and-software-factory-light-mode-theming && curl -fsSL https://raw.githubusercontent.com/disler/inkwell-agent-sandboxes-and-software-factory/HEAD/prompts/light-mode-theming.md -o ~/.claude/skills/disler-inkwell-agent-sandboxes-and-software-factory-light-mode-theming/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Light Mode Theming does
Add a light mode to contrast the default dark mode, and build the design system so that additional themes can be added later. Themes should be defined as named sets of design tokens rather than hardcoded colors, with the dark theme remaining the default. Where: apps/inkwell/public/style.css (tokens + themes), apps/inkwell/public/app.js (theme toggle + persistence), apps/inkwell/public/index.html (control markup). Done means: the user can switch between dark and light from the UI, the choice pers
Alternatives in Design
- Add Oas Support — Add support for a new OpenAPI Specification version to Swagger UI 29k ★
- NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Obsidian Theme Designer
git clone https://github.com/XiangyuSu611/obsidian-theme-designer ~/.claude/skills/obsidian-theme-designer Des
Claude Code Chat Viewer
Offline HTML viewer for Claude Code JSONL session transcripts. Six UI languages, light/dark theme, no backend,
Kakaotalk Translator
Local, read-only KakaoTalk translator for macOS. English UI, light/dark themes, and optional translation using
5
Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should fe
Token
Design token creation and updates. Use when adding, modifying, or checking Dialtone design tokens (--dt- CSS v
Design Screen
Design one screen end to end — layout, type, color, responsive, dark mode, interaction states, inclusive pass,
Related Agents
Dark Mode Reviewer
Reviews dark mode implementation for color remapping quality, contrast, and theme consistency.
Color Analyst
Diagnose and improve project color systems. Covers contrast, harmony, semantics, dark mode, and palette genera
Style Sync
Checks that CSS custom properties defined in src/styles/main.css (like --accent, --bg, --text) are consistentl