allows simple css theme (e.g. dark mode, light mode, contrast, ...) management via vanilla-js
it basically allows you to set css variables easily, but to also change them in runtime.
For instance:
<script>
window.setTheme("light")
</script>
<style>
body {
background: var(--neutral);
}
</style>
Now the background of the body should be #d4d4d4 (as defined in themes.json).
but after running window.setTheme("dark");
the background should almost instantly turn into #374148 (as defined in themes.json).
works out of the box in vue and nuxt (else it might require slight modifications) code is meant for client side only (no SSR (Server-Side Rendering)!)
main code, needs to be imported once
<script src="theme.client.js"></script>
You can call getThemes()
and setTheme(themeName)
from any client js code.
You might need to reference the window object: window.getThemes()
or window.setTheme(themeName)
All themes must be predefined here. Themes.json already has some predefined themes in this repository, but you can also just replace them with your own