Support prefers-color-scheme

[jonaskuske]

• Browser: Edge Canary
• Operating System: Windows 10 1903
• Link to page with the issue: -
• Screenshot: -

Feature request

It'd be super cool if this came with the option of only enabling the style if your device is in dark mode. So wrapping the CSS in @media (prefers-color-scheme: dark) {}.

Right now I manually wrapped each stylesheet in the media query, but that's a bit hacky and will probably cause problems when the next update comes.

[silverwind]

prefers-color-scheme is not supported in Edge and Opera or older versions of Chrome and Firefox, so I assume wrapping it like that would break it in those browsers (as the media query would be invalid).

So if we are to implement this, we'd first need to wait for all browsers to support it and secondly add a warning to README that the style will not work in a OS/browser in light mode (which may be unexpected).

Also I'm not sure how prefers-color-scheme would work in a OS/browser that has no notion of a dark mode. Will it fall back to light mode as the default if user preference can not be detected?

[xt0rted]

If the browser doesn't support this feature then it won't process the css inside of the media query. You can see an example of this here. In Chrome it's light, while in Edge it's dark. Most of the stuff I've read about using this feature talks about it with css variables for this reason.

I personally don't see value in adding this. If you don't want the dark theme then toggle it off in Stylus. Otherwise you can't enable it when the OS/browser is using a light theme even if you wanted to.

[Mottie]

I don't own any Apple products. How does a user set their preference? Is there a browser setting, or key combo to toggle this setting?

I wonder if this might be an option we should add to Stylus, to wrap or not wrap a userstyle?

[xt0rted]

@Mottie the latest Edge preview has support so you can try it with that if you're on Windows (edge://flags/#edge-follow-os-theme). For Safari it's based on if you're using the OS level dark theme. In other browsers it could come from the OS or the browser. Edge lets you pick between 3 settings, Default (based on OS), Enabled, or Disabled. This is probably how the others will work as well but I haven't tried them to know.

[jonaskuske]

Afaik it's supported in Safari and Firefox stable, and is in the Canary (and Dev?) versions of Chrome and Edge already. Not sure about Opera, they're built on Chromium too but usually a bit slower to release upstream changes.

Anyhow – I agree that making this mandatory is bad, as it breaks backwards compat. I'm not really familiar with how user.css works, but I saw some non-CSS stuff in the code (magic comments), so I thought maybe this could somehow be implemented as an option? As in, having this as part of the options menu that already exists:

[x] match your device's color scheme?

An alternative would be to release two versions, github-dark.css and github-dark-auto.css, the latter automatically matching the color scheme of your device.

And as for the value of this: my computer is in light mode at day and in dark mode at night. Enabling and disabling the extension every morning and evening is really tiresome. Which is why I manually patched this in for now, but official support would be nice.

[jonaskuske]

@Mottie Oh, somehow skipped past your comment – yeah, the option to wrap or not wrap a user style would be exactly what would enable for this to become an option!

And to change the preferred color scheme in Windows (10), go to Settings → Personalization → Colors and you'll get the choice between light and dark. (and since the latest release, also "custom")

It's a system wide setting after all, the OS changes color, all apps change color (if they support it), browsers change color and websites within the browsers also change color. (if they use the media query I mentioned here, or the even newer color-scheme property which allows the browser to change the applied user agent stylesheet)

Don't know if and how this is implemented in the various Linux distros, unfortunately. :/

[xt0rted]

This sounds like an option that would be better added to Stylus so you can pick which styles get applied when dark mode is enabled. Cascadea for Safari actually works this way and you can see an example of this in their UI here https://github.com/StylishThemes/GitHub-Dark/issues/808#issuecomment-501041209.

[silverwind]

Support in Stylus seems like the best option so we don't have to require every style to support this. Could a see a dropdown with three options:

• Always apply (no media wrap, default)
• Apply when in dark mode (wrap with dark-mode media)
• Apply when in light mode (wrap with light-mode media)

[xt0rted]

@silverwind I was thinking about an extension to the User CSS settings where the style author could indicate if the style prefers dark mode, then Stylus & Cascadea could set this on their own, but it might be just as easy to let the user pick when installing the style.

[jonaskuske]

Support in Stylus seems like the best option so we don't have to require every style to support this. Could a see a dropdown with three options: • Always apply (no media wrap, default) • Apply when in dark mode (wrap with dark-mode media) • Apply when in light mode (wrap with light-mode media)

Yep, this would be super super awesome!
Do I need to file this issue in some other repository, for Stylus?

[xt0rted]

@jonaskuske there's an open PR for this https://github.com/openstyles/stylus/pull/62 but based on the comments in https://github.com/openstyles/stylus/issues/524#issuecomment-433738491 it seems development has stalled. I'm sure with all the browsers supporting this now we'll see some traction on it again.

