Yogesh Chauhan's Blog

How to switch dark and light themes using pure CSS?

in CSS on 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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to import MySQL small sample database into phpMySQL?SQL/MySQLSome EASY-to-Understand CSS media query examplesCSSUseful (and probably ignored) HTML tags: Part 2HTMLCasting in PostgreSQLPostgresPHP Variables ScopePHPUse inline if to make a shorter conditional syntax in ReactReactIs there a CSS parent selector?CSSHow to switch dark and light themes using pure CSS?CSSWhat Does Host-Based Intrusion Detection System (HIDS) Mean and What Are Some Advantages Over NIDS?MiscellaneousRevisiting variable scope in JavaScriptJavaScriptHow to check if the page is single post page in WordPress?WordPressHow to add before after image effect using pure CSS?CSS