Easily change your website theme!!
Here's how to do it:
- Write CSS for what you want to change in another theme. It's super easy on any element:
<p data-mode-orange="color:orange;font-size:1.5rem;" data-mode-blue="color:blue;font-size:10rem;">Obviously you don't set text to 10rem lol</p>
data-mode- as the argument. So for example, if we want to change to dark mode, we can write the inline CSS for whatever elements should be changed, and put it all in the
data-mode-yourModeName HTML attribute. Let's call the function:
easyTheme('dark'); // If our attribute is data-mode-dark
This function will activate all the CSS you wrote for an attribute.
I will improve this sometime later. Please let me know if this can have any improvements or if it has bugs.
Here's a super simple demo:
P.S. I'm proud to say that I designed the buttons by myself (besides having a little help from w3schools (who doesn't (only programmers will nest this many parentheses (right? (yes!! (oops that's a bit too much (right? (yep xD)))))))). Here's my original codepen if you like it: https://codepen.io/codingjlu/pen/gOmPKyv
ANNNND I also took special care to make this responsive :)