theme-normalizer

Normalize hard-coded MDX colors to deck theme CSS variables.

Updated Aug 27, 2026

Search Tags:#theme #color #hex #mdx #css-variables #deck

Ready to run

npx skills add https://github.com/co-r-e/dexcode --skill theme-normalizer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: theme-normalizer
Source: https://github.com/co-r-e/dexcode/tree/main/.claude/skills/theme-normalizer
Command: npx skills add https://github.com/co-r-e/dexcode --skill theme-normalizer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jiti, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Normalize hard-coded HEX colors in decks' MDX files to deck theme CSS variables derived from deck.config.ts theme.colors, enabling consistent theming and easier brand updates.

Core Features & Use Cases

Automatically replace hard-coded color literals like #FF00AA with var(--slide-*) CSS variables based on the deck theme.
Applies across decks/<deck>/*mdx and deck.config.ts to ensure consistent color usage and easier color management.
Use Case: When a deck uses inconsistent colors across slides, this Skill standardizes them to the centralized theme definitions for maintainability.

Quick Start

Preview color normalization for the target deck, then apply changes with --write to update deck colors.

Frequently Asked Questions about theme-normalizer

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

FAQPage Schema

How do I replace hard-coded HEX colors in MDX files with CSS variables?▼

To replace hard-coded HEX colors in MDX files, you can normalize them to deck theme CSS variables. This process maps color literals like #FF00AA to var(--slide-*) using theme definitions from deck.config.ts.

How do I standardize inconsistent slide colors for easier brand updates?▼

Standardizing inconsistent slide colors involves mapping hard-coded HEX values to centralized theme CSS variables. This ensures consistent color usage across decks and enables easier brand updates by modifying theme definitions.

Can I preview color normalization changes before writing to MDX files?▼

Yes, you can preview color normalization changes before writing to MDX files using a dry-run option. This allows you to review the HEX to CSS variable mapping safely before applying the write option to update decks.

Does deck theme normalization work with deck.config.ts theme.colors?▼

Deck theme normalization works directly with deck.config.ts theme.colors to derive CSS variables. It applies this mapping across decks/<deck>/*.mdx files and the config file itself to ensure consistent color usage.

What is the best way to manage duplicate HEX colors when mapping to deck theme variables?▼

The best way to manage duplicate HEX colors when mapping to deck theme variables is through a normalization process that handles duplicates during color-to-var mapping. This ensures each color literal resolves to a single CSS variable.

Why are my hard-coded MDX colors not updating with deck theme changes?▼

Hard-coded MDX colors do not update with deck theme changes because they are literal HEX values instead of CSS variables. Normalizing these literals to var(--slide-*) references fixes the issue by linking them to theme.colors.