Dark mode (#299)

Tyrrrz · May 14, 2024 · bf98eb1 · bf98eb1
1 parent 0dd6505
commit bf98eb1
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 73 deletions.
diff --git a/LightBulb/App.axaml b/LightBulb/App.axaml
@@ -4,13 +4,15 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:dialogHostAvalonia="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
     xmlns:framework="clr-namespace:LightBulb.Framework"
+    xmlns:sys="using:System"
     xmlns:materialAssists="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
+    xmlns:materialControls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
     xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
-    xmlns:materialStyles="clr-namespace:Material.Styles.Themes;assembly=Material.Styles"
-    RequestedThemeVariant="Light">
+    xmlns:materialStyles="clr-namespace:Material.Styles.Themes;assembly=Material.Styles">
     <Application.DataTemplates>
         <framework:ViewManager />
     </Application.DataTemplates>
+
     <Application.Styles>
         <Style>
             <Style.Resources>
@@ -79,19 +81,62 @@
             </Style>
         </Style>
 
+        <!-- Apply Slider Accent class, since Material doesn't do it itself -->
+        <Style Selector="Slider.accent">
+            <Style Selector="^ Border#PART_InactiveState">
+                <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+            <Style Selector="^ Border#PART_Indicator">
+                <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+            <Style Selector="^ Border#PART_HoverEffect">
+                <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+
+            <Style Selector="^ Border#PART_ThumbGrip">
+                <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+        </Style>
+
         <!--  Text box  -->
         <Style Selector="TextBox">
             <Setter Property="FontSize" Value="14" />
         </Style>
 
+        <!-- Apply TextBox Accent class, since material doesn't do it itself -->
+        <Style Selector="TextBox.accent">
+            <Setter Property="SelectionBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            <Setter Property="SelectionForegroundBrush" Value="{DynamicResource MaterialSecondaryForegroundBrush}" />
+            <Setter Property="CaretBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            <Style Selector="^ materialControls|MaterialUnderline">
+                <Setter Property="ActiveBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+        </Style>
+
         <!--  Toggle button  -->
         <Style Selector="ToggleButton">
             <Setter Property="TextElement.FontWeight" Value="Medium" />
         </Style>
 
+        <!-- Combo box -->
+        <Style Selector="ComboBox">
+            <Style Selector="^ /template/ Panel#PART_RootPanel">
+                <Setter Property="Height" Value="22" />
+            </Style>
+        </Style>
+
+        <!-- Apply ComboBox Accent class, since material doesn't do it itself -->
+        <Style Selector="ComboBox.accent">
+            <Style Selector="^ materialControls|MaterialUnderline">
+                <Setter Property="ActiveBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+            </Style>
+        </Style>
+
         <!--  Toggle switch  -->
         <Style Selector="ToggleSwitch">
-            <Setter Property="materialAssists:ToggleSwitchAssist.SwitchThumbOffBackground" Value="{DynamicResource MaterialBackgroundBrush}" />
+            <!-- Apply custom style for disabled toggles, because Material's default is bad.-->
+            <!-- Tracked in https://github.com/AvaloniaCommunity/Material.Avalonia/issues/379 -->
+            <Setter Property="materialAssists:ToggleSwitchAssist.SwitchThumbOffBackground" Value="{DynamicResource ToggleBackgroundBrush}" />
         </Style>
 
         <!--  Tooltip  -->
@@ -104,25 +149,38 @@
     </Application.Styles>
 
     <Application.Resources>
-        <!--  Text box  -->
-        <ControlTheme
-            x:Key="CompactTextBox"
-            BasedOn="{StaticResource {x:Type TextBox}}"
-            TargetType="{x:Type TextBox}">
-            <Styles>
-                <Style Selector="TextBox">
-                    <Setter Property="Height" Value="22" />
-
-                    <Style Selector="^ /template/ Panel#PART_TextFieldPanel">
-                        <Setter Property="MinHeight" Value="0" />
-                    </Style>
-
-                    <Style Selector="^ /template/ Panel#PART_TextContainer">
-                        <Setter Property="Margin" Value="0" />
+        <ResourceDictionary>
+            <!--  Text box  -->
+            <ControlTheme
+                x:Key="CompactTextBox"
+                BasedOn="{StaticResource {x:Type TextBox}}"
+                TargetType="{x:Type TextBox}">
+                <Styles>
+                    <Style Selector="TextBox">
+                        <Setter Property="Height" Value="22" />
+
+                        <Style Selector="^ /template/ Panel#PART_TextFieldPanel">
+                            <Setter Property="MinHeight" Value="0" />
+                        </Style>
+                        <Style Selector="^ /template/ Panel#PART_TextContainer">
+                            <Setter Property="Margin" Value="0" />
+                        </Style>
                     </Style>
-                </Style>
-            </Styles>
-        </ControlTheme>
+                </Styles>
+            </ControlTheme>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Light">
+                    <!-- Custom style for disabled toggles -->
+                    <SolidColorBrush x:Key="ToggleBackgroundBrush" Color="#FFFFFF"></SolidColorBrush>
+                    <sys:Boolean x:Key="UseAccentControls">false</sys:Boolean>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <!-- Custom style for disabled toggles -->
+                    <SolidColorBrush x:Key="ToggleBackgroundBrush" Color="#8E8E8E"></SolidColorBrush>
+                    <sys:Boolean x:Key="UseAccentControls">true</sys:Boolean>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+        </ResourceDictionary>
     </Application.Resources>
 
     <!--  Tray icon  -->

diff --git a/LightBulb/App.axaml.cs b/LightBulb/App.axaml.cs
@@ -5,8 +5,10 @@
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
+using Avalonia.Platform;
 using Avalonia.Threading;
 using LightBulb.Framework;
+using LightBulb.Models;
 using LightBulb.Services;
 using LightBulb.Utils;
 using LightBulb.Utils.Extensions;
@@ -26,6 +28,7 @@ public class App : Application, IDisposable
 
     private readonly ServiceProvider _services;
     private readonly MainViewModel _mainViewModel;
+    private readonly SettingsService _settingsService;
 
     public App()
     {
@@ -56,6 +59,22 @@ public App()
 
         _services = services.BuildServiceProvider(true);
         _mainViewModel = _services.GetRequiredService<ViewModelManager>().CreateMainViewModel();
+        _settingsService = _services.GetRequiredService<SettingsService>();
+
+        // Load settings
+        _settingsService.Load();
+
+        _settingsService.WatchProperty(
+            o => o.Theme,
+            () =>
+            {
+                if (PlatformSettings is IPlatformSettings settings)
+                {
+                    SetupTheme(settings.GetColorValues());
+                }
+            },
+            false
+        );
     }
 
     public override void Initialize()
@@ -95,12 +114,45 @@ public override void OnFrameworkInitializationCompleted()
 
         base.OnFrameworkInitializationCompleted();
 
-        // Set custom theme colors
-        this.LocateMaterialTheme<MaterialThemeBase>().CurrentTheme = Theme.Create(
-            Theme.Light,
-            Color.Parse("#343838"),
-            Color.Parse("#F9A825")
-        );
+        if (PlatformSettings is IPlatformSettings settings)
+        {
+            settings.ColorValuesChanged += PlatformSettings_ColorValuesChanged;
+            SetupTheme(settings.GetColorValues());
+        }
+    }
+
+    private void PlatformSettings_ColorValuesChanged(object? sender, PlatformColorValues colors)
+    {
+        SetupTheme(colors);
+    }
+
+    private void SetupTheme(PlatformColorValues colors)
+    {
+        var themeMode = _settingsService.Theme;
+        if (themeMode == ThemeMode.System)
+        {
+            themeMode =
+                colors.ThemeVariant == PlatformThemeVariant.Dark ? ThemeMode.Dark : ThemeMode.Light;
+        }
+
+        if (themeMode == ThemeMode.Dark)
+        {
+            RequestedThemeVariant = Avalonia.Styling.ThemeVariant.Dark;
+            this.LocateMaterialTheme<MaterialThemeBase>().CurrentTheme = Theme.Create(
+                Theme.Dark,
+                Color.Parse("#202222"),
+                Color.Parse("#F9A825")
+            );
+        }
+        else
+        {
+            RequestedThemeVariant = Avalonia.Styling.ThemeVariant.Light;
+            this.LocateMaterialTheme<MaterialThemeBase>().CurrentTheme = Theme.Create(
+                Theme.Light,
+                Color.Parse("#343838"),
+                Color.Parse("#F9A825")
+            );
+        }
     }
 
     private void TrayIcon_OnClicked(object? sender, EventArgs args) => this.TryFocusMainWindow();

