Dark mode is becoming increasingly popular among users for its aesthetic appeal and reduced eye strain. In this blog post, we\u2019ll explore how to implement a toggle switch for dark mode on your website using CSS and JavaScript.<\/p>\n
First, we need to create a simple HTML structure. This will include a toggle button for switching between light and dark modes.<\/p>\n
\r\n\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n<meta charset="UTF-8">\r\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n<title>Dark Mode Toggle<\/title>\r\n<link rel="stylesheet" href="styles.css">\r\n<\/head>\r\n<body>\r\n<div class="container">\r\n<h1>Toggle Dark Mode Example<\/h1>\r\n<label class="switch">\r\n<input type="checkbox" id="toggle">\r\n<span class="slider"><\/span>\r\n<\/label>\r\n<\/div>\r\n\r\n<script src="script.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nExplanation:<\/strong>
\n– We created a container with a heading and a label element that contains an input checkbox.
\n– The checkbox will act as our toggle switch for switching between light and dark modes.<\/p>\nStep 2: Adding CSS Styles<\/h3>\n
Now, let\u2019s style our page and create the dark mode styles. We\u2019ll also style the toggle switch.<\/p>\n
\r\n\r\n\/* styles.css *\/\r\n\r\nbody {\r\nmargin: 0;\r\nfont-family: Arial, sans-serif;\r\ntransition: background-color 0.3s, color 0.3s;\r\n}\r\n\r\n.container {\r\ntext-align: center;\r\npadding: 50px;\r\n}\r\n\r\n.switch {\r\nposition: relative;\r\ndisplay: inline-block;\r\nwidth: 60px;\r\nheight: 34px;\r\n}\r\n\r\n.switch input {\r\nopacity: 0;\r\nwidth: 0;\r\nheight: 0;\r\n}\r\n\r\n.slider {\r\nposition: absolute;\r\ncursor: pointer;\r\ntop: 0;\r\nleft: 0;\r\nright: 0;\r\nbottom: 0;\r\nbackground-color: #ccc;\r\ntransition: .4s;\r\nborder-radius: 34px;\r\n}\r\n\r\n.slider:before {\r\nposition: absolute;\r\ncontent: "";\r\nheight: 26px;\r\nwidth: 26px;\r\nleft: 4px;\r\nbottom: 4px;\r\nbackground-color: white;\r\ntransition: .4s;\r\nborder-radius: 50%;\r\n}\r\n\r\ninput:checked + .slider {\r\nbackground-color: #66bb6a;\r\n}\r\n\r\ninput:checked + .slider:before {\r\ntransform: translateX(26px);\r\n}\r\n\r\n\/* Dark Mode Styles *\/\r\nbody.dark-mode {\r\nbackground-color: #121212;\r\ncolor: #ffffff;\r\n}\r\n<\/pre>\nExplanation:<\/strong>
\n– The `body` styles include a smooth transition for background color and text color.
\n– We created a toggle switch using CSS with a slider effect. The `.slider` class represents the visual part of the toggle.
\n– When the checkbox is checked, the background color of the slider changes, and the toggle moves to the right.
\n– The `.dark-mode` class changes the background color and text color when dark mode is enabled.<\/p>\nStep 3: Implementing JavaScript for Toggle Functionality<\/h3>\n
Now, let\u2019s add the JavaScript that will handle the toggle functionality.<\/p>\n
\r\n\r\n\/\/ script.js\r\n\r\nconst toggle = document.getElementById('toggle');\r\n\r\ntoggle.addEventListener('change', () => {\r\ndocument.body.classList.toggle('dark-mode');\r\n});\r\n<\/pre>\nExplanation:<\/strong>
\n– We select the toggle checkbox using `document.getElementById`.
\n– We add an event listener for the `change` event. When the checkbox is toggled, we toggle the `dark-mode` class on the `body` element.<\/p>\nStep 4: Testing the Dark Mode Toggle<\/h3>\n
Now that we have completed the HTML, CSS, and JavaScript, it\u2019s time to test our dark mode toggle. Open your HTML file in a web browser, and you should see a toggle switch. When you click it, the website should switch between light and dark modes smoothly.<\/p>\n
Step 5: Optional – Saving User Preference<\/h3>\n
To enhance the user experience, you might want to save the user’s preference for dark mode in `localStorage`. This way, the selected mode will persist even after the page is refreshed.<\/p>\n
Update your JavaScript as follows:<\/p>\n
\r\n\r\n\/\/ script.js\r\n\r\nconst toggle = document.getElementById('toggle');\r\n\r\n\/\/ Check for saved user preference in localStorage\r\nif (localStorage.getItem('dark-mode') === 'enabled') {\r\ndocument.body.classList.add('dark-mode');\r\ntoggle.checked = true; \/\/ Set the toggle to checked\r\n}\r\n\r\n\/\/ Toggle dark mode and save preference\r\ntoggle.addEventListener('change', () => {\r\ndocument.body.classList.toggle('dark-mode');\r\n\r\n\/\/ Save the user's preference\r\nif (document.body.classList.contains('dark-mode')) {\r\nlocalStorage.setItem('dark-mode', 'enabled');\r\n} else {\r\nlocalStorage.removeItem('dark-mode');\r\n}\r\n});\r\n<\/pre>\nExplanation:<\/strong>
\n– We check if the user has previously enabled dark mode by retrieving the value from `localStorage`.
\n– If dark mode is enabled, we add the `dark-mode` class to the body and check the toggle.
\n– When the toggle is switched, we save the user’s preference in localStorage.<\/p>\nConclusion<\/strong><\/p>\n
Congratulations! You have successfully implemented a toggle for dark mode on your website using CSS and JavaScript. This feature not only enhances the user experience but also allows users to customize their browsing environment. Feel free to expand upon this basic implementation by adding more styles or functionalities!<\/p>\n
Now you can share this dark mode feature in your projects and make your websites more user-friendly. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"