Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dmitshur opened this issue Aug 10, 2019 · 0 comments

Comments

@dmitshur
Copy link

commented Aug 10, 2019

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:

image

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

image

(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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can鈥檛 perform that action at this time.