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.