Codebase: Refactored themes (#11031)

src/Files.App/Helpers/AppThemeResourcesHelper.cs

@@ -1,19 +1,25 @@
+using CommunityToolkit.Mvvm.DependencyInjection;
+using CommunityToolkit.WinUI.Helpers;
+using Files.Backend.Services.Settings;
 using Microsoft.UI.Xaml;
+using System;
 using Windows.UI;
 
 namespace Files.App.Helpers
 {
 	public sealed class AppThemeResourcesHelper
 	{
+		public IUserSettingsService UserSettingsService { get; } = Ioc.Default.GetRequiredService<IUserSettingsService>();
+
 		/// <summary>
-		/// Forces the application to use the correct resource styles
+		/// Applies updated resource styles
 		/// </summary>
 		public void ApplyResources()
 		{
 			// Get the index of the current theme
 			var selTheme = ThemeHelper.RootTheme;
 
-			// Toggle between the themes to force the controls to use the new resource styles
+			// Toggle between the themes to force reload the resource styles
 			ThemeHelper.RootTheme = ElementTheme.Dark;
 			ThemeHelper.RootTheme = ElementTheme.Light;
 
@@ -75,16 +81,47 @@ public void SetAppThemeFontFamily(string contentControlThemeFontFamily)
 		/// <param name="useCompactSpacing"></param>
 		public void SetCompactSpacing(bool useCompactSpacing)
 		{
-			if (useCompactSpacing)
-			{
-				Application.Current.Resources["ListItemHeight"] = 24;
-				Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = 20;
-			}
+			var listItemHeight = useCompactSpacing ? 24 : 36;
+			var navigationViewItemOnLeftMinHeight = useCompactSpacing ? 20 : 32;
+
+			Application.Current.Resources["ListItemHeight"] = listItemHeight;
+			Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = navigationViewItemOnLeftMinHeight;
+		}
+
+		/// <summary>
+		/// Loads the resource styles from settings
+		/// </summary>
+		public void LoadAppResources()
+		{
+			var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles;
+			var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor);
+			var appThemeAddressBarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor;
+			var appThemeSidebarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor;
+			var appThemeFileAreaBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor;
+			var appThemeFontFamily = UserSettingsService.AppearanceSettingsService.AppThemeFontFamily;
+
+			SetCompactSpacing(useCompactStyles);
+			SetAppThemeBackgroundColor(appThemeBackgroundColor);
+
+			if (!String.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
+				SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor));
+			else
+				UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
+
+			if (!String.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
+				SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor));
 			else
-			{
-				Application.Current.Resources["ListItemHeight"] = 36;
-				Application.Current.Resources["NavigationViewItemOnLeftMinHeight"] = 32;
-			}
+				UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor = ""; //migrate to new default
+
+			if (!String.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
+				SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor));
+			else
+				UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
+
+			if (appThemeFontFamily != "Segoe UI Variable")
+				SetAppThemeFontFamily(appThemeFontFamily);
+
+			ApplyResources();
 		}
 	}
 }

src/Files.App/ValueConverters/ColorToSolidColorBrushValueConverter.cs → src/Files.App/ValueConverters/StringToSolidColorBrushValueConverter.cs

@@ -1,20 +1,21 @@
-using Microsoft.UI.Xaml.Data;
+using CommunityToolkit.WinUI.Helpers;
+using Microsoft.UI.Xaml.Data;
 using Microsoft.UI.Xaml.Media;
 using System;
 using Windows.UI;
 
 namespace Files.App.ValueConverters
 {
-	public class ColorToSolidColorBrushValueConverter : IValueConverter
+	public class StringToSolidColorBrushValueConverter : IValueConverter
 	{
 		public object? Convert(object value, Type targetType, object parameter, string language)
 		{
 			if (null == value)
 				return null;
 
-			if (value is Color)
+			if (value is string colorString)
 			{
-				Color color = (Color)value;
+				Color color = ColorHelper.ToColor(colorString);
 				return new SolidColorBrush(color);
 			}
 

src/Files.App/ViewModels/MainPageViewModel.cs

@@ -50,15 +50,10 @@ public bool IsWindowCompactOverlay
 		}
 
 		public ICommand NavigateToNumberedTabKeyboardAcceleratorCommand { get; private set; }
-
 		public IAsyncRelayCommand OpenNewWindowAcceleratorCommand { get; private set; }
-
 		public ICommand CloseSelectedTabKeyboardAcceleratorCommand { get; private set; }
-
 		public IAsyncRelayCommand AddNewInstanceAcceleratorCommand { get; private set; }
-
 		public ICommand ReopenClosedTabAcceleratorCommand { get; private set; }
-
 		public ICommand OpenSettingsCommand { get; private set; }
 
 		public MainPageViewModel()
@@ -408,6 +403,10 @@ public async void OnNavigatedTo(NavigationEventArgs e)
 				else if (e.Parameter is TabItemArguments tabArgs)
 					await AddNewTabByParam(tabArgs.InitialPageType, tabArgs.NavigationArg);
 			}
+
+
+			// Load the app theme resources
+			App.AppThemeResourcesHelper.LoadAppResources();
 		}
 
 		public static Task AddNewTabAsync()

