With the dark theme on the horizon, I start to wonder if we should move to certain purpose-driven variables instead of those color values.

Like another layer in between: blue-on-dark, blue-on-light?

Probably even less color dependent. I'm not sure how verbose we need to be, but if we think about variables that could stick around with any design change, we would probably need something like

--color-primary-dropdown-link-active
--color-primary-dropdown-link

--color-secondary-dropdown-link-active
--color-secondary-dropdown-link

Super unsure about primary and secondary, but we need some sort of description for the dark/white dropdowns that are also independent from the current theme.

What would primary and what would secondary be?

The naming really isn't great. Dark & light make a lot more sense in general, but when we flip it in the dark theme, we can't also flip the wording. That's where it gets messy. I think "primary" would probably be the dark ones, because they are the common ones and light would be "secondary". But maybe it could also be something like:

--color-dropdown-link-active
--color-dropdown-link

--color-dropdown-inverted-link-active
--color-dropdown-inverted-link

@bastianallgeier I get your approach but we have that in so many places (e.g. --color-white, --color-black are semantical nonsense in dark mode). I'd rather approach that with one common strategy in a separate PR then just start here in this PR.