diff --git a/src/PayBeat.App/App.xaml.cs b/src/PayBeat.App/App.xaml.cs
index 26e6436..c157fcb 100644
--- a/src/PayBeat.App/App.xaml.cs
+++ b/src/PayBeat.App/App.xaml.cs
@@ -1,9 +1,9 @@
+using Microsoft.Win32;
 using PayBeat.App.Helpers;
 using PayBeat.App.Models;
 using PayBeat.App.Services;
 using PayBeat.App.ViewModels;
 using PayBeat.App.Views;
-using Microsoft.Win32;
 using System.Windows.Interop;
 
 namespace PayBeat.App;
@@ -62,6 +62,7 @@ protected override void OnStartup(StartupEventArgs e)
         var settings = _settingsService.Load();
         _startupSettings = settings;
         LocalizationService.Apply(settings.Language);
+        ThemeService.Apply(settings.Theme);
 
         _singleInstanceMutex = new Mutex(initiallyOwned: true, "PayBeat_SingleInstance", out var createdNew);
         if (!createdNew)
diff --git a/src/PayBeat.App/GlobalUsings.cs b/src/PayBeat.App/GlobalUsings.cs
index 40085ba..143c271 100644
--- a/src/PayBeat.App/GlobalUsings.cs
+++ b/src/PayBeat.App/GlobalUsings.cs
@@ -1,5 +1,4 @@
 global using System.Windows;
-global using System.Windows.Controls;
 global using System.Windows.Input;
 global using System.Windows.Threading;
 global using System.IO;
diff --git a/src/PayBeat.App/Models/SalarySettings.cs b/src/PayBeat.App/Models/SalarySettings.cs
index a57e7b7..1574432 100644
--- a/src/PayBeat.App/Models/SalarySettings.cs
+++ b/src/PayBeat.App/Models/SalarySettings.cs
@@ -8,28 +8,44 @@ public record SalarySettings
 {
     public const decimal MaxDailySalary = 99_999_999m;
 
-    /// <summary>Daily gross salary used to compute the per-second earnings rate.</summary>
+    /// <summary>
+    /// Daily gross salary used to compute the per-second earnings rate.
+    /// </summary>
     public decimal DailySalary { get; init; } = 500m;
 
-    /// <summary>Work day start time; earnings accrue from this moment.</summary>
+    /// <summary>
+    /// Work day start time; earnings accrue from this moment.
+    /// </summary>
     public TimeOnly WorkStart { get; init; } = new(9, 0);
 
-    /// <summary>Work day end time; earnings are capped at <see cref="DailySalary"/> after this.</summary>
+    /// <summary>
+    /// Work day end time; earnings are capped at <see cref="DailySalary"/> after this.
+    /// </summary>
     public TimeOnly WorkEnd { get; init; } = new(18, 0);
 
-    /// <summary>Currency symbol prepended to the formatted earnings string.</summary>
+    /// <summary>
+    /// Currency symbol prepended to the formatted earnings string.
+    /// </summary>
     public string Currency { get; init; } = "¥";
 
-    /// <summary>Active widget display mode, determining which view template is shown.</summary>
+    /// <summary>
+    /// Active widget display mode, determining which view template is shown.
+    /// </summary>
     public DisplayMode DisplayMode { get; init; } = DisplayMode.Normal;
 
-    /// <summary>Whether the widget window is pinned above all other windows.</summary>
+    /// <summary>
+    /// Whether the widget window is pinned above all other windows.
+    /// </summary>
     public bool AlwaysOnTop { get; init; } = true;
 
-    /// <summary>Timer tick interval in seconds for refreshing the earnings display.</summary>
+    /// <summary>
+    /// Timer tick interval in seconds for refreshing the earnings display.
+    /// </summary>
     public int RefreshInterval { get; init; } = 1;
 
-    /// <summary>Window opacity when the mouse is not hovering (0.1–1.0).</summary>
+    /// <summary>
+    /// Window opacity when the mouse is not hovering (0.1–1.0).
+    /// </summary>
     public double Opacity { get; init; } = 1.0;
 
     /// <summary>
@@ -44,48 +60,78 @@ public record SalarySettings
     /// </summary>
     public int HotkeyModifiers { get; init; } = 0x0003;
 
-    /// <summary>Virtual-key code for the global show/hide hotkey. Default <c>0x58</c> = X.</summary>
+    /// <summary>
+    /// Virtual-key code for the global show/hide hotkey. Default <c>0x58</c> = X.
+    /// </summary>
     public int HotkeyVirtualKey { get; init; } = 0x58;
 
-    /// <summary>Last saved position for <see cref="DisplayMode.Normal"/> mode.</summary>
+    /// <summary>
+    /// Last saved position for <see cref="DisplayMode.Normal"/> mode.
+    /// </summary>
     public WindowPosition? NormalPosition
     {
         get; init;
     }
 
-    /// <summary>Last saved position for <see cref="DisplayMode.Mini"/> mode.</summary>
+    /// <summary>
+    /// Last saved position for <see cref="DisplayMode.Mini"/> mode.
+    /// </summary>
     public WindowPosition? MiniPosition
     {
         get; init;
     }
 
-    /// <summary>Last saved monitor for <see cref="DisplayMode.Flex"/> mode. Only <see cref="WindowPosition.ScreenDeviceName"/> is used.</summary>
+    /// <summary>
+    /// Last saved monitor for <see cref="DisplayMode.Flex"/> mode. Only <see cref="WindowPosition.ScreenDeviceName"/> is used.
+    /// </summary>
     public WindowPosition? FlexPosition
     {
         get; init;
     }
 
-    /// <summary>Whether earnings should be deducted for a daily lunch break.</summary>
+    /// <summary>
+    /// Whether earnings should be deducted for a daily lunch break.
+    /// </summary>
     public bool LunchBreakEnabled { get; init; } = false;
 
-    /// <summary>Lunch break start time; only used when <see cref="LunchBreakEnabled"/> is true.</summary>
+    /// <summary>
+    /// Lunch break start time; only used when <see cref="LunchBreakEnabled"/> is true.
+    /// </summary>
     public TimeOnly LunchBreakStart { get; init; } = new(12, 0);
 
-    /// <summary>Lunch break end time; only used when <see cref="LunchBreakEnabled"/> is true.</summary>
+    /// <summary>
+    /// Lunch break end time; only used when <see cref="LunchBreakEnabled"/> is true.
+    /// </summary>
     public TimeOnly LunchBreakEnd { get; init; } = new(13, 0);
 
-    /// <summary>Whether earnings accrue on Saturdays and Sundays. When false, weekends earn nothing.</summary>
+    /// <summary>
+    /// Whether earnings accrue on Saturdays and Sundays. When false, weekends earn nothing.
+    /// </summary>
     public bool WorkOnWeekends { get; init; } = false;
 
-    /// <summary>Whether to show a tray balloon notification shortly before work ends.</summary>
+    /// <summary>
+    /// Whether to show a tray balloon notification shortly before work ends.
+    /// </summary>
     public bool EnableEndOfDayReminder { get; init; } = false;
 
-    /// <summary>How many minutes before <see cref="WorkEnd"/> the end-of-day reminder fires.</summary>
+    /// <summary>
+    /// How many minutes before <see cref="WorkEnd"/> the end-of-day reminder fires.
+    /// </summary>
     public int EndOfDayReminderMinutes { get; init; } = 5;
 
-    /// <summary>Whether to show a tray balloon notification each time earnings cross a <see cref="MilestoneAmount"/> increment.</summary>
+    /// <summary>
+    /// Whether to show a tray balloon notification each time earnings cross a <see cref="MilestoneAmount"/> increment.
+    /// </summary>
     public bool EnableMilestoneNotifications { get; init; } = false;
 
-    /// <summary>Earnings increment that triggers a milestone notification (e.g. every ¥100).</summary>
+    /// <summary>
+    /// Earnings increment that triggers a milestone notification (e.g. every ¥100).
+    /// </summary>
     public decimal MilestoneAmount { get; init; } = 100m;
+
+    /// <summary>
+    /// UI color theme. <c>"auto"</c> resolves from the Windows apps theme setting;
+    /// supported explicit values are <c>"light"</c> and <c>"dark"</c>.
+    /// </summary>
+    public string Theme { get; init; } = "auto";
 }
\ No newline at end of file
diff --git a/src/PayBeat.App/Resources/Strings.en.xaml b/src/PayBeat.App/Resources/Strings.en.xaml
index 318afba..81106be 100644
--- a/src/PayBeat.App/Resources/Strings.en.xaml
+++ b/src/PayBeat.App/Resources/Strings.en.xaml
@@ -64,6 +64,10 @@
     <sys:String x:Key="Settings.RunAtStartup">Run at Startup</sys:String>
     <sys:String x:Key="Settings.Language">Language</sys:String>
     <sys:String x:Key="Settings.LanguageAuto">Auto</sys:String>
+    <sys:String x:Key="Settings.Theme">Theme</sys:String>
+    <sys:String x:Key="Settings.ThemeAuto">Auto</sys:String>
+    <sys:String x:Key="Settings.ThemeLight">Light</sys:String>
+    <sys:String x:Key="Settings.ThemeDark">Dark</sys:String>
     <sys:String x:Key="Settings.Hotkey">Toggle Visibility Hotkey</sys:String>
     <sys:String x:Key="Settings.HotkeyHint">Click, then press a key combination</sys:String>
     <sys:String x:Key="Settings.HotkeyCapturing">Press a key combination...</sys:String>
diff --git a/src/PayBeat.App/Resources/Strings.zh-CN.xaml b/src/PayBeat.App/Resources/Strings.zh-CN.xaml
index b3b796a..52f9c9e 100644
--- a/src/PayBeat.App/Resources/Strings.zh-CN.xaml
+++ b/src/PayBeat.App/Resources/Strings.zh-CN.xaml
@@ -64,6 +64,10 @@
     <sys:String x:Key="Settings.RunAtStartup">开机自动启动</sys:String>
     <sys:String x:Key="Settings.Language">语言</sys:String>
     <sys:String x:Key="Settings.LanguageAuto">自动</sys:String>
