🎨 Support using system color mode

- New ColorMode enum, similar to MaterialDesignThemes.Wpf.BaseTheme enum.
- Toggle color mode with RadioButton.
- Use system color theme by default.

AboutDialog.xaml

@@ -26,7 +26,7 @@
                    Style="{StaticResource MaterialDesignHeadline6TextBlock}"
                    TextWrapping="Wrap"
                    VerticalAlignment="Center">
-            About - v1.1 Build 20200714
+            About - v1.1 Build 20200715
         </TextBlock>
         <TextBlock Grid.Row="1"
                    Grid.Column="1"

App.xaml

@@ -6,7 +6,7 @@
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="#3d5afe" SecondaryColor="#00c853" />
+                <materialDesign:CustomColorTheme BaseTheme="Inherit" PrimaryColor="#3d5afe" SecondaryColor="#00c853" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>

README.md

@@ -7,7 +7,7 @@ A simple GUI wrapper for [`youtube-dl`](https://github.com/ytdl-org/youtube-dl).
 
 ## Features
 
-- Toggle 🌃 Dark Mode and 🔆 Light Mode.
+- Toggle between 🎨 system color mode, 🌃 dark mode, and 🔆 light mode.
 - Update `youtube-dl` on startup.
 - List available formats.
 - Override video and audio formats.

Settings.xaml

@@ -31,13 +31,30 @@
             <TextBlock Grid.Row="1" Grid.Column="0" Margin="8" Style="{StaticResource MaterialDesignHeadline6TextBlock}">UI</TextBlock>
             <TextBlock Grid.Row="2" Grid.Column="0" Style="{StaticResource MaterialDesignBody2TextBlock}" VerticalAlignment="Center" Margin="8">Color Mode</TextBlock>
             <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal">
-                <ToggleButton
-                    x:Name="darkModeToggle"
-                    Margin="8"
+                <RadioButton
+                    Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
+                    IsChecked="{Binding FollowOSColorMode}"
+                    Command="{Binding ChangeColorMode}"
+                    CommandParameter="{x:Static local:ColorMode.System}"
+                    GroupName="ColorMode">
+                    System
+                </RadioButton>
+                <RadioButton
+                    Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
+                    IsChecked="{Binding LightMode}"
+                    Command="{Binding ChangeColorMode}"
+                    CommandParameter="{x:Static local:ColorMode.Light}"
+                    GroupName="ColorMode">
+                    Light
+                </RadioButton>
+                <RadioButton
+                    Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
                     IsChecked="{Binding DarkMode}"
                     Command="{Binding ChangeColorMode}"
-                    CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}"/>
-                <TextBlock VerticalAlignment="Center" Margin="0,8,8,8" Text="{Binding ColorMode}" />
+                    CommandParameter="{x:Static local:ColorMode.Dark}"
+                    GroupName="ColorMode">
+                    Dark
+                </RadioButton>
             </StackPanel>
             <TextBlock Grid.Row="3" Grid.Column="0" Margin="8" Style="{StaticResource MaterialDesignHeadline6TextBlock}">Backend</TextBlock>
             <TextBlock Grid.Row="4" Grid.Column="0" Style="{StaticResource MaterialDesignBody2TextBlock}" VerticalAlignment="Center" Margin="8,8,8,8">Update <Span FontWeight="Medium">youtube-dl</Span> on Startup</TextBlock>

SettingsJson.cs

@@ -4,8 +4,7 @@ public class SettingsJson
     {
         public SettingsJson()
         {
-            // define default settings
-            DarkMode = false;
+            AppColorMode = ColorMode.System;
             AutoUpdateDl = true;
             DlPath = "";
             FfmpegPath = "";
@@ -22,7 +21,7 @@ public SettingsJson()
             DownloadPath = "";
         }
 
-        public bool DarkMode { get; set; }
+        public ColorMode AppColorMode { get; set; }
         public bool AutoUpdateDl { get; set; }
         public string DlPath { get; set; }
         public string FfmpegPath { get; set; }
@@ -38,4 +37,11 @@ public SettingsJson()
         public bool UseCustomPath { get; set; }
         public string DownloadPath { get; set; }
     }
+
+    public enum ColorMode
+    {
+        System,
+        Light,
+        Dark
+    }
 }

SettingsViewModel.cs

