Add ability to toggle dark/light theme, support dark mode for plot

Resolves #1

Author: tsunyoku

src/ManiaKeyPresses.UI/GlobalConfig.cs

@@ -2,6 +2,7 @@
 using System.ComponentModel;
 using System.IO;
 using System.Text.Json;
+using Avalonia.Styling;
 
 namespace ManiaKeyPresses.UI;
 
@@ -19,6 +20,8 @@ public static class GlobalConfig
 
     public static string? OsuClientSecret { get; private set; }
 
+    public static ThemeVariant Theme { get; private set; } = null!;
+
     public static void Load()
     {
         if (!Directory.Exists(ManiaKeyPressesFolder))
@@ -34,38 +37,44 @@ public static void Load()
 
         OsuClientId = config.OsuClientId;
         OsuClientSecret = config.OsuClientSecret;
+        Theme = config.Theme ?? ThemeVariant.Default;
     }
 
     public static void UpdateOsuClientId(string? clientId)
     {
         OsuClientId = clientId;
 
         NotifyPropertyChanged(nameof(OsuClientId));
-
-        var config = new Config
-        {
-            OsuClientId = clientId,
-            OsuClientSecret = OsuClientSecret,
-        };
-        
-        File.WriteAllText(ConfigFile, JsonSerializer.Serialize(config));
+        UpdateConfigFile();
     }
 
     public static void UpdateOsuClientSecret(string? clientSecret)
     {
         OsuClientSecret = clientSecret;
 
         NotifyPropertyChanged(nameof(OsuClientSecret));
+        UpdateConfigFile();
+    }
 
+    public static void UpdateTheme(ThemeVariant theme)
+    {
+        Theme = theme;
+
+        NotifyPropertyChanged(nameof(Theme));
+        UpdateConfigFile();
+    }
+
+    private static void UpdateConfigFile()
+    {
         var config = new Config
         {
             OsuClientId = OsuClientId,
-            OsuClientSecret = clientSecret,
+            OsuClientSecret = OsuClientSecret,
+            Theme = Theme,
         };
-        
+
         File.WriteAllText(ConfigFile, JsonSerializer.Serialize(config));
     }
-    
 
     public static event PropertyChangedEventHandler? PropertyChanged;
 
@@ -80,4 +89,6 @@ file class Config
     public string? OsuClientId { get; init; }
 
     public string? OsuClientSecret { get; init; }
+    
+    public ThemeVariant? Theme { get; init; }
 }

src/ManiaKeyPresses.UI/MainViewModel.cs

@@ -22,6 +22,8 @@ public MainViewModel()
 
     public bool HasReplay => !string.IsNullOrWhiteSpace(CurrentReplayFileName);
 
+    public bool IsDarkMode { get; private set; }
+
     public void UpdateReplay(string? replayFileName)
     {
         CurrentReplayFileName = replayFileName;
@@ -30,5 +32,12 @@ public void UpdateReplay(string? replayFileName)
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(HasReplay)));
     }
 
+    public void UpdateIsDarkMode(bool isDarkMode)
+    {
+        IsDarkMode = isDarkMode;
+        
+        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsDarkMode)));
+    }
+
     public event PropertyChangedEventHandler? PropertyChanged;
 }

src/ManiaKeyPresses.UI/MainWindow.axaml

@@ -12,6 +12,29 @@
         </StackPanel>
 
         <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10" HorizontalAlignment="Right">
+            <Button Name="ThemeToggleButton" 
+                    Background="Transparent" 
+                    BorderThickness="0"
+                    Margin="0,0,10,0"
+                    Click="ThemeToggleButton_Click"
+                    ToolTip.Tip="Toggle Light/Dark Mode">
+                <Grid>
+                    <Path Name="SunIcon"
+                          Data="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z"
+                          Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                          Width="20"
+                          Height="20"
+                          IsVisible="{Binding IsDarkMode}"/>
+
+                    <Path Name="MoonIcon"
+                          Data="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.4 6.35,17.41C9.37,20.43 14,20.54 17.33,17.97Z"
+                          Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                          Width="20"
+                          Height="20"
+                          IsVisible="{Binding !IsDarkMode}"/>
+                </Grid>
+            </Button>
+
             <Button Name="SettingsButton" Background="Transparent" BorderThickness="0">
                 <Button.Flyout>
                     <Flyout Placement="BottomEdgeAlignedRight">
@@ -47,7 +70,7 @@
                 </Button.Flyout>
 
                 <Path Data="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11.03L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11.03C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" 
-                      Fill="White"
+                      Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
                       Width="20"
                       Height="20"/>
             </Button>

src/ManiaKeyPresses.UI/MainWindow.axaml.cs

@@ -1,10 +1,12 @@
 using System;
 using System.IO;
 using System.Linq;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.Platform.Storage;
+using Avalonia.Styling;
 using OxyPlot;
 using OxyPlot.Avalonia;
 using OxyPlot.Axes;
