[Avalonia] Theme updates to change between light and dark

src/PicView.Avalonia.Win32/App.axaml

@@ -1,4 +1,5 @@
 <Application
+    RequestedThemeVariant="Dark"
     x:Class="PicView.Avalonia.Win32.App"
     x:CompileBindings="True"
     xmlns="https://github.com/avaloniaui"

src/PicView.Avalonia/PicView.Avalonia.csproj

@@ -34,6 +34,8 @@
   
   <ItemGroup>
     <AvaloniaResource Include="Assets\**" />
+    <None Remove="PicViewTheme\Resources\noisy-texture-200x200-o4-d23-c-ffffff-t1.png" />
+    <AvaloniaResource Include="PicViewTheme\Resources\noisy-texture-200x200-o4-d23-c-ffffff-t1.png" />
   </ItemGroup>
 
   

src/PicView.Avalonia/PicViewTheme/Controls/Menu.axaml

@@ -1,12 +1,13 @@
 <ResourceDictionary
+    x:ClassModifier="internal"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:conv="using:Avalonia.Controls.Converters"
     xmlns:sys="using:System"
-    x:ClassModifier="internal">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
 
-    <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
+    <ControlTheme TargetType="ContextMenu" x:Key="{x:Type ContextMenu}">
+        <Setter Property="Foreground" Value="{StaticResource ContextMenuTextColor}" />
         <Setter Property="Background" Value="{StaticResource ContextMenuBackgroundColor}" />
         <Setter Property="BorderBrush" Value="{StaticResource MainBorderColor}" />
         <Setter Property="BorderThickness" Value="1" />
@@ -17,21 +18,21 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
-                    Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="8">
+                    CornerRadius="8"
+                    Padding="{TemplateBinding Padding}">
                     <ItemsPresenter
-                        Name="PART_ItemsPresenter"
                         ItemsPanel="{TemplateBinding ItemsPanel}"
-                        KeyboardNavigation.TabNavigation="Continue" />
+                        KeyboardNavigation.TabNavigation="Continue"
+                        Name="PART_ItemsPresenter" />
                 </Border>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
 
-    <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
+    <ControlTheme TargetType="MenuItem" x:Key="{x:Type MenuItem}">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Padding" Value="6" />
@@ -43,32 +44,32 @@
                             <ColumnDefinition Width="20" />
                             <ColumnDefinition Width="5" />
                             <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGT" />
+                            <ColumnDefinition SharedSizeGroup="MenuItemIGT" Width="Auto" />
                             <ColumnDefinition Width="20" />
                         </Grid.ColumnDefinitions>
                         <ContentControl
-                            Name="icon"
-                            Width="16"
+                            Content="{TemplateBinding Icon}"
                             Height="16"
-                            Margin="5,0,0,0"
                             HorizontalAlignment="Center"
+                            Margin="5,0,0,0"
+                            Name="icon"
                             VerticalAlignment="Center"
-                            Content="{TemplateBinding Icon}" />
+                            Width="16" />
                         <ContentControl
-                            x:Name="PART_ToggleIconPresenter"
                             Grid.Column="0"
-                            Width="16"
                             Height="16"
+                            IsVisible="True"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
-                            IsVisible="True" />
+                            Width="16"
+                            x:Name="PART_ToggleIconPresenter" />
                         <ContentPresenter
-                            Name="PART_HeaderPresenter"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                             Grid.Column="2"
                             Margin="{TemplateBinding Padding}"
-                            VerticalAlignment="Center"
-                            Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}">
+                            Name="PART_HeaderPresenter"
+                            VerticalAlignment="Center">
                             <ContentPresenter.DataTemplates>
                                 <DataTemplate DataType="sys:String">
                                     <AccessText Text="{Binding}" />
@@ -76,26 +77,26 @@
                             </ContentPresenter.DataTemplates>
                         </ContentPresenter>
                         <TextBlock
-                            x:Name="PART_InputGestureText"
                             Grid.Column="3"
-                            VerticalAlignment="Center"
                             Text="{TemplateBinding InputGesture,
-                                                   Converter={StaticResource KeyGestureConverter}}" />
+                                                   Converter={StaticResource KeyGestureConverter}}"
+                            VerticalAlignment="Center"
+                            x:Name="PART_InputGestureText" />
                         <Path
-                            Name="rightArrow"
+                            Data="F1M0.002,31.062L0,0 27.01,15.534z"
+                            Fill="{StaticResource MainIconColor}"
                             Grid.Column="4"
