How to cross-reference colours in a css file

I believe you are looking for CSS variables:

:root { --bg-color: lightblue; --primary-color: steelblue; } .my-container { scrollbar-color: var(--primary-color) var(--bg-color); background-color: var(--bg-color); }

I am not sure if system colors could be referenced.

I start with a file "colors.css" where I give names to my color palette, like

--hard-green: #a3aaac; --soft-brick: #d97d54;

Then I define themed elements, such as

--placeholder-txt: var(--hard-green); ... --btn-primary-txt-hover: white; --btn-primary-bg-hover: var(--sage);

And I use a file I call controls.css which defines the actual classes I will apply to elements with class="something" having

.btn-primary, input[type=submit] { color: var(--btn-primary-txt); background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); }

Besides 'controls.css' I have a higher level 'widgets.css' to style a thing that's made from several controls; one might be something like .modal-dialog { ... }

The entire site can be re-themed all at once by changing colors.css and/or theme.css