+    <sys:String x:Key="Settings.Theme">主题</sys:String>
+    <sys:String x:Key="Settings.ThemeAuto">自动</sys:String>
+    <sys:String x:Key="Settings.ThemeLight">浅色</sys:String>
+    <sys:String x:Key="Settings.ThemeDark">深色</sys:String>
     <sys:String x:Key="Settings.Hotkey">显示/隐藏快捷键</sys:String>
     <sys:String x:Key="Settings.HotkeyHint">点击后输入快捷键组合</sys:String>
     <sys:String x:Key="Settings.HotkeyCapturing">请输入快捷键组合...</sys:String>
diff --git a/src/PayBeat.App/Resources/Styles.xaml b/src/PayBeat.App/Resources/Styles.xaml
index 95e7e53..ec576f5 100644
--- a/src/PayBeat.App/Resources/Styles.xaml
+++ b/src/PayBeat.App/Resources/Styles.xaml
@@ -1,27 +1,6 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <!-- Color palette: Catppuccin Mocha -->
-    <Color x:Key="BaseColor">#1E1E2E</Color>
-    <Color x:Key="SurfaceColor">#313244</Color>
-    <Color x:Key="OverlayColor">#45475A</Color>
-    <Color x:Key="TextColor">#CDD6F4</Color>
-    <Color x:Key="SubtextColor">#9399B2</Color>
-    <Color x:Key="MutedColor">#6C7086</Color>
-    <Color x:Key="GreenColor">#A6E3A1</Color>
-    <Color x:Key="BlueColor">#89B4FA</Color>
-    <Color x:Key="RedColor">#F38BA8</Color>
-
-    <SolidColorBrush x:Key="BaseBrush" Color="{StaticResource BaseColor}"/>
-    <SolidColorBrush x:Key="SurfaceBrush" Color="{StaticResource SurfaceColor}"/>
-    <SolidColorBrush x:Key="OverlayBrush" Color="{StaticResource OverlayColor}"/>
-    <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>
-    <SolidColorBrush x:Key="SubtextBrush" Color="{StaticResource SubtextColor}"/>
-    <SolidColorBrush x:Key="MutedBrush" Color="{StaticResource MutedColor}"/>
-    <SolidColorBrush x:Key="GreenBrush" Color="{StaticResource GreenColor}"/>
-    <SolidColorBrush x:Key="BlueBrush" Color="{StaticResource BlueColor}"/>
-    <SolidColorBrush x:Key="RedBrush" Color="{StaticResource RedColor}"/>
-
     <!-- Flat Button -->
     <Style TargetType="Button">
         <Setter Property="Cursor" Value="Hand"/>
@@ -56,7 +35,7 @@
     <Style TargetType="TextBox">
         <Setter Property="FontFamily" Value="Segoe UI"/>
         <Setter Property="FontSize" Value="13"/>
-        <Setter Property="CaretBrush" Value="{StaticResource BlueBrush}"/>
+        <Setter Property="CaretBrush" Value="{DynamicResource BlueBrush}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="TextBox">
@@ -68,7 +47,7 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsFocused" Value="True">
-                            <Setter Property="BorderBrush" Value="{StaticResource BlueBrush}"/>
+                            <Setter Property="BorderBrush" Value="{DynamicResource BlueBrush}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -78,9 +57,9 @@
 
     <!-- ComboBox -->
     <Style TargetType="ComboBox">
-        <Setter Property="Background" Value="#313244"/>
-        <Setter Property="Foreground" Value="#CDD6F4"/>
-        <Setter Property="BorderBrush" Value="#45475A"/>
+        <Setter Property="Background" Value="{DynamicResource SurfaceBrush}"/>
+        <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource OverlayBrush}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="FontFamily" Value="Segoe UI"/>
         <Setter Property="FontSize" Value="13"/>
@@ -108,7 +87,7 @@
                                               IsHitTestVisible="False"/>
                             <Path Grid.Column="1"
                                   Data="M 0 0 L 5 5 L 10 0"
-                                  Stroke="#9399B2"
+                                  Stroke="{DynamicResource SubtextBrush}"
                                   StrokeThickness="1.5"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
@@ -130,8 +109,8 @@
                                Focusable="False"
                                PopupAnimation="Fade"
                                Placement="Bottom">
-                            <Border Background="#313244"
-                                    BorderBrush="#45475A"
+                            <Border Background="{DynamicResource SurfaceBrush}"
+                                    BorderBrush="{DynamicResource OverlayBrush}"
                                     BorderThickness="1"
                                     CornerRadius="6"
                                     MinWidth="{TemplateBinding ActualWidth}"
@@ -149,10 +128,10 @@
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="Border" Property="BorderBrush" Value="#89B4FA"/>
+                            <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource BlueBrush}"/>
                         </Trigger>
                         <Trigger Property="IsDropDownOpen" Value="True">
-                            <Setter TargetName="Border" Property="BorderBrush" Value="#89B4FA"/>
+                            <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource BlueBrush}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -161,7 +140,7 @@
         <Setter Property="ItemContainerStyle">
             <Setter.Value>
                 <Style TargetType="ComboBoxItem">
-                    <Setter Property="Foreground" Value="#CDD6F4"/>
+                    <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
                     <Setter Property="Background" Value="Transparent"/>
                     <Setter Property="Padding" Value="10,7"/>
                     <Setter Property="FontFamily" Value="Segoe UI"/>
@@ -177,11 +156,11 @@
                                 </Border>
                                 <ControlTemplate.Triggers>
                                     <Trigger Property="IsMouseOver" Value="True">
-                                        <Setter TargetName="Bg" Property="Background" Value="#45475A"/>
+                                        <Setter TargetName="Bg" Property="Background" Value="{DynamicResource OverlayBrush}"/>
                                     </Trigger>
                                     <Trigger Property="IsSelected" Value="True">
-                                        <Setter TargetName="Bg" Property="Background" Value="#45475A"/>
-                                        <Setter Property="Foreground" Value="#89B4FA"/>
+                                        <Setter TargetName="Bg" Property="Background" Value="{DynamicResource OverlayBrush}"/>
+                                        <Setter Property="Foreground" Value="{DynamicResource BlueBrush}"/>
                                     </Trigger>
                                 </ControlTemplate.Triggers>
                             </ControlTemplate>
diff --git a/src/PayBeat.App/Resources/Theme.Dark.xaml b/src/PayBeat.App/Resources/Theme.Dark.xaml
new file mode 100644
index 0000000..c566db1
--- /dev/null
+++ b/src/PayBeat.App/Resources/Theme.Dark.xaml
@@ -0,0 +1,28 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- Color palette: Catppuccin Mocha (dark) -->
+    <Color x:Key="BaseColor">#1E1E2E</Color>
+    <Color x:Key="SurfaceColor">#313244</Color>
+    <Color x:Key="OverlayColor">#45475A</Color>
+    <Color x:Key="TextColor">#CDD6F4</Color>
+    <Color x:Key="SubtextColor">#9399B2</Color>
+    <Color x:Key="MutedColor">#6C7086</Color>
+    <Color x:Key="GreenColor">#A6E3A1</Color>
+    <Color x:Key="BlueColor">#89B4FA</Color>
+    <Color x:Key="RedColor">#F38BA8</Color>
+    <Color x:Key="CaptureBackgroundColor">#1C3A5E</Color>
+    <Color x:Key="FlexGradientMidColor">#181825</Color>
+
+    <SolidColorBrush x:Key="BaseBrush" Color="{StaticResource BaseColor}"/>
+    <SolidColorBrush x:Key="SurfaceBrush" Color="{StaticResource SurfaceColor}"/>
+    <SolidColorBrush x:Key="OverlayBrush" Color="{StaticResource OverlayColor}"/>
+    <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>
+    <SolidColorBrush x:Key="SubtextBrush" Color="{StaticResource SubtextColor}"/>
+    <SolidColorBrush x:Key="MutedBrush" Color="{StaticResource MutedColor}"/>
+    <SolidColorBrush x:Key="GreenBrush" Color="{StaticResource GreenColor}"/>
+    <SolidColorBrush x:Key="BlueBrush" Color="{StaticResource BlueColor}"/>
+    <SolidColorBrush x:Key="RedBrush" Color="{StaticResource RedColor}"/>
+    <SolidColorBrush x:Key="CaptureBackgroundBrush" Color="{StaticResource CaptureBackgroundColor}"/>
+
+</ResourceDictionary>
diff --git a/src/PayBeat.App/Resources/Theme.Light.xaml b/src/PayBeat.App/Resources/Theme.Light.xaml
new file mode 100644
index 0000000..c3d1ac9
--- /dev/null
+++ b/src/PayBeat.App/Resources/Theme.Light.xaml
@@ -0,0 +1,28 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- Color palette: Catppuccin Latte (light) -->
+    <Color x:Key="BaseColor">#EFF1F5</Color>
+    <Color x:Key="SurfaceColor">#E6E9EF</Color>
+    <Color x:Key="OverlayColor">#CCD0DA</Color>
+    <Color x:Key="TextColor">#4C4F69</Color>
+    <Color x:Key="SubtextColor">#6C6F85</Color>
+    <Color x:Key="MutedColor">#8C8FA1</Color>
+    <Color x:Key="GreenColor">#40A02B</Color>
+    <Color x:Key="BlueColor">#1E66F5</Color>
+    <Color x:Key="RedColor">#D20F39</Color>
+    <Color x:Key="CaptureBackgroundColor">#DCE8FF</Color>
+    <Color x:Key="FlexGradientMidColor">#DCE0E8</Color>
+
+    <SolidColorBrush x:Key="BaseBrush" Color="{StaticResource BaseColor}"/>
+    <SolidColorBrush x:Key="SurfaceBrush" Color="{StaticResource SurfaceColor}"/>
+    <SolidColorBrush x:Key="OverlayBrush" Color="{StaticResource OverlayColor}"/>
+    <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>
+    <SolidColorBrush x:Key="SubtextBrush" Color="{StaticResource SubtextColor}"/>
+    <SolidColorBrush x:Key="MutedBrush" Color="{StaticResource MutedColor}"/>
+    <SolidColorBrush x:Key="GreenBrush" Color="{StaticResource GreenColor}"/>
+    <SolidColorBrush x:Key="BlueBrush" Color="{StaticResource BlueColor}"/>
+    <SolidColorBrush x:Key="RedBrush" Color="{StaticResource RedColor}"/>
+    <SolidColorBrush x:Key="CaptureBackgroundBrush" Color="{StaticResource CaptureBackgroundColor}"/>
+
+</ResourceDictionary>
diff --git a/src/PayBeat.App/Services/ThemeService.cs b/src/PayBeat.App/Services/ThemeService.cs
new file mode 100644
index 0000000..cdf0977
--- /dev/null
+++ b/src/PayBeat.App/Services/ThemeService.cs
@@ -0,0 +1,60 @@
+using Microsoft.Win32;
+
+namespace PayBeat.App.Services;
+
+/// <summary>
+/// Swaps the active color-palette resource dictionary at runtime to implement light/dark theming.
+/// Supported themes: <c>"light"</c>, <c>"dark"</c>, and <c>"auto"</c> (resolves from the Windows apps theme setting).
+/// </summary>
+public static class ThemeService
+{
+    private const string DarkUri = "pack://application:,,,/Resources/Theme.Dark.xaml";
+    private const string LightUri = "pack://application:,,,/Resources/Theme.Light.xaml";
+
+    /// <summary>
+    /// Replaces the currently loaded palette dictionary with the one matching <paramref name="theme"/>.
+    /// Safe to call multiple times (e.g. after saving settings).
+    /// </summary>
+    /// <param name="theme">Theme code or <c>"auto"</c>.</param>
+    public static void Apply(string theme)
+    {
+        var resolved = Resolve(theme);
+        var dicts = Application.Current.Resources.MergedDictionaries;
+
+        var old = dicts.FirstOrDefault(d =>
+            d.Source?.OriginalString is DarkUri or LightUri);
+
+        if (old != null)
+        {
+            dicts.Remove(old);
+        }
+
+        var uri = new Uri(resolved == "light" ? LightUri : DarkUri);
+        dicts.Add(new ResourceDictionary { Source = uri });
+    }
+
+    private static bool IsSystemLightTheme()
+    {
+        try
+        {
+            using var key = Registry.CurrentUser.OpenSubKey(
+                @"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize");
+            var value = key?.GetValue("AppsUseLightTheme");
+            return value is int i && i != 0;
+        }
+        catch (Exception ex) when (ex is System.Security.SecurityException or UnauthorizedAccessException or ObjectDisposedException)
+        {
+            return false;
+        }
+    }
+
+    private static string Resolve(string theme)
+    {
+        if (theme != "auto")
+        {
+            return theme;
+        }
+
+        return IsSystemLightTheme() ? "light" : "dark";
+    }
+}
\ No newline at end of file
diff --git a/src/PayBeat.App/ViewModels/SettingsViewModel.cs b/src/PayBeat.App/ViewModels/SettingsViewModel.cs
index a2f9b72..aa97c88 100644
--- a/src/PayBeat.App/ViewModels/SettingsViewModel.cs
+++ b/src/PayBeat.App/ViewModels/SettingsViewModel.cs
@@ -11,6 +11,11 @@ namespace PayBeat.App.ViewModels;
 /// <param name="Name">Display name shown in the UI.</param>
 public record LanguageOption(string Code, string Name);
 
