Simply inverting colors is not enough. True dark mode design considers contrast ratios, eye strain, and emotional hierarchy.
Semantic Colors variables
Never use bg-gray-900 directly. Define semantic tokens like --bg-surface-primary. In CSS variables, you define this once for light mode and override it for dark class.
Depth without Shadow
In light mode, we use shadows to show depth. In dark mode, shadows are invisible. Instead, we use elevation via lightness. Higher surfaces should be lighter gray, not darker. The "Light Source" principal still applies.
Contrast Pitfalls
Pure black (#000000) is rarely the right choice for a background. It causes eye strain and "smearing" on OLED screens when scrolling. Stick to dark grays (#121212) for a premium feel.
#UI#UX#DarkMode#Tailwind