CSS Custom Properties Theme
Build a theme system using CSS custom properties with gradient, shadow, and animation tokens.
何时使用此配方
CSS custom properties enable dynamic theming, dark mode toggling, and design token management without JavaScript. The foundation of modern CSS architecture.
步骤
Gradient Generator
试用此工具 →Define gradient tokens
Box Shadow Generator
试用此工具 →Define shadow tokens
Easing Generator
试用此工具 →Define animation tokens
Border Radius Generator
试用此工具 →Define radius tokens
常见问题
CSS variables vs Sass variables?
CSS variables are runtime (change with JavaScript, media queries, cascade). Sass variables are compile-time only. Use CSS variables for theming and Sass for build-time calculations.
How do CSS variables enable dark mode?
Define variables in :root for light mode and override in [data-theme='dark'] or @media (prefers-color-scheme: dark). All components using the variables automatically switch.
相关配方
Complete Button Style
Create a polished button with gradient background, shadow, border radius, and hover animation using MCP tools.
Hero Section Design
Design a stunning hero section with gradient background, flexbox centering, and entrance animation.
Card Component Style
Build a modern card component with shadow, border radius, hover transform, and smooth transitions.
Glassmorphism Effect
Create a frosted glass effect using backdrop-filter, gradient overlay, and border styling.