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

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

HUF_Ventures
Visitor
1 0 0

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

Reply 1 (1)

GloryTai
Shopify Partner
2 0 0

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) {

}