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