-                            Width="8"
                             Height="8"
                             Margin="6,0,4,0"
+                            Name="rightArrow"
+                            Stretch="Fill"
                             VerticalAlignment="Center"
-                            Data="F1M0.002,31.062L0,0 27.01,15.534z"
-                            Fill="{StaticResource MainIconColor}"
-                            Stretch="Fill" />
+                            Width="8" />
                         <Popup
-                            Name="PART_Popup"
                             IsLightDismissEnabled="False"
                             IsOpen="{TemplateBinding IsSubMenuOpen,
                                                      Mode=TwoWay}"
+                            Name="PART_Popup"
                             Placement="RightEdgeAlignedTop">
                             <Border
                                 Background="{StaticResource ContextMenuBackgroundColor}"
@@ -104,10 +105,10 @@
                                 CornerRadius="8">
                                 <ScrollViewer>
                                     <ItemsPresenter
-                                        Name="PART_ItemsPresenter"
-                                        Margin="2"
                                         Grid.IsSharedSizeScope="True"
-                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                        ItemsPanel="{TemplateBinding ItemsPanel}"
+                                        Margin="2"
+                                        Name="PART_ItemsPresenter" />
                                 </ScrollViewer>
                             </Border>
                         </Popup>
@@ -133,9 +134,9 @@
             <Setter Property="Content">
                 <Template>
                     <Path
-                        VerticalAlignment="Center"
                         Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z"
-                        Fill="{StaticResource MainIconColor}" />
+                        Fill="{StaticResource MainIconColor}"
+                        VerticalAlignment="Center" />
                 </Template>
             </Setter>
         </Style>
@@ -143,10 +144,10 @@
             <Setter Property="Content">
                 <Template>
                     <Ellipse
-                        Width="8"
+                        Fill="{StaticResource MainIconColor}"
                         Height="8"
                         Margin="4"
-                        Fill="{StaticResource MainIconColor}" />
+                        Width="8" />
                 </Template>
             </Setter>
         </Style>
@@ -173,7 +174,7 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator">
+    <ControlTheme TargetType="Separator" x:Key="{x:Type Separator}">
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Background" Value="{StaticResource MainBorderColor}" />
         <Setter Property="Opacity" Value=".8" />

src/PicView.Avalonia/PicViewTheme/DarkColors.axaml

@@ -1,9 +1,5 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Color x:Key="AccentColor">#FFDB5B3D</Color>
-    <Color x:Key="SecondaryAccentColor">#e0755a</Color>
-    <Color x:Key="LogoAccentColor">#FFf8af3c</Color>
-
     <Color x:Key="MainTextColor">#FFf6f4f4</Color>
     <Color x:Key="MainTextColorFaded">#d6d4d4</Color>
 
@@ -29,7 +25,9 @@
     <Color x:Key="BackgroundAlpha">#442e2e2e</Color>
 
     <Color x:Key="MenuBackgroundColor">#292929</Color>
+
     <Color x:Key="ContextMenuBackgroundColor">#EE2b2b2b</Color>
+    <Color x:Key="ContextMenuTextColor">#EDEBEB</Color>
 
     <Color x:Key="WindowBackgroundColor">#66000000</Color>
     <ImageBrush

src/PicView.Avalonia/PicViewTheme/LightColors.axaml

@@ -1,41 +1,39 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Color x:Key="AccentColor">#FFDB5B3D</Color>
-    <Color x:Key="SecondaryAccentColor">#e0755a</Color>
-    <Color x:Key="LogoAccentColor">#FFf8af3c</Color>
+    <Color x:Key="MainTextColor">#424242</Color>
+    <Color x:Key="MainTextColorFaded">#61574a</Color>
 
-    <Color x:Key="MainTextColor">#FFf6f4f4</Color>
-    <Color x:Key="MainTextColorFaded">#d6d4d4</Color>
-
-    <Color x:Key="MainIconColor">#eeebebeb</Color>
+    <Color x:Key="MainIconColor">#474139</Color>
     <Color x:Key="SecondaryIconColor">#eeebebeb</Color>
 
     <Color x:Key="MainBackgroundColor">White</Color>
-    <Color x:Key="SecondaryBackgroundColor">WhiteSmoke</Color>
+    <Color x:Key="SecondaryBackgroundColor">White</Color>
     <Color x:Key="TertiaryBackgroundColor">#CC3d3d3d</Color>
     <Color x:Key="FadedBackgroundColor">#FF333333</Color>
