CSS  

How to Build Dark Mode Using CSS Only

Below is a complete, SEO-friendly, developer-focused blog on “How to Build Dark Mode Using CSS Only” with real-time examples, code, diagrams, and best practices.

Dark Mode has become a standard feature in modern websites and applications. It reduces eye strain, saves battery on OLED screens, and gives a premium feel to UI.
The best part? You can build Dark Mode using CSS only — no JavaScript required.

In this blog, you’ll learn:

1.What is Dark Mode in CSS
2.How prefers-color-scheme works
3.How to create manual Dark Mode using CSS variables
4.Real-time example: Dark/Light mode toggle
5.Advanced dark mode tips for 2025

1. What Is Dark Mode in CSS?

Dark mode simply means using a dark background + light text to reduce brightness.
In CSS, dark mode can be implemented using:

System-based dark mode

Browser auto-detects user OS mode.

Manual dark mode

User switches between light/dark themes.

Both can be achieved without JavaScript, using CSS variables and selectors.

2. Method 1 — Auto Dark Mode Using prefers-color-scheme

Modern browsers support the prefers-color-scheme media query.

Real-Time Example: Auto Dark Mode CSS

/* Default (Light Mode) */
body {
  background: white;
  color: black;
}

/* Dark Mode (User OS Setting) */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #ffffff;
  }
}

1. If your OS is dark
2. The website will automatically load dark mode
3.No JS needed

Best for: Blogs, corporate websites, dashboards

3. Method 2 — Manual Dark Mode Using CSS Variables (Recommended)

CSS Variables make theme switching simple.

Step 1: Declare Light Mode Variables

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --card-color: #f4f4f4;
}

Step 2: Create Dark Mode Variables

When a class .dark-mode is added to <body>, colors change.

body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
  --card-color: #1e1e1e;
}

Step 3: Apply Variables to UI

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: Arial;
}

.card {
  background: var(--card-color);
  padding: 20px;
  border-radius: 10px;
}

4. Real-Time Example: Manual Dark Mode Toggle (CSS Only)

Yes, you can toggle dark mode only with CSS using the checkbox hack.

HTML Example

<label class="switch">
  <input type="checkbox" id="toggle-theme">
  <span class="slider"></span>
</label>

<div class="card">
  <h2>Dark Mode Example</h2>
  <p>This card changes color based on the selected theme.</p>
</div>

CSS Example (Pure CSS Toggle)

/* Theme Variables */
:root {
  --bg: #ffffff;
  --text: #000;
  --card: #f0f0f0;
}

#toggle-theme:checked ~ .card,
#toggle-theme:checked ~ body {
  --bg: #121212;
  --text: #fff;
  --card: #1e1e1e;
}

/* Apply to body */
body {
  background: var(--bg);
  color: var(--text);
}

/* Card */
.card {
  background: var(--card);
  padding: 20px;
  margin: 20px;
  border-radius: 12px;
}

/* Toggle Switch Design */
.switch {
  position: fixed;
  top: 20px;
  right: 20px;
}

.switch input {
  display: none;
}

.slider {
  width: 50px;
  height: 25px;
  background: #ccc;
  border-radius: 30px;
  display: inline-block;
  position: relative;
}

.slider::before {
  content: "";
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 1.5px;
  transition: .3s;
}

input:checked + .slider::before {
  transform: translateX(24px);
}

1.No JavaScript
2.CSS-only toggle using checkbox
3.Smooth transition
4.Works in all modern browsers

5. Advanced Dark Mode UI Techniques (2025)

1. Smooth Transition Animation

* {
  transition: background 0.3s ease, color 0.3s ease;
}

2. Auto + Manual Dark Mode Hybrid

Combine both:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #ffffff;
  }
}

User can still override manually.

3. Use CSS color-scheme Property

:root {
  color-scheme: light dark;
}

Makes scrollbars, forms and inputs match theme automatically.

4. Enable Dark Mode for Images

Use filters:

.dark-mode img {
  filter: brightness(0.8);
}

5. Store Dark Mode Preference (No JS Needed)

With CSS only?
Possible using “prefers-color-scheme” + checkbox fallback.

Real-Time Use Cases

1. Blogs & News Websites

Auto detect dark mode for readers.

2. E-commerce Product Pages

Dark mode increases night browsing retention.

3. Admin Dashboards

Dark UI is visually comfortable for long working hours.

4. Educational Platforms

Students prefer low-light reading mode.

Conclusion

Implementing dark mode using CSS only is fast, lightweight, and browser-friendly.
Using CSS variables gives you:

1. Cleaner code
2. Easy theme switching
3. Smooth transitions
4. Advanced UI flexibility

Whether you choose auto, manual, or hybrid dark mode, your UI becomes more modern, professional, and user-friendly.

Membership not found