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?

[felixfbecker]

This is implemented in Chrome and will ship in the next release, working on macOS, Windows and Linux. Intend to ship: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/sLK1cLgvieg/discussion

That means it is then supported by Safari, Firefox and the new Chromium Edge (I don't think there is active development on old Edge).

I think this is a great oppurtunity for Bootstrap - I predict that websites will be expected to have automatic dark modes in the future, and developers will not want to hand-code it. Bootstrap can help here by making automatic dark mode "just work", and it can still be configurable.

[patrickhlauke]

for all those who are pushing for it...i look forward to your pull requests

[felixfbecker]

@patrickhlauke shall we interpret that as an approval of the feature? Surely noone wants to work on this if it would not get merged anyway because maintainers think it's a bad idea

[felixfbecker]

As it stands, the issue is closed, which communicates that there is no interest in having this feature. If you want PRs, a first step would be to reopen the issue

[patrickhlauke]

nobody said it's a bad idea. what was said is that it's a lot of work for little practical gain just now. if somebody wants to start putting all the work in... (chicken and egg)

[bardiharborow]

@felixfbecker sorry if there was miscommunication, you can consider this tentatively approved for either v5 or v6, but we're lacking cycles on our end. I'm happy to coordinate with someone if they don't mind slightly delayed turnaround.

[waterfoul]

The more I look at this the more this feels like the perfect use-case for css variables. They are currently supported in every evergreen browser but are not available in IE which bootstrap currently supports. Would the bootstrap team be open to dropping IE support in the next major? It's become a little used browser (<3% usage world wide/<5% in the US/It's biggest market) and even Microsoft is recommending people not use it except for legacy applications.

[bardiharborow]

@waterfoul v6, yes. v5, no.

[waterfoul]

Are there any rough timelines for v5 and v6? I would rather this be done right since it will likely be a large change and if that means waiting a bit longer that's fine. I would just like to know roughly how much longer

[lachlanjc]

Dark Mode is now on production Safari, & coming to iPhone/iPad this fall. This would be an awesome update to Bootstrap!

[mdo]

Without the move to CSS custom properties, is the intent here then a mixin and proper dark mode (or more generally, color scheme) support across all components?

[ntkme]

I would like to start a little bit technical conversation here, as I recently implemented dark mode on websites I built with bootstrap.

---

Here are a few ideas:

Option 1

It is going to be tedious due to the ugly design of the prefers-color-scheme media query itself. Today's bootstrap already provides light & dark theme on a few components, which means it would be difficult to modifying current implementation with mixins, and such change would doubling color related code as result (compression might help, but still very annoying). Just imagine the result as below:

.table {
  /* light color scheme */
}

.table-dark {
  /* dark color scheme */
}

@media (prefers-color-scheme: dark) {
  .table {
    /* dark on dark (?) color scheme */
  }

  .table-dark {
    /* light on dark (?) color scheme */
  }
}

Option 2

We can drop .*-dark classes everywhere, and have light as default and dark in dark mode, which would cut the clutter, but would also greatly limit the possibility in website design.

Option 3

We will never support prefers-color-scheme via mixin & in-stylesheet media query, instead bootstrap would officially support a build with different colors that's optimized for dark mode, and users would use it like this:

<link href="bootstrap-light.css" rel="stylesheet">
<link href="bootstrap-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

The work to implement this option is minimum (pick a set of colors). It does have a catch that when dark mode is loaded, all css rules (including non-color related) are double loaded. However, this would also give designer the flexibility to choose between:

1. Light theme everywhere.
2. Dark theme everywhere.
3. Light theme on light mode, dark theme on dark mode.
4. Dark theme on light mode, light theme on dark mode.

Option 4

Fully switch to css variables, which means drop IE 11 support. This might be a future solution but probably won't happen anytime soon. https://caniuse.com/#feat=css-variables

---

Personally I would vote for option 3 today for two major reasons:

1. It would work with a custom build of today's v4.
2. It would not over-complicate the current scss building system and utilities.

For the long term future (v6 I guess), I would vote for option 4.

[carcinocron]

Just curious (option3), what would this code do a browser that didn't support prefers-color-scheme?

    <link href="light.css" rel="stylesheet" media="(prefers-color-scheme: no-preference)">
    <link href="light.css" rel="stylesheet" media="(prefers-color-scheme: light)">
    <link href="dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

Would it only load one css file for supported browsers? Would non-supported browsers load both or neither? I don't personally have access to a non-supported browser.

[chrisgorgo]

I tried this and it results in no css getting loaded on Edge.

[chrisgorgo]

But if you do:

<link href="light.css" rel="stylesheet">
<link href="light.css" rel="stylesheet" media="(prefers-color-scheme: light)">
<link href="dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

things work well.

[vanillajonathan]

[lachlanjc]

Yep. Though the majority of solutions proposed here will be fine with the lacking browser support—they’ll behave as they always have in old browsers but progressively enhance to include dark mode on new ones with it enabled. Yay for the web ✨

[getaaron]

@ntkme Agreed, option 3 seems the best to avoid breaking existing setups.

I tried this out as a test:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" media="(prefers-color-scheme: light)">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/darkly/bootstrap.min.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

(e.g. I used bootswatch's darkly theme in dark mode. Functionally it worked great and I couldn't find a problem in other browsers. Of course, you wouldn't want to use this on a real site since the fonts, sizes, etc. are different in darkly from vanilla bootstrap.

I think we just need to publish vanilla bootstrap files that swap the colors for their -dark counterparts. This could be published as bootstrap-dark.min.css, bootstrap-grid-dark.min.css, etc.

Ideally these would be generated programmatically at build time.

[getaaron]

If we went with Option 1, could it work like this? I'm a little rusty on manually editing CSS 😄

.table {
  /* light color scheme */

  @media (prefers-color-scheme: dark) {
    /* dark color scheme */
  }
}

.table-dark {
  /* dark color scheme */

  @media (prefers-color-scheme: light) {
    /* light color scheme */
  }
}