media query or way to check which color scheme is active on element level

Question

I know there is a prefers-color-scheme, e.g.:

@media (prefers-color-scheme: dark) {
    ...
}

But this is not suitable for my implementation because prefers-color-scheme checks the OS theme choice.

In my design some element may be light theme, and other elements dark theme, on the same page. Additionally the user can select a different theme in the website, that is different to their OS theme.

So I would like to know the state a elements CSS color-scheme property. Yes I could assign a custom property say --color-scheme: light to every element, but that is duplicating functionality.

The reason I don't do the following is because most of the styling is in web components, and this will not style shadow DOMs:

.light { --color-scheme: light; }
.dark { --color-scheme: dark; }
:host { color-scheme: var(--color-scheme); }

Is there a way to detect if the current elements color-scheme is light or dark, and adjust the colors accordingly, e.g.

/* Wishful code that does not work*/
@media (color-scheme: light) {
   --fg: black;
}
@media (color-scheme: dark) {
   --fg: white;
}

NOTE: My question is similar to this question which has no solution, so maybe its not possible.