Skip to content

Feature: Improved support for theming #10863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 29, 2022
Merged

Feature: Improved support for theming #10863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
29f56e8
Feature: Added selection of built-in themes
yaira2 Dec 28, 2022
16b7afb
Cleaned up resources
yaira2 Dec 28, 2022
0fa30dd
Support to override brushes
yaira2 Dec 28, 2022
8d3303b
Update MainPage.xaml.cs
yaira2 Dec 28, 2022
705574c
Added SetAppThemeAddressBarBackgroundColor
yaira2 Dec 29, 2022
55bca85
Support for changing the font
yaira2 Dec 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 40 additions & 46 deletions src/Files.App/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,75 +19,69 @@
<SolidColorBrush x:Key="WindowCaptionBackground" Color="Transparent" />
<SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="Transparent" />

<!-- Removes NavigationView background -->
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />

<!-- Removes NavigationView corner radius -->
<CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>

<!-- Workaround for https://github.com/microsoft/microsoft-ui-xaml/issues/5441 -->
<x:Double x:Key="MediaTransportControlsMinWidth">50</x:Double>

<!-- Workaround for an issue where the shadow was showing on the tab control -->
<x:Double x:Key="TabViewShadowDepth">0</x:Double>

<CornerRadius x:Key="GridViewThumbnailCornerRadius">2</CornerRadius>
<CornerRadius x:Key="DetailsLayoutThumbnailCornerRadius">2</CornerRadius>

<LinearGradientBrush x:Key="ControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,3">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform CenterY="0.5" ScaleY="-1" />
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{ThemeResource ControlStrokeColorSecondary}" />
<GradientStop Offset="1.0" Color="{ThemeResource ControlStrokeColorDefault}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPressed" Color="{StaticResource SubtleFillColorTertiary}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
<SolidColorBrush x:Key="TabViewItemSeparator" Color="{StaticResource DividerStrokeColorDefault}" />
<SolidColorBrush x:Key="TabContainerFillColorPrimary" Color="{StaticResource SolidBackgroundFillColorTertiary}" />
<SolidColorBrush x:Key="TabContainerFillColorSecondary" Color="{StaticResource SolidBackgroundFillColorSecondary}" />
<SolidColorBrush x:Key="AddressToolbarBackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="FileBrowserHeaderBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="RootBackgroundBrush" Color="Transparent" />
<StaticResource x:Key="SidebarContentBackgroundBrush" ResourceKey="CardBackgroundFillColorDefault" />
<SolidColorBrush x:Key="TitlebarContentBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="#993A3A3A" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#993A3A3A" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPressed" Color="{StaticResource SubtleFillColorTertiary}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPointerOver" Color="{StaticResource SubtleFillColorSecondary}" />
<SolidColorBrush x:Key="TabViewItemSeparator" Color="{StaticResource DividerStrokeColorDefault}" />
<SolidColorBrush x:Key="TabContainerFillColorPrimary" Color="{StaticResource SolidBackgroundFillColorTertiary}" />
<SolidColorBrush x:Key="TabContainerFillColorSecondary" Color="{StaticResource SolidBackgroundFillColorSecondary}" />
<SolidColorBrush x:Key="AddressToolbarBackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="FileBrowserHeaderBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="RootBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="SidebarContentBackgroundBrush" Color="#993A3A3A" />
<SolidColorBrush x:Key="TitlebarContentBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerFillColorDefault}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPressed" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundPointerOver" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="TabViewItemSeparator" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="TabContainerFillColorPrimary" Color="{StaticResource SolidBackgroundFillColorTertiary}" />
<SolidColorBrush x:Key="TabContainerFillColorSecondary" Color="{StaticResource SolidBackgroundFillColorSecondary}" />
<SolidColorBrush x:Key="AddressToolbarBackgroundBrush" Color="Transparent" />
<StaticResource x:Key="FileBrowserHeaderBackgroundBrush" ResourceKey="SolidBackgroundFillColorBaseBrush" />
<SolidColorBrush x:Key="RootBackgroundBrush" Color="Transparent" />
<StaticResource x:Key="SidebarContentBackgroundBrush" ResourceKey="CardBackgroundFillColorDefault" />
<SolidColorBrush x:Key="TitlebarContentBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="#0F000000" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<LinearGradientBrush x:Key="ControlElevationBorderBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,3">
<LinearGradientBrush.RelativeTransform>
<ScaleTransform CenterY="0.5" ScaleY="-1" />
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="{ThemeResource ControlStrokeColorSecondary}" />
<GradientStop Offset="1.0" Color="{ThemeResource ControlStrokeColorDefault}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
<CornerRadius x:Key="GridViewThumbnailCornerRadius">2</CornerRadius>
<CornerRadius x:Key="DetailsLayoutThumbnailCornerRadius">2</CornerRadius>

<!-- Workaround for https://github.com/microsoft/microsoft-ui-xaml/issues/5441 -->
<x:Double x:Key="MediaTransportControlsMinWidth">50</x:Double>

