ionic 5 forcing light theme for the browser app

Question

i have built this app https://cvirus.app and build and deployed on browser.

on chrome browser on android phones it renders dark background (as dark theme is being applied by default it seems).

I want to force light theme everywhere no matter what device what browser. how do I do that?

commenting dark colors portins in theme/variables.scss did not work

Answer 1

Since version 79 of the Chrome browser, you can choose between CSS prefers-color-sheme media feature values. Ionic respects this media feature and reacts to changes to it.

To change it without changing your OS preference and color theme, you need to open the Rendering panel in the Chrome Dev Tools:

1. Open the the Chrome Dev Tools.
2. Press Crtl+Shift+P on PC or Cmd+Shift+P on Mac.
3. Type "Show rendering" in the Command Palette.
4. Press Enter with the option Drawer | Show rendering selected, which should be already selected.

The Rendering drawer opens. Then on the "Emulate CSS media..." option, select the color scheme you prefer.

Answer 2

To resolve this, you have to go to theme/variable.scss at the src folder and locate

@media (prefers-color-scheme: dark)

And change from dark to light. If you have not modified the variable.scss. it should be in line 79. Click to see the screenshot of my own code I hope this helps.

Answer 3

you should comment ios body and md body classes at the theme/variables.scss then it will become light mode.