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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Sorting Object Arrays in JavaScriptJavaScriptHow to Recognize an Array in JavaScript?JavaScriptHow to scroll contents of HTML body horizontally and vertically using JavaScript?JavaScriptSolution for “Yarn build: Failed because of a stylelint error”WordPressHow to use $IF operator in Envision Basic?Envision BasicMySQL queries to get data rows from previous month as well as from last 30 daysSQL/MySQLSome Useful Operators in The SQL WHERE ClauseSQL/MySQLWhat’s Interpolation in SCSS (Sass)?SCSSHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLURL paths in DrupalDrupalHow to Use ROLLUP Operator in SQL and MySQL?SQL/MySQLJavaScript String fromCharCode() MethodJavaScript