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:
- Define a theme object with a themeVariable and a value, i.e. {themeVariable: ‘–ion-color-primary’, value: ‘#ffffff’
- I use the domController to write the style to the DOM, invoking document.documentElement.style.setProperty(themeVariable, 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!