diff --git a/LightBulb/LightBulb.csproj b/LightBulb/LightBulb.csproj
@@ -26,7 +26,7 @@
     <PackageReference Include="Deorcify" Version="1.0.2" PrivateAssets="all" />
     <PackageReference Include="DialogHost.Avalonia" Version="0.7.7" />
     <PackageReference Include="DotnetRuntimeBootstrapper" Version="2.5.3" PrivateAssets="all" Condition="$([MSBuild]::IsOsPlatform('Windows'))" />
-    <PackageReference Include="Material.Avalonia" Version="3.5.0" />
+    <PackageReference Include="Material.Avalonia" Version="3.6.0" />
     <PackageReference Include="Material.Icons.Avalonia" Version="2.1.9" />
     <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="8.0.0" />
     <PackageReference Include="Onova" Version="2.6.11" />

diff --git a/LightBulb/Models/ThemeMode.cs b/LightBulb/Models/ThemeMode.cs
@@ -0,0 +1,22 @@
+namespace LightBulb.Models;
+
+/// <summary>
+/// Describes the application's theme mode.
+/// </summary>
+public enum ThemeMode
+{
+    /// <summary>
+    /// Use the light theme
+    /// </summary>
+    Light,
+
+    /// <summary>
+    /// Use the dark theme
+    /// </summary>
+    Dark,
+
+    /// <summary>
+    /// Use whichever theme is specified by system settings
+    /// </summary>
+    System
+}
diff --git a/LightBulb/Services/SettingsService.cs b/LightBulb/Services/SettingsService.cs
@@ -88,6 +88,9 @@ public partial class SettingsService() : SettingsBase(GetFilePath())
     [property: JsonIgnore] // comes from registry
     private bool _isAutoStartEnabled;
 
