Dark Mode Color Palette Conversion
Convert a light theme to dark mode with adjusted gradients, shadows, and filter effects.
何时使用此配方
Convert your light theme to a proper dark mode. Dark mode requires different shadow intensities, adjusted gradients, and careful color choices to maintain contrast and readability.
步骤
Gradient Generator
试用此工具 →Create dark background gradient
Gradient Generator
试用此工具 →Create dark mode accent colors
Box Shadow Generator
试用此工具 →Adjust shadows for dark mode
Text Shadow Generator
试用此工具 →Add text glow effect
常见问题
Is dark mode just inverting colors?
No. Simple inversion looks terrible. Dark mode needs: lower contrast (not pure white on black), elevated surfaces should be lighter (not darker), and shadows need higher opacity.
What background color should dark mode use?
Not pure black (#000). Use dark grays like #0f172a or #1a1a2e. Pure black causes 'halation' on OLED screens and feels harsh. Material Design recommends #121212.
相关配方
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.