![\"\"](\"https:\/\/i0.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/WindowsDarkMode.png?resize=525%2C350&ssl=1\")
<\/p>\nIn a recent Windows 10 update a toggle switch was added to allow the user to specify that they wanted “Dark” themes in apps:<\/p>\n
<\/p>\n
I decided to add support for this to VidCoder<\/a>. But no updates to WPF were made to make this easy. WPF does having theming support where it can pull in different .xaml resource files from a Themes folder, but this is all Luna\/Aero\/Win10 styling that is automatically applied based on your OS. After digging in the WPF source code I determined that there’s no way to hook in your own theme to this or manually alter which theme is loaded.<\/p>\n Furthermore, the actual dark theme setting is not exposed in a friendly manner to WPF. But we can still do it. Let’s get started.<\/p>\n The first step is finding out what theme we should be applying. To do that we need to tell what dark mode choice the user has made and detect when it’s changed. We also need to tell if the user has turned on High Contrast and detect when it’s changed.<\/p>\n To get the windows theme we need to poke into the registry. I used a WMI query to watch the registry for changes so we can update the app theme when they change the setting.<\/p>\n Our app will have 3 “modes”: Light, Dark and High Contrast. In High Contrast we’ll reference a limited set of system colors which will come from the user’s settings:<\/p>\n We’ll need to find if High Contrast is enabled and when it changes:<\/p>\n We want to end up with a value from this enum:<\/p>\n You’ll need to use logic to combine light\/dark with the High Contrast bool to get the theme and react to changes. I used ReactiveX Observables but you might have something else. Anyhow, if High Contrast is enabled, use that theme. Otherwise, use the Light\/Dark as indicated by the registry key setting.<\/p>\n After we know what theme we want, we now need to apply it. Fortunately WPF has an excellent mechanism to swap out styles: ResourceDictionaries. Make your dictionaries like so:<\/p>\n Then inside each:<\/p>\n We can specify the “default” style by including Light.xaml in App.xaml:<\/p>\n That will make the designer happy. Though obviously we don’t want to have that theme all the time. We can swap out the theme before opening any windows in App.xaml.cs:<\/p>\n That way the app loads up with the correct theme. You can also run this code when the user updates the theme.<\/p>\n The only thing you want to put into the theme dictionaries are Brush resources (and maybe Colors if you need them). Dark and Light should have whatever looks good to you. For High Contrast, we should pick from the official SystemColors<\/a>. For example, if you had a special window background brush, you’d want to define it as this in HighContrast.xaml:<\/p>\n If you choose from SystemColors, it will work for any High Contrast variant the user chooses, even if they customize it.<\/p>\n Another trick you can use in Dark.xaml is overriding system colors with your own:<\/p>\n This causes any standard control that uses the system colors to use the one you’ve supplied.<\/p>\n Now to use a theme color you should always refer to it like so:<\/p>\n A StaticResource never changes, but a DynamicResource reference can update, which comes in handy when the users switches on\/off dark mode or High Contrast.<\/p>\n While the SystemColor overrides I mentioned earlier can help a lot with re-theming built-in controls, unfortunately there are a lot of controls that don’t pay any attention to system colors.<\/p>\n Button, for example is one of them. Unfortunately, there doesn’t appear to be any way to override these colors. The only way to re-skin them is to make a copy of their ControlTemplate and insert references to our own themed colors. Unfortunately that means that the controls will now look the same no matter what version of Windows the user has, but I don’t know of any way around it. I based mine off the styling in Windows 10, just so it would look consistent in the latest version and stay “current” longer.<\/p>\n Anyway, there’s a couple ways to do it: One by copying the Styles and Templates documentation<\/a> for the control you want to theme. Another is by right clicking on the control in the designer, then Edit Template -> Edit a Copy.<\/p>\n You’ll want to park the style with ControlTemplate override in App.xaml (Or another dictionary referenced by App.xaml):<\/p>\n I ripped out the FocusVisualStyle override since the default one seems to work fine for all themes. I also include both a “Base” style and an implicit style (that has no key). Controls that don’t specify a style will pick up the implicit style, while control that do need to specify a style can base it on the Base style.<\/p>\n I also moved all the “Brush” resources out to the Theme dictionaries where they belong, and changed all the references to {DynamicResource}.<\/p>\n One thing to watch out for is that some overrides like ComboBox will reference a control from PresentationFramework.Aero2 in their ControlTemplate. If you see a namespace brought in that references Aero2, that means your program won’t work on Windows 7. To keep it compatible, delete the “2” to reference PresentationFramework.Aero.<\/p>\n There’s a lot more “grunt work” involved in picking all the colors, but that covers the overall strategy I used to convert all the app UI. Here’s our new, themed UI:<\/p>\n Now that we’ve converted all of our UI, we might see something like this:<\/p>\n All of the content is themed, but the title bar isn’t. It doesn’t look the best. We can fix it, but unfortunately the only way to do that is to implement the title bar from scratch all on our own. That is a whole separate journey that I go over in another post<\/a>.<\/p>\n Here’s what we get with our custom title bar:<\/p>\n A pain to implement, but at least now it looks less like garbage.<\/p>\nDetecting Windows Dark Mode setting + High Contrast<\/h2>\n
Dark mode detection<\/h3>\n
private const string RegistryKeyPath = @\"Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize\";\n\nprivate const string RegistryValueName = \"AppsUseLightTheme\";\n\nprivate enum WindowsTheme\n{\n\tLight,\n\tDark\n}\n\npublic void WatchTheme()\n{\n\tvar currentUser = WindowsIdentity.GetCurrent();\n\tstring query = string.Format(\n\t\tCultureInfo.InvariantCulture,\n\t\t@\"SELECT * FROM RegistryValueChangeEvent WHERE Hive = 'HKEY_USERS' AND KeyPath = '{0}\\\\{1}' AND ValueName = '{2}'\",\n\t\tcurrentUser.User.Value,\n\t\tRegistryKeyPath.Replace(@\"\\\", @\"\\\\\"),\n\t\tRegistryValueName);\n\n\ttry\n\t{\n\t\tvar watcher = new ManagementEventWatcher(query);\n\t\twatcher.EventArrived += (sender, args) =>\n\t\t{\n\t\t\tWindowsTheme newWindowsTheme = GetWindowsTheme();\n\t\t\t\/\/ React to new theme\n\t\t};\n\n\t\t\/\/ Start listening for events\n\t\twatcher.Start();\n\t}\n\tcatch (Exception)\n\t{\n\t\t\/\/ This can fail on Windows 7\n\t}\n\n\tWindowsTheme initialTheme = GetWindowsTheme();\n}\n\nprivate static WindowsTheme GetWindowsTheme()\n{\n\tusing (RegistryKey key = Registry.CurrentUser.OpenSubKey(RegistryKeyPath))\n\t{\n\t\tobject registryValueObject = key?.GetValue(RegistryValueName);\n\t\tif (registryValueObject == null)\n\t\t{\n\t\t\treturn WindowsTheme.Light;\n\t\t}\n\n\t\tint registryValue = (int)registryValueObject;\n\n\t\treturn registryValue > 0 ? WindowsTheme.Light : WindowsTheme.Dark;\n\t}\n}\n<\/pre>\nHigh Contrast detection<\/h3>\n
![\"\"](\"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/HighContrastWindows.png?resize=489%2C620&ssl=1\")
<\/p>\nbool isHighContrast = SystemParameters.HighContrast;\nSystemParameters.StaticPropertyChanged += (sender, args) =>\n{\n\tif (args.PropertyName == nameof(SystemParameters.HighContrast))\n\t{\n\t\tbool newIsHighContrast = SystemParameters.HighContrast;\n\t}\n};\n<\/pre>\nCombining the values<\/h3>\n
public enum AppTheme\n{\n\tLight,\n\tDark,\n\tHighContrast\n}\n<\/pre>\nSetting up theme swapping<\/h2>\n
![\"\"](\"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/ThemesFolder.png?resize=178%2C77&ssl=1\")
<\/p>\n<ResourceDictionary\n\txmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n\txmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\">\n\t<SolidColorBrush x:Key=\"MyBackgroundBrush\" Color=\"#8EC2FA\" \/>\n<\/ResourceDictionary>\n<\/pre>\n
<Application.Resources>\n\t<ResourceDictionary>\n\t\t<ResourceDictionary.MergedDictionaries>\n\t\t\t<ResourceDictionary Source=\"\/Themes\/Light.xaml\" \/>\n\t\t<\/ResourceDictionary.MergedDictionaries>\n\n\t\t<!-- Other App-level items -->\n<\/pre>\n
this.Resources.MergedDictionaries[0].Source =\n new Uri($\"\/Themes\/{appTheme}.xaml\", UriKind.Relative);<\/pre>\nPopulating the theme dictionaries<\/h2>\n
<SolidColorBrush x:Key=\"MyBackgroundBrush\" Color=\"{x:Static SystemColors.WindowColor}\" \/>\n<\/pre>\n<SolidColorBrush x:Key=\"{x:Static SystemColors.WindowBrushKey}\" Color=\"Black\" \/>\n<SolidColorBrush x:Key=\"{x:Static SystemColors.WindowTextBrushKey}\" Color=\"White\" \/>\n<\/pre>\nReferencing theme colors<\/h2>\n
{DynamicResource MyBackgroundBrush}<\/pre>\nTheming built-in controls<\/h2>\n
<Style x:Key=\"ButtonBaseStyle\" TargetType=\"Button\">\n\t<Setter Property=\"Background\" Value=\"{DynamicResource Button.Static.Background}\" \/>\n\t<Setter Property=\"BorderBrush\" Value=\"{DynamicResource Button.Static.Border}\" \/>\n\t<Setter Property=\"Foreground\" Value=\"{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}\" \/>\n\t<Setter Property=\"BorderThickness\" Value=\"1\" \/>\n\t<Setter Property=\"HorizontalContentAlignment\" Value=\"Center\" \/>\n\t<Setter Property=\"VerticalContentAlignment\" Value=\"Center\" \/>\n\t<Setter Property=\"Padding\" Value=\"1\" \/>\n\t<Setter Property=\"Template\">\n\t\t<Setter.Value>\n\t\t\t<ControlTemplate TargetType=\"{x:Type Button}\">\n\t\t\t\t<Border\n\t\t\t\t\tx:Name=\"border\"\n\t\t\t\t\tBackground=\"{TemplateBinding Background}\"\n\t\t\t\t\tBorderBrush=\"{TemplateBinding BorderBrush}\"\n\t\t\t\t\tBorderThickness=\"{TemplateBinding BorderThickness}\"\n\t\t\t\t\tSnapsToDevicePixels=\"true\">\n\t\t\t\t\t<ContentPresenter\n\t\t\t\t\t\tx:Name=\"contentPresenter\"\n\t\t\t\t\t\tMargin=\"{TemplateBinding Padding}\"\n\t\t\t\t\t\tHorizontalAlignment=\"{TemplateBinding HorizontalContentAlignment}\"\n\t\t\t\t\t\tVerticalAlignment=\"{TemplateBinding VerticalContentAlignment}\"\n\t\t\t\t\t\tFocusable=\"False\"\n\t\t\t\t\t\tRecognizesAccessKey=\"True\"\n\t\t\t\t\t\tSnapsToDevicePixels=\"{TemplateBinding SnapsToDevicePixels}\" \/>\n\t\t\t\t<\/Border>\n\t\t\t\t<ControlTemplate.Triggers>\n\t\t\t\t\t<Trigger Property=\"IsDefaulted\" Value=\"true\">\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"BorderBrush\" Value=\"{DynamicResource {x:Static SystemColors.HighlightBrushKey}}\" \/>\n\t\t\t\t\t<\/Trigger>\n\t\t\t\t\t<Trigger Property=\"IsMouseOver\" Value=\"true\">\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"Background\" Value=\"{DynamicResource Button.MouseOver.Background}\" \/>\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"BorderBrush\" Value=\"{DynamicResource Button.MouseOver.Border}\" \/>\n\t\t\t\t\t<\/Trigger>\n\t\t\t\t\t<Trigger Property=\"IsPressed\" Value=\"true\">\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"Background\" Value=\"{DynamicResource Button.Pressed.Background}\" \/>\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"BorderBrush\" Value=\"{DynamicResource Button.Pressed.Border}\" \/>\n\t\t\t\t\t<\/Trigger>\n\t\t\t\t\t<Trigger Property=\"IsEnabled\" Value=\"false\">\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"Background\" Value=\"{DynamicResource Button.Disabled.Background}\" \/>\n\t\t\t\t\t\t<Setter TargetName=\"border\" Property=\"BorderBrush\" Value=\"{DynamicResource Button.Disabled.Border}\" \/>\n\t\t\t\t\t\t<Setter TargetName=\"contentPresenter\" Property=\"TextElement.Foreground\" Value=\"{DynamicResource Button.Disabled.Foreground}\" \/>\n\t\t\t\t\t<\/Trigger>\n\t\t\t\t<\/ControlTemplate.Triggers>\n\t\t\t<\/ControlTemplate>\n\t\t<\/Setter.Value>\n\t<\/Setter>\n<\/Style>\n<Style BasedOn=\"{StaticResource ButtonBaseStyle}\" TargetType=\"Button\" \/>\n<\/pre>\n![\"\"](\"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/VidCoderDarkExample.png?resize=426%2C219&ssl=1\")
<\/p>\nWindow title bar<\/h2>\n
![\"\"](\"https:\/\/i0.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/PreTitleBarTheme.png?resize=293%2C186&ssl=1\")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/engy.us\/blog\/wp-content\/uploads\/2018\/10\/DarkTitleBar.png?resize=525%2C49&ssl=1\")
<\/p>\nSource reference<\/h2>\n