@@ -14,9 +14,10 @@ public SettingsViewModel(ISnackbarMessageQueue snackbarMessageQueue)
         {
             _snackbarMessageQueue = snackbarMessageQueue ?? throw new ArgumentNullException(nameof(snackbarMessageQueue));
 
+            _followOSColorMode = true;
+            _lightMode = false;
             _darkMode = false;
             _autoUpdateDl = true;
-            _colorMode = "Light Mode";
             _dlPath = "";
             _ffmpegPath = "";
             _proxy = "";
@@ -39,9 +40,10 @@ public SettingsViewModel(ISnackbarMessageQueue snackbarMessageQueue)
         private SettingsJson _settings = null!;
         private readonly SettingsChangedEvent settingsChangedEvent;
 
-        private bool _darkMode; // default to light mode
+        private bool _followOSColorMode; // default to true
+        private bool _lightMode;
+        private bool _darkMode;
         private bool _autoUpdateDl; // auto update youtube-dl by default
-        private string _colorMode; // color mode text for TextBlock
         private string _dlPath; // youtube-dl path
         private string _ffmpegPath;
         private string _proxy;
@@ -57,10 +59,36 @@ public SettingsViewModel(ISnackbarMessageQueue snackbarMessageQueue)
         private void OnChangeColorMode(object commandParameter)
         {
             ITheme theme = _paletteHelper.GetTheme();
-            IBaseTheme baseTheme = (bool)commandParameter ? new MaterialDesignDarkTheme() : (IBaseTheme)new MaterialDesignLightTheme();
-            theme.SetBaseTheme(baseTheme);
+            switch (commandParameter)
+            {
+                case ColorMode.System:
+                    var systemTheme = Theme.GetSystemTheme();
+                    switch (systemTheme)
+                    {
+                        case BaseTheme.Dark:
+                            theme.SetBaseTheme(Theme.Dark);
+                            break;
+                        case BaseTheme.Light:
+                        default:
+                            theme.SetBaseTheme(Theme.Light);
+                            break;
+                    }
+                    break;
+                case ColorMode.Light:
+                    theme.SetBaseTheme(Theme.Light);
+                    break;
+                case ColorMode.Dark:
+                    theme.SetBaseTheme(Theme.Dark);
+                    break;
+                default:
+                    throw new ArgumentException("Invalid AppColorMode");
+            }
             _paletteHelper.SetTheme(theme);
-            ColorMode = (bool)commandParameter ? "Dark Mode" : "Light Mode";
+            if (_settings.AppColorMode != (ColorMode)commandParameter)
+            {
+                _settings.AppColorMode = (ColorMode)commandParameter;
+                SaveSettings();
+            }
         }
 
         private void OnBrowseExe(object commandParameter)
@@ -125,15 +153,32 @@ private async Task LoadSettingsAsync()
         /// <returns></returns>
         private async Task ApplySettings()
         {
-            SetProperty(ref _darkMode, _settings.DarkMode);
+            switch (_settings.AppColorMode)
+            {
+                case ColorMode.System:
+                    SetProperty(ref _followOSColorMode, true);
+                    SetProperty(ref _lightMode, false);
+                    SetProperty(ref _darkMode, false);
+                    break;
+                case ColorMode.Light:
+                    SetProperty(ref _followOSColorMode, false);
+                    SetProperty(ref _lightMode, true);
+                    SetProperty(ref _darkMode, false);
+                    break;
+                case ColorMode.Dark:
+                    SetProperty(ref _followOSColorMode, false);
+                    SetProperty(ref _lightMode, false);
+                    SetProperty(ref _darkMode, true);
+                    break;
+                default:
+                    throw new ArgumentException("Invalid AppColorMode");
+            }
+            OnChangeColorMode(_settings.AppColorMode);
             SetProperty(ref _autoUpdateDl, _settings.AutoUpdateDl);
             SetProperty(ref _dlPath, _settings.DlPath);
             SetProperty(ref _ffmpegPath, _settings.FfmpegPath);
             SetProperty(ref _proxy, _settings.Proxy);
 
-            if (_darkMode == true)
-                OnChangeColorMode(true);
-
             await settingsChangedEvent.PublishAsync(_settings);
         }
 
@@ -171,16 +216,22 @@ private async Task SaveSettingsAsync()
             }
         }
 
+        public bool FollowOSColorMode
+        {
+            get => _followOSColorMode;
+            set => SetProperty(ref _followOSColorMode, value);
+        }
+
+        public bool LightMode
+        {
+            get => _lightMode;
+            set => SetProperty(ref _lightMode, value);
+        }
+
         public bool DarkMode
         {
             get => _darkMode;
-            set
-            {
-                SetProperty(ref _darkMode, value);
-                _settings.DarkMode = _darkMode;
-                SaveSettings();
-                PublishSettings();
-            }
+            set => SetProperty(ref _darkMode, value);
         }
 
         public bool AutoUpdateDl
@@ -194,12 +245,6 @@ public bool AutoUpdateDl
             }
         }
 
-        public string ColorMode
-        {
-            get => _colorMode;
-            set => SetProperty(ref _colorMode, value);
-        }
-
         public string DlPath
         {
             get => _dlPath;