Share your repls and programming experiences

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

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

Voters
Cu3t0m
JWZ6
Dunce
codingjlu
Comments
hotnewtop
JWZ6

Yo try adding

html{
transition-duration: 1s;
}

codingjlu

@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

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

JWZ6

Btw gave ya 100th updoot @codingjlu

codingjlu

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

JWZ6