Question: is there any way to get a component to automatically use a different colour scheme from the parent frame?

Somewhat of a complicated set-up, so bear with me:

• Our design system has colour variables for light and dark modes.


• A given component has two separate uses: standard and in conjunction with another specific component.


• When used as standard, it follows the parent page’s colour scheme; but when used with the other component, its colour scheme is inverted relative to the page.

In order to simplify the component configuration/management, I’m trying to keep it to one component for all cases. The ideal would be a variant that’s based on a toggle property for context. For the standard use, I build it naturally and it responds to the parent colour mode. However, for the version that’s used with another component, I can’t figure out how to make it invert whatever the parent mode is. I can set it to dark mode, but then it’s always dark mode, even when used in a dark mode context.

I know I can create an independent variant that defines the opposite colors, but it seems silly to do that when the color scheme is already defined.

Another way to put it: can I get just one variant of a component to remap colour schemes? When told to use light mode, it uses dark and vice versa.