Defining and using custom properties
The rectangles below are SVG images. The fill value for each property is set to the value of one of our custom properties:
--primary-color, --secondary-color
--tertiary-color, and --quaternary-color.
To use a custom property, we need to use the var() function, e.g.: fill: var(--primary-color).