🌓 Module 5: Dark Mode

Built-in Dark Mode with Bootstrap 5.3

Bootstrap 5.3 data-bs-theme No Extra CSS

How It Works

Bootstrap 5.3 uses the data-bs-theme attribute to control the theme:

<!-- Light mode (default) -->
<html lang="en" data-bs-theme="light">

<!-- Dark mode -->
<html lang="en" data-bs-theme="dark">

<!-- Auto (follows OS preference) -->
<html lang="en" data-bs-theme="auto">

JavaScript Toggle

function toggleTheme() {
  const html = document.documentElement;
  const current = html.getAttribute('data-bs-theme');
  const newTheme = current === 'dark' ? 'light' : 'dark';
  
  html.setAttribute('data-bs-theme', newTheme);
  
  // Save to localStorage
  localStorage.setItem('theme', newTheme);
}

✅ Advantages

  • Zero extra CSS - works out of the box
  • All components adapt automatically
  • Consistent design across your site
  • Easy to implement - one attribute
  • Persistent - save with localStorage
  • Respects user choice - manual or auto

💡 Best Practices

  • Provide manual toggle button
  • Save user preference to localStorage
  • Can detect OS preference with matchMedia
  • Test all components in both modes
  • Ensure custom CSS adapts too
  • Use CSS variables for custom colors

Bootstrap Components Adapt Automatically

Click the theme toggle button (top right) to see all these components change instantly:

Buttons

Cards

Standard Card

Automatically adapts to dark mode

Button
Bordered Card

Border colors adapt too

Button
Colored Card

Theme colors adjust

Button

Forms

Alerts

Badges & Lists

Primary Secondary Success Danger Warning Info
  • Standard list item
  • Active list item
  • Another list item

Bootstrap 5.3 Dark Mode: Complete Implementation

Step 1: Set initial theme on HTML element

<!-- In your HTML file -->
<html lang="en" data-bs-theme="light">

Step 2: Create a toggle button

<button class="btn btn-primary" onclick="toggleTheme()">
  <i class="bi bi-moon-stars-fill" id="theme-icon"></i>
</button>

Step 3: JavaScript to toggle theme

function toggleTheme() {
  // 1. Get current theme
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-bs-theme');
  
  // 2. Switch between dark and light
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  // 3. Apply new theme (ALL Bootstrap components update instantly!)
  html.setAttribute('data-bs-theme', newTheme);
  
  // 4. Save to localStorage so it persists
  localStorage.setItem('theme', newTheme);
  
  // 5. Update button icon
  updateThemeIcon(newTheme);
}

Step 4: Load saved theme on page load

window.addEventListener('DOMContentLoaded', () => {
  // Get saved theme from localStorage
  const savedTheme = localStorage.getItem('theme');
  
  if (savedTheme) {
    // Apply saved theme
    document.documentElement.setAttribute('data-bs-theme', savedTheme);
    updateThemeIcon(savedTheme);
  } else {
    // Optional: Detect OS preference for first visit
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    if (prefersDark.matches) {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
      updateThemeIcon('dark');
    }
  }
});

Step 5: Update icon helper function

function updateThemeIcon(theme) {
  const icon = document.getElementById('theme-icon');
  if (theme === 'dark') {
    icon.className = 'bi bi-sun-fill'; // Show sun in dark mode
  } else {
    icon.className = 'bi bi-moon-stars-fill'; // Show moon in light mode
  }
}

What Makes Bootstrap's Method Special

  • Zero extra CSS: All Bootstrap components adapt automatically
  • One line changes everything: data-bs-theme="dark"
  • Consistent colors: Uses Bootstrap's color system
  • Easy to customize: Override CSS custom properties if needed
  • Can apply to sections: Different themes on different parts of the page
  • Future-proof: Bootstrap handles all compatibility