Support for prefers-color-scheme media query

[rolandasb]

Apple introduced prefers-color-scheme media query in Safari Technology Preview 68, which allows developers to apply different rules if user is using dark mode on Mac Mojave:

@media (prefers-color-scheme: light) { ... }
@media (prefers-color-scheme: dark) { ... }

https://trac.webkit.org/changeset/237156/webkit

Maybe it's worth supporting this in Bootstrap?

[patrickhlauke]

what kind of support would you envisage? doubling up the color scheme everywhere? i wouldn't be adverse, but this needs careful planning/defining

[rolandasb]

I don't know if such tool exists, but what I thought was the ability to set variable like $enable-dark-mode which on compilation would find existing variables that have suffix -dark and include media queries in places where those variables are used. For example, if set variable:

$link-color-dark: lightblue;

it would insert into _reboot.scss:

a {
  color: $link-color;
  ...
  
  @media (prefers-color-scheme: dark) {
    color: $link-color-dark;
  }
}

[mdo]

Would be cool, but this is only in the Safari tech preview version, and no other browser. Can't really make use of it effectively for folks unless there's far more support. Closing as it's too early to use.

[swrobel]

This is in-progress for Chrome and implemented for Firefox 67 so it might be worth revisiting for BS5

[mrlife]

Just putting this here for easy reference. The Resources tab links to browser-specific status and the specification.

https://caniuse.com/#search=prefers-color-scheme

[waterfoul]

Any chance of reopening this one?

[patrickhlauke]

once it has more sizeable support @waterfoul, sure. as it stands, it's a lot of potential work for little gain just now.

[swrobel]

more sizeable support

please define

[mdo]

Safari and Firefox support isn't enough IMO and the supporting the media query presents additional implementation issues that we'd have to advise on or implement ourselves (e.g., fallbacks for IE and Edge that don't support it currently). Getting Chrome on board would be helpful obviously, but I think this is something more suited to a v6.

[swrobel]

Getting Chrome on board would be helpful

As previously mentioned, this is being actively worked on and is targeted for Chrome 76, to be released around July 30

[waterfoul]

We currently use two css classes to pull this off with a style switcher but it requires a very bloated payload to pull off (since having multiple color schemes requires multiple copies of bootstrap). In order to better support using multiple themes and to prepare for these media queries would it make sense to provide a way to generate a copy of bootstrap with color information only which could be used as an override?