Dark color scheme support (via prefers-color-scheme media query)

[dmitshur]

Hello. 👋 (Obligatory thanks for making Primer CSS, it's awesome!)

With the recent release of Chrome 76 on the stable channel, there are now 3 major desktop browsers that support the prefers-color-scheme media query: Chrome 76, Firefox 67+, and Safari 12.1. More are coming soon, as are mobile browsers.

As far as I can tell, Primer CSS does not support the dark color scheme. It works well when light color is selected. For example, using the Tabnav CSS component:

But it's not very usable when dark color scheme is selected:

(https://jsfiddle.net/do3eL8p2/)

I often use computers in the dark, and Dark Mode makes looking at a screen much easier on the eyes. By now, most of the apps and websites I use support dark mode, so the few that don't are very jarring. Also see this article on web.dev that motivates support for dark mode.

I'm working on adding support for dark color scheme to my websites and I'm not sure what to do about ones where Primer CSS is used. I'd either have to stop using it, or try to hack dark color scheme support on top.

That's why I wanted to ask if there are any plans to add support for dark color scheme to Primer CSS? (I understand it's likely a large amount of work and maintenance for a CSS framework of this size.)

Thank you!

[tonimelisma]

I'm also interested in this. I'm confused that there seems to be constant commits to the repo but within 1,5 years none of the maintainers have indicated whether this sort of functionality would be welcome in the project? Is there a reason this isn't a good match for primer or have the maintainers just been too busy to consider the idea?

If PRs are welcome, any possible tips on how one might implement this functionality would also be appreciated.

[simurai]

This is currently being implemented in #1131. It's quite a big PR and probably still takes a while until the changes are released.

[tonimelisma]

Thanks @simurai! Is there anything we can help with?

[simurai]

Is there anything we can help with?

You're welcome to check out the changes in #1131. And cnce the new version is released, would be great to have some extra
👀 eyes testing it and report any bugs.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[dmitshur]

I didn't see github-actions' earlier ping on this issue, but I see it now that it's closed.

It seems PR #1131 has been merged by now, with additional documentation work in PR #1186, which all got released in v16.0.0, so this is indeed done.

Thank you!