CSS
Updating CSS Variables with Javascript
📣 Sponsor
If you are building an application or SaaS platform, or in fact any website, it can be useful to store all your colours as CSS variables, and then update these once to change the theme of the app.
Fortunately this is relatively straightforward to accomplish. Imagine you have your CSS variables set up like this:
:root {
--main-background: blue;
--main-sidebar: red;
/* Yes these colors do not match */
}
:root
CSS styles are stored on document.documentElement
. So we can access all of its styles via that. So in JS, all we need to do is this:
document.documentElement.style.setProperty("--main-background", "yellow");
Last Updated 1609074689603
More Tips and Tricks for CSS
- CSS Fonts
- How to vertically center text and HTML elements with CSS
- How to disable text selection in CSS
- Parent Selection in CSS: how the CSS has selector works
- Centering Elements in CSS with Tailwind
- CSS Only Masonry Layouts with Grid
- CSS Pseudo Elements
- Stripe-Like Smooth Transition CSS Only Menu
- The Interactive Guide to CSS Grid
- Creating 3D CSS Buttons which Move as you Mouse Over