How to test your dark theme on Chrome

How to test your dark theme on Chrome

When you create a new Ionic app, there is a dark theme by default.

On most of my apps, I used to remove it by default. I'm not a big fan of the dark themes as they make everything harder to read...

But on my last app, I wanted to use it. But how to test it in Chrome?

Fun fact, it's super easy!

Just open the dev console in chrome (F12) and press CTRL-SHIFT-P. Then type "show rendering" and click on the option that appeared.

just search for Show Rendering in the chrome dev tools

It will open a new toolbar with the option to force the dark theme: Emulate CSS media feature prefers-color-scheme

You just have now to select prefers-color-scheme: dark or prefers-color-scheme: light, depending on what theme you want to see on your app!

switch easily between your dark theme and your light theme