This content originally appeared on Level Up Coding - Medium and was authored by Stephan Romhart
Code a cookie-based darkmode switch in CSS and vanilla JavaScript
In this article, I will show you how to easily program a darkmode switch in 52 lines of JavaScript.
The HTML
For this darkmode demo, I need a simple HTML file. In the head section, I include the CSS file styles.css and two JavaScript files darkmode.js and project.js.
Meta charset, meta viewport, and title are just mentioned for completing a minimal head section.
The darkmode button is located inside the <header> element on line 13.
The CSS
In the stylesheet, I define the body in its light and dark state. Also I set the design for darkmode button in lightmode und darkmode (classname active) status.
The shown CSS is as rudimentary as can be.
The project.js file
This file I use to initialize the darkmode with the later-described function darkmode_init() in the DOMContentLoaded event.
The darkmode.js file
In this example, I use a function to wrap the complete darkmode behavior. Here is the full script. Next, I explain the script in four simple steps.
Step 1: Reference the button
First I grab the switch from the DOM.
Step 2: Establish cookie functionality
The darkmodeCookie object contains three methods:
- set to set the darkmode cookie
- get to read if the darkmode cookie exists
- remove to delete the darkmode cookie
Steph 3: CSS class handling
With the method get of the darkmodeCookie object, I check if the darkmode cookie exists. If it does, I add an active class to the switch and add a darkmode class to the body.
Step 4: Switch handling
This part of the script adds an event listener to the switch to toggle the classes for itself and the body.
In line 6 I check if the body has a darkmode class after the toggeling in line 4. If it has I set the darkmode cookie, in this example expirering in one month (2,628,000,000 milli seconds). The last parameter of darmodeCookie.set() in line 8 must be set to true if the page is SSL encrypted. For local testing, just set it to false. The second parameter is the value, I use just true as a string.
If the cookie has to be removed, because the body contains no darkmode class, I use darkmodeCookie.remove() to delete the darkmode cookie.
Conclusion
With these simple steps, you can make your website more user-friendly with a darkmode switch extension. For more flexibility and control, I would set the body darkmode class with PHP rather than JavaScript.
Working example
https://www.stephan-romhart.de/medium.com/darkmode-switch-vanilla-js/
Thanks for reading.
I look forward to your feedback. 😍
Please comment, bookmark or follow me to support my channel.
If you want me to write a second article about to implement the darkmode in wordpress or xenforo, let me know!
If you have a specific topic in mind, you would want me to write about, let me know on Twitter: https://www.twitter.com/@stephan_romhart
Code a cookie based darkmode switch in CSS and Vanilla JavaScript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Stephan Romhart
Stephan Romhart | Sciencx (2021-11-24T21:53:56+00:00) Code a cookie based darkmode switch in CSS and Vanilla JavaScript. Retrieved from https://www.scien.cx/2021/11/24/code-a-cookie-based-darkmode-switch-in-css-and-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.