+/// <summary>Represents a theme choice shown in the settings theme dropdown.</summary>
+/// <param name="Code">Theme code stored in settings (e.g. <c>"auto"</c>, <c>"light"</c>, <c>"dark"</c>).</param>
+/// <param name="Name">Display name shown in the UI.</param>
+public record ThemeOption(string Code, string Name);
+
 /// <summary>
 /// View model for the settings window. Validates and saves user preferences,
 /// then calls <see cref="MainViewModel.ReloadSettings"/> to apply changes immediately.
@@ -23,22 +28,23 @@ public class SettingsViewModel : ViewModelBase, IDataErrorInfo
     private string _currencyText;
     private string _dailySalaryText;
     private DisplayMode _displayMode;
+    private bool _enableEndOfDayReminder;
+    private bool _enableMilestoneNotifications;
+    private string _endOfDayReminderMinutesText;
     private int _hotkeyModifiers;
     private int _hotkeyVirtualKey;
     private string _language;
+    private bool _lunchBreakEnabled;
+    private TimeOnly _lunchBreakEnd;
+    private TimeOnly _lunchBreakStart;
+    private string _milestoneAmountText;
     private double _opacity;
     private int _refreshInterval;
     private bool _runAtStartup;
+    private string _theme;
     private TimeOnly _workEnd;
-    private TimeOnly _workStart;
-    private bool _lunchBreakEnabled;
-    private TimeOnly _lunchBreakStart;
-    private TimeOnly _lunchBreakEnd;
     private bool _workOnWeekends;
-    private bool _enableEndOfDayReminder;
-    private string _endOfDayReminderMinutesText;
-    private bool _enableMilestoneNotifications;
-    private string _milestoneAmountText;
+    private TimeOnly _workStart;
 
     /// <summary>
     /// Initializes a new instance of <see cref="SettingsViewModel"/>, populating fields from the
@@ -61,6 +67,7 @@ public SettingsViewModel(SettingsService service, MainViewModel mainVm)
         _opacity = s.Opacity;
         _refreshInterval = s.RefreshInterval;
         _language = s.Language;
+        _theme = s.Theme;
         _hotkeyModifiers = s.HotkeyModifiers;
         _hotkeyVirtualKey = s.HotkeyVirtualKey;
         _runAtStartup = StartupService.IsEnabled();
@@ -95,6 +102,17 @@ public IReadOnlyList<LanguageOption> AvailableLanguages
         new("zh-CN", "中文"),
     ];
 
+    /// <summary>Fixed list of theme options shown in the theme dropdown.</summary>
+    public IReadOnlyList<ThemeOption> AvailableThemes
+    {
+        get;
+    } =
+        [
+        new("auto", "Auto"),
+        new("light", "Light"),
+        new("dark", "Dark"),
+    ];
+
     /// <summary>Closes the settings window without saving.</summary>
     public ICommand CancelCommand
     {
@@ -140,13 +158,13 @@ public DisplayMode DisplayMode
         }
     }
 
-    /// <summary>Raw text entered in the end-of-day reminder minutes field; must be an integer in [1, 60].</summary>
-    public string EndOfDayReminderMinutesText
+    /// <summary>Whether the end-of-day reminder tray notification is enabled.</summary>
+    public bool EnableEndOfDayReminder
     {
-        get => _endOfDayReminderMinutesText;
+        get => _enableEndOfDayReminder;
         set
         {
-            SetField(ref _endOfDayReminderMinutesText, value);
+            SetField(ref _enableEndOfDayReminder, value);
             Revalidate();
         }
     }
@@ -162,17 +180,20 @@ public bool EnableMilestoneNotifications
         }
     }
 
-    /// <summary>Whether the end-of-day reminder tray notification is enabled.</summary>
-    public bool EnableEndOfDayReminder
+    /// <summary>Raw text entered in the end-of-day reminder minutes field; must be an integer in [1, 60].</summary>
+    public string EndOfDayReminderMinutesText
     {
-        get => _enableEndOfDayReminder;
+        get => _endOfDayReminderMinutesText;
         set
         {
-            SetField(ref _enableEndOfDayReminder, value);
+            SetField(ref _endOfDayReminderMinutesText, value);
             Revalidate();
         }
     }
 
+    /// <summary>Unused; per-field errors are reported via the indexer instead.</summary>
+    string IDataErrorInfo.Error => string.Empty;
+
     /// <summary>Validation error message shown below the Save button; empty string when there is no error.</summary>
     public string ErrorMessage
     {
@@ -180,18 +201,6 @@ public string ErrorMessage
         private set => SetField(ref field, value);
     } = string.Empty;
 
-    /// <summary>Unused; per-field errors are reported via the indexer instead.</summary>
-    string IDataErrorInfo.Error => string.Empty;
-
-    /// <summary>Per-field validation error shown as a bubble popup next to the offending input.</summary>
-    string IDataErrorInfo.this[string columnName] => columnName switch
-    {
-        nameof(DailySalaryText) => ValidateDailySalary() ?? string.Empty,
-        nameof(EndOfDayReminderMinutesText) => EnableEndOfDayReminder ? ValidateEndOfDayReminderMinutes() ?? string.Empty : string.Empty,
-        nameof(MilestoneAmountText) => EnableMilestoneNotifications ? ValidateMilestoneAmount() ?? string.Empty : string.Empty,
-        _ => string.Empty,
-    };
-
     /// <summary>Human-readable hotkey string (e.g. <c>Ctrl+Alt+X</c>) shown in the hotkey field.</summary>
     public string HotkeyDisplayText => HotkeyService.Format(HotkeyModifiers, HotkeyVirtualKey);
 
@@ -355,6 +364,13 @@ public ICommand SaveCommand
         get;
     }
 
+    /// <summary>Selected theme code (e.g. <c>"auto"</c>, <c>"light"</c>, <c>"dark"</c>).</summary>
+    public string Theme
+    {
+        get => _theme;
+        set => SetField(ref _theme, value);
+    }
+
     /// <summary>Work day end time. Changing this re-evaluates <see cref="SaveCommand"/> availability.</summary>
     public TimeOnly WorkEnd
     {
@@ -366,6 +382,13 @@ public TimeOnly WorkEnd
         }
     }
 
+    /// <summary>Whether earnings accrue on Saturdays and Sundays.</summary>
+    public bool WorkOnWeekends
+    {
+        get => _workOnWeekends;
+        set => SetField(ref _workOnWeekends, value);
+    }
+
     /// <summary>Work day start time. Changing this re-evaluates <see cref="SaveCommand"/> availability.</summary>
     public TimeOnly WorkStart
     {
@@ -377,15 +400,29 @@ public TimeOnly WorkStart
         }
     }
 
-    /// <summary>Whether earnings accrue on Saturdays and Sundays.</summary>
-    public bool WorkOnWeekends
+    /// <summary>Per-field validation error shown as a bubble popup next to the offending input.</summary>
+    string IDataErrorInfo.this[string columnName] => columnName switch
     {
-        get => _workOnWeekends;
-        set => SetField(ref _workOnWeekends, value);
-    }
+        nameof(DailySalaryText) => ValidateDailySalary() ?? string.Empty,
+        nameof(EndOfDayReminderMinutesText) => EnableEndOfDayReminder ? ValidateEndOfDayReminderMinutes() ?? string.Empty : string.Empty,
+        nameof(MilestoneAmountText) => EnableMilestoneNotifications ? ValidateMilestoneAmount() ?? string.Empty : string.Empty,
+        _ => string.Empty,
+    };
 
     private bool CanSave() => Validate() is null;
 
