CSS

Updating CSS Variables with Javascript

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");

More Tips and Tricks for CSS

• How to make a div the same height as the browser window
• What are Variable Fonts in CSS, and How to Use Them
• An Interactive Guide to CSS Flex Box
• How to vertically center text and HTML elements with CSS
• A Guide to CSS Selectors
• CSS Animations
• Sticky Positioning with CSS
• How to make a child element appear behind its parent in CSS
• A Complete Guide to How the CSS not Selector Works
• Multi colored text in CSS