Ionic 5: Disable Dark mode for a specific component

I’m using the latest Ionic with Capacitor, and I’ve added dark mode for my app.

However, the dark mode modifies styles (CSS variables) globally with the help of this media query:

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

How can I preserve ALL CSS styles for a specific component, so that they look exactly the same in both Light mode and Dark mode, while the rest of the components reflect the dark mode changes as expected?

I’ve tried overriding :root variables inside of my-ever-light-component.scss but they get ignored.

Any suggestions are greatly appreciated!

1 post - 1 participant

Read full topic