+    private void CloseWindow()
+    {
+        foreach (Window w in Application.Current.Windows)
+        {
+            if (w is SettingsWindow)
+            {
+                w.Close();
+                break;
+            }
+        }
+    }
+
     /// <summary>
     /// Updates the bottom-of-window error message and Save availability. Only schedule-related errors are
     /// shown here — the daily salary, milestone amount, and reminder minutes fields report their own errors
@@ -397,19 +434,51 @@ private void Revalidate()
         ((RelayCommand)SaveCommand).RaiseCanExecuteChanged();
     }
 
-    /// <summary>Validates work hours and lunch break; returns <see langword="null"/> when valid.</summary>
-    private string? ValidateSchedule()
+    private void Save()
     {
-        if (WorkStart >= WorkEnd)
+        if (Validate() is not null)
         {
-            return LocalizationService.Get("Error.WorkEndAfterStart");
+            ErrorMessage = ValidateSchedule() ?? string.Empty;
+            return;
         }
-        if (LunchBreakEnabled && (LunchBreakStart >= LunchBreakEnd || LunchBreakStart < WorkStart || LunchBreakEnd > WorkEnd))
+
+        var salary = decimal.Parse(_dailySalaryText);
+        var existing = _service.Load();
+        var settings = existing with
         {
-            return LocalizationService.Get("Error.LunchBreakInvalid");
-        }
+            DailySalary = Math.Round(salary, 2),
+            WorkStart = WorkStart,
+            WorkEnd = WorkEnd,
+            Currency = string.IsNullOrWhiteSpace(_currencyText) ? "¥" : _currencyText.Trim(),
+            DisplayMode = DisplayMode,
+            AlwaysOnTop = AlwaysOnTop,
+            Opacity = Opacity,
+            RefreshInterval = RefreshInterval,
+            Language = Language,
+            Theme = Theme,
+            HotkeyModifiers = HotkeyModifiers,
+            HotkeyVirtualKey = HotkeyVirtualKey,
+            LunchBreakEnabled = LunchBreakEnabled,
+            LunchBreakStart = LunchBreakStart,
+            LunchBreakEnd = LunchBreakEnd,
+            WorkOnWeekends = WorkOnWeekends,
+            EnableEndOfDayReminder = EnableEndOfDayReminder,
+            EndOfDayReminderMinutes = EnableEndOfDayReminder && int.TryParse(_endOfDayReminderMinutesText, out var parsedMinutes)
+                ? parsedMinutes
+                : existing.EndOfDayReminderMinutes,
+            EnableMilestoneNotifications = EnableMilestoneNotifications,
+            MilestoneAmount = EnableMilestoneNotifications && decimal.TryParse(_milestoneAmountText, out var parsedMilestone)
+                ? Math.Round(parsedMilestone, 2)
+                : existing.MilestoneAmount
+        };
 
-        return null;
+        _service.Save(settings);
+        StartupService.SetEnabled(_runAtStartup);
+        LocalizationService.Apply(Language);
+        ThemeService.Apply(Theme);
+        _mainVm.ReloadSettings();
+
+        CloseWindow();
     }
 
     /// <summary>Validates all fields and returns the first error message, or <see langword="null"/> when everything is valid.</summary>
@@ -486,60 +555,18 @@ private void Revalidate()
         return null;
     }
 
-    private void CloseWindow()
+    /// <summary>Validates work hours and lunch break; returns <see langword="null"/> when valid.</summary>
+    private string? ValidateSchedule()
     {
-        foreach (Window w in Application.Current.Windows)
+        if (WorkStart >= WorkEnd)
         {
-            if (w is SettingsWindow)
-            {
-                w.Close();
-                break;
-            }
+            return LocalizationService.Get("Error.WorkEndAfterStart");
         }
-    }
-
-    private void Save()
-    {
-        if (Validate() is not null)
+        if (LunchBreakEnabled && (LunchBreakStart >= LunchBreakEnd || LunchBreakStart < WorkStart || LunchBreakEnd > WorkEnd))
         {
-            ErrorMessage = ValidateSchedule() ?? string.Empty;
-            return;
+            return LocalizationService.Get("Error.LunchBreakInvalid");
         }
 
-        var salary = decimal.Parse(_dailySalaryText);
-        var existing = _service.Load();
-        var settings = existing with
-        {
-            DailySalary = Math.Round(salary, 2),
-            WorkStart = WorkStart,
-            WorkEnd = WorkEnd,
-            Currency = string.IsNullOrWhiteSpace(_currencyText) ? "¥" : _currencyText.Trim(),
-            DisplayMode = DisplayMode,
-            AlwaysOnTop = AlwaysOnTop,
-            Opacity = Opacity,
-            RefreshInterval = RefreshInterval,
-            Language = Language,
-            HotkeyModifiers = HotkeyModifiers,
-            HotkeyVirtualKey = HotkeyVirtualKey,
-            LunchBreakEnabled = LunchBreakEnabled,
-            LunchBreakStart = LunchBreakStart,
-            LunchBreakEnd = LunchBreakEnd,
-            WorkOnWeekends = WorkOnWeekends,
-            EnableEndOfDayReminder = EnableEndOfDayReminder,
-            EndOfDayReminderMinutes = EnableEndOfDayReminder && int.TryParse(_endOfDayReminderMinutesText, out var parsedMinutes)
-                ? parsedMinutes
-                : existing.EndOfDayReminderMinutes,
-            EnableMilestoneNotifications = EnableMilestoneNotifications,
-            MilestoneAmount = EnableMilestoneNotifications && decimal.TryParse(_milestoneAmountText, out var parsedMilestone)
-                ? Math.Round(parsedMilestone, 2)
-                : existing.MilestoneAmount
-        };
-
-        _service.Save(settings);
-        StartupService.SetEnabled(_runAtStartup);
-        LocalizationService.Apply(Language);
-        _mainVm.ReloadSettings();
-
-        CloseWindow();
+        return null;
     }
 }
\ No newline at end of file
diff --git a/src/PayBeat.App/Views/AboutWindow.xaml b/src/PayBeat.App/Views/AboutWindow.xaml
index ac26d09..3ced9a7 100644
--- a/src/PayBeat.App/Views/AboutWindow.xaml
+++ b/src/PayBeat.App/Views/AboutWindow.xaml
@@ -13,9 +13,9 @@
         FontFamily="Segoe UI"
         MouseLeftButtonDown="Window_MouseLeftButtonDown">
 
-    <Border Background="#1E1E2E"
+    <Border Background="{DynamicResource BaseBrush}"
             CornerRadius="12"
-            BorderBrush="#45475A"
+            BorderBrush="{DynamicResource OverlayBrush}"
             BorderThickness="1">
         <Border.Effect>
             <DropShadowEffect Color="#000000" Opacity="0.5" BlurRadius="24" ShadowDepth="0"/>
@@ -30,7 +30,7 @@
                     Content="✕"
                     FontSize="12"
                     Background="Transparent"
-                    Foreground="#6C7086"
+                    Foreground="{DynamicResource MutedBrush}"
                     BorderThickness="0"
                     Cursor="Hand"
                     Click="CloseButton_Click"
@@ -49,8 +49,8 @@
                         </Setter>
                         <Style.Triggers>
                             <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="Background" Value="#313244"/>
-                                <Setter Property="Foreground" Value="#CDD6F4"/>
+                                <Setter Property="Background" Value="{DynamicResource SurfaceBrush}"/>
+                                <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
                             </Trigger>
                         </Style.Triggers>
                     </Style>
@@ -65,12 +65,12 @@
                        Margin="0,0,0,12"
                        RenderOptions.BitmapScalingMode="HighQuality"/>
                 <TextBlock Text="PayBeat"
-                           Foreground="#CDD6F4"
+                           Foreground="{DynamicResource TextBrush}"
                            FontSize="22"
                            FontWeight="Bold"
                            HorizontalAlignment="Center"/>
                 <TextBlock x:Name="VersionText"
-                           Foreground="#6C7086"
+                           Foreground="{DynamicResource MutedBrush}"
                            FontSize="12"
                            HorizontalAlignment="Center"
                            Margin="0,4,0,0"/>
@@ -79,7 +79,7 @@
             <!-- Description -->
             <TextBlock DockPanel.Dock="Top"
                        Text="{DynamicResource About.Description}"
-                       Foreground="#9399B2"
+                       Foreground="{DynamicResource SubtextBrush}"
                        FontSize="13"
                        TextWrapping="Wrap"
                        TextAlignment="Center"
@@ -89,7 +89,7 @@
             <!-- Separator -->
             <Border DockPanel.Dock="Top"
                     Height="1"
-                    Background="#313244"
+                    Background="{DynamicResource SurfaceBrush}"
                     Margin="0,0,0,16"/>
 
             <!-- Author row -->
@@ -100,11 +100,11 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Column="0"
                            Text="{DynamicResource About.Author}"
-                           Foreground="#6C7086"
+                           Foreground="{DynamicResource MutedBrush}"
                            FontSize="12"/>
                 <TextBlock Grid.Column="1"
                            Text="coldhighsun"
-                           Foreground="#CDD6F4"
+                           Foreground="{DynamicResource TextBrush}"
                            FontSize="12"/>
             </Grid>
 
@@ -116,11 +116,11 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Column="0"
                            Text="{DynamicResource About.License}"
-                           Foreground="#6C7086"
+                           Foreground="{DynamicResource MutedBrush}"
                            FontSize="12"/>
                 <TextBlock Grid.Column="1"
                            Text="MIT"
-                           Foreground="#CDD6F4"
+                           Foreground="{DynamicResource TextBrush}"
                            FontSize="12"/>
             </Grid>
 
@@ -132,11 +132,11 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Column="0"
                            Text="{DynamicResource About.GitHub}"
-                           Foreground="#6C7086"
+                           Foreground="{DynamicResource MutedBrush}"
                            FontSize="12"/>
                 <TextBlock Grid.Column="1" FontSize="12">
                     <Hyperlink x:Name="GitHubLink"
