Implements basic Light/Dark themes request in #7

Author: BinaryAlley

README.md

@@ -30,6 +30,7 @@ Dataset Tag is a free and open-source tool designed to make the process of image
 - **Memory Feature**: Remembers both the tags in each category and the tags used for each image, allowing for easy edits later.
 - **Replicability**: It ofers the option of copying the trigger words and/or the selected tags using the system's cache memory, and pasting them on other selected images (easy copy/paste of tags among images).
 - **Draggable Panel Columns**: Each column has a grid splitter, which can be used to resize them in any ratio you desire.
+- **Theme**: Light and Dark theme support.
 
 ## Compiling from Source
 

src/DatasetTag/App.axaml

@@ -5,6 +5,7 @@
     <Application.Styles>
       <SimpleTheme />
       <!--<FluentTheme Mode="Light"/>-->
+      <StyleInclude Source="/Common/Styles/Light.xaml"/>
       <StyleInclude Source="/Common/Styles/TextBox.axaml"/>
       <StyleInclude Source="/Common/Styles/ScrollBar.axaml"/>
       <StyleInclude Source="/Common/Styles/ScrollViewer.axaml"/>

src/DatasetTag/App.axaml.cs

@@ -1,24 +1,36 @@
+#region ========================================================================= USING =====================================================================================
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+#endregion
 
