Use prefers-color-scheme media query

[zcdunn]

I have Firefox set to prefer dark mode and I would like MDN to use that so its easier for me to read. It's also recommended that sites include a manual switch, so a user can choose to override the theme on a site-by-site basis.

[schalkneethling]

@zcdunn Once we do have dark mode or other themes, we will most definitely honor user choice via prefers-color-scheme. Does not having that currently prevent you from using an extension that provides some form of dark mode? It probably won't as it will inject in page style that will/should override what we set.

[zcdunn]

@schalkneethling I just opened MDN and it still doesn't honor the media query. This issue hasn't been fixed

[ghost]

For the record, my resume seem to works automatically using only black and white.
Seems the browser invert black and white.

https://resume-mattia-pontonio.herokuapp.com/
https://www.github.com/mattiapontonio/resume/tree/main/index.js

It uses
https://github.com/kognise/water.css

[zcdunn]

@schalkneethling Why was the issue closed without being fixed? Is this being tracked somewhere else?

[ghost]

Lets open a discussion.
🌚🌝
It's intresting 👍
https://github.com/mdn/yari/discussions

[schalkneethling]

I have Firefox set to prefer dark mode and I would like MDN to use that so its easier for me to read. It's also recommended that sites include a manual switch, so a user can choose to override the theme on a site-by-site basis.

We do not currently offer anything other than the default visual design. I am therefore unsure how we would use prefers-color-scheme on MDN currently. We would use this once we have a different color scheme to apply if a user has for example chosen dark in their preferences.

Currently, it would simply be an empty CSS media query block. Am I missing something?

[zcdunn]

I'm sorry. By Use prefers-color-scheme media query I meant use the media query to implement a dark mode. So the media query would be filled with selectors to update the colors of elements.

I understand you don't currently have a dark theme. I was hoping this issue would be the impetus for starting and tracking the creation of a dark theme, for those who find the current theme uncomfortable to read.

[ghost]

#2539

[schalkneethling]

@zcdunn Gotcha! I thought there was a miscommunication going on 😃 There have been a number of requests for this, and this is definitely on our radar.

Duplicate of #2539

[vitaly-zdanevich]

At least we can start with dark theme only for code examples.