@@ -21,6 +23,12 @@ public MainWindow()
     {
         InitializeComponent();
         DataContext = new MainViewModel();
+
+        if (Application.Current is not null)
+        {
+            Application.Current.RequestedThemeVariant = GlobalConfig.Theme;
+            ViewModel.UpdateIsDarkMode(GlobalConfig.Theme == ThemeVariant.Dark);
+        }
 
         DragDrop.SetAllowDrop(this, true);
         AddHandler(DragDrop.DropEvent, Drop);
@@ -70,6 +78,21 @@ private async void LoadReplayButton_Click(object? sender, RoutedEventArgs e)
         var replayPath = files.Single().TryGetLocalPath()!;
         AnalyseReplay(replayPath);
     }
+    
+    private void ThemeToggleButton_Click(object sender, RoutedEventArgs e)
+    {
+        var app = Application.Current;
+
+        if (app is null)
+            return;
+
+        var currentTheme = app.ActualThemeVariant;
+        var newTheme = currentTheme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        app.RequestedThemeVariant = newTheme;
+
+        ViewModel.UpdateIsDarkMode(newTheme == ThemeVariant.Dark);
+        GlobalConfig.UpdateTheme(newTheme);
+    }
 
     private void Drop(object? sender, DragEventArgs e)
     {
@@ -102,18 +125,29 @@ private void AnalyseReplay(string replayPath)
         var plotModel = new PlotModel
         {
             Title = "Key Hold Time Distribution",
-            Background = OxyColors.White
+            Background = ViewModel.IsDarkMode ? OxyColors.Black : OxyColors.White,
+            TextColor = ViewModel.IsDarkMode ? OxyColors.White : OxyColors.Black,
+            TitleColor = ViewModel.IsDarkMode ? OxyColors.White : OxyColors.Black,
+            PlotAreaBorderColor = ViewModel.IsDarkMode ? OxyColors.Gray : OxyColors.Black
         };
 
+        var gridColour = ViewModel.IsDarkMode ? OxyColors.DarkGray : OxyColors.LightGray;
+        var axisColour = ViewModel.IsDarkMode ? OxyColors.White : OxyColors.Black;
+
         plotModel.Axes.Add(new LinearAxis
         {
             Position = AxisPosition.Bottom,
             Title = "pressing time (ms)",
             TitleFontSize = 15,
+            TitleColor = axisColour,
+            TextColor = axisColour,
+            AxislineColor = axisColour,
+            TicklineColor = axisColour,
             Minimum = 0,
             Maximum = 160,
             MajorGridlineStyle = LineStyle.Solid,
-            MajorGridlineColor = OxyColors.LightGray,
+            MajorGridlineColor = gridColour,
+            MinorGridlineColor = gridColour,
             IsZoomEnabled = false,
             IsPanEnabled = false,
         });
@@ -125,9 +159,14 @@ private void AnalyseReplay(string replayPath)
             Position = AxisPosition.Left,
             Title = "count",
             TitleFontSize = 15,
+            TitleColor = axisColour,
+            TextColor = axisColour,
+            AxislineColor = axisColour,
+            TicklineColor = axisColour,
             Maximum = maxHoldTimeCount + maxHoldTimeCount * 0.1,
             MajorGridlineStyle = LineStyle.Solid,
-            MajorGridlineColor = OxyColors.LightGray,
+            MajorGridlineColor = gridColour,
+            MinorGridlineColor = gridColour,
             IsZoomEnabled = false,
             IsPanEnabled = false,
         });
@@ -138,15 +177,18 @@ private void AnalyseReplay(string replayPath)
         {
             LegendPosition = LegendPosition.RightTop,
             LegendPlacement = LegendPlacement.Inside,
-            LegendFontSize = 10
+            LegendFontSize = 10,
+            LegendTextColor = ViewModel.IsDarkMode ? OxyColors.White : OxyColors.Black,
+            LegendBackground = OxyColors.Transparent,
+            LegendBorder = ViewModel.IsDarkMode ? OxyColors.Gray : OxyColors.LightGray
         });
 
         for (var i = 0; i < analysis.HoldTimes.Length; i++)
         {
             var lineSeries = new LineSeries
             {
                 Title = $"key {i + 1}",
-                Color = GetRainbowColor(i, analysis.HoldTimes.Length),
+                Color = GetRainbowColor(i, analysis.HoldTimes.Length, ViewModel.IsDarkMode),
                 StrokeThickness = 2,
                 TrackerFormatString = "{0}\nHold Time: {2:0} ms\nCount: {4:0}",
             };
@@ -163,13 +205,13 @@ private void AnalyseReplay(string replayPath)
         PlotView.Model = plotModel;
     }
 
-    private static OxyColor GetRainbowColor(int index, int total)
+    private static OxyColor GetRainbowColor(int index, int total, bool isDarkTheme)
     {
-        const double saturation = 0.9;
-        const double value = 0.9;
+        var saturation = isDarkTheme ? 0.8 : 0.9;
+        var value = isDarkTheme ? 0.9 : 0.8;
 
-        const double c = value * saturation;
-        const double m = value - c;
+        var c = value * saturation;
+        var m = value - c;
 
         // Create a hue using the index & total
         // Then do standard HSV->RGB conversion