❮ Previous Next ❯

Dark Mode Basics

  • Understand the fundamentals of building dark mode themes in modern web design.

  • What is Dark Mode ?

    Dark Mode is a UI theme where:

    • Backgrounds are dark

    • Text and UI elements are light

    • Contrast is carefully balanced for readability

    Dark mode is not simply:

    • White → black

    • Black → white

    It is a separate visual system with its own rules.

    In Tailwind CSS, dark mode is handled using class-based styling, which gives developers full control.

    Why Dark Mode Matters in Modern UI

    Dark mode exists for real user needs, not trends.

    Benefits:

    • Reduces eye strain in low-light environments

    • Saves battery on OLED screens

    • Improves focus for long sessions

    • Gives users control over their experience

    Most modern products support dark mode:

    • Dashboards

    • Developer tools

    • Mobile apps

    • Operating systems

    If your UI ignores dark mode, it feels outdated.

  • Dark Mode is a Design System, Not a Toggle

    A common beginner mistake:

    “Just invert colors.”

    That creates:

    • Harsh contrast

    • Glowing text

    • Poor readability

    • Broken hierarchy

    Professional dark mode requires:

    • Softer dark backgrounds

    • Muted light text

    • Careful accent usage

    • Preserved hierarchy

    Dark mode should feel calm, not harsh.

    How Dark Mode Works in Tailwind

    Tailwind supports dark mode using the dark: variant.

    Two strategies exist:

    1. Media-based (system preference)

    2. Class-based (recommended)

    Tailwind officially recommends class-based dark mode for full control.

    Enabling Dark Mode in Tailwind (Concept)

    In tailwind.config.js:

    module.exports = {

      darkMode: 'class',

    }

    This means:

    • Dark mode activates when a dark class is present

    • Usually applied on <html> or <body>

Enabling Dark Mode (Class Strategy)

Activates Tailwind’s class-based dark mode, which applies dark styles when a dark class is present on the root element. 

<!-- js file -->
// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

<!-- Dark mode activated by adding the 'dark' class -->
<html class="dark">
  • Now dark:* utilities become active.

Light and Dark Mode Pairing

Applies different background and text colors for light and dark mode using the dark: variant. 

<!-- Light and dark mode styles -->
<div class="bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 p-6">
  Dark mode ready content
</div>

  • How this works:

    • Light mode → white background, dark text

    • Dark mode → dark background, light text

    This pairing approach is the foundation of dark mode.

    Choosing Correct Colors for Dark Mode

    Pure Black is a Mistake

    #000000 background → too harsh

    Preferred Dark Shades

    Use:

    • slate-900

    • gray-900

    • zinc-900

      These are:

      • Softer

      • Easier on eyes

      • More professional

    Preferred Dark Background Shades

    Uses softer dark shades for dark mode backgrounds to create a comfortable and professional visual experience. 

    <div class="bg-slate-100 dark:bg-slate-900">
</div>

    • Text Colors in Dark Mode

      In dark mode:

      • Pure white text is too bright

      • Slightly muted whites work better

    Dark Mode Text Color

    Uses muted text colors to maintain comfortable readability in both light and dark modes. 

    <p class="text-gray-700 dark:text-gray-300">
  Readable text in both modes
</p>

    • Rule:

      Dark mode text should be soft light, not glowing white.

      Accent Colors in Dark Mode

      Accent colors behave differently in dark mode.

    Accent Colors in Dark Mode

    Adjusts accent colors for dark mode to maintain visibility and balanced contrast. 

    <button class="bg-blue-600 dark:bg-blue-500 text-white px-4 py-2">
  Action
</button>

    • Why:

      • Dark backgrounds increase color intensity

      • Often need lighter shades in dark mode

      Never reuse exact same shade blindly.

    Dark Mode Background Hierarchy

    Uses layered background shades to maintain visual hierarchy in both light and dark modes. 

    <!-- Section background adapts to light and dark mode -->
<section class="bg-gray-50 dark:bg-slate-900 p-6">
  <!-- Card layer with separate background -->
  <div class="bg-white dark:bg-slate-800 p-4 rounded">
    Card content
  </div>
</section>

    • This creates:

      • Clear separation

      • Depth

      • Visual comfort

      Flat dark UIs feel lifeless.

    Dark Mode Borders and Dividers

    Uses lighter borders in light mode and softer darker borders in dark mode for subtle separation. 

    <div class="border border-gray-200 dark:border-slate-700">
  Content
</div>

    • Avoid:

      • Bright borders

      • High-contrast lines

      Dark mode prefers soft separation.

    Dark Mode Hover States

    Adjusts hover background colors for both light and dark modes to maintain clear interactive feedback. 

    <button class="bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600">
  Hover me
</button>

    • Always test:

      • Hover

      • Focus

      • Active

      • Disabled

      Dark mode often exposes missing states.

      Accessibility Considerations in Dark Mode

      Dark mode can hurt accessibility if done poorly.

      Avoid:

      • Low contrast gray-on-gray

      • Overusing opacity

      • Thin fonts on dark backgrounds

      Ensure:

      • Sufficient contrast

      • Readable font sizes

      • Clear focus outlines

      Dark mode must be as accessible as light mode.

      Common Dark Mode Mistakes

      • Using pure black backgrounds

      • Using pure white text

      • Forgetting borders & dividers

      • Ignoring hover/focus states

      • Reusing light mode colors blindly

      If dark mode feels “heavy” or “glowy”, it’s wrong.

      Professional Dark Mode Strategy

      Think in pairs:

      • Light background ↔ Dark background

      • Dark text ↔ Light text

      • Accent strong ↔ Accent softened

      Build dark mode alongside light mode, not after.

    ❮ Previous Next ❯