-                               Foreground="#89B4FA"
+                               Foreground="{DynamicResource BlueBrush}"
                                TextDecorations="None"
                                RequestNavigate="GitHubLink_RequestNavigate"
                                NavigateUri="https://github.com/coldhighsun/PayBeat">
@@ -150,15 +150,15 @@
                     Content="{DynamicResource About.Close}"
                     HorizontalAlignment="Center"
                     Padding="32,10"
-                    Background="#313244"
-                    Foreground="#CDD6F4"
+                    Background="{DynamicResource SurfaceBrush}"
+                    Foreground="{DynamicResource TextBrush}"
                     BorderThickness="0"
                     FontSize="13"
                     Cursor="Hand"
                     Click="CloseButton_Click">
                 <Button.Style>
                     <Style TargetType="Button">
-                        <Setter Property="Background" Value="#313244"/>
+                        <Setter Property="Background" Value="{DynamicResource SurfaceBrush}"/>
                         <Setter Property="Template">
                             <Setter.Value>
                                 <ControlTemplate TargetType="Button">
@@ -172,7 +172,7 @@
                         </Setter>
                         <Style.Triggers>
                             <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="Background" Value="#45475A"/>
+                                <Setter Property="Background" Value="{DynamicResource OverlayBrush}"/>
                             </Trigger>
                         </Style.Triggers>
                     </Style>
diff --git a/src/PayBeat.App/Views/Controls/TimePickerControl.xaml b/src/PayBeat.App/Views/Controls/TimePickerControl.xaml
index 8118ce5..2627cc1 100644
--- a/src/PayBeat.App/Views/Controls/TimePickerControl.xaml
+++ b/src/PayBeat.App/Views/Controls/TimePickerControl.xaml
@@ -4,31 +4,31 @@
 
     <UserControl.Resources>
         <Style x:Key="DigitTextBoxStyle" TargetType="TextBox">
-            <Setter Property="Foreground" Value="#CDD6F4" />
+            <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
             <Style.Triggers>
                 <Trigger Property="IsEnabled" Value="False">
-                    <Setter Property="Foreground" Value="#6C7086" />
+                    <Setter Property="Foreground" Value="{DynamicResource MutedBrush}" />
                 </Trigger>
             </Style.Triggers>
         </Style>
         <Style x:Key="ColonTextBlockStyle" TargetType="TextBlock">
-            <Setter Property="Foreground" Value="#CDD6F4" />
+            <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
             <Style.Triggers>
                 <Trigger Property="IsEnabled" Value="False">
-                    <Setter Property="Foreground" Value="#6C7086" />
+                    <Setter Property="Foreground" Value="{DynamicResource MutedBrush}" />
                 </Trigger>
             </Style.Triggers>
         </Style>
     </UserControl.Resources>
 
-    <Border Background="#313244" BorderBrush="#45475A" BorderThickness="1" CornerRadius="5">
+    <Border Background="{DynamicResource SurfaceBrush}" BorderBrush="{DynamicResource OverlayBrush}" BorderThickness="1" CornerRadius="5">
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="4,2">
 
             <!-- Hour -->
             <StackPanel>
                 <Button x:Name="HourUp" Content="▲" Click="HourUp_Click"
                         Width="24" Height="14" Padding="0"
-                        Background="Transparent" Foreground="#9399B2" FontSize="7"/>
+                        Background="Transparent" Foreground="{DynamicResource SubtextBrush}" FontSize="7"/>
                 <TextBox x:Name="HourBox"
                          Width="24" Height="22"
                          TextAlignment="Center"
@@ -43,7 +43,7 @@
                          LostFocus="HourBox_LostFocus"/>
                 <Button x:Name="HourDown" Content="▼" Click="HourDown_Click"
                         Width="24" Height="14" Padding="0"
-                        Background="Transparent" Foreground="#9399B2" FontSize="7"/>
+                        Background="Transparent" Foreground="{DynamicResource SubtextBrush}" FontSize="7"/>
             </StackPanel>
 
             <TextBlock Text=":" FontSize="14" FontWeight="Bold"
@@ -54,7 +54,7 @@
             <StackPanel>
                 <Button x:Name="MinuteUp" Content="▲" Click="MinuteUp_Click"
                         Width="24" Height="14" Padding="0"
-                        Background="Transparent" Foreground="#9399B2" FontSize="7"/>
+                        Background="Transparent" Foreground="{DynamicResource SubtextBrush}" FontSize="7"/>
                 <TextBox x:Name="MinuteBox"
                          Width="24" Height="22"
                          TextAlignment="Center"
@@ -69,7 +69,7 @@
                          LostFocus="MinuteBox_LostFocus"/>
                 <Button x:Name="MinuteDown" Content="▼" Click="MinuteDown_Click"
                         Width="24" Height="14" Padding="0"
-                        Background="Transparent" Foreground="#9399B2" FontSize="7"/>
+                        Background="Transparent" Foreground="{DynamicResource SubtextBrush}" FontSize="7"/>
             </StackPanel>
 
         </StackPanel>
diff --git a/src/PayBeat.App/Views/FlexView.xaml b/src/PayBeat.App/Views/FlexView.xaml
index d04ff2e..efb15e1 100644
--- a/src/PayBeat.App/Views/FlexView.xaml
+++ b/src/PayBeat.App/Views/FlexView.xaml
@@ -5,16 +5,16 @@
     <Grid x:Name="RootGrid">
         <Grid.Background>
             <LinearGradientBrush x:Name="BackgroundBrush" StartPoint="0,0" EndPoint="1,1">
-                <GradientStop x:Name="BackgroundStopStart" Color="#1E1E2E" Offset="0"/>
-                <GradientStop x:Name="BackgroundStopMiddle" Color="#181825" Offset="0.5"/>
-                <GradientStop x:Name="BackgroundStopEnd" Color="#1E1E2E" Offset="1"/>
+                <GradientStop x:Name="BackgroundStopStart" Color="{DynamicResource BaseColor}" Offset="0"/>
+                <GradientStop x:Name="BackgroundStopMiddle" Color="{DynamicResource FlexGradientMidColor}" Offset="0.5"/>
+                <GradientStop x:Name="BackgroundStopEnd" Color="{DynamicResource BaseColor}" Offset="1"/>
             </LinearGradientBrush>
         </Grid.Background>
 
         <!-- Glow behind the amount -->
         <Ellipse x:Name="GlowEllipse"
                  Width="900" Height="500"
-                 Fill="#A6E3A1"
+                 Fill="{DynamicResource GreenBrush}"
                  Opacity="0.08">
             <Ellipse.Effect>
                 <BlurEffect Radius="140"/>
@@ -25,7 +25,7 @@
 
             <!-- Header -->
             <TextBlock Text="PayBeat"
-                       Foreground="#9399B2"
+                       Foreground="{DynamicResource SubtextBrush}"
                        FontFamily="Segoe UI"
                        FontSize="22"
                        FontWeight="SemiBold"
@@ -34,7 +34,7 @@
             <!-- Huge earned amount -->
             <TextBlock x:Name="AmountText"
                        Text="{Binding EarnedFormatted}"
-                       Foreground="#A6E3A1"
+                       Foreground="{DynamicResource GreenBrush}"
                        FontFamily="Segoe UI"
                        FontSize="160"
                        FontWeight="Bold"
@@ -45,7 +45,7 @@
                     <ScaleTransform x:Name="AmountScale"/>
                 </TextBlock.RenderTransform>
                 <TextBlock.Effect>
-                    <DropShadowEffect Color="#A6E3A1" Opacity="0.55" BlurRadius="40" ShadowDepth="0"/>
+                    <DropShadowEffect Color="{DynamicResource GreenColor}" Opacity="0.55" BlurRadius="40" ShadowDepth="0"/>
                 </TextBlock.Effect>
             </TextBlock>
 
@@ -55,11 +55,11 @@
                          Width="700"
                          Height="14"
                          Margin="0,24,0,8"
-                         Background="#313244"
-                         Foreground="#89B4FA"
+                         Background="{DynamicResource SurfaceBrush}"
+                         Foreground="{DynamicResource BlueBrush}"
                          BorderThickness="0"/>
             <TextBlock Text="{Binding Progress, Mode=OneWay, StringFormat=P2}"
-                       Foreground="#9399B2"
+                       Foreground="{DynamicResource SubtextBrush}"
                        FontFamily="Segoe UI"
                        FontSize="16"
                        HorizontalAlignment="Center"
@@ -76,41 +76,41 @@
 
                 <StackPanel Grid.Column="0">
                     <TextBlock Text="{DynamicResource View.Elapsed}"
-                               Foreground="#6C7086" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
+                               Foreground="{DynamicResource MutedBrush}" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
                     <TextBlock Text="{Binding ElapsedFormatted, Mode=OneWay}"
-                               Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"
+                               Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"
                                HorizontalAlignment="Center" Margin="0,4,0,0"/>
                 </StackPanel>
 
                 <StackPanel Grid.Column="1">
                     <TextBlock Text="{DynamicResource View.Remaining}"
-                               Foreground="#6C7086" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
+                               Foreground="{DynamicResource MutedBrush}" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
                     <TextBlock Text="{Binding RemainingFormatted, Mode=OneWay}"
-                               Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"
+                               Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"
                                HorizontalAlignment="Center" Margin="0,4,0,0"/>
                 </StackPanel>
 
                 <StackPanel Grid.Column="2">
                     <TextBlock Text="{DynamicResource View.DailySalary}"
-                               Foreground="#6C7086" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
+                               Foreground="{DynamicResource MutedBrush}" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,4,0,0">
                         <TextBlock Text="{Binding Currency, Mode=OneWay}"
-                                   Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
+                                   Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
                         <TextBlock Text="{Binding DailySalary, StringFormat=N2, Mode=OneWay}"
-                                   Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
+                                   Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
                     </StackPanel>
                 </StackPanel>
 
                 <StackPanel Grid.Column="3">
                     <TextBlock Text="{DynamicResource View.WorkWindow}"
-                               Foreground="#6C7086" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
+                               Foreground="{DynamicResource MutedBrush}" FontFamily="Segoe UI" FontSize="13" HorizontalAlignment="Center"/>
                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,4,0,0">
                         <TextBlock Text="{Binding WorkStart, StringFormat=HH:mm, Mode=OneWay}"
