{"id":141,"date":"2019-11-18T15:26:32","date_gmt":"2019-11-18T21:26:32","guid":{"rendered":"https:\/\/www.codedotshow.com\/blog\/?p=141"},"modified":"2019-11-21T09:08:34","modified_gmt":"2019-11-21T15:08:34","slug":"coderage-2019-vcl-the-dark-side","status":"publish","type":"post","link":"https:\/\/www.codedotshow.com\/blog\/coderage-2019-vcl-the-dark-side\/","title":{"rendered":"CodeRage 2019 – VCL – The DARK side"},"content":{"rendered":"\n

As in all things there are fashions in UI and UX design. Right now perhaps the biggest trend is “dark mode”. Unless you’ve been living under a rock you probably know this is where the operating system – Windows, iOS, macOS and Android – supports a user interface theme where the elements can be set to a “dark mode” which generally means all those big swathes of white automagically turn to a dark charcoal or black color.<\/p>\n\n\n\n

Windows 10 supports such a mode. If you’re running one of the later builds you’ll find that all sorts of things can be ‘dark’.
<\/p>\n\n\n\n

\"\"
Here’s Windows Explorer running in Dark Mode on Windows 10<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

I personally run all my devices – I use Windows, macOS, iOS and Android every day – in dark mode. I suffer from a harmless but annoying visual issue which people commonly call “floaters”<\/a>. It’s a factor of my age and eyesight. This means that bright white screens are not optimal since these little whispy things float around in my field of view while I am trying to get on with the job of coding. With Dark Mode enabled the floaters, which are also dark, are almost completely mitigated to the point where I don’t even notice them.<\/p>\n\n\n\n

So, for me, and perhaps others, Dark Mode is a huge benefit rather than just an aesthetic choice and I want every app I can to support it.<\/p>\n\n\n\n

This is where my CodeRage 2019 video (below) comes in. We can detect whether Windows 10 is running in Dark or regular ‘light’ mode using standard and fairly straight-forward Delphi code. When we know what mode the OS is running in we can use the power of Delphi’s VCL to swap the entire visual experience of our application to an appropriate theme.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

In the video I show you how to do this with a simple Delphi unit I wrote which you can include in your own apps. There’s also a demo project you can play with.<\/p>\n\n\n\n

One thing I don’t discuss is what to do if your app is already running and then the user changes the Windows theme from light to dark or vice versa.<\/p>\n\n\n\n

To cope with that scenario you need to trap the WM_SYSCOLORCHANGE Windows message.<\/p>\n\n\n\n

procedure WMSysColorChange(var Message: TWMSysColorChange); message WM_SYSCOLORCHANGE;<\/code><\/pre>\n\n\n\n
When the WM_SYSCOLORCHANGE message is triggered you then need to check the Windows theme mode and react accordingly.  Like so:<\/p>\n\n\n\n
SetAppropriateThemeMode('Carbon', 'Windows10');<\/code><\/pre>\n\n\n\n
Note that all of this pertains to Microsoft Windows – and Windows 10 onwards.  Other OS do it differently.  Note also that Delphi 10.3.3 Rio has just been released<\/strong> and this includes specific code for Dark mode in your apps.<\/p>\n\n\n\n
Linkage<\/h2>\n\n\n\n
The link to the full video is here:<\/p>\n\n\n\n
\n