[00:00.000 --> 00:09.000] We're off to dark modes, just to have a quick look at the various bits that I'm talking [00:09.000 --> 00:10.000] about. [00:10.000 --> 00:13.240] On the right-hand side we've got the widget tree, that's what I'm talking about mostly, [00:13.240 --> 00:19.200] and then around the document, the application background, and the document colors itself. [00:19.200 --> 00:23.520] I'm calling them application colors and I'm calling the rest widget tree. [00:23.520 --> 00:28.560] That's a screenshot of dark mode GNOME, our GTK version. [00:28.560 --> 00:32.040] To overview most cases, what we have is the issue that you have to inform the platform [00:32.040 --> 00:34.520] that your application is opting into dark mode. [00:34.520 --> 00:38.440] You have to determine the application colors, the ones that you're going to use for your [00:38.440 --> 00:42.200] document background, and all the rest have to be extracted from the theme somehow. [00:42.200 --> 00:44.280] We have custom widgets in various places. [00:44.280 --> 00:47.880] They all need to know the appropriate colors to use foreground and background. [00:47.880 --> 00:52.680] The most common obvious problem is that most things have been light mode so far. [00:52.680 --> 00:56.880] People have just decided to draw what a random color, and they know that the background is [00:56.880 --> 01:01.600] light and that it's worked for them until now perfectly fine, now they have to explicitly [01:01.600 --> 01:02.600] set the background. [01:02.600 --> 01:06.880] If you're a developer here and you're doing previews, you're doing any custom widgets, [01:06.880 --> 01:10.120] just make sure you're setting both colors, foreground and background colors together, [01:10.120 --> 01:13.760] not just foreground, and the assumption that your background is suitable because it won't [01:13.760 --> 01:16.440] be anymore and it isn't. [01:16.440 --> 01:20.880] Conversion of GTK to dark mode, there's two different modes of doing things. [01:20.880 --> 01:23.360] In GTK we're using actual native GTK widgets. [01:23.360 --> 01:27.760] On the other platform, we're using our VCL widgets, and we team them to look like the [01:27.760 --> 01:31.760] actual platform widgets, but they're not the platform widgets, they're VCL widgets, but [01:31.760 --> 01:37.960] the GTK case, they actually are GTK widgets, which means that GTK conversion to dark mode [01:37.960 --> 01:38.960] is pretty easy. [01:38.960 --> 01:44.280] We just listen to the dark mode change on the platform on GNOME. [01:44.280 --> 01:49.600] We find out whether it's dark mode, and we tell GTK that we want GTK to be in dark mode, [01:49.600 --> 01:53.280] and then all GTK widget tree looks after itself, so all of that stuff just draws itself and [01:53.280 --> 01:54.280] dark mode automatically. [01:54.280 --> 01:55.840] We've nothing to worry about. [01:55.840 --> 01:59.880] All we have to do then is extract the colors from the team, tell our custom widgets what [01:59.880 --> 02:04.280] colors and foregrounds and backgrounds we want, and use the application colors then and the [02:04.280 --> 02:06.400] appropriate locations. [02:06.400 --> 02:11.440] That's all OK because in the case of GTK, any of the stuff we were using to query for [02:11.440 --> 02:14.200] team colors continues to work in dark mode. [02:14.200 --> 02:18.680] So if we ask for the application background, and we put GTK into dark mode, and we ask [02:18.680 --> 02:22.440] it for an application background, we get something that we can use to rate away, which [02:22.440 --> 02:26.720] would seem obvious, but it's not what's happening on the other platforms, and that's where things [02:26.720 --> 02:28.840] get quite difficult. [02:28.840 --> 02:32.000] Mac OS is medium difficulty. [02:32.000 --> 02:37.800] When you opt in by telling Mac OS that you're dark mode enabled, and then you query the [02:37.800 --> 02:43.000] Mac OS teams for colors, you get results back that are meaningful, as long as you stick [02:43.000 --> 02:45.640] to the non-deprecated ones. [02:45.640 --> 02:49.640] Some of the cases for Mac, we were not querying the team for background colors, we were just [02:49.640 --> 02:55.440] using hard coded colors, so if we update things pretty much to query what we should be using [02:55.440 --> 03:00.080] for the application background color, and so forth and so on, we get something meaningful [03:00.080 --> 03:04.760] in dark mode as well, and it's all easy for those cases. [03:04.760 --> 03:08.400] For the widgets here, though, things become more difficult. [03:08.400 --> 03:13.720] On Mac, what we have been doing is clicking harder. [03:13.720 --> 03:19.840] On Mac, there is a drawing interface we've been using all these years to draw onto our [03:19.840 --> 03:23.520] ECL widgets what the Mac buttons should look like. [03:23.520 --> 03:24.880] Those APIs there. [03:24.880 --> 03:29.080] If you go Google for the API, you'll find no documentation for them. [03:29.080 --> 03:33.520] There seems to be no acknowledgement on any of the Apple documentation pages that this [03:33.520 --> 03:38.320] API even exists or ever exists, and the problem is that even in dark mode, it draws in light [03:38.320 --> 03:43.920] mode, so any of the stuff we were using on Mac to draw things will only draw light mode, [03:43.920 --> 03:48.320] so it's all out of date, and it's all not supported, so the problem there is we have [03:48.320 --> 03:52.920] to roll a file or something that is working, and there's a whole set of other APIs on Mac [03:52.920 --> 03:59.000] that we can use, where we actually basically use the real Mac widgets, we keep a few of [03:59.000 --> 04:03.600] them cached, and we ask the real Mac widgets to render themselves onto our VCL widgets [04:03.600 --> 04:08.320] without the blank text so that we get what it looks like. [04:08.320 --> 04:11.960] On Mac, some of the things such as buttons will only render in fixed sizes, so if we [04:11.960 --> 04:18.440] have VCL widget that's big and you want to render a Mac button onto it, it'll only render [04:18.440 --> 04:22.000] a small slice of it, so you have to make sure that your buttons are the right size, or you [04:22.000 --> 04:27.000] have to change Mac buttons into one of the other supported styles, which will render [04:27.000 --> 04:32.360] into whatever space you give it, but some modes you can't. [04:32.360 --> 04:35.040] So it's very tricky. [04:35.040 --> 04:40.160] Some of these Mac widgets, if you actually try and create them in a thread at the abort, [04:40.160 --> 04:43.360] so you have to actually create them in your main thread and keep them for when you do [04:43.360 --> 04:45.360] want to draw on a thread later on. [04:45.360 --> 04:47.960] You can make it work. [04:47.960 --> 04:53.920] We're doing things much more at a distance when we're running with the full Mac widgets, [04:53.920 --> 04:58.080] we can't render a small part of a scroll bar, you've got to render the scroll bar basically, [04:58.080 --> 05:02.840] so we have to kind of work with things a bit more difficult than we did in the past. [05:02.840 --> 05:06.520] So it means that our work for tabpings and scroll bars are particularly complicated. [05:06.520 --> 05:10.080] We've got these focus rings. [05:10.080 --> 05:13.600] Our focus rings, even though we attempt to draw them the way the documentation is just [05:13.600 --> 05:18.480] to draw them, they're narrower than they should be, so they're not as prominent as I'd like [05:18.480 --> 05:19.480] them to be. [05:19.480 --> 05:23.880] There's, again, this draw focus ring mask with frame, which is supposed to be supposed [05:23.880 --> 05:27.360] to draw these things, but when I try it with different widgets, it works with some, it [05:27.360 --> 05:28.360] doesn't work with others. [05:28.360 --> 05:32.400] There's a lot of trial and error with a lot of this stuff. [05:32.400 --> 05:38.080] This feature for wallpaper tinting, where one thing behind the other shows up, I never [05:38.080 --> 05:39.160] got it to work. [05:39.160 --> 05:45.440] The accent colors work out of the box, so let's go shoot, shoot, shoot, shot at that. [05:45.440 --> 05:49.200] Mac, it all works fine, so that's what it looks like now, using the new APIs, accent [05:49.200 --> 05:53.240] color, in my case, I was ready to just pick one, application colors, blah, blah, blah. [05:53.240 --> 05:59.560] It all works fine, the changing of all the drawing stuff means that the light mode has [05:59.560 --> 06:05.200] changed as well, hopefully for the better, hopefully, but it has made an effect there. [06:05.200 --> 06:09.520] Windows then has the highest difficulty, opting in that you want to tell Windows that you [06:09.520 --> 06:11.480] are a dark mode application. [06:11.480 --> 06:14.800] Any of the stuff that we've been using all this time over the last 20, whatever, plus [06:14.800 --> 06:22.000] years, all those APIs, there isn't an obvious way that Windows has given us to support dark [06:22.000 --> 06:23.000] mode. [06:23.000 --> 06:27.320] In other words, if you actually use Windows in dark mode and you launch the file dialog, [06:27.320 --> 06:31.640] you'll see that it's all the old widgets, but it is using dark mode. [06:31.640 --> 06:35.520] File Explorer moves in dark mode as well, so they do it for their own. [06:35.520 --> 06:39.160] There's various ways of hacking this and undocumented stuff, we pulled out of that [06:39.160 --> 06:44.080] URL and the other projects, blah, blah, blah, all doing it, so there's a whole hecky way [06:44.080 --> 06:49.160] of doing this that is all based on undocumented ordinance, which is very unsatisfactory and [06:49.160 --> 06:50.160] fragile. [06:50.160 --> 06:53.520] Well, that's what we're doing. [06:53.520 --> 06:58.800] These are the APIs that we're using there, again, unlike the Mac case, the APIs still [06:58.800 --> 07:02.640] work and they will give you dark mode, but only for certain things, in other words, only [07:02.640 --> 07:06.280] if you pretend to be the two things that we showed in the previous style, if you pretend [07:06.280 --> 07:11.880] to be Explorer or the CFD, common file dialog, then you'll render in dark mode, but only [07:11.880 --> 07:16.680] for certain widgets, the ones that exist in those two applications, so you have to basically [07:16.680 --> 07:22.840] restrict yourself to what pallets of widgets are available in the two cases, which is fine, [07:22.840 --> 07:25.920] scroll bars are fine, but you have to hack them in like that. [07:25.920 --> 07:30.600] It's very unsatisfactory, but it does function. [07:30.600 --> 07:35.280] Unlike Mac, if you use the case for asking, querying for specific colors, you get back [07:35.280 --> 07:40.480] the light mode colors if you use the existing APIs, you have to update that, and again, [07:40.480 --> 07:45.520] you're limited to the widgets that are listed earlier, so you have to, again, set the Explorer [07:45.520 --> 07:50.160] theme or set the CFD theme and then query for what you know exists. [07:50.160 --> 07:55.760] The big lack is that there is no tab pane, or notebook or tab panes available in any [07:55.760 --> 08:00.440] of those applications, so in those cases, we're falling back to basically being a button, [08:00.440 --> 08:04.600] which is why we have some complexities around that. [08:04.600 --> 08:08.280] Dark mode, Windows 1, that's what it looks like, and then there's final stuff, there's [08:08.280 --> 08:14.680] other stuff, which is not dark mode, which is even more complicated when it comes to [08:14.680 --> 08:19.040] the accessibility high contrast mode, so then if you know anything about that, the last [08:19.040 --> 08:24.880] section knows about accessibility, let me know at some stage and we'll figure it out. [08:24.880 --> 08:29.360] So you've got complexities, that's why it's done the way it is, that's the end, thank [08:29.360 --> 08:30.360] you. [08:30.360 --> 08:47.400] Thank you.