src/Files.App/ViewModels/SettingsViewModels/AppearanceViewModel.cs

@@ -6,12 +6,10 @@
 using Files.App.Views.SettingsPages.Appearance;
 using Files.Backend.Services.Settings;
 using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Media;
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
-using Windows.UI;
 
 namespace Files.App.ViewModels.SettingsViewModels
 {
@@ -33,30 +31,33 @@ public AppearanceViewModel()
 			};
 
 			AppThemeResources = AppThemeResourceFactory.AppThemeResources;
-			UpdateSelectedBackground();
+			UpdateSelectedResource();
 		}
 
 		/// <summary>
-		/// Selects the AppThemeResource corresponding to the AppThemeBackgroundColor setting
+		/// Selects the AppThemeResource corresponding to the current settings
 		/// </summary>
-		private void UpdateSelectedBackground()
+		private void UpdateSelectedResource()
 		{
-			var backgroundColor = AppThemeBackgroundColor;
+			var themeBackgroundColor = AppThemeBackgroundColor;
 
 			// Add color to the collection if it's not already there
-			if (!AppThemeResources.Any(p => p.BackgroundColor == backgroundColor))
+			if (!AppThemeResources.Any(p => p.BackgroundColor == themeBackgroundColor))
 			{
+				// Remove current value before adding a new one
+				if (AppThemeResources.Last().Name == "Custom")
+					AppThemeResources.Remove(AppThemeResources.Last());
+
 				var appThemeBackgroundColor = new AppThemeResource
 				{
-					BackgroundColor = backgroundColor,
+					BackgroundColor = themeBackgroundColor,
 					Name = "Custom"
 				};
-
 				AppThemeResources.Add(appThemeBackgroundColor);
 			}
 
 			SelectedAppThemeResources = AppThemeResources
-				.Where(p => p.BackgroundColor == AppThemeBackgroundColor)
+				.Where(p => p.BackgroundColor == themeBackgroundColor)
 				.FirstOrDefault() ?? AppThemeResources[0];
 		}
 
@@ -116,6 +117,7 @@ public bool UseCompactStyles
 				{
 					UserSettingsService.AppearanceSettingsService.UseCompactStyles = value;
 
+					// Apply the updated compact spacing resource
 					App.AppThemeResourcesHelper.SetCompactSpacing(UseCompactStyles);
 					App.AppThemeResourcesHelper.ApplyResources();
 
@@ -124,17 +126,20 @@ public bool UseCompactStyles
 			}
 		}
 
-		public Color AppThemeBackgroundColor
+		public string AppThemeBackgroundColor
 		{
-			get => ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor);
+			get => UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor;
 			set
 			{
-				if (value != ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor))
+				if (value != UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor)
 				{
-					UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor = value.ToString();
+					UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor = value;
 
-					App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(AppThemeBackgroundColor);
+					// Apply the updated background resource
+					App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(ColorHelper.ToColor(value));
 					App.AppThemeResourcesHelper.ApplyResources();
+
+					OnPropertyChanged();
 				}
 			}
 		}

src/Files.App/Views/MainPage.xaml

@@ -12,6 +12,7 @@
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	xmlns:usercontrols="using:Files.App.UserControls.MultitaskingControl"
 	xmlns:viewmodels="using:Files.App.ViewModels"
+	AllowDrop="True"
 	Background="{ThemeResource App.Theme.BackgroundBrush}"
 	KeyboardAcceleratorPlacementMode="Hidden"
 	Loaded="Page_Loaded"
@@ -331,14 +332,14 @@
 					ResizeBehavior="BasedOnAlignment"
 					Style="{StaticResource DefaultGridSplitterStyle}" />
 
-                <controls:PreviewPane
+				<controls:PreviewPane
 					x:Name="PreviewPane"
 					Grid.Row="1"
 					Grid.Column="2"
 					HorizontalContentAlignment="Stretch"
 					x:Load="{x:Bind ShouldPreviewPaneBeActive, Mode=OneWay}" />
