Designing Consistent Dark Mode Color Pairs

Effective dark mode design is more than inverting colors — it requires choosing appropriate surface colors that maintain contrast ratios and visual hierarchy. A common pattern uses a layered surface system: the page background sits at gray-950 or gray-900, cards and panels sit at gray-800, and interactive elements like inputs and dropdowns sit at gray-700. This layering creates the same sense of depth in dark mode that white, gray-50, and gray-100 provide in light mode. Text contrast must be maintained across both modes. WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. In Tailwind terms, text-gray-900 on white has excellent contrast, and its dark mode equivalent text-gray-100 on gray-900 provides similar contrast. For secondary and muted text, text-gray-600 pairs with dark:text-gray-400 — both provide sufficient but visually subdued contrast. Interactive states in dark mode need their own variants. Hover states like hover:bg-gray-100 become dark:hover:bg-gray-700. Focus rings that are dark:ring-blue-400 ensure visibility on dark backgrounds. Disabled states with dark:opacity-40 maintain the same visual language. Stacking multiple variants (dark:hover:bg-gray-700, dark:focus:ring-blue-400) is fully supported by Tailwind and produces predictable, maintainable styles.

Example

<!-- Layered surface system in dark mode -->

<!-- Page background (layer 0) -->
<body class="bg-white dark:bg-gray-950">

  <!-- Section panel (layer 1) -->
  <section class="bg-gray-50 dark:bg-gray-900 py-12">

    <!-- Card (layer 2) -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm
                border border-gray-200 dark:border-gray-700 p-6">

      <!-- Input (layer 3 / interactive) -->
      <input
        class="w-full bg-gray-50 dark:bg-gray-700
               border border-gray-300 dark:border-gray-600
               text-gray-900 dark:text-gray-100
               placeholder-gray-400 dark:placeholder-gray-500
               rounded-lg px-3 py-2
               focus:outline-none focus:ring-2
               focus:ring-blue-500 dark:focus:ring-blue-400"
        placeholder="Enter text..."
      />

      <!-- Buttons -->
      <div class="flex gap-3 mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
                       text-white px-4 py-2 rounded-lg font-medium transition-colors">
          Primary
        </button>
        <button class="bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600
                       text-gray-700 dark:text-gray-200
                       border border-gray-300 dark:border-gray-600
                       px-4 py-2 rounded-lg font-medium transition-colors">
          Secondary
        </button>
      </div>
    </div>
  </section>
</body>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned