How to update ionic-theme-switcher CSS properties via domController in dark mode?

Hi All - I’m relatively new to Ionic so thanks in advance for helping me out.

My question: is it possible to select the ionic-css for a media query and update it’s value via the domController? In particular, I’m looking for a query that would allow me to update CSS properties present in a @media (prefers-color-theme: dark).

Background on the question:
I’ve created a theme-switcher-service for my Ionic application. This is how it works: every user is associated with an organization, and each organization has a primary / secondary color. The primary / secondary colors drive the variables.scss file with all of the --ion-color-primary, --ion-color-secondary, etc.

The way I accomplish this is as follows:

  1. Define a theme object with a themeVariable and a value, i.e. {themeVariable: ‘–ion-color-primary’, value: ‘#ffffff
  2. I use the domController to write the style to the DOM, invoking, value);

This works perfectly in terms of overriding default colors in the ::root of the variables.scss file. However, I have been having a lot of trouble overriding the default colors when the app is in dark mode.

In particular, for the following media query: (prefers-color-scheme: dark) - I can’t seem to figure out a good way to overwrite the default colors in this media query with the custom colors. If it’s possible, please let me know if there is a way to create a themeVariable object that can target the CSS of media queries.

If you need any other information from me please let me know. Thank you in advance for your help!