search

whatwg / meta

Discussions and issues without a logical home
Creative Commons Zero v1.0 Universal
93 stars 161 forks source link

Darkmode styles in Bikeshed #188

Closed tabatkins closed 3 years ago

tabatkins commented 3 years ago

I'm in the process of pushing the final commits for having Bikeshed support darkmode by default for its output right now. Y'all do your own styles and mostly shut off Bikeshed's styles, so here's a heads up on how to handle things.

Bikeshed sets up a bunch of color variables, used in both its default stylesheet (which you don't use) and the W3C stylesheet (ditto) in style-colors. Several additional features that do their own styling also use a few of these variables, particularly --text, so I recommend either leaving this block in or overriding its variables yourself with your own values. (The colors used across multiple features should be pretty generic and appropriate for y'all's usage anyway, so probably nothing special has to be done here.)

style-darkmode sets up darkmode-specific variants of all these variables, and when other features are used, contains their additional variables as well. If you're not using the color variables from style-colors, you should turn this off and handle darkmode on your own.

andreubotella commented 3 years ago

The color-scheme: light dark property in style-colors is getting flagged by v.Nu as invalid, in whatwg/encoding#230 for example. This sounds like something that should be fixed in w3c/css-validator, but perhaps disabling style-colors and style-darkmode might be a faster way to get the builds working.

sideshowbarker commented 3 years ago

The color-scheme: light dark property in style-colors is getting flagged by v.Nu as invalid, in whatwg/encoding#230 for example.

If that’s a bug/shortcoming the v.Nu, then I can prioritize getting that fixed.

This sounds like something that should be fixed in w3c/css-validator

Yeah I would guess so. We have worked hard over the last few years to get the CSS-checking backend up to date with the current specs — up to date with the features that are supported in browsers — but there are still a few cases where it’s not as up to date as it should be. This sounds like one of those cases.

If you can make time to raise an issue about this as https://github.com/w3c/css-validator/issues that would be great

andreubotella commented 3 years ago

If you can make time to raise an issue about this as https://github.com/w3c/css-validator/issues that would be great

I was going to raise one, and then I forgot 😊

annevk commented 3 years ago

How do we completely disable this? This is breaking our builds. I tried this and it seems only the first setting has some kind of effect:

Boilerplate: style-colors off
Boilerplate: style-darkmode off
sideshowbarker commented 3 years ago

How do we completely disable this? This is breaking our builds.

Due to the HTML checker reporting an error about color-scheme, it was breaking the builds; but it’s not now, because I updated the checker to suppress the error. So the immediate problem about that particular error is fixed now. (But that’s a separate issue than the issue of being (un)able to disable the Bikeshed feature.)

tabatkins commented 3 years ago

Note: I fixed the one issue that was preventing style-darkmode off from working; apologies for making that mistake. As I wrote in the initial post, what you just listed should work fine.

annevk commented 3 years ago

I sorted this in https://github.com/tabatkins/bikeshed/pull/1767. If someone wants to work on WHATWG dark mode styles that'd be great, but let's discuss that in a new issue.

sideshowbarker commented 3 years ago

FYI update: the CSS validator and HTML checker now have real color-scheme support (fixed in w3c/css-validator@a7ae12f)