Dynamic Themes Using CSS Variables

CSS Variables, officially designated Custom Properties, can let you create dynamic themes of your website. They are supported in all current browsers.

Adding them is simple:

• In a css file just add a :root element.
• In your :root element define your variables with a prefix --.
• Variables can be used as values anywhere within your css var("--variable-name").
• In Javascript use document.documentElement.style.setProperty('--variable-name', value) to change the variable value.

Use the floating box to theme this page.

Look at the repo of this page to see an example of how to add them to your page.