[Resolved] Having browsers not invert colors on website in dark mode.

[Dominique]

Hi,

My website is already dark with a black background and light color text.

When enabling dark mode on some browsers that I tested the background becomes light and the text dark. It looks horrible.

I researched it and it is a CSS property prefers-color-scheme that is supposed to be implemented by the theme.

How do I make certain that the colors don’t get inverted and the design stays as is since it’s already dark when dark mode is enabled on browsers?

Please advise.

[David]

Hi there,

which browsers are you seeing the issue on ? I checked on Chrome, Safari and FF dark modes and i am not seeing the issue.

The theme itself doesn’t add any dark mode color scheme, which would only be applicable if you wanted a separate color scheme for dark mode browsers. In other words, your colors should never change when viewing the site in either standard or dark mode.

[Dominique]

Hi,

To my understanding and what I experienced with Firefox on iPad the browser forces the website in dark mode. It was possibly also Firefox on Android. It was late at night before going to bed 🙂 I activated on Firefox dark mode and went ouash that’s horrible! Come to think of it, it was Firefox on Android since on IOS you have your hands tied for almost everything.

Dark and bright mode is a relatively new design trend that is compatible with all recent browsers except FireFox on Android. If I want to do two theme colors dark and bright using GeneratePress thqt would involve two different site logos, all different colors everywhere that are declared in the “Colors” of GeneratePress Premium how would I achieve that?

[David]

I found the same issue here on the mozilla github.
Seems that FF option simply inverts the sites colors without checking to see whether its a dark themed site to start with:

https://github.com/mozilla-mobile/firefox-ios/issues/5772

One of the commenters posts a JS fix by the looks of it.

[Dominique]

Thank you.

I was thinking of implementing a naughty mode -> dark mode or nice mode -> light mode. Something of the sorts of a little devil beside naughty mode and an angel beside nice mode. Everything more naughty in “naughty mode” with a darker color scheme & in “nice mode” rainbows with flying unicorns sorts with a lighter color scheme.

It’s a pretty wild creative idea that would be really hot.

Being that all the colors are controlled by GeneratePress Premium how can I implement that?

[David]

GP prints out dynamic styles for any colors you set within the Customizer settings. To create an alternative/switchable color pallet would require writing a custom style sheet for all those theme elements as well as any colors that maybe defined within the post editor or a plugin. Then a JS switch to switch the style sheets.

It would require custom development to do that.

[Author]

Posts