Easily change your website theme!!

I wrote this super small library to help you with themes on your website!! It has no dependencies on any other library/framework. It's pure JavaScript.

Here's how to do it:
1. Write CSS for what you want to change in another theme. It's super easy on any element:

To activate a theme, simply call the JavaScript function with whatever follows 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:

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.

I hope you like it!

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 :)

You are viewing a single comment. View All

@JWZ6 that I know of, background-image (gradients) are not animatable nor transitionable. I've tried. See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties