GitHub appears to not honor prefers-color-scheme for dark mode

The new GitHub dark mode is a very welcome addition. I thank you, and so do all my eyes.

A significant issue I’ve noticed is that the GitHub web application seems to currently ignore the web browser’s prefers-color-scheme setting.

I see your CSS has an @media ruleset checking for prefers-color-scheme:dark, but that ruleset seems to have no impact in creating a dark mode. I haven’t had time to debug all your code to determine why! :slight_smile:

As a first step in determining the cause of the issue, I wrote a little to code to verify that, in fact, my test browser appropriately sets prefers-color-scheme:dark. It does.

2 Likes

Hi @Gitoffthelawn - I’m glad to hear you and your eyes are enjoying our new dark mode so far! Right now our “Default to system” setting is defaulting to your OS setting vs a browser setting. You’re not the first person to share this feedback though so I’ll take it back to the team to discuss!

2 Likes

Hello @gaknoll !

Thank you for your kind reply!

I do use a dark theme for the OS, but GitHub isn’t picking it up. How is GitHub detecting the OS theme besides using @media's prefers-color-scheme (which gets set to dark in my case)?

BTW, has your team already seen the following style?: https://github.com/StylishThemes/GitHub-Dark

In some ways I find it superior to this first iteration of a native GitHub dark theme. That style uses a lower contrast for normal text (which is good) and a slightly brighter background color. It’s worth a look!

Thanks again, and I look forward to reading your replies.

GitHub is using a fairly new meta tag: <meta name="color-scheme" content="dark light">. Depending on the order of dark or light in the content the first one will be the default if your OS has no color scheme preference. You can read more here: https://web.dev/color-scheme/.

@mxdanger Thank you for your reply and the link.

2 questions:

  1. Why does the GitHub webapp source code include both <meta name="color-scheme"... and @media 's prefers-color-scheme?

  2. On the client, is there a way to override <meta name="color-scheme" content="light dark"> (the current code) with <meta name="color-scheme" content="dark light"> (the desired code)?

Before you read this just know that during the beta the default option selected is Light theme, which will be changed to “default to system” when dark mode is out of beta.

  1. When the theme option in the GitHub user options is used as intended with “default to system” @media (prefers-color-scheme: dark) Is used to change all CSS variables in the root to their dark version when your OS is in dark mode. What <meta name="color-scheme" content="light dark"> does is tells the browser that if the user is in dark mode then a dark themed user agent stylesheet will be provided, as such the scrollbar, buttons, dropdowns, etc will all have a dark appearance even with just raw html. Example: raw html with no CSS.

  2. On the client if you want to override the default preference all you need to do is use any modern operating system such as Windows 10, macOS Mojave, iOS 13, Android 10, and set your OS theme to what you prefer. As a last resort if you need to override the value in the browser (which only happens when logged in), then you can go to GitHub user appearance options and pick what you want. That uses JavaScript to ignore the media query for the CSS variables with a custom value in the header [data-color-mode=dark] (value can be dark, light, or auto) depending on what you have selected.

1 Like

Thank you for all the great details! You are an excellent writer.

I need to read what you wrote a couple more times, but I think these questions are still appropriate (actually, possibly more appropriate, based on what you wrote!): During the beta period, is @media (prefers-color-scheme: dark) supposed to be honored by GitHub? What about after the beta period?

It doesn’t seem to be honored right now, which causes the login page to appear as stark white (Ned Stark?) even when prefers-color-scheme = dark.

Not a single smile or heart for my GOT reference? Tough crowd!