Support for prefers-color-scheme media query

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?

[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.

[AucT]

What is ETA of dark mode? I’d like to have dark mode in b5 for new project.