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.00069 | $0.01598 |
| Opus 5 | $0.00034 | $0.00799 |
| Sonnet 5 | $0.00014 | $0.00320 |
| Haiku 4.5 | $0.00007 | $0.00160 |
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 12d 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 — 151 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.
- 12d 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 (54 stars, last pushed 2d ago), licensed MIT. It adds 69 tokens to every session and 1,598 once invoked, about $0.0003 per session on Opus 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"…
extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
vois-tokens
Rules and patterns for building UI with shadcn/ui, Tailwind v4 or StyleX, and Motion against a Vois design token set. Use when building components, pages, or any UI that should conform to the workspace design system. Covers spacing, typography, color tokens, component architecture, animation, accessibility, and modern…
absolute-ui
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and…
html-to-bricks
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.