-                                   Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
+                                   Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
                         <TextBlock Text="–"
-                                   Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
+                                   Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
                         <TextBlock Text="{Binding WorkEnd, StringFormat=HH:mm, Mode=OneWay}"
-                                   Foreground="#CDD6F4" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
+                                   Foreground="{DynamicResource TextBrush}" FontFamily="Segoe UI" FontSize="26" FontWeight="SemiBold"/>
                     </StackPanel>
                 </StackPanel>
             </Grid>
diff --git a/src/PayBeat.App/Views/FlexView.xaml.cs b/src/PayBeat.App/Views/FlexView.xaml.cs
index e3ee48a..7eb3624 100644
--- a/src/PayBeat.App/Views/FlexView.xaml.cs
+++ b/src/PayBeat.App/Views/FlexView.xaml.cs
@@ -23,8 +23,8 @@ private void StartAnimations()
     {
         var backgroundAnimation = new ColorAnimation
         {
-            From = System.Windows.Media.Color.FromRgb(0x18, 0x18, 0x25),
-            To = System.Windows.Media.Color.FromRgb(0x31, 0x32, 0x44),
+            From = (System.Windows.Media.Color)FindResource("FlexGradientMidColor"),
+            To = (System.Windows.Media.Color)FindResource("SurfaceColor"),
             Duration = TimeSpan.FromSeconds(6),
             AutoReverse = true,
             RepeatBehavior = RepeatBehavior.Forever,
diff --git a/src/PayBeat.App/Views/MiniView.xaml b/src/PayBeat.App/Views/MiniView.xaml
index c9c0737..83f48d0 100644
--- a/src/PayBeat.App/Views/MiniView.xaml
+++ b/src/PayBeat.App/Views/MiniView.xaml
@@ -2,9 +2,9 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Border Background="#1E1E2E"
+    <Border Background="{DynamicResource BaseBrush}"
             CornerRadius="8"
-            BorderBrush="#45475A"
+            BorderBrush="{DynamicResource OverlayBrush}"
             BorderThickness="1">
         <Border.Effect>
             <DropShadowEffect Color="#000000" Opacity="0.4" BlurRadius="16" ShadowDepth="0"/>
@@ -12,7 +12,7 @@
 
         <StackPanel>
             <TextBlock Text="{Binding EarnedFormatted}"
-                       Foreground="#A6E3A1"
+                       Foreground="{DynamicResource GreenBrush}"
                        FontFamily="Segoe UI"
                        FontSize="15"
                        FontWeight="Bold"
@@ -23,8 +23,8 @@
                          Minimum="0"
                          Maximum="1"
                          Height="3"
-                         Background="#313244"
-                         Foreground="#89B4FA"
+                         Background="{DynamicResource SurfaceBrush}"
+                         Foreground="{DynamicResource BlueBrush}"
                          BorderThickness="0"/>
         </StackPanel>
     </Border>
diff --git a/src/PayBeat.App/Views/NormalView.xaml b/src/PayBeat.App/Views/NormalView.xaml
index d0534be..e0bf318 100644
--- a/src/PayBeat.App/Views/NormalView.xaml
+++ b/src/PayBeat.App/Views/NormalView.xaml
@@ -2,11 +2,11 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Border Background="#1E1E2E"
+    <Border Background="{DynamicResource BaseBrush}"
             CornerRadius="12"
             Width="300"
             Padding="20,18"
-            BorderBrush="#45475A"
+            BorderBrush="{DynamicResource OverlayBrush}"
             BorderThickness="1">
         <Border.Effect>
             <DropShadowEffect Color="#000000" Opacity="0.4" BlurRadius="20" ShadowDepth="0"/>
@@ -16,14 +16,14 @@
 
             <!-- Header -->
             <TextBlock Text="PayBeat"
-                       Foreground="#9399B2"
+                       Foreground="{DynamicResource SubtextBrush}"
                        FontFamily="Segoe UI"
                        FontSize="12"
                        FontWeight="SemiBold"/>
 
             <!-- Earned amount -->
             <TextBlock Text="{Binding EarnedFormatted}"
-                       Foreground="#A6E3A1"
+                       Foreground="{DynamicResource GreenBrush}"
                        FontFamily="Segoe UI"
                        FontSize="40"
                        FontWeight="Bold"
@@ -34,8 +34,8 @@
                          Minimum="0" Maximum="1"
                          Height="5"
                          Margin="0,14,0,8"
-                         Background="#313244"
-                         Foreground="#89B4FA"
+                         Background="{DynamicResource SurfaceBrush}"
+                         Foreground="{DynamicResource BlueBrush}"
                          BorderThickness="0"/>
 
             <!-- Time range -->
@@ -46,28 +46,28 @@
                 </Grid.ColumnDefinitions>
                 <StackPanel Grid.Column="0" Orientation="Horizontal">
                     <TextBlock Text="{DynamicResource View.WorkStart}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                     <TextBlock Text="{Binding WorkStart, StringFormat=HH:mm, Mode=OneWay}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                 </StackPanel>
                 <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                     <TextBlock Text="{DynamicResource View.WorkEnd}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                     <TextBlock Text="{Binding WorkEnd, StringFormat=HH:mm, Mode=OneWay}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                 </StackPanel>
             </Grid>
 
             <!-- Separator -->
-            <Border Height="1" Background="#313244" Margin="0,4,0,10"/>
+            <Border Height="1" Background="{DynamicResource SurfaceBrush}" Margin="0,4,0,10"/>
 
             <!-- Daily total -->
             <Grid>
@@ -77,16 +77,16 @@
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Column="0"
                            Text="{DynamicResource View.DailySalary}"
-                           Foreground="#6C7086"
+                           Foreground="{DynamicResource MutedBrush}"
                            FontFamily="Segoe UI"
                            FontSize="11"/>
                 <StackPanel Grid.Column="1" Orientation="Horizontal">
                     <TextBlock Text="{Binding Currency, Mode=OneWay}"
-                               Foreground="#6C7086"
+                               Foreground="{DynamicResource MutedBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                     <TextBlock Text="{Binding DailySalary, StringFormat=N2, Mode=OneWay}"
-                               Foreground="#6C7086"
+                               Foreground="{DynamicResource MutedBrush}"
                                FontFamily="Segoe UI"
                                FontSize="11"/>
                 </StackPanel>
diff --git a/src/PayBeat.App/Views/SettingsWindow.xaml b/src/PayBeat.App/Views/SettingsWindow.xaml
index 78adbad..8dc2820 100644
--- a/src/PayBeat.App/Views/SettingsWindow.xaml
+++ b/src/PayBeat.App/Views/SettingsWindow.xaml
@@ -18,7 +18,7 @@
 
         <!-- Tab item style -->
         <Style x:Key="SettingsTabItem" TargetType="TabItem">
-            <Setter Property="Foreground" Value="#9399B2" />
+            <Setter Property="Foreground" Value="{DynamicResource SubtextBrush}" />
             <Setter Property="FontSize" Value="13" />
             <Setter Property="Padding" Value="16,8" />
             <Setter Property="Background" Value="Transparent" />
@@ -38,12 +38,12 @@
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsSelected" Value="True">
-                                <Setter TargetName="Border" Property="BorderBrush" Value="#89B4FA" />
-                                <Setter Property="Foreground" Value="#CDD6F4" />
+                                <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource BlueBrush}" />
+                                <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
                                 <Setter Property="FontWeight" Value="SemiBold" />
                             </Trigger>
                             <Trigger Property="IsMouseOver" Value="True">
-                                <Setter Property="Foreground" Value="#CDD6F4" />
+                                <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
@@ -62,7 +62,7 @@
                         <DockPanel>
                             <!-- Tab strip -->
                             <Border DockPanel.Dock="Top"
-                                    BorderBrush="#313244"
+                                    BorderBrush="{DynamicResource SurfaceBrush}"
                                     BorderThickness="0,0,0,1">
                                 <TabPanel IsItemsHost="True"
                                           Background="Transparent"
@@ -82,7 +82,7 @@
 
         <!-- Section header used to group related settings within a tab -->
         <Style x:Key="SettingsSectionHeader" TargetType="TextBlock">
-            <Setter Property="Foreground" Value="#89B4FA" />
+            <Setter Property="Foreground" Value="{DynamicResource BlueBrush}" />
             <Setter Property="FontSize" Value="11" />
             <Setter Property="FontWeight" Value="SemiBold" />
             <Setter Property="Margin" Value="0,0,0,8" />
@@ -95,8 +95,8 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="ToolTip">
-                        <Border Background="#313244"
-                                BorderBrush="#45475A"
+                        <Border Background="{DynamicResource SurfaceBrush}"
+                                BorderBrush="{DynamicResource OverlayBrush}"
                                 BorderThickness="1"
                                 CornerRadius="8"
                                 Padding="6">
@@ -116,12 +116,12 @@
                        Placement="Top"
                        AllowsTransparency="True"
                        PopupAnimation="Fade">
-                    <Border Background="#F38BA8"
+                    <Border Background="{DynamicResource RedBrush}"
                             CornerRadius="6"
                             Padding="8,5"
                             Margin="0,0,0,4">
                         <TextBlock Text="{Binding ElementName=Placeholder, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
-                                   Foreground="#1E1E2E"
+                                   Foreground="{DynamicResource BaseBrush}"
                                    FontSize="11"
                                    TextWrapping="Wrap"
                                    MaxWidth="240" />
@@ -135,15 +135,15 @@
             <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationBubbleTemplate}" />
             <Style.Triggers>
                 <Trigger Property="Validation.HasError" Value="True">
-                    <Setter Property="BorderBrush" Value="#F38BA8" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource RedBrush}" />
                 </Trigger>
             </Style.Triggers>
         </Style>
     </Window.Resources>
 
-    <Border Background="#1E1E2E"
+    <Border Background="{DynamicResource BaseBrush}"
             CornerRadius="12"
-            BorderBrush="#45475A"
+            BorderBrush="{DynamicResource OverlayBrush}"
             BorderThickness="1">
         <Border.Effect>
             <DropShadowEffect Color="#000000" Opacity="0.5" BlurRadius="24" ShadowDepth="0" />
@@ -154,7 +154,7 @@
             <!-- Title -->
             <TextBlock DockPanel.Dock="Top"
                    Text="{DynamicResource Settings.Title}"
