[Avalonia] Theme fixes

Ruben2776 · Sep 22, 2024 · 6f91b6a · 6f91b6a
1 parent ac5f3bc
commit 6f91b6a
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 73 deletions.
diff --git a/src/PicView.Avalonia.Win32/App.axaml b/src/PicView.Avalonia.Win32/App.axaml
@@ -1,5 +1,4 @@
 <Application
-    RequestedThemeVariant="Dark"
     x:Class="PicView.Avalonia.Win32.App"
     x:CompileBindings="True"
     xmlns="https://github.com/avaloniaui"

diff --git a/src/PicView.Avalonia.Win32/App.axaml.cs b/src/PicView.Avalonia.Win32/App.axaml.cs
@@ -3,6 +3,7 @@
 using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 using PicView.Avalonia.Interfaces;
 using PicView.Avalonia.Navigation;
 using PicView.Avalonia.UI;
@@ -61,6 +62,7 @@ public override async void OnFrameworkInitializationCompleted()
 
         await Dispatcher.UIThread.InvokeAsync(() =>
         {
+            Current.RequestedThemeVariant = SettingsHelper.Settings.Theme.Dark ? ThemeVariant.Dark : ThemeVariant.Light;
             _mainWindow = new WinMainWindow();
             desktop.MainWindow = _mainWindow;
         });

diff --git a/src/PicView.Avalonia.Win32/Views/WinMainWindow.axaml b/src/PicView.Avalonia.Win32/Views/WinMainWindow.axaml
@@ -8,6 +8,7 @@
     SizeToContent="{CompiledBinding SizeToContent}"
     Title="{CompiledBinding WindowTitle,
                             Mode=OneWay}"
+    TransparencyBackgroundFallback="{StaticResource MenuBackgroundColor}"
     TransparencyLevelHint="AcrylicBlur"
     d:DesignHeight="450"
     d:DesignWidth="800"
@@ -26,7 +27,7 @@
     </Design.DataContext>
 
     <Border
-        BorderBrush="{StaticResource MainBorderColor}"
+        BorderBrush="{StaticResource WindowBorderColor}"
         BorderThickness="1"
         CornerRadius="8">
         <DockPanel LastChildFill="True">

diff --git a/src/PicView.Avalonia/PicViewTheme/Accents/Base.axaml b/src/PicView.Avalonia/PicViewTheme/Accents/Base.axaml
@@ -0,0 +1,103 @@
+<ResourceDictionary
+    x:ClassModifier="internal"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <Color x:Key="MainTextColor">#FFf6f4f4</Color>
+            <Color x:Key="MainTextColorFaded">#d6d4d4</Color>
+
+            <Color x:Key="MainIconColor">#eeebebeb</Color>
+            <Color x:Key="SecondaryIconColor">#eeebebeb</Color>
+
+            <Color x:Key="MainBackgroundColor">#CC2b2b2b</Color>
+            <Color x:Key="SecondaryBackgroundColor">#CC252525</Color>
+            <Color x:Key="TertiaryBackgroundColor">#CC3d3d3d</Color>
+            <Color x:Key="FadedBackgroundColor">#FF333333</Color>
+            <Color x:Key="BackgroundHoverColor">#FF4B4B4B</Color>
+            <Color x:Key="AltBackgroundHoverColor">#22FFFFFF</Color>
+            <Color x:Key="AltBackgroundColor">#A7222222</Color>
+
+            <Color x:Key="MainButtonBackgroundColor">#FF2e2e2e</Color>
+
+            <Color x:Key="MainBorderColor">#FF3A3A3A</Color>
+            <Color x:Key="SecondaryBorderColor">#777</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="ContextMenuTextColor">#EDEBEB</Color>
+
+            <Color x:Key="WindowBackgroundColor">#66000000</Color>
+            <Color x:Key="WindowBorderColor">#FF3A3A3A</Color>
+            <ImageBrush
+                DestinationRect="0,0,100,100"
+                Opacity=".6"
+                Source="/PicViewTheme/Resources/noisy-texture-200x200-o4-d31-c-161616-t0.png"
+                SourceRect="0,0,200,200"
+                Stretch="Fill"
+                TileMode="FlipXY"
+                x:Key="NoisyTexture" />
+
+            <DropShadowEffect
+                BlurRadius="5"
+                Color="#112e2e2e"
+                OffsetX="2"
+                OffsetY="2"
+                x:Key="MenuShadowButtonBorder" />
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <Color x:Key="MainTextColor">#424242</Color>
+            <Color x:Key="MainTextColorFaded">#61574a</Color>
+
+            <Color x:Key="MainIconColor">#474139</Color>
+            <Color x:Key="SecondaryIconColor">#eeebebeb</Color>
+
+            <Color x:Key="MainBackgroundColor">White</Color>
+            <Color x:Key="SecondaryBackgroundColor">White</Color>
+            <Color x:Key="TertiaryBackgroundColor">#CC3d3d3d</Color>
+            <Color x:Key="FadedBackgroundColor">#FF333333</Color>
+            <Color x:Key="BackgroundHoverColor">#D5FFFFFF</Color>
+            <Color x:Key="AltBackgroundHoverColor">#22FFFFFF</Color>
+            <Color x:Key="AltBackgroundColor">#A7222222</Color>
+
+            <Color x:Key="MainButtonBackgroundColor">#81FFFFFF</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">#D1EEEEEE</Color>
+
+            <Color x:Key="ContextMenuBackgroundColor">#D1EEEEEE</Color>
+            <Color x:Key="ContextMenuTextColor">#474139</Color>
+
+            <Color x:Key="WindowBackgroundColor">#66FFFFFF</Color>
+            <ImageBrush
+                DestinationRect="0,0,100,100"
+                Opacity=".6"
+                Source="/PicViewTheme/Resources/noisy-texture-200x200-o4-d23-c-ffffff-t1.png"
+                SourceRect="0,0,200,200"
+                Stretch="Fill"
+                TileMode="FlipXY"
+                x:Key="NoisyTexture" />
+
+            <DropShadowEffect
+                BlurRadius="5"
+                Color="#112e2e2e"
+                OffsetX="2"
+                OffsetY="2"
+                x:Key="MenuShadowButtonBorder" />
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
diff --git a/src/PicView.Avalonia/PicViewTheme/Controls/ToolTip.axaml b/src/PicView.Avalonia/PicViewTheme/Controls/ToolTip.axaml
@@ -1,9 +1,9 @@
 <ResourceDictionary
