Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add dembrandt/dembrandt-skills --skill color-mode-and-themegit clone --depth 1 https://github.com/dembrandt/dembrandt-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dembrandt/dembrandt-skills/color-mode-and-theme)<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/color-mode-and-theme"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/color-mode-and-theme/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/color-mode-and-theme"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/color-mode-and-theme.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00033 | $0.01776 |
| Opus 5.5 | $0.00013 | $0.00710 |
| Sonnet 5.5 | $0.00007 | $0.00355 |
| Haiku 4.5 | $0.00003 | $0.00178 |
Grade A, and why
color-mode-and-theme scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 25d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 153 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Color Mode and Theme
The Decision: Light, Dark, or Both
Color mode is a brand and context decision, not a personal preference. Make it deliberately.
Light (white design)
Tone: Open, trustworthy, content-forward, accessible, professional
Fits: Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus
Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box.
Dark (dark design)
Tone: Premium, focused, immersive, technical, high-contrast data
Fits: Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming
Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface.
Caution: Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode.
Combined (system-default + manual override)
Respect prefers-color-scheme and let the OS set the default. Offer a toggle for users who want to override. This is the modern standard for most products with a returning user base.
@media (prefers-color-scheme: dark) {
:root { /* dark tokens */ }
}
@media (prefers-color-scheme: light) {
:root { /* light tokens */ }
}
[data-theme="dark"] { /* manual override */ }
[data-theme="light"] { /* manual override */ }
When to Build a Theme Selector in the UI
A theme selector is a UI control — it takes space and adds complexity. Only build it when user control genuinely matters.
| Situation | Theme selector? |
|---|---|
| Marketing site, landing page | No — pick one mode, commit to it |
| Consumer SaaS, general audience | Combined (system-default + toggle) |
| Developer tool, technical product | Yes — developers expect it |
| Trading platform, financial dashboard | Yes — extended use, low-light sessions common |
| B2B enterprise tool (ERP, analytics) | Yes — power users, long sessions, personal preference varies |
| E-commerce storefront | Usually no — light default, possibly system-default |
| Creative tool (design, video, audio) | Yes — dark is often preferred, toggle still expected |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 25d ago Changed · -36 tokens per session 0301d7f3d2b1
- 1mo ago Changed · +2 lines 78702247e0d9
- 1mo ago First seen · 151 lines · 69 tokens per session scan A 4ff2dc6d077f
color-mode-and-theme is a skill published in the GitHub repository dembrandt/dembrandt-skills (169 stars, last pushed 5d ago), licensed MIT. It adds 33 tokens to every session and 1,776 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
indian-gov-web-ui
A set of design and accessibility rules for Indian government websites, portals, and administrative panels, including required standards such as GIGW and WCAG.
ux4g-design-system
Use when building or reviewing UI with UX4G — India's official government design system (ux4g.gov.in, cdn.ux4g.gov.in, ux4g-web-components). Covers the v3.0.18 token API, the 52 components, install paths for HTML/React/Angular/Flutter, and the interop hazards. Triggers include "UX4G", "ux4g-web-components"…
design-doctrine
The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token…
image-to-code
Turn a reference image, screenshot, or mockup into token-driven, accessible code. Infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants…
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
desktop-principles
Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.