theming

theming is a skill for Claude Code, Codex from nimadorostkar/Claude-Skills-collection. It costs 38 tokens per session (1,524 once invoked), scanned A, original, MIT.

A guide for creating interface themes, such as light, dark, high-contrast, or brand-specific versions. It covers shared design tokens, readable colour palettes, accessibility checks, and user theme preferences.

In plain words
What is it for?
Use it to build theme-switching systems, generate palettes from a starting colour, preserve contrast across themes, support system preferences and user overrides, and create white-label interfaces.
Why use it?
It helps prevent themes from becoming unreadable when colours are switched. It treats dark mode and other themes as deliberate designs instead of simple colour inversions.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to build theme-switching systems, generate palettes from a starting colour, preserve contrast across themes, support system preferences and user overrides, and create white-label interfaces.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/nimadorostkar/claude-skills-collection/theming
Install

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.

Any agent
npx skills add nimadorostkar/Claude-Skills-collection --skill theming
Clone the repo
git clone --depth 1 https://github.com/nimadorostkar/Claude-Skills-collection

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for theming

README.md
[![agentmods](https://agentmods.dev/badge/skills/nimadorostkar/claude-skills-collection/theming/github.svg)](https://agentmods.dev/skills/nimadorostkar/claude-skills-collection/theming)
Your own site
<a href="https://agentmods.dev/skills/nimadorostkar/claude-skills-collection/theming"><img src="https://agentmods.dev/badge/skills/nimadorostkar/claude-skills-collection/theming/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.

agentmods 80×15 button for theming

Your own site · 80×15
<a href="https://agentmods.dev/skills/nimadorostkar/claude-skills-collection/theming"><img src="https://agentmods.dev/badge/skills/nimadorostkar/claude-skills-collection/theming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 38 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,524 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00038 $0.01524
Opus 5 $0.00019 $0.00762
Sonnet 5 $0.00008 $0.00305
Haiku 4.5 $0.00004 $0.00152

Measured 12d ago against content hash 2b13f71708c0, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

theming 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.

skills/design/theming/SKILL.md · 130 lines

How it starts

The opening of the file, as written. The whole thing — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Theming

Purpose

Build themes that remain readable and coherent when switched. Dark mode is not an inversion; a palette that works on white will not work on black without being redesigned, and inverting it produces the vibrating, exhausting interfaces that dark mode is criticized for.

When to Use

  • Adding dark mode to an interface.
  • Building a multi-theme or white-label system.
  • Generating a palette from a brand colour.
  • Fixing a theme where contrast breaks in one mode.

Capabilities

  • Semantic token architecture that supports theme switching.
  • Dark-mode design (as opposed to inversion).
  • Palette generation with perceptually uniform colour spaces.
  • Contrast verification across every theme.
  • Respecting system preference and user override.

Inputs

  • The base palette or the seed colour.
  • The themes required: light, dark, high-contrast, per-brand.
  • Accessibility requirements.

Outputs

  • Semantic tokens that resolve differently per theme.
  • Every theme passing contrast requirements.
  • A switch that respects the system preference and remembers an override.

Workflow

  1. Build on semantic tokens — Components reference --color-surface, never --grey-900. Only the semantic layer changes between themes; components do not change at all.
  2. Design the dark theme, do not invert it — Pure black is harsh and causes halation with white text. Use a very dark grey. Desaturate the accents: a colour that is vivid on white is glaring on dark.
  3. Preserve the contrast relationships — Verify every text-on-surface pairing in every theme. A ratio that passes in light frequently fails in dark.
  4. Work in a perceptual colour space — OKLCH lightness is perceptually uniform; HSL's is not. Generating a scale in HSL produces steps that look wrong even though the numbers are even.
  5. Respect the system, allow an override — Default to prefers-color-scheme, and store an explicit user choice.
  6. Handle elevation — In light mode, elevation is a shadow. In dark mode, shadows are invisible; elevation is a lighter surface.

Read the full file on GitHub · 130 lines

Changes

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.

  1. 12d ago First seen · 130 lines · 38 tokens per session scan A 2b13f71708c0

Subscribe to this mod's changes

theming is a skill published in the GitHub repository nimadorostkar/Claude-Skills-collection (26 stars, last pushed 24d ago), licensed MIT. It adds 38 tokens to every session and 1,524 once invoked, about $0.0002 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.

Related

Other skills, from other repositories

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build landing pages, websites, dashboards, web components, or any frontend UI. Generates creative, polished code that avoids generic AI aesthetics.

tobihagemann/turbo · 48 tokens

slop-eval

Objectively evaluate a UI/web design against the pols.dev anti-slop design law: detect catalogued slop tells with cited evidence, score 8 weighted axes (color, type, components, layout, motion, execution, signature, cohesion), and emit a Slop Report with a 0–100 Slop Index and grade. Use when the user asks to…

fabricioctelles/skills · 142 tokens

liquid-glass

Liquid glass — Apple-style frosted, refracting surfaces. Use when the user asks for glassmorphism, frosted/translucent panels, cards, menus or a glass topbar; when a glass surface looks wrong (gray, flat, invisible, unreadable text); or when another skill needs the glass recipe.

stormaref/LiquidGlassSkill · 69 tokens

color-accessibility

Trigger on: check contrast, WCAG contrast, accessible colors, readable text color, fix low-contrast, dimmed text color, palette accessibility, pastel color, textcolor for background, make this color readable, UI theme contrast, Neovim highlight contrast. Evaluate, fix, and generate accessible fg/bg pairs with the…

tkolleh/skills · 109 tokens

journalistic-portrait-cn

A tool for creating Chinese magazine-style HTML pages inspired by Southern People Weekly, a Chinese human-interest and profile magazine. It supports layouts such as feature articles, red-framed covers, portrait-based contents pages, and two-column interior pages.

serejaris/kimi-skills · 75 tokens

gpt-taste

High-motion Awwwards-style frontend direction using GSAP, editorial typography, dense bento composition, and cinematic section choreography. Use only when the user explicitly wants an experimental marketing page or portfolio; do not use for routine product UI, dashboards, or accessibility-critical services.

wedabro/bro-skills · 59 tokens