Skip to content
Sign upLog in
← Back to Community

Easily change your website theme!!

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

Voters
Profile icon
Cu3t0m
Profile icon
JWZ6
Profile icon
Dunce
Profile icon
codingjlu
Comments
hotnewtop
Profile icon
JWZ6

Yo try adding

html{
transition-duration: 1s;
}

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

Profile icon
JWZ6

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

@codingjlu

Profile icon
JWZ6

Btw gave ya 100th updoot

@codingjlu

Profile icon
codingjlu

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

Profile icon
JWZ6

@codingjlu
k