<!-- Workaround for an issue where the shadow was showing on the tab control -->
<x:Double x:Key="TabViewShadowDepth">0</x:Double>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Expand Down
47 changes: 43 additions & 4 deletions src/Files.App/Helpers/AppThemeResourcesHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,51 @@ public void ApplyResources()
}

/// <summary>
/// Overrides the xaml resource for RootBackgroundBrush
/// Overrides the xaml resource for App.Theme.BackgroundBrush
/// </summary>
/// <param name="appThemeRootBackgroundColor"></param>
public void SetRootBackgroundColor(Color appThemeRootBackgroundColor)
/// <param name="appThemeBackgroundColor"></param>
public void SetAppThemeBackgroundColor(Color appThemeBackgroundColor)
{
Application.Current.Resources["RootBackgroundBrush"] = appThemeRootBackgroundColor;
Application.Current.Resources["App.Theme.BackgroundBrush"] = appThemeBackgroundColor;
}

/// <summary>
/// Overrides the xaml resource for App.Theme.AddressBar.BackgroundBrush
/// </summary>
/// <param name="appThemeAddressBarBackgroundColor"></param>
public void SetAppThemeAddressBarBackgroundColor(Color appThemeAddressBarBackgroundColor)
{
Application.Current.Resources["App.Theme.AddressBar.BackgroundBrush"] = appThemeAddressBarBackgroundColor;

// Overrides the selected tab background to match the address bar
Application.Current.Resources["TabViewItemHeaderBackgroundSelected"] = appThemeAddressBarBackgroundColor;
}

/// <summary>
/// Overrides the xaml resource for App.Theme.Sidebar.BackgroundBrush
/// </summary>
/// <param name="appThemeSidebarBackgroundColor"></param>
public void SetAppThemeSidebarBackgroundColor(Color appThemeSidebarBackgroundColor)
{
Application.Current.Resources["App.Theme.Sidebar.BackgroundBrush"] = appThemeSidebarBackgroundColor;
}

/// <summary>
/// Overrides the xaml resource for App.Theme.FileArea.BackgroundBrush
/// </summary>
/// <param name="appThemeFileAreaBackgroundColor"></param>
public void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundColor)
{
Application.Current.Resources["App.Theme.FileArea.BackgroundBrush"] = appThemeFileAreaBackgroundColor;
}

/// <summary>
/// Overrides the xaml resource for ContentControlThemeFontFamily
/// </summary>
/// <param name="contentControlThemeFontFamily"></param>
public void SetAppThemeFontFamily(string contentControlThemeFontFamily)
{
Application.Current.Resources["ContentControlThemeFontFamily"] = contentControlThemeFontFamily;
}

/// <summary>
Expand Down
36 changes: 34 additions & 2 deletions src/Files.App/ServicesImplementation/Settings/AppearanceSettingsService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
using Files.Backend.Services.Settings;
using Files.Shared.EventArguments;
using Microsoft.AppCenter.Analytics;
using Microsoft.UI.Xaml.Media;
using System;

namespace Files.App.ServicesImplementation.Settings
Expand Down Expand Up @@ -128,12 +129,40 @@ public bool BundlesWidgetExpanded
}

/// <inheritdoc/>
public UInt32 AppThemeRootBackgroundColor
public UInt32 AppThemeBackgroundColor
{
get => Get(uint.MinValue);
set => Set(value);
}

/// <inheritdoc/>
public UInt32 AppThemeAddressBarBackgroundColor
{
get => Get(uint.MinValue);
set => Set(value);
}

/// <inheritdoc/>
public UInt32 AppThemeSidebarBackgroundColor
{
get => Get(uint.MinValue);
set => Set(value);
}

/// <inheritdoc/>
public UInt32 AppThemeFileAreaBackgroundColor
{
get => Get(uint.MinValue);
set => Set(value);
}

/// <inheritdoc/>
public String AppThemeFontFamily
{
get => Get("Segoe UI Variable");
set => Set(value);
}

protected override void RaiseOnSettingChangedEvent(object sender, SettingChangedEventArgs e)
{
switch (e.SettingName)
Expand All @@ -150,7 +179,10 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
case nameof(ShowRecentFilesWidget):
case nameof(ShowDrivesWidget):
case nameof(ShowBundlesWidget):
case nameof(AppThemeRootBackgroundColor):
case nameof(AppThemeBackgroundColor):
case nameof(AppThemeAddressBarBackgroundColor):
case nameof(AppThemeSidebarBackgroundColor):
case nameof(AppThemeFileAreaBackgroundColor):
Analytics.TrackEvent($"Set {e.SettingName} to {e.NewValue}");
break;
}
Expand Down
2 changes: 1 addition & 1 deletion src/Files.App/UserControls/AddressToolbar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
x:Name="ToolbarGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{ThemeResource AddressToolbarBackgroundBrush}"
Background="{ThemeResource App.Theme.AddressBar.BackgroundBrush}"
ColumnSpacing="0">
<Grid Padding="8" ColumnSpacing="4">
<Grid.ColumnDefinitions>
Expand Down
58 changes: 8 additions & 50 deletions src/Files.App/UserControls/SidebarControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,9 @@
Height="60"
HorizontalAlignment="Left"
x:Load="{x:Bind ShowDriveDetails}"
Background="{ThemeResource ProgressRingBackgroundThemeBrush}"
IsIndeterminate="False"
Value="{x:Bind PercentageUsed, Mode=OneWay}"
Background="{ThemeResource ProgressRingBackgroundThemeBrush}">
Value="{x:Bind PercentageUsed, Mode=OneWay}">

