Share your repls and programming experiences

← Back to all posts
Easily change your website theme!!
codingjlu (166)

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:

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

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:

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.

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

Comments
hotnewtop
JWZ6 (644)

Yo try adding

html{
transition-duration: 1s;
}

codingjlu (166)

@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

JWZ6 (644)

Yes I know just if it’s non gradient that’ll be nice @codingjlu

JWZ6 (644)

Btw gave ya 100th updoot @codingjlu

codingjlu (166)

@JWZ6 yeah I did that at first but I though a gradient would be cooler.