-                   Foreground="#CDD6F4"
+                   Foreground="{DynamicResource TextBrush}"
                    FontSize="20"
                    FontWeight="Bold"
                    Margin="0,0,0,16" />
@@ -162,7 +162,7 @@
             <!-- Error -->
             <TextBlock DockPanel.Dock="Bottom"
                    Text="{Binding ErrorMessage}"
-                   Foreground="#F38BA8"
+                   Foreground="{DynamicResource RedBrush}"
                    FontSize="11"
                    TextWrapping="Wrap"
                    MinHeight="16" />
@@ -176,13 +176,13 @@
                     Command="{Binding CancelCommand}"
                     Margin="0,0,10,0"
                     Padding="20,10"
-                    Background="#313244"
-                    Foreground="#CDD6F4" />
+                    Background="{DynamicResource SurfaceBrush}"
+                    Foreground="{DynamicResource TextBrush}" />
                 <Button Content="{DynamicResource Settings.Save}"
                     Command="{Binding SaveCommand}"
                     Padding="20,10"
-                    Background="#89B4FA"
-                    Foreground="#1E1E2E"
+                    Background="{DynamicResource BlueBrush}"
+                    Foreground="{DynamicResource BaseBrush}"
                     FontWeight="SemiBold" />
             </StackPanel>
 
@@ -199,7 +199,7 @@
 
                         <!-- Daily Salary -->
                         <TextBlock Text="{DynamicResource Settings.DailySalary}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontSize="12"
                                Margin="0,0,0,4" />
                         <Grid Margin="0,0,0,16">
@@ -210,9 +210,9 @@
                             </Grid.ColumnDefinitions>
                             <TextBox Grid.Column="0"
                                  Text="{Binding CurrencyText, UpdateSourceTrigger=PropertyChanged}"
-                                 Background="#313244"
-                                 Foreground="#CDD6F4"
-                                 BorderBrush="#45475A"
+                                 Background="{DynamicResource SurfaceBrush}"
+                                 Foreground="{DynamicResource TextBrush}"
+                                 BorderBrush="{DynamicResource OverlayBrush}"
                                  BorderThickness="1"
                                  Padding="10,8" />
                             <TextBox x:Name="SalaryBox"
@@ -220,9 +220,9 @@
                                  Style="{StaticResource ValidatedTextBox}"
                                  Text="{Binding DailySalaryText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
                                  TextAlignment="Right"
-                                 Background="#313244"
-                                 Foreground="#CDD6F4"
-                                 BorderBrush="#45475A"
+                                 Background="{DynamicResource SurfaceBrush}"
+                                 Foreground="{DynamicResource TextBrush}"
+                                 BorderBrush="{DynamicResource OverlayBrush}"
                                  BorderThickness="1"
                                  Padding="10,8"
                                  MaxLength="11"
@@ -241,12 +241,12 @@
                             </Grid.ColumnDefinitions>
                             <TextBlock Grid.Column="0"
                                    Text="{DynamicResource Settings.WorkHours}"
-                                   Foreground="#9399B2"
+                                   Foreground="{DynamicResource SubtextBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                             <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                                 <controls:TimePickerControl SelectedTime="{Binding WorkStart}" />
-                                <TextBlock Text="–" Foreground="#6C7086" FontSize="13" VerticalAlignment="Center" Margin="6,0" />
+                                <TextBlock Text="–" Foreground="{DynamicResource MutedBrush}" FontSize="13" VerticalAlignment="Center" Margin="6,0" />
                                 <controls:TimePickerControl SelectedTime="{Binding WorkEnd}" />
                             </StackPanel>
                         </Grid>
@@ -260,7 +260,7 @@
                             <CheckBox Grid.Column="0"
                                   Content="{DynamicResource Settings.LunchBreakEnabled}"
                                   IsChecked="{Binding LunchBreakEnabled}"
-                                  Foreground="#CDD6F4"
+                                  Foreground="{DynamicResource TextBrush}"
                                   FontSize="13"
                                   Cursor="Hand"
                                   VerticalAlignment="Center" />
@@ -269,7 +269,7 @@
                                     VerticalAlignment="Center"
                                     IsEnabled="{Binding LunchBreakEnabled}">
                                 <controls:TimePickerControl SelectedTime="{Binding LunchBreakStart}" />
-                                <TextBlock Text="–" Foreground="#6C7086" FontSize="13" VerticalAlignment="Center" Margin="6,0" />
+                                <TextBlock Text="–" Foreground="{DynamicResource MutedBrush}" FontSize="13" VerticalAlignment="Center" Margin="6,0" />
                                 <controls:TimePickerControl SelectedTime="{Binding LunchBreakEnd}" />
                             </StackPanel>
                         </Grid>
@@ -277,7 +277,7 @@
                         <!-- Weekend earning -->
                         <CheckBox Content="{DynamicResource Settings.WorkOnWeekends}"
                               IsChecked="{Binding WorkOnWeekends}"
-                              Foreground="#CDD6F4"
+                              Foreground="{DynamicResource TextBrush}"
                               FontSize="13"
                               Cursor="Hand"
                               Margin="0,0,0,16" />
@@ -293,16 +293,16 @@
                             </Grid.ColumnDefinitions>
                             <TextBlock Grid.Column="0"
                                    Text="{DynamicResource Settings.RefreshInterval}"
-                                   Foreground="#9399B2"
+                                   Foreground="{DynamicResource SubtextBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                             <StackPanel Grid.Column="1" Orientation="Horizontal">
                                 <TextBlock Text="{Binding RefreshInterval}"
-                                       Foreground="#A6E3A1"
+                                       Foreground="{DynamicResource GreenBrush}"
                                        FontSize="12"
                                        VerticalAlignment="Center" />
                                 <TextBlock Text="{DynamicResource Settings.Seconds}"
-                                       Foreground="#A6E3A1"
+                                       Foreground="{DynamicResource GreenBrush}"
                                        FontSize="12"
                                        VerticalAlignment="Center" />
                             </StackPanel>
@@ -312,7 +312,7 @@
                             Value="{Binding RefreshInterval}"
                             TickFrequency="1"
                             IsSnapToTickEnabled="True"
-                            Foreground="#89B4FA" />
+                            Foreground="{DynamicResource BlueBrush}" />
                     </StackPanel>
                 </TabItem>
 
@@ -323,7 +323,7 @@
                         <!-- End of day reminder -->
                         <CheckBox Content="{DynamicResource Settings.EnableEndOfDayReminder}"
                               IsChecked="{Binding EnableEndOfDayReminder}"
-                              Foreground="#CDD6F4"
+                              Foreground="{DynamicResource TextBrush}"
                               FontSize="13"
                               Cursor="Hand"
                               Margin="0,0,0,8" />
@@ -335,16 +335,16 @@
                             </Grid.ColumnDefinitions>
                             <TextBlock Grid.Column="0"
                                    Text="{DynamicResource Settings.EndOfDayReminderMinutes}"
-                                   Foreground="#9399B2"
+                                   Foreground="{DynamicResource SubtextBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                             <TextBox Grid.Column="2"
                                  Style="{StaticResource ValidatedTextBox}"
                                  Text="{Binding EndOfDayReminderMinutesText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
                                  TextAlignment="Right"
-                                 Background="#313244"
-                                 Foreground="#CDD6F4"
-                                 BorderBrush="#45475A"
+                                 Background="{DynamicResource SurfaceBrush}"
+                                 Foreground="{DynamicResource TextBrush}"
+                                 BorderBrush="{DynamicResource OverlayBrush}"
                                  BorderThickness="1"
                                  Padding="10,8"
                                  MaxLength="2"
@@ -355,7 +355,7 @@
                         <!-- Milestone notifications -->
                         <CheckBox Content="{DynamicResource Settings.EnableMilestoneNotifications}"
                               IsChecked="{Binding EnableMilestoneNotifications}"
-                              Foreground="#CDD6F4"
+                              Foreground="{DynamicResource TextBrush}"
                               FontSize="13"
                               Cursor="Hand"
                               Margin="0,0,0,8" />
@@ -367,16 +367,16 @@
                             </Grid.ColumnDefinitions>
                             <TextBlock Grid.Column="0"
                                    Text="{DynamicResource Settings.MilestoneAmount}"
-                                   Foreground="#9399B2"
+                                   Foreground="{DynamicResource SubtextBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                             <TextBox Grid.Column="2"
                                  Style="{StaticResource ValidatedTextBox}"
                                  Text="{Binding MilestoneAmountText, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
                                  TextAlignment="Right"
-                                 Background="#313244"
-                                 Foreground="#CDD6F4"
-                                 BorderBrush="#45475A"
+                                 Background="{DynamicResource SurfaceBrush}"
+                                 Foreground="{DynamicResource TextBrush}"
+                                 BorderBrush="{DynamicResource OverlayBrush}"
                                  BorderThickness="1"
                                  Padding="10,8"
                                  MaxLength="11"
@@ -392,13 +392,13 @@
 
                         <!-- Display mode -->
                         <TextBlock Text="{DynamicResource Settings.DisplayMode}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontSize="12"
                                Margin="0,0,0,8" />
                         <StackPanel Orientation="Horizontal" Margin="0,0,0,16">
                             <RadioButton Content="{DynamicResource Settings.Flex}"
                                      IsChecked="{Binding IsFlexMode}"
-                                     Foreground="#CDD6F4"
+                                     Foreground="{DynamicResource TextBrush}"
                                      FontSize="13"
                                      Cursor="Hand"
                                      Margin="0,0,20,0"
@@ -412,7 +412,7 @@
                             </RadioButton>
                             <RadioButton Content="{DynamicResource Settings.Normal}"
                                      IsChecked="{Binding IsNormalMode}"
-                                     Foreground="#CDD6F4"
+                                     Foreground="{DynamicResource TextBrush}"
                                      FontSize="13"
                                      Cursor="Hand"
                                      Margin="0,0,20,0"
@@ -426,7 +426,7 @@
                             </RadioButton>
                             <RadioButton Content="{DynamicResource Settings.Mini}"
                                      IsChecked="{Binding IsMiniMode}"
-                                     Foreground="#CDD6F4"
+                                     Foreground="{DynamicResource TextBrush}"
                                      FontSize="13"
                                      Cursor="Hand"
                                      Margin="0,0,20,0"