<ProgressRing.Template>
<ControlTemplate TargetType="ProgressRing">
Expand Down Expand Up @@ -321,12 +321,11 @@
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="OpenPaneLength" Value="{ThemeResource SplitViewOpenPaneThemeLength}" />
<Setter Property="CompactPaneLength" Value="{ThemeResource SplitViewCompactPaneThemeLength}" />
<Setter Property="PaneBackground" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" />
<Setter Property="CornerRadius" Value="{ThemeResource SplitViewPaneRootCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SplitView">
<Grid Background="{TemplateBinding Background}" CornerRadius="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition1" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneGridLength, FallbackValue=0}" />
<ColumnDefinition x:Name="ColumnDefinition2" Width="*" />
Expand All @@ -337,44 +336,18 @@
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<!-- I exist to make a nice looking background for both the tab strip without interfering with the drag area grid -->
<Border
x:Name="TitlebarBackgroundBorder"
Grid.Column="0"
Grid.ColumnSpan="2"
VerticalAlignment="Stretch"
Background="{ThemeResource TitlebarContentBackgroundBrush}"
CornerRadius="0,0,0,0"
IsHitTestVisible="False" />

<Border
x:Name="ContentBackgroundBorder"
Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{ThemeResource SidebarContentBackgroundBrush}"
IsHitTestVisible="False" />

<!-- Pane Content Area -->
<!-- Sidebar Navigation -->
<Grid
x:Name="PaneRoot"
Grid.Row="0"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneLength}"
HorizontalAlignment="Left"
Background="{TemplateBinding PaneBackground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{ThemeResource App.Theme.Sidebar.BackgroundBrush}"
RightTapped="PaneRoot_RightTapped"
Visibility="Collapsed">

<Grid.BackgroundTransition>
<BrushTransition />
</Grid.BackgroundTransition>

<Grid.Clip>
<RectangleGeometry x:Name="PaneClipRectangle">
<RectangleGeometry.Transform>
Expand All @@ -398,7 +371,7 @@
Visibility="Collapsed" />
</Grid>

<!-- This allows the user to resize the pane -->
<!-- This allows the user to resize the Sidebar -->
<Grid
x:Name="ResizeElementBorder"
Grid.Row="0"
Expand Down Expand Up @@ -435,10 +408,11 @@
VerticalAlignment="Top"
Canvas.ZIndex="2" />

<!-- Content Area -->
<!-- File Area -->
<Grid
x:Name="ContentRoot"
Grid.Row="2"
Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
Grid.ColumnSpan="2">
<Grid.RenderTransform>
<CompositeTransform x:Name="ContentTransform" />
Expand Down Expand Up @@ -955,12 +929,8 @@
<VisualState.Setters>
<Setter Target="PaneRoot.(Grid.Row)" Value="1" />
<Setter Target="ResizeElementBorder.(Grid.Row)" Value="1" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TabContentBorder.(Grid.Column)" Value="0" />
<Setter Target="TabContentBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="ClosedCompactRight">
Expand Down Expand Up @@ -994,12 +964,8 @@
<VisualState.Setters>
<Setter Target="PaneRoot.(Grid.Row)" Value="1" />
<Setter Target="ResizeElementBorder.(Grid.Row)" Value="1" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TabContentBorder.(Grid.Column)" Value="0" />
<Setter Target="TabContentBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OpenOverlayLeft">
Expand Down Expand Up @@ -1053,12 +1019,8 @@

<Setter Target="PaneRoot.(Grid.Row)" Value="1" />
<Setter Target="ResizeElementBorder.(Grid.Row)" Value="1" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TabContentBorder.(Grid.Column)" Value="0" />
<Setter Target="TabContentBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OpenInlineRight">
Expand Down Expand Up @@ -1093,12 +1055,8 @@
<VisualState.Setters>
<Setter Target="PaneRoot.(Grid.Row)" Value="1" />
<Setter Target="ResizeElementBorder.(Grid.Row)" Value="1" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TabContentBorder.(Grid.Column)" Value="0" />
<Setter Target="TabContentBorder.(Grid.ColumnSpan)" Value="2" />
<Setter Target="TitlebarBackgroundBorder.(Grid.Column)" Value="0" />
<Setter Target="TitlebarBackgroundBorder.(Grid.ColumnSpan)" Value="2" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OpenCompactOverlayLeft">
Expand Down
Loading