skills.rest
metabench
metabenchCOMMUNITY
Explore all skills by this author →
GitHub

svg-theme-system

Generates themeable SVG diagrams using shared design tokens and selectable palettes.

1|Updated Sep 12, 2025
Search Tags:#theming#design tokens#svg#dark mode#css variables#diagram#palette
One-click install
npx skills add https://github.com/metabench/copilot-dl-news --skill svg-theme-system-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-theme-system
Source: https://github.com/metabench/copilot-dl-news/tree/main/docs/agi/skills/svg-theme-system
Command: npx skills add https://github.com/metabench/copilot-dl-news --skill svg-theme-system-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Hand-editing colors, strokes, and typography across dozens of SVG diagrams is error-prone and inconsistent. This Skill provides a repeatable pipeline for producing SVGs with selectable themes (such as obsidian dark and white-leather light) so diagrams stay consistent without manually editing hundreds of fills and strokes. ## Core Features & Use Cases - Theme Token Schema: Defines a small reusable set of design tokens (backgrounds, surfaces, text, accents, status colors, stroke widths, fonts) applied consistently across all diagrams. - Build-Time and Runtime Theming: Supports generating per-theme SVG file variants for <img> embedding, or CSS-variable-based runtime theming for inline SVG in apps. - Agent-Friendly Iteration Loop: Structures layout first, generates via templates, then validates collisions and errors with dedicated tools until output is clean. - Use Case: A documentation site needs the same architecture diagram in both dark and light palettes. Generate diagram.obsidian.svg and diagram.white-leather.svg from one token-driven template instead of maintaining two hand-edited files. ## Quick Start Generate a themed SVG diagram using the obsidian palette and validate it for collisions and errors.

Frequently Asked Questions about svg-theme-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create SVG diagrams with multiple color themes?▼

Define a small theme token schema covering backgrounds, text, accents, and strokes, then generate per-theme SVG variants at build time using a generator that accepts a theme flag. This produces files like diagram.obsidian.svg that work in any embedding context.

Should I use build-time or runtime SVG theming?▼

Use build-time theming when SVGs are loaded as files via img tags or in markdown, since it works everywhere. Use runtime CSS-variable theming only when SVG markup is inlined into HTML, because variable resolution depends on the embedding method.

Why do CSS variables not work in my SVG image?▼

CSS variables inside an SVG fail when the file is loaded through an img tag, because most browsers do not apply external or inline variable contexts in that mode. Switch to build-time theming that bakes each palette into a separate SVG file.

How do I validate SVG diagrams for overlapping elements?▼

Run the collision checker with node tools/dev/svg-collisions.js on the file in strict mode and confirm zero high-severity collisions. Also run the SVG validator to confirm zero structural errors before publishing.

What are common mistakes when theming SVG diagrams?▼

The main anti-patterns are hardcoding hex colors across many nodes instead of referencing tokens, and mixing pipelines by attempting runtime CSS-variable theming on SVGs embedded as image files. Reuse one token schema across all diagrams.

Related Skills

Explore More Design & Creative Skills→
p-sree-sai-pavanp-sree-sai-pavan
5

diagram-maker

Generate SVG/HTML or Excalidraw diagrams from concepts and architectures.

Community
Advanced
leonardoacostaleonardoacosta

svgl

Find and embed SVG brand logos from svgl.app in UI components.

Community
Intermediate
yashs33244yashs33244
1

theme-factory

Apply predefined color palettes and typography themes to documents and HTML pages.

Community
Basic
darraghh1darraghh1

hand-crafted-svg

Generate publication-quality SVG diagrams with hand-crafted XML markup.

Community
Advanced