[mikefreuden]

Support in Stylus seems like the best option so we don't have to require every style to support this. Could a see a dropdown with three options:

• Always apply (no media wrap, default)
• Apply when in dark mode (wrap with dark-mode media)
• Apply when in light mode (wrap with light-mode media)

Yep, this is precisely how Cascadea handles it (along with simply hiding/disabling the option if you're on a version of macOS/Safari that doesn't support the query), and I'd love to see this in Stylus now that other browsers are adopting support.

[eight04]

It is possible to implement this feature with usercss options:

/* ==UserStyle==
@name           Dark mode test
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var select media "Require system appearance" {
  "None": "",
  "In Dark Mode": "(prefers-color-scheme: dark)",
  "In Light Mode": "(prefers-color-scheme: light)"
}
@preprocessor uso
==/UserStyle== */

@-moz-document domain("github.com") {
  @media /*[[media]]*/ {
    * {background: black;}
  }
}

You can try this method if you need this feature as soon as possible.

[jonaskuske]

Thank you!!!

[the-j0k3r]

The dark light color can also be customized in that style @eight04 posted not sure about using a glob anyway with this.

[NSExceptional]

What's the status on this?

[the-j0k3r]

No status, its as it was left.

If anything happens here, this is the sort of thing https://github.com/StylishThemes/Feature-Override-Styles was made for.

So likely will be a standalone theme not added to each of our themes individually as thats counter productive.

[Devo7v]

It is possible to implement this feature with usercss options:

/* ==UserStyle==
@name           Dark mode test
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var select media "Require system appearance" {
  "None": "",
  "In Dark Mode": "(prefers-color-scheme: dark)",
  "In Light Mode": "(prefers-color-scheme: light)"
}
@preprocessor uso
==/UserStyle== */

@-moz-document domain("github.com") {
  @media /*[[media]]*/ {
    * {background: black;}
  }
}

You can try this method if you need this feature as soon as possible.

@eight04 Is there a way to do this using the Stylus preprocessor? I can't seem to figure out how to get a variable to function properly following @media. Here's what I'm trying to do and I can't get it to work:

/* ==UserStyle==
@name           Dark mode test
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
@var select media "Require system appearance" {
  "None",
  "In Dark Mode",
  "In Light Mode"
}
@preprocessor stylus
==/UserStyle== */

@-moz-document domain("github.com") {

if media == "In Dark Mode" {
    --media: (prefers-color-scheme: dark);
}
if media == "In Light Mode" {
    --media: (prefers-color-cheme: light);
}
else if media == "None" {
    --media: (prefers-color-scheme:);
}  

@media var(--media) {
    * {background: black;}
  }
}

[the-j0k3r]

This isnt published but sort of works, I done it months ago for this but I have no interest in it really to get it working 100% and also is not the right approach given the current GH design with CSS vars IMO.

/* ==UserStyle==
@name         GitHub Prefer Color Scheme
@namespace    StylishThemes
@version      0.0.2
@description  Supports 
@author       StylishThemes
@homepageURL  https://github.com/StylishThemes/Feature-Override-Styles/
@supportURL   https://github.com/StylishThemes/Feature-Override-Styles/issues/new/choose
@updateURL    https://raw.githubusercontent.com/StylishThemes/Feature-Override-Styles/master/dark-mode-for-github.user.css
@license      CC-BY-SA-4.0

@var select media-query "Require system appearance" [
    "None",
    "Dark",
    "Light"
]
@var color darkC  "Dark background color"  #111
@var color lightC "Light background color" #eee
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://((education|gist|guides|help|lab|raw|resources|status|developer|support)\\.)?github\\.com/((?!generated_pages/preview).)*$"), domain("githubusercontent.com"), domain("graphql-explorer.githubapp.com"), domain("www.githubstatus.com") {
  if media-query == "None" {
    @media (prefers-color-scheme: no-preference) {
      html body, html .bg-white,
      html body .selected.reponav-item,
      html body .orgnav .pagehead-tabs-item.selected {
        background-color: inherit !important;
      }
    }
  }
  else if media-query == "Dark" {
    @media (prefers-color-scheme: dark) {
      html body, html .bg-white,
      html body .selected.reponav-item,
      html body .orgnav .pagehead-tabs-item.selected {
        background-color: darkC !important
      }
    }
  }
  else if media-query == "Light" {
    @media (prefers-color-scheme: dark) {
      html body, html .bg-white,
      html body .selected.reponav-item,
      html body .orgnav .pagehead-tabs-item.selected {
        background-color: lightC !important
      }
    }
  }
}