This content originally appeared on DEV Community 👩💻👨💻 and was authored by O.T.A
This week’s challenge was to incorporate color change into a project. I am going, to be honest, I wasn’t going to follow all the challenges, especially with this one because I have no idea how to get things to change color in code. Eventually, I decided to just add a dark/ light mode to my website.
Let’s get right into the concept.
Concept
Here’s what I want to do: Have a button that once clicked will change the theme or my entire website from night mode to light mode and vice versa.
Here's How I did it
I created 2 versions of my style.css file, one with all the dark color schemes and light schemes. Hook up a button, toggle, checkmark, or whatever you find is best for you, and create a function for that button to be hooked up to in JS.
#html, I am so used to python comments :|
<button onclick="Theme()">theme</button>
#Js
function Theme(){
}
So, what is in this function?
Well, glad you asked. Essentially, you want a if statement to check for what your current .css file is, by getting the href of the link tag ( <link rel="stylesheet" href="light.css"> )
function Theme(){
if (theme.getAttribute('href') == 'light.css') {
theme.setAttribute('href', 'dark.css');
} else {
theme.setAttribute('href', 'light.css');
}
}
And there you go you can switch the theme … of only the html file you are currently on. If you have multiple pages, that theme doesn’t carry over to the rest of those pages. The only way to solve this is through some sort of saving system.
Saving
There are a few ways of saving in JS, but I decided to do use Local Storage, mainly for learning reasons ( and hosting sounds just wasteful ).
For those who don’t know Local Storage is a way to save storage, well, locally on your machine.
With localStorage there is a method called .setItem that, well you get it now, and it has 2 attributes both string values: localStorage.setItem("key","value") in all, the key is used to tell what attribute you want to change, sort of like a variable and the value is what the attribute is. So, for this, the key will be the theme and the value will be the .css files.
function Theme(){
if (theme.getAttribute('href') == 'light.css') {
theme.setAttribute('href', 'dark.css');
localStorage.setItem("theme","dark.css")
} else {
theme.setAttribute('href', 'light.css');
localStorage.setItem("theme","light.css")
}
}
Now, if you change the theme and switch pages the theme didn’t save. But, actually, it did save, if you use the hotkeys SHIFT CTRL I and click the applications button, you will see that your theme was saved to the local storage.
And, yeah, that didn’t fix the problem. We still have to tell the website to use that theme for the rest of the pages. So we need to get a way to set the theme set, onload: <body onload="set()">. Then we need to do the same thing we did with the Theme() function, just this time we need to get the theme key and to prevent errors check to make sure your localStorage isn’t a null value.
function set(){
b = localStorage.getItem("theme")
console.log(b)
if (b == null){
theme.setAttribute('href', "light.css");
} else {
console.log(localStorage.getItem("theme"))
theme.setAttribute('href', b);
}
}
And there you go, you know have a functional dark/light theme.
Remarks
I could have posted all this code plainly and been done with this blog, and have people copy and paste, but people can’t learn from that and I can’t learn from that, so here we are. Anyways, somehow I have 500 views already, I don’t know how that happened ( that’s already 1/4 of what I did on hashnode for a year! ). Sometimes I wished that I started here first, but It was much better to do everything on hashnode, because of its smaller audience and to test the waters when it comes to technical blogging. Thank you all for your support, I will try to do these every Saturday ( but I might only do 40 weeks, whatever my schedule has to offer )
This content originally appeared on DEV Community 👩💻👨💻 and was authored by O.T.A
O.T.A | Sciencx (2023-01-07T14:00:00+00:00) A simple Light/Dark theme toggle | 52 weeks of code. Retrieved from https://www.scien.cx/2023/01/07/a-simple-light-dark-theme-toggle-52-weeks-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.