{"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 &#8211; VCL &#8211; The DARK side"},"content":{"rendered":"\n<p>As in all things there are fashions in UI and UX design.  Right now perhaps the biggest trend is &#8220;dark mode&#8221;.  Unless you&#8217;ve been living under a rock you probably know this is where the operating system &#8211; Windows, iOS, macOS and Android &#8211; supports a user interface theme where the elements can be set to a &#8220;dark mode&#8221; which generally means all those big swathes of white automagically turn to a dark charcoal or black color.<\/p>\n\n\n\n<p>Windows 10 supports such a mode.  If you&#8217;re running one of the later builds you&#8217;ll find that all sorts of things can be &#8216;dark&#8217;.  <br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/image-3-1024x804.png\" alt=\"\" class=\"wp-image-154\" width=\"409\" height=\"321\" srcset=\"https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/image-3-1024x804.png 1024w, https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/image-3-300x236.png 300w, https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/image-3-768x603.png 768w, https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/image-3.png 1089w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><figcaption>Here&#8217;s Windows Explorer running in Dark Mode on Windows 10<\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>I personally run all my devices &#8211; I use Windows, macOS, iOS and Android every day &#8211; in dark mode.  I suffer from a harmless but annoying visual issue which people <a rel=\"noreferrer noopener\" aria-label=\"commonly call &quot;floaters&quot; (opens in a new tab)\" href=\"https:\/\/www.aao.org\/eye-health\/diseases\/what-are-floaters-flashes\" target=\"_blank\">commonly call &#8220;floaters&#8221;<\/a>.  It&#8217;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&#8217;t even notice them.<\/p>\n\n\n\n<p>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<p>This is where my CodeRage 2019 video (below) comes in.  We can detect whether Windows 10 is running in Dark or regular &#8216;light&#8217; 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&#8217;s VCL to swap the entire visual experience of our application to an appropriate theme.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"478\" src=\"https:\/\/www.codedotshow.com\/blog\/wp-content\/uploads\/2019\/11\/dark_mode_test_app.gif\" alt=\"\" class=\"wp-image-161\"\/><\/figure><\/div>\n\n\n\n<p>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&#8217;s also a demo project you can play with.<\/p>\n\n\n\n<p>One thing I don&#8217;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<p>To cope with that scenario you need to trap the WM_SYSCOLORCHANGE Windows message.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>procedure WMSysColorChange(var Message: TWMSysColorChange); message WM_SYSCOLORCHANGE;<\/code><\/pre>\n\n\n\n<p>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<pre class=\"wp-block-code\"><code>SetAppropriateThemeMode('Carbon', 'Windows10');<\/code><\/pre>\n\n\n\n<p>Note that all of this pertains to Microsoft Windows &#8211; and Windows 10 onwards.  Other OS do it differently.  <strong>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<h2 class=\"wp-block-heading\">Linkage<\/h2>\n\n\n\n<p>The link to the full video is here:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CodeRage 2019 VCL The Dark Side\" width=\"1170\" height=\"658\" src=\"https:\/\/www.youtube.com\/embed\/dt26jf5fu8A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The code samples can be found on my GitHub pages: <a rel=\"noreferrer noopener\" aria-label=\"https:\/\/github.com\/checkdigits\/delphidarkmode (opens in a new tab)\" href=\"https:\/\/github.com\/checkdigits\/delphidarkmode\" target=\"_blank\">https:\/\/github.com\/checkdigits\/delphidarkmode<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As in all things there are fashions in UI and UX design. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":10,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/164"}],"wp:attachment":[{"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedotshow.com\/blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}