Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

7. Dark Mode: Dual-Theme Styling

Lesson 7 of 10 in the free Tailwind CSS: Zero to Production notes on Siksha Sarovar, written by Rohit Jangra.

Design for both themes

Modern websites are expected to support both Light and Dark themes. Tailwind makes this extremely simple by providing the dark: state modifier.

By default, any dark:class-name you write will apply only when dark mode is active in the user's browser or application container.

<div class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 p-6 rounded-xl">
  <h3 class="font-bold">Dark Mode Support</h3>
  <p class="text-slate-500 dark:text-slate-400">This text adjusts its color based on the theme.</p>
</div>

The Two Strategies

Tailwind supports two ways of toggling dark mode:

1. Media Query Strategy (Default)

It automatically follows the system settings of the user's operating system. If they have dark mode enabled on Windows/macOS, dark: classes are active. No configuration is needed.

2. Class Strategy (Manual toggling)

If you want users to toggle dark mode manually with a button (saving their preference in localStorage), configure Tailwind to use a CSS class (usually dark) on the root HTML element.

In tailwind.config.js:

module.exports = {
  darkMode: 'selector', // or 'class' in older Tailwind versions
  // ...
}

Now, whenever <html class="dark"> is present, dark mode classes will be active.

Color Pairing Best Practices

To make dark mode look high-quality, don't just use pure black (#000). Use deep charcoal or navy hues. Here are standard pairs:

LayerLight Mode classDark Mode class
Screen Pagebg-slate-50bg-slate-950
Primary Cardbg-whitebg-slate-900
Bordersborder-slate-200border-slate-800
Primary Texttext-slate-900text-slate-100
Secondary Texttext-slate-500text-slate-400
Hover stateshover:bg-slate-100hover:bg-slate-800

Practice task

In the editor below:

  1. Make the outer container support dark mode: change background to dark:bg-slate-955 (which has a minor typo). Make it dark:bg-slate-950.
  2. Make the inner card support dark mode: background dark:bg-slate-900 and border dark:border-slate-800.
  3. Fix the text colors for dark mode: heading to dark:text-white, description to dark:text-slate-400, and secondary text to dark:text-slate-500.