@@ -440,7 +440,7 @@
                             </RadioButton>
                             <RadioButton Content="{DynamicResource Settings.None}"
                                      IsChecked="{Binding IsNoneMode}"
-                                     Foreground="#CDD6F4"
+                                     Foreground="{DynamicResource TextBrush}"
                                      FontSize="13"
                                      Cursor="Hand" />
                         </StackPanel>
@@ -453,12 +453,12 @@
                             </Grid.ColumnDefinitions>
                             <TextBlock Grid.Column="0"
                                    Text="{DynamicResource Settings.Opacity}"
-                                   Foreground="#9399B2"
+                                   Foreground="{DynamicResource SubtextBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                             <TextBlock Grid.Column="1"
                                    Text="{Binding Opacity, StringFormat={}{0:P0}}"
-                                   Foreground="#A6E3A1"
+                                   Foreground="{DynamicResource GreenBrush}"
                                    FontSize="12"
                                    VerticalAlignment="Center" />
                         </Grid>
@@ -467,15 +467,54 @@
                             Value="{Binding Opacity}"
                             TickFrequency="0.05"
                             IsSnapToTickEnabled="True"
-                            Foreground="#89B4FA"
+                            Foreground="{DynamicResource BlueBrush}"
                             Margin="0,0,0,16" />
 
                         <!-- Always on top -->
                         <CheckBox Content="{DynamicResource Settings.AlwaysOnTop}"
                               IsChecked="{Binding AlwaysOnTop}"
-                              Foreground="#CDD6F4"
+                              Foreground="{DynamicResource TextBrush}"
                               FontSize="13"
-                              Cursor="Hand" />
+                              Cursor="Hand"
+                              Margin="0,0,0,16" />
+
+                        <!-- Theme -->
+                        <TextBlock Text="{DynamicResource Settings.Theme}"
+                               Foreground="{DynamicResource SubtextBrush}"
+                               FontSize="12"
+                               Margin="0,0,0,6" />
+                        <ComboBox ItemsSource="{Binding AvailableThemes}"
+                              SelectedValue="{Binding Theme}"
+                              SelectedValuePath="Code"
+                              Background="{DynamicResource SurfaceBrush}"
+                              Foreground="{DynamicResource TextBrush}"
+                              BorderBrush="{DynamicResource OverlayBrush}"
+                              BorderThickness="1"
+                              Padding="10,8"
+                              HorizontalContentAlignment="Left">
+                            <ComboBox.ItemTemplate>
+                                <DataTemplate>
+                                    <TextBlock>
+                                        <TextBlock.Style>
+                                            <Style TargetType="TextBlock">
+                                                <Setter Property="Text" Value="{Binding Name}" />
+                                                <Style.Triggers>
+                                                    <DataTrigger Binding="{Binding Code}" Value="auto">
+                                                        <Setter Property="Text" Value="{DynamicResource Settings.ThemeAuto}" />
+                                                    </DataTrigger>
+                                                    <DataTrigger Binding="{Binding Code}" Value="light">
+                                                        <Setter Property="Text" Value="{DynamicResource Settings.ThemeLight}" />
+                                                    </DataTrigger>
+                                                    <DataTrigger Binding="{Binding Code}" Value="dark">
+                                                        <Setter Property="Text" Value="{DynamicResource Settings.ThemeDark}" />
+                                                    </DataTrigger>
+                                                </Style.Triggers>
+                                            </Style>
+                                        </TextBlock.Style>
+                                    </TextBlock>
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
                     </StackPanel>
                 </TabItem>
 
@@ -486,22 +525,22 @@
                         <!-- Run at startup -->
                         <CheckBox Content="{DynamicResource Settings.RunAtStartup}"
                               IsChecked="{Binding RunAtStartup}"
-                              Foreground="#CDD6F4"
+                              Foreground="{DynamicResource TextBrush}"
                               FontSize="13"
                               Cursor="Hand"
                               Margin="0,0,0,16" />
 
                         <!-- Hotkey -->
                         <TextBlock Text="{DynamicResource Settings.Hotkey}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontSize="12"
                                Margin="0,0,0,6" />
                         <TextBox x:Name="HotkeyBox"
                              Text="{Binding HotkeyDisplayText, Mode=OneWay}"
                              IsReadOnly="True"
-                             Background="#313244"
-                             Foreground="#CDD6F4"
-                             BorderBrush="#45475A"
+                             Background="{DynamicResource SurfaceBrush}"
+                             Foreground="{DynamicResource TextBrush}"
+                             BorderBrush="{DynamicResource OverlayBrush}"
                              BorderThickness="1"
                              Padding="10,8"
                              Cursor="IBeam"
@@ -509,24 +548,25 @@
                              GotFocus="HotkeyBox_GotFocus"
                              LostFocus="HotkeyBox_LostFocus" />
                         <TextBlock Text="{DynamicResource Settings.HotkeyHint}"
-                               Foreground="#6C7086"
+                               Foreground="{DynamicResource MutedBrush}"
                                FontSize="11"
                                Margin="0,4,0,16" />
 
                         <!-- Language -->
                         <TextBlock Text="{DynamicResource Settings.Language}"
-                               Foreground="#9399B2"
+                               Foreground="{DynamicResource SubtextBrush}"
                                FontSize="12"
                                Margin="0,0,0,6" />
                         <ComboBox ItemsSource="{Binding AvailableLanguages}"
                               SelectedValue="{Binding Language}"
                               SelectedValuePath="Code"
-                              Background="#313244"
-                              Foreground="#CDD6F4"
-                              BorderBrush="#45475A"
+                              Background="{DynamicResource SurfaceBrush}"
+                              Foreground="{DynamicResource TextBrush}"
+                              BorderBrush="{DynamicResource OverlayBrush}"
                               BorderThickness="1"
                               Padding="10,8"
-                              HorizontalContentAlignment="Left">
+                              HorizontalContentAlignment="Left"
+                              Margin="0,0,0,16">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate>
                                     <TextBlock>
diff --git a/src/PayBeat.App/Views/SettingsWindow.xaml.cs b/src/PayBeat.App/Views/SettingsWindow.xaml.cs
index af65407..b5eb944 100644
--- a/src/PayBeat.App/Views/SettingsWindow.xaml.cs
+++ b/src/PayBeat.App/Views/SettingsWindow.xaml.cs
@@ -49,28 +49,6 @@ private static string BuildModifierPreview(int modifiers)
         return string.Join("+", parts);
     }
 
-    private static void SetHotkeyBoxCapturingStyle(TextBox box, bool capturing)
-    {
-        if (capturing)
-        {
-            box.Background = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#1C3A5E"));
-            box.BorderBrush = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#89B4FA"));
-            box.Foreground = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#89B4FA"));
-        }
-        else
-        {
-            box.Background = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#313244"));
-            box.BorderBrush = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#45475A"));
-            box.Foreground = new System.Windows.Media.SolidColorBrush(
-                (System.Windows.Media.Color)System.Windows.Media.ColorConverter.ConvertFromString("#CDD6F4"));
-        }
-    }
-
     private void HotkeyBox_GotFocus(object sender, RoutedEventArgs e)
     {
         ((App)Application.Current).SuspendHotkey();
@@ -172,12 +150,12 @@ or Key.LeftShift or Key.RightShift or Key.LWin or Key.RWin
         box.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
     }
 
-    private void Salary_Pasting(object sender, DataObjectPastingEventArgs e)
+    private void Integer_Pasting(object sender, DataObjectPastingEventArgs e)
     {
         if (e.DataObject.GetDataPresent(typeof(string)))
         {
             var text = (string)e.DataObject.GetData(typeof(string))!;
-            if (!DecimalPattern.IsMatch(text))
+            if (!IntegerPattern.IsMatch(text))
             {
                 e.CancelCommand();
             }
@@ -188,21 +166,21 @@ private void Salary_Pasting(object sender, DataObjectPastingEventArgs e)
         }
     }
 
-    private void Salary_PreviewTextInput(object sender, TextCompositionEventArgs e)
+    private void Integer_PreviewTextInput(object sender, TextCompositionEventArgs e)
     {
         var box = (TextBox)sender;
         var prospective =
             box.Text.Remove(box.SelectionStart, box.SelectionLength).Insert(box.SelectionStart, e.Text);
 
-        e.Handled = !DecimalPattern.IsMatch(prospective);
+        e.Handled = !IntegerPattern.IsMatch(prospective);
     }
 
-    private void Integer_Pasting(object sender, DataObjectPastingEventArgs e)
+    private void Salary_Pasting(object sender, DataObjectPastingEventArgs e)
     {
         if (e.DataObject.GetDataPresent(typeof(string)))
         {
             var text = (string)e.DataObject.GetData(typeof(string))!;
-            if (!IntegerPattern.IsMatch(text))
+            if (!DecimalPattern.IsMatch(text))
             {
                 e.CancelCommand();
             }
@@ -213,13 +191,29 @@ private void Integer_Pasting(object sender, DataObjectPastingEventArgs e)
         }
     }
 
-    private void Integer_PreviewTextInput(object sender, TextCompositionEventArgs e)
+    private void Salary_PreviewTextInput(object sender, TextCompositionEventArgs e)
     {
         var box = (TextBox)sender;
         var prospective =
             box.Text.Remove(box.SelectionStart, box.SelectionLength).Insert(box.SelectionStart, e.Text);
 
-        e.Handled = !IntegerPattern.IsMatch(prospective);
+        e.Handled = !DecimalPattern.IsMatch(prospective);
+    }
+
+    private void SetHotkeyBoxCapturingStyle(TextBox box, bool capturing)
+    {
+        if (capturing)
+        {
+            box.Background = (System.Windows.Media.Brush)FindResource("CaptureBackgroundBrush");
+            box.BorderBrush = (System.Windows.Media.Brush)FindResource("BlueBrush");
+            box.Foreground = (System.Windows.Media.Brush)FindResource("BlueBrush");
+        }
+        else
+        {
+            box.Background = (System.Windows.Media.Brush)FindResource("SurfaceBrush");
+            box.BorderBrush = (System.Windows.Media.Brush)FindResource("OverlayBrush");
+            box.Foreground = (System.Windows.Media.Brush)FindResource("TextBrush");
+        }
     }
 
     private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)