Blog Post

Custom Undead Weapons

Custom properties are kind of like CSS variables. You set them by adding two dashes followed by the variable name. Then put whatever you want the variable to hold after the colon.

--zombie-color: chartreuse;Code language: SQL (Structured Query Language) (sql)

To get the value out of the variable/custom property use the var function

color: var(- -zombie-color);Code language: JavaScript (javascript)

In this way you can update one property and change all or most of the colors on a site e.g. for a dark mode version.

You can also add a default value so that if the variable can’t be found you have a fallback. 

color: var( - -zombie-color, yellowgreen);Code language: JavaScript (javascript)