Home›Tailwind CSS in 5 Days›Day 4
Day 4 of 5
⏱ ~60 minutes
Tailwind CSS in 5 Days — Day 4

Dark Mode and Custom Themes

Tailwind has first-class support for dark mode and a powerful theme customization system. This lesson covers the dark: variant, extending the default theme, and creating a custom design system.

Dark Mode

tailwind.config.js
export default {
  darkMode: 'class',  // 'media' uses OS preference, 'class' uses a CSS class
  // ...
}
HTML


  
    
Heading

    
Body text

    

      Card content
    

  


  Finished this lesson?
Toggle dark mode with JS
const html = document.documentElement;
const toggle = document.getElementById('toggle');
toggle.addEventListener('click', () => {
  html.classList.toggle('dark');
  localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
});

// On page load, restore preference
if (localStorage.theme === 'dark') html.classList.add('dark');

Customizing the Theme

tailwind.config.js
export default {
  theme: {
    // 'extend' adds to defaults; removing 'extend' REPLACES defaults
    extend: {
      colors: {
        brand: {
          50:  '#fef9f0',
          100: '#fdf0d9',
          500: '#c4873e',   // your primary color
          600: '#b07635',
          900: '#4a2e12',
        }
      },
      fontFamily: {
        sans: ['DM Sans', 'sans-serif'],
        serif: ['DM Serif Display', 'serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'glow': '0 0 40px rgba(196, 135, 62, 0.15)',
      }
    }
  }
}
ℹ️
Custom colors defined in theme.extend.colors generate the full set of utilities automatically: bg-brand-500, text-brand-600, border-brand-100, etc.
📝 Day 4 Exercise
Build a Dark Mode Site
  1. Add darkMode: 'class' to your config and define custom brand colors.
  2. Build a page with a toggle button. Clicking it adds/removes dark from <html> and saves to localStorage.
  3. Build a card that looks good in both light and dark modes.
  4. Add your brand colors to the theme. Build a hero section using them.
  5. Add a custom font to the theme and apply it to headings.

Day 4 Summary

  • darkMode: 'class' toggles dark mode by adding the dark class to <html>.
  • dark:bg-gray-900 dark:text-white — prefix any utility with dark: for dark styles.
  • theme.extend adds to defaults. Without extend, you replace Tailwind's defaults entirely.
  • Custom colors in theme.extend.colors auto-generate all color utilities (50–950 scale).
→
← Previous
Day 3: Components and Reuse
Next →
Day 5: Production Optimization
→