Disable dark theme in Ionic

Question

I'm designing an Ionic app, and I would like it to have white backgrounds and black texts whether the user has enabled the dark theme or not.

This is what I want:

However, when I enable the dark theme on an Android phone, it gets automatically converted to this:

I want to prevent this from happening. I've searched online and found many articles that describe how to apply the dark theme, but I haven't found anything about disabling it.

One solution I've thought about is explicitly enabling the dark theme, and then setting the same colors for the dark theme as for the light theme. However, I think that approach might be undesirable, as it involves writing a lot of redundant code.

Can you think of any alternative solution(s)?

Answer 1

One way to remove the dark theme would be by editing the variables.scss file and removing this style rule:

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

That media query is the one that changes all the colors of the CSS custom properties when the users selects the dark theme on the device.

Please also take a look at the color-scheme meta-tag from the index.html file:

<meta name="color-scheme" content="light dark" />

You can find more information about it in the Ionic Docs