How to prevent dark mode on phone from affecting website colors?

Shopify Discussion
1

Here is an issue that I’m facing, and I have some others face this issue as well and I would like to get some help on this.

So basically, when a phone is set to dark mode in their phone settings and they open any app that supports it like i.e. instagram, tiktok or whatsapp it goes to a dark theme, makes bright colours appear darker. Now, the thing is, while they are in any app that is on dark mode and they open a link from it like from any ad for example, it turns that website to dark mode as well. So it changes white colours to a grayish colours, darkens down bright colours and messes up the whole look of the website!

I know it doesn’t have much to do with my website, but can you maybe help me with this problem? I can’t really programm it by myself in the CSS… It would be amazing if you could help me with this problem.

Best Regards

Robin

2

If you use the “theme” , scheme tag will be assigned attributes such as “light” or “dark”. You can use the following styles to control the corresponding CSS in your website.
@media (prefers - color - scheme: dark) {

}