-                
-                <controls:StatusBarControl
+
+				<controls:StatusBarControl
 					x:Name="StatusBarControl"
 					Grid.Row="4"
 					Grid.ColumnSpan="3"

src/Files.App/Views/MainPage.xaml.cs

@@ -27,7 +27,6 @@
 using Windows.Graphics;
 using Windows.Services.Store;
 using Windows.Storage;
-using ColorHelper = CommunityToolkit.WinUI.Helpers.ColorHelper;
 
 namespace Files.App.Views
 {
@@ -65,51 +64,11 @@ public MainPage()
 			if (flowDirectionSetting == "RTL")
 				FlowDirection = FlowDirection.RightToLeft;
 
-			AllowDrop = true;
-
 			ToggleFullScreenAcceleratorCommand = new RelayCommand<KeyboardAcceleratorInvokedEventArgs>(ToggleFullScreenAccelerator);
 			ToggleCompactOverlayCommand = new RelayCommand(ToggleCompactOverlay);
 			SetCompactOverlayCommand = new RelayCommand<bool>(SetCompactOverlay);
 
 			UserSettingsService.OnSettingChangedEvent += UserSettingsService_OnSettingChangedEvent;
-
-			// Load the app theme resources
-			LoadAppResources();
-		}
-
-
-
-		private void LoadAppResources()
-		{
-			var useCompactStyles = UserSettingsService.AppearanceSettingsService.UseCompactStyles;
-			var appThemeBackgroundColor = ColorHelper.ToColor(UserSettingsService.AppearanceSettingsService.AppThemeBackgroundColor);
-			var appThemeAddressBarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor;
-			var appThemeSidebarBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor;
-			var appThemeFileAreaBackgroundColor = UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor;
-			var appThemeFontFamily = UserSettingsService.AppearanceSettingsService.AppThemeFontFamily;
-
-			App.AppThemeResourcesHelper.SetCompactSpacing(useCompactStyles);
-			App.AppThemeResourcesHelper.SetAppThemeBackgroundColor(appThemeBackgroundColor);
-
-			if (!String.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
-				App.AppThemeResourcesHelper.SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor));
-			else
-				UserSettingsService.AppearanceSettingsService.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
-
-			if (!String.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
-				App.AppThemeResourcesHelper.SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor));
-			else
-				UserSettingsService.AppearanceSettingsService.AppThemeSidebarBackgroundColor = ""; //migrate to new default
-
-			if (!String.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
-				App.AppThemeResourcesHelper.SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor));
-			else
-				UserSettingsService.AppearanceSettingsService.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
-
-			if (appThemeFontFamily != "Segoe UI Variable")
-				App.AppThemeResourcesHelper.SetAppThemeFontFamily(appThemeFontFamily);
-
-			App.AppThemeResourcesHelper.ApplyResources();
 		}
 
 		private async Task PromptForReview()

src/Files.App/Views/SettingsPages/Appearance.xaml

@@ -8,6 +8,8 @@
 	xmlns:converters1="using:Files.App.ValueConverters"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 	xmlns:helpers="using:Files.App.Helpers"
+	xmlns:i="using:Microsoft.Xaml.Interactivity"
+	xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
 	xmlns:local="using:Files.App.UserControls.Settings"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	xmlns:settingsviewmodels="using:Files.App.ViewModels.SettingsViewModels"
@@ -19,7 +21,7 @@
 			</ResourceDictionary.MergedDictionaries>
 
 			<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
-			<converters1:ColorToSolidColorBrushValueConverter x:Key="ColorToSolidColorBrushConverter" />
+			<converters1:StringToSolidColorBrushValueConverter x:Key="StringToSolidColorBrushConverter" />
 
 			<DataTemplate x:Key="AppThemeResourcesItemTemplate" x:DataType="appearance:AppThemeResource">
 				<Grid
@@ -38,7 +40,7 @@
 					<Border
 						Grid.RowSpan="2"
 						Height="66"
-						Background="{x:Bind BackgroundColor, Converter={StaticResource ColorToSolidColorBrushConverter}, Mode=OneWay}"
+						Background="{x:Bind BackgroundColor, Converter={StaticResource StringToSolidColorBrushConverter}, Mode=OneWay}"
 						CornerRadius="4,4,0,0" />
 
 					<!--  Tab Bar  -->

src/Files.App/Views/SettingsPages/Appearance/AppThemeResource.cs

@@ -6,6 +6,6 @@ namespace Files.App.Views.SettingsPages.Appearance
 	public class AppThemeResource
 	{
 		public string? Name { get; set; }
-		public Color BackgroundColor { get; set; }
+		public string? BackgroundColor { get; set; }
 	}
 }