-    <Color x:Key="BackgroundHoverColor">#FF4B4B4B</Color>
+    <Color x:Key="BackgroundHoverColor">#D5FFFFFF</Color>
     <Color x:Key="AltBackgroundHoverColor">#22FFFFFF</Color>
     <Color x:Key="AltBackgroundColor">#A7222222</Color>
 
-    <Color x:Key="MainButtonBackgroundColor">#FF2e2e2e</Color>
+    <Color x:Key="MainButtonBackgroundColor">#81FFFFFF</Color>
 
-    <Color x:Key="MainBorderColor">#FF3A3A3A</Color>
-    <Color x:Key="SecondaryBorderColor">#777</Color>
+    <Color x:Key="MainBorderColor">#78B5B5B5</Color>
+    <Color x:Key="SecondaryBorderColor">#95B5B5B5</Color>
     <Color x:Key="TertiaryBorderColor">#555</Color>
 
     <Color x:Key="ButtonForegroundPointerOver">#FFF</Color>
 
     <Color x:Key="BackgroundAlpha">#442e2e2e</Color>
 
-    <Color x:Key="MenuBackgroundColor">#292929</Color>
-    <Color x:Key="ContextMenuBackgroundColor">#EE2b2b2b</Color>
+    <Color x:Key="MenuBackgroundColor">#D1EEEEEE</Color>
+
+    <Color x:Key="ContextMenuBackgroundColor">#D1EEEEEE</Color>
+    <Color x:Key="ContextMenuTextColor">#474139</Color>
 
-    <Color x:Key="WindowBackgroundColor">#66000000</Color>
+    <Color x:Key="WindowBackgroundColor">#66FFFFFF</Color>
     <ImageBrush
         DestinationRect="0,0,100,100"
         Opacity=".6"
-        Source="/PicViewTheme/Resources/noisy-texture-200x200-o4-d31-c-161616-t0.png"
+        Source="/PicViewTheme/Resources/noisy-texture-200x200-o4-d23-c-ffffff-t1.png"
         SourceRect="0,0,200,200"
         Stretch="Fill"
         TileMode="FlipXY"

src/PicView.Avalonia/PicViewTheme/Main.axaml

@@ -5,10 +5,16 @@
     <Styles.Resources>
         <ResourceDictionary>
 
+            <Color x:Key="AccentColor">#FFDB5B3D</Color>
+            <Color x:Key="SecondaryAccentColor">#e0755a</Color>
+            <Color x:Key="LogoAccentColor">#FFf8af3c</Color>
+
+
             <ResourceDictionary.MergedDictionaries>
 
                 <!--  TODO: Figure out switching themes  -->
                 <ResourceInclude Source="/PicViewTheme/DarkColors.axaml" />
+                <!-- <ResourceInclude Source="/PicViewTheme/LightColors.axaml" /> -->
                 <!--  TODO: Figure out switching themes  -->
 
 

src/PicView.Avalonia/PicViewTheme/ThemeManager.cs

@@ -7,33 +7,30 @@ public static class ThemeManager
 {
     // TODO: Implement changing Dark/Light theme
     public static void ChangeTheme()
+    {
+        SetTheme(SettingsHelper.Settings.Theme.Dark);
+    }
+    
+    public static void SetTheme(bool dark)
     {
         var application = Application.Current;
         if (application is null)
             return;
         
-        var styles = application.Styles;
-        styles.Clear();
-        
-        if (SettingsHelper.Settings.Theme.Dark)
-        {
-            // Change to light theme
-            styles.Add(new Styles
-            {
+        // https://www.codeproject.com/Articles/5317972/Theming-and-Localization-Functionality-for-Multipl
 
-            });
-            SettingsHelper.Settings.Theme.Dark = false;
-            application.RequestedThemeVariant = ThemeVariant.Light;
-        }
-        else
+        // Add the new theme
+        if (dark)
         {
-            // Change to dark theme
-            styles.Add(new Styles
-            {
-
-            });
+            // Load Dark theme
             SettingsHelper.Settings.Theme.Dark = true;
             application.RequestedThemeVariant = ThemeVariant.Dark;
         }
+        else
+        {
+            // Load Light theme
+            SettingsHelper.Settings.Theme.Dark = false;
+            application.RequestedThemeVariant = ThemeVariant.Light;
+        }
     }
 }

src/PicView.Avalonia/UI/FunctionsHelper.cs

