- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Dark / Light Mode for Websites using CSS
By changing the text-color and background color of a page, we can add dark/light mode for our website.
Syntax
The following syntax can be used to apply dark mode.
Selector { color: white; background-color: black }
Example
<!DOCTYPE html> <html> <head> <style> div { font-size: 1.4em; text-align: center; } .dark { color: white; background-color: black; } </style> </head> <body> <div> <p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc. Aenean at nisl vulputate mi scelerisque commodo nec et mauris. Duis tincidunt auctor posuere.</p> <button id="btn" onclick="change()">Normal Mode</button> </div> <script> let btnText = document.getElementById("btn"); function change() { let btn = document.body; btn.classList.toggle("dark"); if (btnText.innerHTML === "Normal Mode") { btnText.innerHTML = "Dark Mode!"; } else { btnText.innerHTML = "Normal Mode"; }} </script> </body> </html>
This gives the following output
Example
<!DOCTYPE html> <html> <head> <style> div { font-size: 1.4em; text-align: center; } .dark { color: white; background-color: black; } </style> </head> <body> <div> <button id="btn" onclick="change()">Normal Mode</button> <p>Duis tincidunt auctor posuere.</p> <img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" /> </div> <script> let btnText = document.getElementById("btn"); function change() { let btn = document.body; btn.classList.toggle("dark"); if (btnText.innerHTML === "Normal Mode") { btnText.innerHTML = "Dark Mode!"; } else { btnText.innerHTML = "Normal Mode"; }} </script> </body> </html>
This gives the following output
Advertisements