Dark Mode in Tailwind CSS

Modern dark mode design isn't just about using black. It involves choosing deep, high-quality neutrals and ensuring your accent colors are adjusted for high-contrast accessibility on dark backgrounds.

Choosing the Foundation

Slate, Zinc, and Gray offer different moods for your dark mode foundation. Pure black (#000000) is rarely used in high-end UI. Instead, deep slates like #020617 provide a much more professional look.

Elevation & Layering

In light mode, we use shadows to show depth. In dark mode, shadows are less visible, so we use lighter background colors to show elevation. Your cards should be slightly lighter than your background to appear "closer" to the user.

Saturation for Dark Mode

Bright colors can be overwhelming on dark backgrounds. A common professional practice is to slightly desaturate your primary colors for the dark mode version of your theme. This reduces eye strain and increases legibility.

Tailwind Implementation

You can define your dark mode colors in the @theme block using the dark variant or by prefixing your classes with dark:.

<div class="bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100">
  <!-- Responsive dark mode content -->
</div>