@@ -8,6 +8,7 @@ using PicView.Avalonia.Clipboard;
 using PicView.Avalonia.FileSystem;
 using PicView.Avalonia.Gallery;
 using PicView.Avalonia.Navigation;
+using PicView.Avalonia.PicViewTheme;
 using PicView.Avalonia.ViewModels;
 using PicView.Core.Config;
 using PicView.Core.FileHandling;
@@ -1053,6 +1054,12 @@ public static class FunctionsHelper
         ProcessHelper.RestartApp(args);
         await Quit();
     }
+    
+    public static Task ChangeTheme()
+    {
+        ThemeManager.ChangeTheme();
+        return Task.CompletedTask;
+    }
 
     #endregion
     

src/PicView.Avalonia/UI/StartUpHelper.cs

@@ -1,4 +1,5 @@
-using Avalonia.Controls;
+using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Controls.Primitives;
 using PicView.Avalonia.Keybindings;
@@ -166,5 +167,7 @@ public static class StartUpHelper
         w.KeyDown += async (_, e) => await MainKeyboardShortcuts.MainWindow_KeysDownAsync(e).ConfigureAwait(false);
         w.KeyUp += (_, e) => MainKeyboardShortcuts.MainWindow_KeysUp(e);
         w.PointerPressed += async (_, e) => await MouseShortcuts.MainWindow_PointerPressed(e).ConfigureAwait(false);
+        
+        Application.Current.Name = "PicView";
     }
 }

src/PicView.Avalonia/ViewModels/MainViewModel.cs

@@ -519,6 +519,8 @@ public class MainViewModel : ViewModelBase
     public ReactiveCommand<Unit, Unit>? ResetSettingsCommand { get; }
     
     public ReactiveCommand<Unit, Unit>? ShowSideBySideCommand { get; }
+    
+    public ReactiveCommand<Unit, Unit>? ChangeThemeCommand { get; }
 
     #endregion Commands
 
@@ -1828,6 +1830,8 @@ public class MainViewModel : ViewModelBase
         SlideshowCommand = ReactiveCommand.CreateFromTask<int>(StartSlideShowTask);
         
         ToggleTaskbarProgressCommand = ReactiveCommand.CreateFromTask(FunctionsHelper.ToggleTaskbarProgress);
+        
+        ChangeThemeCommand = ReactiveCommand.CreateFromTask(FunctionsHelper.ChangeTheme);
 
         #endregion UI Commands
 

src/PicView.Avalonia/Views/AppearanceView.axaml

@@ -31,13 +31,12 @@
             BorderBrush="{StaticResource MainBorderColor}"
             BorderThickness="1"
             FontFamily="/Assets/Fonts/Roboto-Medium.ttf#Roboto"
-            IsEnabled="False"
             Margin="0,0,0,5"
             Padding="5,7,0,7"
-            SelectedIndex="0"
-            Width="270">
-            <ComboBoxItem Content="{CompiledBinding DarkTheme, Mode=OneWay}" />
-            <ComboBoxItem Content="{CompiledBinding LightTheme, Mode=OneWay}" />
+            Width="270"
+            x:Name="ThemeBox">
+            <ComboBoxItem Content="{CompiledBinding DarkTheme, Mode=OneWay}" x:Name="DarkThemeBox" />
+            <ComboBoxItem Content="{CompiledBinding LightTheme, Mode=OneWay}" x:Name="LightThemeBox" />
         </ComboBox>
 
         <TextBlock

src/PicView.Avalonia/Views/AppearanceView.axaml.cs

@@ -4,6 +4,7 @@ using Avalonia.Interactivity;
 using Avalonia.Media;
 using Avalonia.Threading;
 using PicView.Avalonia.Gallery;
+using PicView.Avalonia.PicViewTheme;
 using PicView.Avalonia.ViewModels;
 using PicView.Core.Config;
 
@@ -39,6 +40,12 @@ public partial class AppearanceView : UserControl
         }
         GalleryStretchMode.DetermineStretchMode(vm);
         
+        ThemeBox.SelectedItem = SettingsHelper.Settings.Theme.Dark ? DarkThemeBox : LightThemeBox;
+        ThemeBox.SelectionChanged += delegate
+        {
+            ThemeManager.SetTheme(ThemeBox.SelectedIndex == 0);
+        };
+        
         if (vm.IsUniformFullChecked)
         {
             FullGalleryComboBox.SelectedIndex = 0;