Class-Based Dark Mode Setup with System Preference Support0%
Class-Based Dark Mode Setup with System Preference Support
Beginner12 min read•Updated: Jul 11, 2026
Class-Based Dark Mode Setup with System Preference Support
Modern digital products demand high-contrast Dark Mode support for reduced eye strain and enhanced battery life. Tailwind CSS provides native support for dark themes using either the media strategy (automatic OS detection) or the class strategy (manual user toggle stored in localStorage).
1. Configuring Dark Mode in tailwind.config.js
For manual user toggles, configure the selector (or class) strategy:
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class', // Enables class-based dark mode (targets .dark on <html>)
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
2. Using the dark: Modifier
Prefix any utility class with dark: to define its appearance when dark mode is active:
HTML
<!-- Card with Dark Mode Variants -->
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-2xl shadow-sm">
<h2 class="text-slate-900 dark:text-white font-bold text-xl">
Full-Stack Web Development
</h2>
<p class="text-slate-600 dark:text-slate-400 mt-2 text-sm leading-relaxed">
Learn Node.js, Express, MongoDB, and Next.js in our Shikohabad coding lab.
</p>
<button class="mt-4 px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600">
View Syllabus
</button>
</div>
3. Implementing the Theme Toggle in React / Next.js
TSX
import { useEffect, useState } from 'react';
export default function ThemeToggle() {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
// Check initial preference from localStorage or OS
const isDark = localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
setDarkMode(isDark);
document.documentElement.classList.toggle('dark', isDark);
}, []);
const toggleTheme = () => {
const nextMode = !darkMode;
setDarkMode(nextMode);
document.documentElement.classList.toggle('dark', nextMode);
localStorage.theme = nextMode ? 'dark' : 'light';
};
return (
<button onClick={toggleTheme} class="p-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200">
{darkMode ? '🌙 Dark' : '☀️ Light'}
</button>
);
}
Interactive Quiz
Multiple Choice Questions
Question 1
When
darkMode: 'class' is configured in tailwind.config.js, how does Tailwind activate dark styles?Question 2
What happens if
darkMode: 'media' is selected instead of 'class'?Question 3
Which class combination creates a card with a white background in light mode and dark slate background in dark mode?
Question 4
Why should theme preferences be stored in
localStorage?Question 5
How does Tailwind prevent flash of incorrect theme (FOUC) on initial page load?
Next Lesson
Transitions, Smooth Transforms, Scale & Custom Keyframe Animations
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.