github / markup

Determines which markup library to use to render a content file (e.g. README) on GitHub
MIT License
5.86k stars 3.4k forks source link

`prefers-color-scheme` is incorrect when using light default in Night theme #1583

Closed romilbhardwaj closed 2 months ago

romilbhardwaj commented 2 years ago

GitHub seems to set the prefers-color-scheme CSS property to dark when using the light default in Night theme. Using the example from github docs:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

This renders as: image

The expected output should have been: image

Replication

This happens only when you use the following settings:

  1. System OS is in dark mode
  2. In github settings -> appearance: Theme mode: Sync with system
  3. Light default is selected for the Night theme

Here is the configuration: image

When this configuration is used, the github page sets prefers-color-scheme: dark even though the page is rendered in light mode. image

janosh commented 1 year ago

Same problem here, just the other way round: seeing a dark image where a light one was expected due to using "Theme mode: Sync with system" and light mode is set to "Dark Dimmed".

Screenshot 2022-11-29 at 10 43 57

Expected Actual
Screenshot 2022-11-29 at 10 45 00 Screenshot 2022-11-29 at 10 42 54
Thyodas commented 4 months ago

The feature is still not working today with Sync with system

github-actions[bot] commented 2 months ago

Stale issue message