Master Dark Mode Toggle with Pure CSS

Dark mode has become a popular feature that every one wants to have in their website. Whether its a blog, portfolio website users wants an option of both light and dark mode. We can make the dark mode toggle using only HTML and CSS no need of using JavaScript.

In this blog article we will learn step by step how to make the dark mode toggle by using CSS only.

So Let's get started.

Benefits of Dark Mode:

• less strain on eyes when we are working on low light

• Saves battery specially on OLED screens

• Design looks modern and clean

• Users get the option of customization

How Dark Mode Toggle Works Without JavaScript

• An Input Checkbox will be used for toggle

• When checkbox is :checked we will change the theme using CSS

• CSS variables (--color-name) will be used to change the values ​​dynamically

This method is best for beginners and is very effective on small websites or static pages.

Step-by-Step: Build the Dark Mode Toggle with HTML, CSS, and JavaScript

HTML Structure:

<div class="theme-toggle"> <input type="checkbox" id="toggle-dark" /> <label for="toggle-dark">Dark Mode</label> </div>
 
Welcome to My Website
 
This is an example of a custom only dark mode toggle.
 
 

Base CSS Styling:

:root { --bg-color: #ffffff; --text-color: #000000; --heading-color: #333333; }
body { margin: 0; padding: 20px; background-color: var(--bg-color); color: var(--text-color); font-family: Arial, sans-serif; transition: background 0.3s, color 0.3s; }

h1 { color: var(--heading-color); } 

Custom Toggle Switch Styling:

.theme-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
input[type="checkbox"] { appearance: none; width: 40px; height: 20px; background: #ccc; border-radius: 20px; position: relative; cursor: pointer; transition: background 0.3s; }

input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s; }

input[type="checkbox"]:checked { background: #333; }

input[type="checkbox"]:checked::before { transform: translateX(20px); } 

JavaScript to Handle Theme Toggle:

This script listens for changes to the checkbox and updates the CSS variables accordingly.

<script> const toggle = document.getElementById('toggle-dark');
toggle.addEventListener('change', () => { if (toggle.checked) { document.documentElement.style.setProperty('--bg-color', '#121212'); document.documentElement.style.setProperty('--text-color', '#f0f0f0'); document.documentElement.style.setProperty('--heading-color', '#ffffff'); } else { document.documentElement.style.setProperty('--bg-color', '#ffffff'); document.documentElement.style.setProperty('--text-color', '#000000'); document.documentElement.style.setProperty('--heading-color', '#333333'); } });  

Use Cases

This method is especially useful for:

• Static blogs

• Personal portfolios

• Landing pages

• Lightweight sites where JavaScript usage is minimal

imitations of CSS Only Approach

• User preference is not saved (e.g. dark mode will be turned off after reload)

• System preference is not detected (e.g. user already has dark mode on his system)

• Not ideal for complex UIs using JavaScript

• In large applications, a JavaScript toggle is better.

Frequently Asked Questions (FAQs)

1. How do I remember user preference after page reload?

   Answer: It will not work just by CSS only. For that you have to use JavaScript + Local Storage.

2. Can this be done with radio buttons instead of checkboxes?

   Answer: Maybe, but a checkbox is simpler and cleaner for a toggle. Radio buttons are mostly for multiple options.

3. Can I add an icon to the toggle?

   Answer: Of course. You can add icons inside labels - using ::before, ::after, save or font awesome.

Conclusion

Creating a dark mode toggle using just HTML and CSS is not only possible, but also quite useful especially when your focus is on performance and simplicity.

With smart use of CSS variables and checkboxes, you can build interactive features without JavaScript. This method is perfect for small sites, blog projects, and personal websites.

If you're a beginner or want to get a grip on CSS, this is a solid project idea. In the future, you can make it even more advanced by adding JavaScript if you want.