-namespace DatasetTag
+namespace DatasetTag;
+
+public partial class App : Application
 {
-    public partial class App : Application
-    {
-        public override void Initialize()
-        {
-            AvaloniaXamlLoader.Load(this);
-        }
+    #region ================================================================== FIELD MEMBERS ================================================================================
+    public static StyleManager? styles;
+    #endregion
 
-        public override void OnFrameworkInitializationCompleted()
-        {
-            if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
-            {
-                desktop.MainWindow = new MainWindow();
-            }
+    #region ===================================================================== METHODS ===================================================================================
+    /// <summary>
+    /// Initializes the application by loading XAML etc.
+    /// </summary>
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
 
-            base.OnFrameworkInitializationCompleted();
-        }
+    /// <summary>
+    /// Framework initialization code
+    /// </summary>
+    public override void OnFrameworkInitializationCompleted()
+    {
+        styles = new StyleManager(this);
+        MainWindow.ThemeChanged += styles.SwitchThemeByIndex;
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+            desktop.MainWindow = new MainWindow();
+        base.OnFrameworkInitializationCompleted();
     }
+    #endregion
 }

src/DatasetTag/Common/Enums/Themes.cs

@@ -0,0 +1,13 @@
+namespace DatasetTag.Common.Enums;
+
+/// <summary>
+/// Enumeration for the application's themes
+/// </summary>
+/// <remarks>
+/// Creation Date: 25th of July, 2021
+/// </remarks>
+public enum Themes
+{
+    Dark,
+    Light
+}

src/DatasetTag/Common/Styles/Dark.xaml

@@ -0,0 +1,15 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard">
+
+    <Style>
+        <Style.Resources>
+            <Color x:Key="WindowBackground">#232323</Color>
+            <Color x:Key="ImagesPanelBackground">#333333</Color>
+            <Color x:Key="TagsPanelBackground">#353535</Color>
+            <Color x:Key="TagsBackground">#606060</Color>
+            <Color x:Key="SelectedTagsPanelBackground">#373737</Color>
+            <Color x:Key="TextForeground">#FFFFFF</Color>
+        </Style.Resources>
+    </Style>
+</Styles>

src/DatasetTag/Common/Styles/Light.xaml

@@ -0,0 +1,15 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="clr-namespace:System;assembly=netstandard">
+
+    <Style>
+        <Style.Resources>
+            <Color x:Key="WindowBackground">#D8D8D8</Color>
+            <Color x:Key="ImagesPanelBackground">#ADD8E6</Color>
+            <Color x:Key="TagsPanelBackground">#E0FFFF</Color>
+            <Color x:Key="TagsBackground">#A9A9A9</Color>
+            <Color x:Key="SelectedTagsPanelBackground">#87CEFA</Color>
+            <Color x:Key="TextForeground">#000000</Color>
+        </Style.Resources>
+    </Style>
+</Styles> 

src/DatasetTag/Common/Styles/StyleManager.cs

@@ -0,0 +1,98 @@
+#region ========================================================================= USING =====================================================================================
+using System;
+using Avalonia;
+using Avalonia.Markup.Xaml.Styling;
+using DatasetTag.Common.Enums;
+#endregion
+
+namespace DatasetTag;
+
+/// <summary>
+/// Class for managing the application's styles
+/// </summary>
+/// <remarks>
+/// Creation Date: 25th of July, 2021
+/// </remarks>
+public class StyleManager
+{
+    #region ================================================================== FIELD MEMBERS ================================================================================
+    private readonly Application application;
+    private readonly StyleInclude darkStyle = CreateStyle("avares://DatasetTag/Common/Styles/Dark.xaml");
+    private readonly StyleInclude lightStyle = CreateStyle("avares://DatasetTag/Common/Styles/Light.xaml");
+    #endregion
+
+    #region ==================================================================== PROPERTIES =================================================================================
+    public Themes CurrentTheme { get; private set; } = Themes.Light;
+    #endregion
+
+    #region ====================================================================== CTOR =====================================================================================
+    /// <summary>
+    /// Overload C-tor
+    /// </summary>
+    /// <param name="application">The application for which to manage the style</param>
+    public StyleManager(Application application)
+    {
+        this.application = application;
+        // safe guard
+        if (application.Styles.Count == 0)
+            application.Styles.Add(darkStyle);
+        else 
+            application.Styles[1] = darkStyle;
+    }
+    #endregion
+
+    #region ===================================================================== METHODS ===================================================================================
+    /// <summary>
+    /// Switches the current theme with the oposite theme
+    /// </summary>
+    public void SwitchTheme()
+    {
+        SetTheme(CurrentTheme switch
+        {
+            Themes.Dark => Themes.Light,
+            Themes.Light => Themes.Dark,
+            _ => throw new ArgumentOutOfRangeException(nameof(CurrentTheme))
+        });
+    }
+
+    /// <summary>
+    /// Switches the curent theme to a theme whose index is equal to <paramref name="themeIndex"/>
+    /// </summary>
+    /// <param name="themeIndex">The index of the theme to set</param>
+    public void SwitchThemeByIndex(int themeIndex)
+    {
+        application.Styles[1] = themeIndex == 0 ? darkStyle : lightStyle;
+        CurrentTheme = themeIndex == 0 ? Themes.Dark : Themes.Light;
+    }
+
+    /// <summary>
+    /// Sets the currently used theme
+    /// </summary>
+    /// <param name="theme">The theme to be set</param>
+    public void SetTheme(Themes theme)
+    {
+        // change the first style in the main window styles section, and the main window instantly refreshes
+        // (invoke only from the UI thread!)
+        application.Styles[1] = theme switch
+        {
+            Themes.Dark => lightStyle,
+            Themes.Light => darkStyle,
+            _ => throw new ArgumentOutOfRangeException(nameof(theme))
+        };
+        CurrentTheme = theme;
+    }
+
+    /// <summary>
+    /// Creates the style used for theming
+    /// </summary>
+    /// <param name="url">The url of the theme file to be used</param>
+    /// <returns>The <see cref="StyleInclude"/> containing the styles inside the theme identified by <paramref name="url"/></returns>
+    private static StyleInclude CreateStyle(string url)
+    {
+        return new StyleInclude(new Uri("resm:Styles?assembly=DatasetTag"))
+        {
+            Source = new Uri(url)
+        };
+    }
+    #endregion
+}

src/DatasetTag/DatasetTag.csproj

@@ -34,4 +34,9 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
   </ItemGroup>
+
+  <ItemGroup>
+   <AvaloniaResource Include="Common\Styles\Dark.xaml" />
+   <AvaloniaResource Include="Common\Styles\Light.xaml" />
+  </ItemGroup>
 </Project>