Here’s a thing I didn’t know you could do with var(): like font stacks, you can specify a fallback value if the specified custom property isn’t defined, like so:
Code language: CSS
body {
color: var(--color-text-default, black);
}
Mind you, this only applies to browsers that understand custom properties. To provide a fallback for browsers that don’t, use the tried and tested method of defining the fallback first and then the newer property declaration:
Code language: CSS
body {
color: black;
color: var(--color-text-default, black);
}