John Mirage• 1,610
@john-mirage
Posted
Hello,
Yes i think there is a better way:
1 Define the themes colors with css custom properties (always use the same property names in each theme) on your root element (html). You can use classes or data attributes.
:root.theme-1 {
--color-bg: #fff;
}
:root.theme-2 {
--color-bg: #aaa;
}
:root.theme-3 {
--color-bg: #bbb;
}
2 Define the colors on your elements:
.header {
background-color: var(--color-bg);
}
3 Define the default theme on the html element. (you dont have to use javascript for the default theme, you can simply add a class on the html element <html class="theme-1">)
document.documentElement.classList.add("theme-1");
4 When the user change the theme, simply replace the old theme with the new one.
document.documentElement.classList.replace("theme-1", "theme-2");
Marked as helpful
1
