Ionic 5: Disable Dark mode for a specific component

Ionic Framework Ionic Angular
1

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 Like
2

I would style the specific component with your own custom variables that should override the global styles and variables.

3

Thanks @rubenmiq, that’s indeed what I ended up resorting to.

Since CSS styles are “cascading” (:smirk:), I guess there’s no practical way to exclude a component from matching dark mode styles (or any other global styles).

1 Like