How to switch dark and light themes using pure CSS?

April 1, 2021

There are multiple ways to switch dark and light themes — mostly using scripts and few of them using CSS. Let me show you one quick and easy way to switch themes.

The idea is to get the value of use click. We can easily do that using a script but there’s a straightforward way to do the same using CSS too.

We can use checkbox and get the “values” when use clicks on it — we are not actually getting the values like we do using jQuery or JavaScript. CSS has away to check if the checkbox is checked or not using :checked selector.

We are not going to show the input element — it will be hidden. The label will be visible and when the user clicks on the label texts, the input will be updated and we will get what we want.

Let’s add some basic styles and make the container of hull height.

Finally, change the background and color on click (when the checkbox is checked)

To show user which mode is ON, we can add the ON and OFF after the label texts. Just like this:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to get the full URL of current page in PHP?PHPCSS backface-visibility PropertyCSS3 Common Usability Mistakes In Web DesignUI/UXMake sure your links have descriptive textUI/UXHow to Install PHP composer in Mac OS Catalina?PHPWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscHow to make a UILabel clickable in Swift 5?SwiftHow to link/add CSS file to HTML Document?CSSLearn to make a responsive gallery using CSS Grid and without media queriesCSSJavaScript Number MethodsJavaScriptWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryHow to insert Bootstrap 4 in Angular 9 app?Angular