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

• Creating 3D CSS Buttons which Move as you Mouse Over
• The Interactive Guide to CSS Grid
• Parent Selection in CSS: how the CSS has selector works
• How to Make your text look crisp in CSS
• How to Create Animated Cards with WebGL and Three.js
• CSS Inset Borders at Varying Depths
• Creating Custom, Interactive CSS Checkboxes
• CSS Positioning
• iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters
• How to do Deletion Animations with CSS