@media (prefers-color-scheme: dark) not working

Sydney
#1

I have added the aforementioned media rule to css in Customizer, but it is not working. Here is the full code sample:

@media (prefers-color-scheme: dark) 
{
.site-logo {filter: invert(100%) !important;}
}

The code without media rule works. Other media rules (ex. max-width) also.

#2

Hi,

I tried the code and it works fine for me.

Perhaps you’re getting CSS error on a line before you put @media (prefers-color-scheme: dark) line. To verify this, you can try putting the code to the most top line.

Screen Shot 2021-05-12 at 11.29.38

Clear cache before running your check.

Regards,
Kharis
aThemes Support

#3

Hi, thank you for the quick an thorough answer!

I have put the css to the most top line, but it’s still not working.
I have also disabled the plugins one by one and retried with no result.

I am viewing the page on Android Chrome (90) in dark mode, incognito tab (so no cache).

The URL is https://bar.conferatur.be/

#4

Hello,

We did a test here with a Nexus 5 running Android 9.0 and seems to be working fine. Please see the screenshot below:

image

Could you please send us more details, like what’s the device model you are testing ?

Kind Regards,

Rodrigo.

aThemes Support

#5

Hi, I am testing on Chrome 90, installed on a Samsung Galaxy S8. Same result on another Samsung. Logo and background are black.

#6

Hello,

We did a few tests here (not with your website) and that seems to be working.

Inspecting your website I can see you commented the code:

image

Maybe that’s the issue. You need uncomment the code.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

#7

Uncommented code isn’t working either.

This is how the page is displayed on my device:

186508468_749688732378901_7840404891457390155_n
186508468_749688732378901_7840404891457390155_n996×2048 197 KB

#8

Hello,

Unfortunately your code still is with a CSS syntax error. Please see the *@media…. You should remove the asterisk before the @media…

image

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

#9

Removed it, still not working.

#10

Hello,

Please check the following:

  • You have the dark mode enabled in the Android settings.
  • You have the dark theme enabled in the Google Chrome Settings.

We did several tests here and the dark mode it’s working in the devices we tested.

Please check the above items and let me know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support