+    x:ClassModifier="internal"
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:ClassModifier="internal">
-    <ControlTheme x:Key="{x:Type ToolTip}" TargetType="ToolTip">
-        <Setter Property="Background" Value="{DynamicResource SecondaryBackgroundColor}" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme TargetType="ToolTip" x:Key="{x:Type ToolTip}">
+        <Setter Property="Background" Value="{StaticResource SecondaryBackgroundColor}" />
         <Setter Property="BorderBrush" Value="{StaticResource MainBorderColor}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="FontSize" Value="12" />
@@ -12,14 +12,15 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    Padding="8"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
+                    Background="{StaticResource ContextMenuBackgroundColor}"
+                    BorderBrush="{StaticResource MainBorderColor}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="5" />
+                    CornerRadius="5"
+                    Foreground="{StaticResource ContextMenuTextColor}"
+                    Name="PART_ContentPresenter"
+                    Padding="8" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>

diff --git a/src/PicView.Avalonia/PicViewTheme/Controls/Window.axaml b/src/PicView.Avalonia/PicViewTheme/Controls/Window.axaml
@@ -6,7 +6,7 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="TransparencyBackgroundFallback" Value="{StaticResource MenuBackgroundColor}" />
         <Setter Property="Foreground" Value="{StaticResource MainTextColor}" />
-        <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+        <Setter Property="BorderBrush" Value="{StaticResource MainBorderColor}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Panel>
@@ -28,15 +28,13 @@
                                 </ExperimentalAcrylicBorder.Material>
                             </ExperimentalAcrylicBorder>
 
-                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
-                                <ContentPresenter
-                                    Content="{TemplateBinding Content}"
-                                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    Margin="{TemplateBinding Padding}"
-                                    Name="PART_ContentPresenter"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-                            </Border>
+                            <ContentPresenter
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                Margin="{TemplateBinding Padding}"
+                                Name="PART_ContentPresenter"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                         </Panel>
                     </VisualLayerManager>
                 </Panel>

diff --git a/src/PicView.Avalonia/PicViewTheme/LightColors.axaml b/src/PicView.Avalonia/PicViewTheme/LightColors.axaml
diff --git a/src/PicView.Avalonia/PicViewTheme/Main.axaml b/src/PicView.Avalonia/PicViewTheme/Main.axaml
@@ -13,7 +13,7 @@
             <ResourceDictionary.MergedDictionaries>
 
                 <!--  TODO: Figure out switching themes  -->
-                <ResourceInclude Source="/PicViewTheme/DarkColors.axaml" />
+                <ResourceInclude Source="/PicViewTheme/Accents/Base.axaml" />
                 <!-- <ResourceInclude Source="/PicViewTheme/LightColors.axaml" /> -->
                 <!--  TODO: Figure out switching themes  -->
 

diff --git a/src/PicView.Avalonia/PicViewTheme/ThemeManager.cs b/src/PicView.Avalonia/PicViewTheme/ThemeManager.cs
@@ -21,8 +21,6 @@ public static void SetTheme(bool dark)
         // StyleInclude breaks trimming and AOT
         // Change colors with keys like https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Simple/Accents/Base.xaml
 
-        var test = Application.Current.Resources.MergedDictionaries[1];
-
         // Add the new theme
         if (dark)
         {

diff --git a/src/PicView.Avalonia/Views/AppearanceView.axaml b/src/PicView.Avalonia/Views/AppearanceView.axaml
@@ -31,7 +31,6 @@
             BorderBrush="{StaticResource MainBorderColor}"
             BorderThickness="1"
             FontFamily="/Assets/Fonts/Roboto-Medium.ttf#Roboto"
-            IsEnabled="False"
             Margin="0,0,0,5"
             Padding="5,7,0,7"
             Width="270"

diff --git a/src/PicView.Avalonia/Views/UC/Menus/ImageMenu.axaml b/src/PicView.Avalonia/Views/UC/Menus/ImageMenu.axaml
@@ -151,6 +151,7 @@
                             </DrawingImage>
                         </Image>
                         <AutoCompleteBox
+                            Background="{StaticResource BackgroundAlpha}"
                             BorderBrush="{StaticResource MainBorderColor}"
                             FontFamily="/Assets/Fonts/Roboto-Regular.ttf#Roboto"
                             Foreground="{StaticResource MainIconColor}"