Add support for prefers-color-scheme

Carl-Hugo commented 4 years ago

Generate new versions of the CSS that uses prefers-color-scheme instead of body.bootstrap[-dark].
Make sure that both techniques can be used independently (on or the other; not both at the same time)

Based on the following work (waiting for the whole "doc" to be written): vinorodrigues/bootstrap-dark

Many colors are not in variables but are modified/adjusted inline; this could require some changes in Bootstrap (extract those as variables).
We could use "color diffs" to render a "base CSS" and a "color CSS" per color scheme.

What needs to be done:

Parse and extract the "color diffs" automatically so this project can be updated easily to new Bootstrap versions (manually doing it could become tedious)
Render those new CSS files using the "color diffs"

Quick search, maybe the following tool could be of some help: css/csso Otherwise, coding a "color extractor" from the SCSS files should be doable, like:

Scan each SCSS files (or a predefined set of files)
For each file, scan for color-related properties (a predefined collection) and move those styles out (maybe in a [old-file-name].colors.scss or something like that
More TBD

I'm open to ideas or existing tools that could be used to help with this. I'm also open to contributions (please validate your ideas here before spending hours on a PR that could get rejected).

RAnders00 commented 4 years ago

https://github.com/ForEvolve/bootstrap-dark/compare/experiments/prefers-color-scheme#diff-286f28fec7ebfdd5f65a106090613f7bR6-R59

This won't work in IE 10 and 11, which don't support prefers-color-scheme (or any other browser that does not support that media query). (Bootstrap 4 supports IE 10 and 11: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/)

<!DOCTYPE html>
<html>
<head>
<style>
#colorbox {
    background-color: red;
}

@media (prefers-color-scheme: light) {
    #colorbox {
        background-color: green;
    }
}

@media (prefers-color-scheme: dark) {
    #colorbox {
        background-color: blue;
    }
}
</style>
</head>
<body>
<div id="colorbox" style="min-width: 100px; min-height: 100px;"></div>
</body>
</html>

renders a red box on IE 11, and a green/blue box on modern browsers.

Maybe the styles for light theme have to be repeated to work on older browsers too? Or rather, since light theme was the default for those browsers anyways, just do away with the prefers-color-scheme: light altogether?

Carl-Hugo commented 4 years ago

The plan is to generate one or more new css files. Those files won't be compatible with older browsers (due to prefers-color-scheme). So if someone must support older browsers, he can use the .bootstrap-dark and .bootstrap alternatives. However, someone that does not would be able to use the new prefers-color-scheme version.

RAnders00 commented 4 years ago

My point is, if you just put the styles for the light theme first, not surrounded by any media query, and then follow that by the prefers-color-scheme: dark media block, then it will work nicely in older browsers too. As far as I can see there will be no need to exclude older browsers using this method.

Carl-Hugo commented 4 years ago

My point is, if you just put the styles for the light theme first, not surrounded by any media query, and then follow that by the prefers-color-scheme: dark media block, then it will work nicely in older browsers too. As far as I can see there will be no need to exclude older browsers using this method.

Oh... Not what I understood, my bad. I'll consider this for sure. Thanks.

On another note, do you know of a good way to automatically keep only all colors from a [S]CSS file? That's one of the things that I'm trying to achieve (without manually navigating a CSSTree data-structure if possible).

ForEvolve / bootstrap-dark

Add support for prefers-color-scheme #39