+    [ObservableProperty]
+    private ThemeMode _theme = ThemeMode.System;
+
     [ObservableProperty]
     private bool _isAutoUpdateEnabled = true;
 

diff --git a/LightBulb/ViewModels/Components/Settings/AdvancedSettingsTabViewModel.cs b/LightBulb/ViewModels/Components/Settings/AdvancedSettingsTabViewModel.cs
@@ -1,4 +1,7 @@
-using LightBulb.Services;
+using System;
+using System.Collections.Generic;
+using LightBulb.Models;
+using LightBulb.Services;
 
 namespace LightBulb.ViewModels.Components.Settings;
 
@@ -11,6 +14,14 @@ public bool IsAutoStartEnabled
         set => SettingsService.IsAutoStartEnabled = value;
     }
 
+    public IReadOnlyList<ThemeMode> ThemeArray { get; } = Enum.GetValues<ThemeMode>();
+
+    public ThemeMode Theme
+    {
+        get => SettingsService.Theme;
+        set => SettingsService.Theme = value;
+    }
+
     public bool IsAutoUpdateEnabled
     {
         get => SettingsService.IsAutoUpdateEnabled;

diff --git a/LightBulb/ViewModels/MainViewModel.cs b/LightBulb/ViewModels/MainViewModel.cs
@@ -143,9 +143,6 @@ Click LEARN MORE to find ways that you can help.
     [RelayCommand]
     private async Task InitializeAsync()
     {
-        // Load settings
-        settingsService.Load();
-
         await FinalizePendingUpdateAsync();
         await ShowGammaRangePromptAsync();
         await ShowFirstTimeExperienceMessageAsync();