00:00:29 florian: which is what has happened in the TV world
00:01:32 topic: dark mode
00:01:35 github: https://github.com/w3c/csswg-drafts/issues/3299
00:02:32 fremy has joined #css
00:02:35 ScribeNick: heycam
00:02:53 futhark: Chrome is soon shipping dark mode for the UI of the browser itself
00:02:59 ... respecting the dark mode setting of the OS
00:03:07 ... but we also want to render the pages dark
00:03:12 ... so the MQs 5 hsa prefers-color-scheme
00:03:18 ... letting the authors follow the setting the user has
00:03:31 ... but in order to render the content dark for all pages from day 1
00:03:43 ... we're looking at a UA intervention that automatically darkens the web pages
00:03:49 ... but giving the author the possibility to opt out of that
00:04:01 ... and we have looked at a element that Apple has already implemented
00:04:15 ... what it does is that you can specify which color schemes the page can respond to using MQs
00:04:29 futhark has joined #css
00:04:35 ... and apply a UA style sheet which renders form controls dark, having a lighter foreground color, using a black canvas backgrdop
00:04:41 ... this is basically what safari does
00:04:57 ... the proposal here is that we do this with a element
00:05:08 emilio: also the CSS property?
00:05:14 futhark: the CSS property I haven't mentioned yet
00:05:34 ... there's the posisbility for the page saying that parts of the page are styled itself, but also the possibility to do automatic darkening of other parts of the page
00:05:38 ... we get this request for various Google products
00:05:44 ... where they want to handle some UI parts themselves in dark
00:05:50 ... but automatically darken some content
00:05:57 q+
00:06:15 smfr: we have to distinguish between auto darkening, which is clobbering what the author's done
00:06:23 ... and this thing, which allows the author to tell us they've thought aobut dark mode
00:06:33 ... for us this is jus chanign form controls, selection, ...
00:06:37 q+
00:06:40 ... an auto darkifying thing is maybe orthogonal to this
00:06:59 futhark: what we've been thinking about is that the element at the same time it says it wants the dark UA style, it would also opt out of the auto darkening
00:07:05 ... because it knows how to render dark pages
00:07:26 futhark: when the author has a saying it knows how to render this page in a dark color scheme, please opt out of auto darkening
00:07:41 ... one of the reasons we've been thinking about is that we don't want any flash of white background
00:07:45 ... so having it available early
00:07:57 ack db
00:07:59 q+
00:08:02 q+
00:08:06 dbaron: I agree with a bunch of what Simon said
00:08:22 ... there's a long standing problem we've had which is that when we use native form controls and certain things like that, if the user has a dark theme, those don't work with some pages
00:08:43 ... e.g. text input is a common one. if the text input has a dark background with a light text color, and the author overrides only one of bg/fg, it's broken
00:08:54 ... as a result we've done work to prevent dark native themes to get through to web content
00:09:01 ... some recent Gtk changes broke this
00:09:23 ... so I think there are a few separate problems here
00:09:40 ... one is the fact that because of these dark theme options in macOS, Windows 10, etc., more users have dark themes
00:09:48 ... and in a lot of web contne tthat doesn't work, even if they want it to work
00:09:57 ... but we can't just go apply it to web content unless we know it will work with that
00:10:06 futhark: that's why we want to rely on the meta element to have the page tell us it's ok
00:10:20 dbaron: I think a meta that says "I the page author have thought about this and I know that my page will work with a dark theme" is a good thing
00:10:25 ... I think UAs could use it for different things
00:10:41 ... one could use it to say "the user has a dark theme, so I will let dark theme data theme, and use the user's preferred form controls for this page"
00:10:52 ... or the UA could say "for pages that haven't done this, do auto darkening"
00:11:05 ... and a meta that says "I suppor tdark theme" serves both of those purposes but not completely
00:11:18 ... if the user wants the entire thing to be dark, working with dark form controls doesn't imply that their whole UI is dark
00:11:24 ... so they still might want the auto darkening in that case
00:11:40 ... another thing in here I don't like. it also allows authors to say that their page doesn't work with light pages
00:11:46 ... and I'd rather not create this problem
00:11:54 futhark: the only keyword?
00:12:02 dbaron: you can say supported schemes "dark", and skip light
00:12:32 ... in the spirit of trying to do more of what the user wants, where right now users want to see things in dark mode, I'm hesitant to give authors an option to say this page doesn't work in light mode
00:12:35 ... for users who want that
00:12:52 futhark: there's also the "only" keyword that Safari implements
00:12:57 ... don't you have to say "dark only"?
00:12:59 smfr: [nods]
00:13:38 futhark: if you have a light theme and say "dark only" in the meta tag, you get the authored dark page
00:13:43 dholbert: and widgets are dark?
00:13:46 smfr: primarily widgets
00:13:57 ack fr
00:14:08 fremy: I am very curious about how you're going to enforce dark themes on pages that aren't prepared
00:14:12 ... I'm skeptical people will like that
00:14:18 ... you'll end up with images that look wrong etc.
00:14:25 ... for a11y purposes it's a fair tradeoff
00:14:49 ... but I am very unsure that people going to bing.com that doesn't support dark theme now the links aren't visible
00:14:52 q?
00:15:09 futhark: auto darkening is not something we'd like to spec
00:15:19 +1 to fremy
00:15:22 fremy: otoh, replying to david, I don't see why you'd want dark only
00:15:29 ... in VS Code, a web app, it has dark menus
00:15:35 ... it makes sense for them to say "dark only"
00:15:39 ... they want to control all their app UI
00:15:50 ... if you're talking about wikipedia, they should probably not say "dark only", but I don't think they will do that
00:16:09 ... maybe for a powerpoint thing, if the author has thought about it, why prevent it?
00:16:27 dbaron: one of my worries about this stuff is that not all browsers will be able to do all of these things
00:16:42 ... if we want web pages to be able to say "dark only", the browsers need a native set of light and dark controls
00:16:46 ... which on some platforms is not realistic
00:17:20 fremy: you can always have a normal styled fallback for form controls
00:17:28 ack fl
00:17:33 florian: that's the difference between I prefer dark and I support dark only
00:17:49 slides from the earlier high-contrast discussion: https://lists.w3.org/Archives/Public/www-archive/2019Feb/att-0000/CSSWG_F2F_High_Contrast.pdf
00:17:54 ... if you don't have dark controls, and your OS doesn't have them -- that's different from saying "if you show light controls I will be broken"
00:17:56 ... we shouldn't have that
00:18:02 ... why create that category?
00:18:10 ... there are some that would look better with dark controls
00:18:14 fremy: VS Code only has dark controls
00:18:19 high constrast explainer https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md
00:18:24 ... why do they custom style everything? because they can't get dark controls
00:18:32 ... I think what you're saying exists today
00:18:38 ... but the web page custom styles every single thing
00:18:52 florian: if the OS doesn't support dark controls?
00:19:01 fremy: you fall back, just like when you put borders on form controls
00:19:13 q+
00:19:17 florian: so VS Code will still need to hand code their dark controls, since they can't handle that some OSes will fall back
00:19:30 fremy: today the light controls have this fallback today
00:19:35 q?
00:19:43 ... if you have a button border-radius:3px, you get the fallback rendering
00:19:49 ... and you can do this same fallback for the dark one
00:20:00 high contrast explainer archived:
00:20:02 https://lists.w3.org/Archives/Public/www-archive/2019Feb/0001.html
00:20:10 dbaron: I think there is a tradeoff here. some sites that want to own things so much they will replace the native controls
00:20:20 ... there's a tradeoff betwene that and having sites where the controls are more recognizable as such to users
00:20:28 ... and the users recognize the thing over there is an input field
00:20:32 ... that's a tradeoff
00:20:40 ... there's an advantage to contrls that look native
00:20:46 ... esp for less experienced users
00:20:58 ... if we offer more ability to change what the controls look like, we will pull some designers away from replacing everything
00:21:07 ... but we will also push some users into things that are less recognizable for them
00:21:14 ... there's no one answer is more correct 100%
00:21:52 florian: afaict, the property here, whether it has a bunch of properties or auto vs i-support-dark, does the same thing at the meta tag? just at a subtree granularity
00:22:06 ... whether or not you suppor tdark theme depends on the style sheet, so it belongs in the style sheet rather than meta tag
00:22:13 ... I know I will not get full agreement on that
00:22:18 gregwhitworth: for end user experience reasons
00:22:31 florian: but it could become wrong when you update the style sheet and forget to update the meta
00:22:33 gregwhitworth: bad author
00:23:03 florian: if you have a page that claims to support dark mode, the author sheet does support dark mode, but user sheet doesn't -- how to tell the page?
00:23:16 ack Am
00:23:24 futhark: the property wins
00:23:51 AmeliaBR: I'm a bit uncomfortable doing style theming in the meta tag because you might have all sorts of flexible themings based on user prefs based on your own thing
00:23:57 ... but as long as the style property overrides the meta tag, that's ok
00:24:03 ... but then I'm not sure why the meta tag is necessary
00:24:15 ... if the style sheet sdon't load, I'm assuming the browser can apply whichever one
00:24:23 futhark: if you parse the meta tag, you can apply the black canvas pretty early
00:24:26 fremy: it's about flashing
00:24:44 AmeliaBR: is there any reason to do the flashing? if the style sheets haven't loaded can't you have a default bg that is according to the default theme?
00:24:49 smfr: every wikipedia page will flash
00:25:02 AmeliaBR: ok that's the point of the meta tag, for the default backdrop before style sheets load
00:25:06 fantasai: use bgcolor on body? :)
00:25:32 ... I totally agree this is not something that belongs in the HTML layer if possible
00:25:38 ... if you want to put it there, we have bgcolor
00:25:49 ... the best thing there is you can solve that for any background color
00:25:59 AmeliaBR: not necessarily because what if the style sheet has a MQ switch based on user preference
00:26:04 fantasai: then it will override, but that's better
00:26:12 AmeliaBR: you can indicate which themes you support
00:26:23 fremy: bgcolor can only supply black, not "which theme the author supports"
00:26:40 fantasai: you're only doing this for white or black -- is this a big problem?
00:26:53 TabAtkins: if I'm looking at dark screens in bed, I don't want a big flash of white
00:27:17 AmeliaBR: why would wikipedia put a meta tag saying "dark only"?
00:27:30 florian: they won't hae the tag, so you know it's a light site, but you can still show dark until it shows up
00:27:47 [wikipedia just as an example here]
00:28:18 AmeliaBR: my other point, repeating some of fremy, if there's any discussion about auto applying styles without author opt in, that should be discussed in the context of accessibile color schemes, high contrast mode, think of it that way
00:28:27 ... when you're overriding author styles it's an a11y feature
00:28:33 ... but that's separate from trying to match user preferences
00:29:09 ... for matching user prefs, I like the idea of making it easier for authors to say this site supports a dark theme, draw default styles for select boxes, if you have one, or saying my styles work well whether you use light or dark whichever the user prefers
00:29:31 ... there are sites that are dark that require custom styling for form controls now, so I like the easy way to opt in to native dark mode styles
00:29:33 +1
00:29:38 ... we kind of have multiple themes now in browsers
00:29:46 ... the "legacy" widget themes, if you much around with styles
00:29:58 ... then we have the modern native look buttons in light or dark theme
00:30:11 ... I don't know how is the way the prop is currently specced going to interact with that?
00:30:23 ... when you revert to the legacy styles
00:30:26 futhark: I don't have an answer for that
00:30:41 AmeliaBR: if you use this prop are you saying "use the native UI look no matter what other styles I put on the element?"
00:31:09 smfr: still has these fallbcak interactions
00:31:47 AmeliaBR: so if I wanted styles that say use native dark mode, but if you don't support these new props, and if I want a custom styled dark inputs, you'll need @supports or something?
00:32:08 ... will @supports just look at syntax, don't say you support dark mode unless you have one to use
00:32:14 ... but that would break an author request of dark or light
00:32:28 ... so the keywords need to be recognized even if they don't have matching themes
00:32:37 ... can sites detect "do you have a native dark theme"?
00:32:41 emilio: that's a fair request
00:32:50 ... an author to see if the browser suppotrs a native dark theme or not
00:33:04 ack emilio
00:33:06 ... it feels to me that the auto darkening has a lot of potential to backfire
00:33:38 ack bdc
00:33:46 bdc: I think there are 2 different issues
00:33:48 +1 to emilio
00:33:54 ... one is that it makes a lot of sense for a page to fit into its environment
00:34:31 ... the other use case, which I disagree with, is fremy's example of "I'd prefer a dark theme for my app so I will just use theme by requesting dark controls"
00:34:34 ... it's a design shortcut
00:34:38 ... it's a differnet purpose IMO
00:34:45 ... VS Code is not designing that because they don't have access to a dark mode
00:34:52 ... they just design it that way
00:34:58 ... to me it's a different use case
00:35:12 ... to want to re-use a set of controls that are nicer to the designer's eye is different from fitting to the environment
00:35:14 +1
00:35:21 fremy: the #1 request we got for controls in Edge is sites wanted dark scrollbars
00:35:32 ... we don't want to customize the scrollbar, we just want a dark one
00:35:39 ... when they do customize it, we get perf issues, etc.
00:35:50 I would like to point out that Adobe Creative Suite uses dark mode for its UI, but the expectation is that content being edited is black-on-white, so it's not that you always want to match content to the OS "theme".
00:35:57 +1 same we get requests for dark scrollbars primarily
00:36:00 Sometimes. not always
00:36:01 ... that's the point of this prop, this area of the page is dark, it's a choice we made, but we want to play nice with native controls
00:36:05 ... for better UX for users
00:36:22 ... also, let's say you have a blog engine, you want to support dark theme
00:36:27 ... so you say the page supports light and dark
00:36:36 ... an embedded component from another origin, it only supportslight
00:37:02 ... you need to have a way to say this part of my webpage does not support dark theme, even though my site overall does
00:37:06 ... this is the point of the property
00:37:29 ... incorporating components from different sites, you might not want to give up your overall site dark theme
00:37:44 ... the "dark only" value might not be useful ...
00:37:51 ... I have seen sites that just want a dark scrollbar
00:38:09 ... and you need "light only" anyway
00:38:53 AmeliaBR: anothe rexample, you're concerned it's not respecting user prefs
00:39:07 ... for somethings I like a dark theme, but if I'm reading a lot, I can't read a lot of white text on black bg
00:39:13 ... so I'm going to have different prefs for different sites
00:39:22 ... maybe browsers will one day allow me to set prefs on a per site basis
00:39:29 ... but lots of sites have a way for the user to opt in to a theme
00:39:40 ... so maybe when they're doing "light only" or "dark only", they're reflecting the user's preference in the site
00:40:05 bdc: the way I would summarize is that letting the browser know that you are dark theme compatible is nice, a good citizen in this environment
00:40:10 ... doing the opposite is being hostile to the env
00:40:16 ... whatever you choose, I'm going to have dark, because I like it
00:40:30 fremy: but you could have a theme inside the app
00:40:40 AmeliaBR: we can encourage authors to make their sites theme flexible
00:40:43 ... just like responsive sites
00:40:53 ... but I don't think a dark only is any more hostile than saying background-color:black, etc.
00:41:11 ... it's just one way for the author to opt in to a color scheme without setting everything themselves
00:41:17 ... and making it a bit more native and familiar
00:41:24 bdc: I see that, but it really depends on how many things in the UI that change
00:41:41 ... e.g. at some point I think Edge had a title bar that matched the site header color
00:41:53 ... here you're forcing UI changes because use as an author prefer black
00:41:58 ... it might be pushy
00:42:23 Rossen: we used to have a mode that when you pin a site to the taskbar or start menu and you want to use it exclusivle in an app mode
00:42:33 ... we would do small things to match the page
00:42:42 ... that was the behavior we did
00:42:49 bdc: this kind of thing can have an impact on the UI as a whole
00:42:57 ... who knows what the OS will do in the future
00:42:59 myles__ has joined #css
00:43:01 ... so it could affect more things
00:43:09 AmeliaBR: good point but it sounds like it's outside the scope of CSS
00:43:25 ... anything the browser/OS is doing to extract styles from the page and applying outside the page ...
00:43:33 bdc: these properties and meta tags would do that no?
00:43:36 florian: just within the page
00:43:52 AmeliaBR: the only thing outside we can style with CSS is styling the dark/light bg of the canvas
00:44:00 bdc: the chrome of the browser could/should change based on that
00:44:16 gregwhitworth: the way I would see this working in Edge, user turns on dark mode, Edge would flip into dark mode, devtools would too
00:44:27 ... if you have the meta tag, it would flip to dark controls too, if not, it wouldn't
00:44:29 s/outside we can/outside what we can already/
00:44:34 ... is there an issue with that?
00:44:36 bdc: not with that
00:44:52 ... but in the future making the assumption that if the site opts in that other UI is now dark, then I do
00:44:59 dholbert: alerts could be dark
00:45:07 gregwhitworth: they're not controlled by you now anyway
00:45:23 AmeliaBR: that's an issue on the browser team to decide whether to respond author or OS choices ...
00:45:40 q?
00:46:08 Rossen: the one thing to keep in mind is that at least in Windows, probably on macOS, we have three levels of where color schemes can apply
00:46:15 ... there's the shell, which is only controlled by the user
00:46:22 ... usually it doesn't propagate anywhere beside the shell
00:46:41 ... then there are apps. apps are going to depending on the UI framework they use, they may be either forced or opt in to a particular color theme
00:46:47 ... regardless of it it's dark or whatever
00:46:51 ... then there's the content of these apps
00:47:01 ... even besides browsers. many other apps that have content that could benefit from theming
00:47:12 ... and there, it's the choice of the app on whether to propagate that information to the content
00:47:24 ... a quick survey of 1st party apps that ship with Windows or macOS, even there is some inconsistency
00:47:35 ... e.g. in Windows the shell is always dark, doesn't mean 1st party apps will always be dark
00:47:46