[CSS3] Create Dynamic Styles with CSS Variables

In this lesson we are going to use CSS variables to keep our application's colors consistent. This includes defining the variables inside our the pseudo class :root and using the var function within our classes.

We finish up the lesson using JavaScript to log and modify our defined CSS variables.

 

Define a css variable:

:root {
   --main: red; /*Define a css variable*/
}

.title {
  color: var(--main, white); /*Use main color as default, if not defined, then fallback to white color*/
}

 

Access css variable by Javascript:

const title = document.getElementById('.title');

console.log(getComputedStyle(title).getPropertyValue('--mian')) // red

 

Set dynamicly value of css variable from Javascript:

document.documentElement.style.setProperty('--main', 'green');