html-deck Theme Creator Skill

This skill explains how to design and apply custom themes for the html-deck library. Theme customization is restricted to overriding CSS variables.

📚 Detailed References Index

Always read the relevant sub-document using the view_file tool to inspect customizable variable sets:

• 🎨 CSS Variables Reference: Detailed specifications and default values of all customizable variables (colors, typography, margins, gaps, components).
  • Link: css_variables.md

🎨 Theme Customization Core Principles

1. Dedicated CSS File for Theme Overrides & Bundle Cascade Order

Create a dedicated CSS file (e.g., style.css) to define the custom theme. Do not write CSS variable overrides directly in <style> blocks.

To guarantee correct cascade ordering during production builds (preventing the core library variables from overriding your custom rules), always import the library CSS at the top of your custom theme file using @import instead of importing them separately in the script block: