From 151fe0031a31c34acbd50600bba03a916a5bf20b Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Wed, 18 Jan 2023 02:13:01 -0500
Subject: [PATCH] Update control catalog and samples

---
 samples/ControlCatalog/App.xaml               | 24 +++++-
 samples/ControlCatalog/App.xaml.cs            | 48 ++---------
 samples/ControlCatalog/MainView.xaml          | 19 ++++-
 samples/ControlCatalog/MainView.xaml.cs       | 39 ++++-----
 samples/ControlCatalog/Models/CatalogTheme.cs |  6 +-
 .../Pages/DateTimePickerPage.xaml             | 30 +++----
 .../ControlCatalog/Pages/FlyoutsPage.axaml    | 22 +++---
 .../Pages/ItemsRepeaterPage.xaml              |  2 +-
 .../ControlCatalog/Pages/SplitViewPage.xaml   | 16 ++--
 .../ControlCatalog/Pages/TextBlockPage.xaml   |  2 +-
 samples/ControlCatalog/Pages/ThemePage.axaml  | 79 +++++++++++++++++++
 .../ControlCatalog/Pages/ThemePage.axaml.cs   | 37 +++++++++
 samples/IntegrationTestApp/App.axaml          |  2 +-
 samples/PlatformSanityChecks/App.xaml         |  2 +-
 samples/Previewer/App.xaml                    |  2 +-
 .../HamburgerMenu/HamburgerMenu.xaml          | 34 +++++---
 samples/Sandbox/App.axaml                     |  2 +-
 17 files changed, 239 insertions(+), 127 deletions(-)
 create mode 100644 samples/ControlCatalog/Pages/ThemePage.axaml
 create mode 100644 samples/ControlCatalog/Pages/ThemePage.axaml.cs

diff --git a/samples/ControlCatalog/App.xaml b/samples/ControlCatalog/App.xaml
index 8f32fa01dd..3b847adcbb 100644
--- a/samples/ControlCatalog/App.xaml
+++ b/samples/ControlCatalog/App.xaml
@@ -6,18 +6,34 @@
              x:Class="ControlCatalog.App">
   <Application.Resources>
     <ResourceDictionary>
+      <!-- Custom controls defined in other assemblies -->
       <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
       </ResourceDictionary.MergedDictionaries>
 
+      <!-- Resources used only in the control catalog -->
+      <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+          <Color x:Key="CatalogBaseLowColor">#33000000</Color>
+          <Color x:Key="CatalogBaseMediumColor">#99000000</Color>
+          <Color x:Key="CatalogChromeMediumColor">#FFE6E6E6</Color>
+          <Color x:Key="CatalogBaseHighColor">#FF000000</Color>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Dark">
+          <Color x:Key="CatalogBaseLowColor">#33FFFFFF</Color>
+          <Color x:Key="CatalogBaseMediumColor">#99FFFFFF</Color>
+          <Color x:Key="CatalogChromeMediumColor">#FF1F1F1F</Color>
+          <Color x:Key="CatalogBaseHighColor">#FFFFFFFF</Color>
+        </ResourceDictionary>
+      </ResourceDictionary.ThemeDictionaries>
+      <Color x:Key="SystemAccentColor">#FF0078D7</Color>
+      <Color x:Key="SystemAccentColorDark1">#FF005A9E</Color>
+
+      <!-- Styles attached dynamically depending on current theme (simple or fluent) -->
       <StyleInclude x:Key="DataGridFluent" Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
       <StyleInclude x:Key="DataGridSimple" Source="avares://Avalonia.Controls.DataGrid/Themes/Simple.xaml" />
       <StyleInclude x:Key="ColorPickerFluent" Source="avares://Avalonia.Controls.ColorPicker/Themes/Fluent/Fluent.xaml" />
       <StyleInclude x:Key="ColorPickerSimple" Source="avares://Avalonia.Controls.ColorPicker/Themes/Simple/Simple.xaml" />
-      <ResourceInclude x:Key="FluentAccentColors" Source="avares://Avalonia.Themes.Fluent/Accents/AccentColors.xaml" />
-      <ResourceInclude x:Key="FluentBaseLightColors" Source="avares://Avalonia.Themes.Fluent/Accents/BaseLight.xaml" />
-      <ResourceInclude x:Key="FluentBaseDarkColors" Source="avares://Avalonia.Themes.Fluent/Accents/BaseDark.xaml" />
-      <ResourceInclude x:Key="FluentBaseColors" Source="avares://Avalonia.Themes.Fluent/Accents/Base.xaml" />
     </ResourceDictionary>
   </Application.Resources>
   <Application.Styles>
diff --git a/samples/ControlCatalog/App.xaml.cs b/samples/ControlCatalog/App.xaml.cs
index 6c99eb5289..d71d51f068 100644
--- a/samples/ControlCatalog/App.xaml.cs
+++ b/samples/ControlCatalog/App.xaml.cs
@@ -16,7 +16,6 @@ namespace ControlCatalog
         private readonly Styles _themeStylesContainer = new();
         private FluentTheme? _fluentTheme;
         private SimpleTheme? _simpleTheme;
-        private IResourceDictionary? _fluentBaseLightColors, _fluentBaseDarkColors;
         private IStyle? _colorPickerFluent, _colorPickerSimple;
         private IStyle? _dataGridFluent, _dataGridSimple;
         
@@ -33,16 +32,12 @@ namespace ControlCatalog
 
             _fluentTheme = new FluentTheme();
             _simpleTheme = new SimpleTheme();
-            _simpleTheme.Resources.MergedDictionaries.Add((IResourceDictionary)Resources["FluentAccentColors"]!);
-            _simpleTheme.Resources.MergedDictionaries.Add((IResourceDictionary)Resources["FluentBaseColors"]!);
             _colorPickerFluent = (IStyle)Resources["ColorPickerFluent"]!;
             _colorPickerSimple = (IStyle)Resources["ColorPickerSimple"]!;
             _dataGridFluent = (IStyle)Resources["DataGridFluent"]!;
             _dataGridSimple = (IStyle)Resources["DataGridSimple"]!;
-            _fluentBaseLightColors = (IResourceDictionary)Resources["FluentBaseLightColors"]!;
-            _fluentBaseDarkColors = (IResourceDictionary)Resources["FluentBaseDarkColors"]!;
             
-            SetThemeVariant(CatalogTheme.FluentLight);
+            SetCatalogThemes(CatalogTheme.Fluent);
         }
 
         public override void OnFrameworkInitializationCompleted()
@@ -61,19 +56,12 @@ namespace ControlCatalog
 
         private CatalogTheme _prevTheme;
         public static CatalogTheme CurrentTheme => ((App)Current!)._prevTheme; 
-        public static void SetThemeVariant(CatalogTheme theme)
+        public static void SetCatalogThemes(CatalogTheme theme)
         {
             var app = (App)Current!;
             var prevTheme = app._prevTheme;
             app._prevTheme = theme;
-            var shouldReopenWindow = theme switch
-            {
-                CatalogTheme.FluentLight => prevTheme is CatalogTheme.SimpleDark or CatalogTheme.SimpleLight,
-                CatalogTheme.FluentDark => prevTheme is CatalogTheme.SimpleDark or CatalogTheme.SimpleLight,
-                CatalogTheme.SimpleLight => prevTheme is CatalogTheme.FluentDark or CatalogTheme.FluentLight,
-                CatalogTheme.SimpleDark => prevTheme is CatalogTheme.FluentDark or CatalogTheme.FluentLight,
-                _ => throw new ArgumentOutOfRangeException(nameof(theme), theme, null)
-            };
+            var shouldReopenWindow = prevTheme != theme;
             
             if (app._themeStylesContainer.Count == 0)
             {
@@ -81,36 +69,16 @@ namespace ControlCatalog
                 app._themeStylesContainer.Add(new Style());
                 app._themeStylesContainer.Add(new Style());
             }
-            
-            if (theme == CatalogTheme.FluentLight)
-            {
-                app._fluentTheme!.Mode = FluentThemeMode.Light;
-                app._themeStylesContainer[0] = app._fluentTheme;
-                app._themeStylesContainer[1] = app._colorPickerFluent!;
-                app._themeStylesContainer[2] = app._dataGridFluent!;
-            }
-            else if (theme == CatalogTheme.FluentDark)
+
+            if (theme == CatalogTheme.Fluent)
             {
-                app._fluentTheme!.Mode = FluentThemeMode.Dark;
-                app._themeStylesContainer[0] = app._fluentTheme;
+                app._themeStylesContainer[0] = app._fluentTheme!;
                 app._themeStylesContainer[1] = app._colorPickerFluent!;
                 app._themeStylesContainer[2] = app._dataGridFluent!;
             }
-            else if (theme == CatalogTheme.SimpleLight)
-            {
-                app._simpleTheme!.Mode = SimpleThemeMode.Light;
-                app._simpleTheme.Resources.MergedDictionaries.Remove(app._fluentBaseDarkColors!);
-                app._simpleTheme.Resources.MergedDictionaries.Add(app._fluentBaseLightColors!);
-                app._themeStylesContainer[0] = app._simpleTheme;
-                app._themeStylesContainer[1] = app._colorPickerSimple!;
-                app._themeStylesContainer[2] = app._dataGridSimple!;
-            }
-            else if (theme == CatalogTheme.SimpleDark)
+            else if (theme == CatalogTheme.Simple)
             {
-                app._simpleTheme!.Mode = SimpleThemeMode.Dark;
-                app._simpleTheme.Resources.MergedDictionaries.Remove(app._fluentBaseLightColors!);
-                app._simpleTheme.Resources.MergedDictionaries.Add(app._fluentBaseDarkColors!);
-                app._themeStylesContainer[0] = app._simpleTheme;
+                app._themeStylesContainer[0] = app._simpleTheme!;
                 app._themeStylesContainer[1] = app._colorPickerSimple!;
                 app._themeStylesContainer[2] = app._dataGridSimple!;
             }
diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index 166b98436e..4eb73632c1 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -165,6 +165,9 @@
       <TabItem Header="TextBlock">
         <pages:TextBlockPage />
       </TabItem>
+      <TabItem Header="Theme Variants">
+        <pages:ThemePage />
+      </TabItem>
       <TabItem Header="ToggleSwitch">
         <pages:ToggleSwitchPage />
       </TabItem>
@@ -198,14 +201,22 @@
                 <SystemDecorations>Full</SystemDecorations>
               </ComboBox.Items>
             </ComboBox>
+            <ComboBox x:Name="ThemeVariants"
+                      HorizontalAlignment="Stretch"
+                      DisplayMemberBinding="{Binding Key, x:DataType=ThemeVariant}"
+                      SelectedIndex="0">
+              <ComboBox.Items>
+                <ThemeVariant>Default</ThemeVariant>
+                <ThemeVariant>Light</ThemeVariant>
+                <ThemeVariant>Dark</ThemeVariant>
+              </ComboBox.Items>
+            </ComboBox>
             <ComboBox x:Name="Themes"
                       HorizontalAlignment="Stretch"
                       SelectedIndex="0">
               <ComboBox.Items>
-                <models:CatalogTheme>FluentLight</models:CatalogTheme>
-                <models:CatalogTheme>FluentDark</models:CatalogTheme>
-                <models:CatalogTheme>SimpleLight</models:CatalogTheme>
-                <models:CatalogTheme>SimpleDark</models:CatalogTheme>
+                <models:CatalogTheme>Fluent</models:CatalogTheme>
+                <models:CatalogTheme>Simple</models:CatalogTheme>
               </ComboBox.Items>
             </ComboBox>
             <ComboBox x:Name="TransparencyLevels"
diff --git a/samples/ControlCatalog/MainView.xaml.cs b/samples/ControlCatalog/MainView.xaml.cs
index 1726028a3f..9d8ea23fe1 100644
--- a/samples/ControlCatalog/MainView.xaml.cs
+++ b/samples/ControlCatalog/MainView.xaml.cs
@@ -9,6 +9,7 @@ using Avalonia.Media;
 using Avalonia.Media.Immutable;
 using Avalonia.Platform;
 using Avalonia.VisualTree;
+using Avalonia.Styling;
 using ControlCatalog.Models;
 using ControlCatalog.Pages;
 
@@ -42,16 +43,16 @@ namespace ControlCatalog
             {
                 if (themes.SelectedItem is CatalogTheme theme)
                 {
-                    App.SetThemeVariant(theme);
-                    
-                    ((TopLevel?)this.GetVisualRoot())?.PlatformImpl?.SetFrameThemeVariant(theme switch
-                    {
-                        CatalogTheme.FluentLight => PlatformThemeVariant.Light,
-                        CatalogTheme.FluentDark => PlatformThemeVariant.Dark,
-                        CatalogTheme.SimpleLight => PlatformThemeVariant.Light,
-                        CatalogTheme.SimpleDark => PlatformThemeVariant.Dark,
-                        _ => throw new ArgumentOutOfRangeException()
-                    });
+                    App.SetCatalogThemes(theme);
+                }
+            };
+            var themeVariants = this.Get<ComboBox>("ThemeVariants");
+            themeVariants.SelectedItem = Application.Current!.RequestedThemeVariant;
+            themeVariants.SelectionChanged += (sender, e) =>
+            {
+                if (themeVariants.SelectedItem is ThemeVariant themeVariant)
+                {
+                    Application.Current!.RequestedThemeVariant = themeVariant;
                 }
             };
 
@@ -118,25 +119,13 @@ namespace ControlCatalog
 
         private void PlatformSettingsOnColorValuesChanged(object? sender, PlatformColorValues e)
         {
-            var themes = this.Get<ComboBox>("Themes");
-            var currentTheme = (CatalogTheme?)themes.SelectedItem ?? CatalogTheme.FluentLight;
-            var newTheme = (currentTheme, e.ThemeVariant) switch
-            {
-                (CatalogTheme.FluentDark, PlatformThemeVariant.Light) => CatalogTheme.FluentLight,
-                (CatalogTheme.FluentLight, PlatformThemeVariant.Dark) => CatalogTheme.FluentDark,
-                (CatalogTheme.SimpleDark, PlatformThemeVariant.Light) => CatalogTheme.SimpleLight,
-                (CatalogTheme.SimpleLight, PlatformThemeVariant.Dark) => CatalogTheme.SimpleDark,
-                _ => currentTheme
-            };
-            themes.SelectedItem = newTheme;
-
             Application.Current!.Resources["SystemAccentColor"] = e.AccentColor1;
             Application.Current.Resources["SystemAccentColorDark1"] = ChangeColorLuminosity(e.AccentColor1, -0.3);
             Application.Current.Resources["SystemAccentColorDark2"] = ChangeColorLuminosity(e.AccentColor1, -0.5);
             Application.Current.Resources["SystemAccentColorDark3"] = ChangeColorLuminosity(e.AccentColor1, -0.7);
-            Application.Current.Resources["SystemAccentColorLight1"] = ChangeColorLuminosity(e.AccentColor1, -0.3);
-            Application.Current.Resources["SystemAccentColorLight2"] = ChangeColorLuminosity(e.AccentColor1, -0.5);
-            Application.Current.Resources["SystemAccentColorLight3"] = ChangeColorLuminosity(e.AccentColor1, -0.7);
+            Application.Current.Resources["SystemAccentColorLight1"] = ChangeColorLuminosity(e.AccentColor1, 0.3);
+            Application.Current.Resources["SystemAccentColorLight2"] = ChangeColorLuminosity(e.AccentColor1, 0.5);
+            Application.Current.Resources["SystemAccentColorLight3"] = ChangeColorLuminosity(e.AccentColor1, 0.7);
 
             static Color ChangeColorLuminosity(Color color, double luminosityFactor)
             {
diff --git a/samples/ControlCatalog/Models/CatalogTheme.cs b/samples/ControlCatalog/Models/CatalogTheme.cs
index 37224ed26e..79b3182d20 100644
--- a/samples/ControlCatalog/Models/CatalogTheme.cs
+++ b/samples/ControlCatalog/Models/CatalogTheme.cs
@@ -2,9 +2,7 @@
 {
     public enum CatalogTheme
     {
-        FluentLight,
-        FluentDark,
-        SimpleLight,
-        SimpleDark
+        Fluent,
+        Simple
     }
 }
diff --git a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
index 47753f56b6..fc3ad9b895 100644
--- a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
+++ b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
@@ -15,11 +15,11 @@
                 Spacing="16">
       <TextBlock FontSize="18">A simple DatePicker</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <DatePicker />
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
@@ -31,7 +31,7 @@
       </StackPanel>
       
       
-      <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+      <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
               BorderThickness="1" Padding="15">
         <DatePicker >
           <DataValidationErrors.Error>
@@ -42,12 +42,12 @@
       
       <TextBlock FontSize="18">A DatePicker with day formatted and year hidden.</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <DatePicker x:Name="Control2" DayFormat="d (ddd)"
                              YearVisible="False" />
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
@@ -58,15 +58,15 @@
         </Panel>
       </StackPanel>
 
-      <Border Background="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1" Margin="15" />
+      <Border Background="{DynamicResource CatalogBaseLowColor}" BorderThickness="1" Margin="15" />
 
       <TextBlock FontSize="18">A simple TimePicker.</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <TimePicker />
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
@@ -77,7 +77,7 @@
         </Panel>
       </StackPanel>
       
-      <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+      <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
               BorderThickness="1" Padding="15">
         <TimePicker>
           <DataValidationErrors.Error>
@@ -88,11 +88,11 @@
 
       <TextBlock FontSize="18">A TimePicker with minute increments specified.</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <TimePicker MinuteIncrement="15" />
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
@@ -105,11 +105,11 @@
 
       <TextBlock FontSize="18">A TimePicker using a 12-hour clock.</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <TimePicker ClockIdentifier="12HourClock"/>
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
@@ -122,11 +122,11 @@
 
       <TextBlock FontSize="18">A TimePicker using a 24-hour clock.</TextBlock>
       <StackPanel Orientation="Vertical">
-        <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+        <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                 BorderThickness="1" Padding="15">
           <TimePicker ClockIdentifier="24HourClock" />
         </Border>
-        <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+        <Panel Background="{DynamicResource CatalogBaseLowColor}">
           <TextBlock Padding="15">
             <TextBlock.Text>
               <x:String>
diff --git a/samples/ControlCatalog/Pages/FlyoutsPage.axaml b/samples/ControlCatalog/Pages/FlyoutsPage.axaml
index c4d0bc3e67..54aa9d1b67 100644
--- a/samples/ControlCatalog/Pages/FlyoutsPage.axaml
+++ b/samples/ControlCatalog/Pages/FlyoutsPage.axaml
@@ -26,31 +26,31 @@
         <StackPanel Spacing="10">
             <TextBlock FontSize="18" Text="Button with a Flyout" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
                     <Button Content="Click Me!" Flyout="{StaticResource BasicFlyout}" />
                 </Border>
-                <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+                <Panel Background="{DynamicResource CatalogBaseLowColor}">
                     <TextBlock Name="ButtonFlyoutXamlText" Padding="15" />
                 </Panel>
             </StackPanel>
 
             <TextBlock FontSize="18" Text="MenuFlyout" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
                     <Button Content="Click Me!" Flyout="{StaticResource SharedMenuFlyout}" />
                 </Border>
-                <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+                <Panel Background="{DynamicResource CatalogBaseLowColor}">
                     <TextBlock Name="MenuFlyoutXamlText" Padding="15" />
                 </Panel>
             </StackPanel>
 
             <TextBlock FontSize="18" Text="Attached Flyouts" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
-                    <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
+                    <Panel Background="{DynamicResource CatalogBaseLowColor}"
                            HorizontalAlignment="Left"
                            Height="100"
                            Name="AttachedFlyoutPanel">
@@ -70,7 +70,7 @@
 
                     </Panel>
                 </Border>
-                <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+                <Panel Background="{DynamicResource CatalogBaseLowColor}">
                     <TextBlock Name="AttachedFlyoutXamlText" Padding="15" />
                 </Panel>
             </StackPanel>
@@ -78,21 +78,21 @@
 
             <TextBlock FontSize="18" Text="Sharing Flyouts" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
                     <StackPanel Orientation="Horizontal" Spacing="30">
                         <Button Content="Launch Flyout on this button" Flyout="{StaticResource SharedMenuFlyout}"/>
                         <Button Content="Launch Flyout on this button" Flyout="{StaticResource SharedMenuFlyout}"/>
                     </StackPanel>
                 </Border>
-                <Panel Background="{DynamicResource SystemControlBackgroundBaseLowBrush}">
+                <Panel Background="{DynamicResource CatalogBaseLowColor}">
                     <TextBlock Name="SharedFlyoutXamlText" Padding="15" />
                 </Panel>
             </StackPanel>
 
             <TextBlock FontSize="18" Text="Flyout Placements" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
                     <UniformGrid Columns="3">
                         <UniformGrid.Styles>
@@ -215,7 +215,7 @@
 
             <TextBlock FontSize="18" Text="Flyout ShowMode" />
             <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+                <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
                         BorderThickness="1" Padding="15">
                     <WrapPanel Orientation="Horizontal">
                         <WrapPanel.Styles>
diff --git a/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml b/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
index 5ca4ca9bdd..6bf29765f4 100644
--- a/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
+++ b/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
@@ -62,7 +62,7 @@
       <Button x:Name="scrollToRandom">Scroll to Random</Button>
       <Button x:Name="scrollToSelected">Scroll to Selected</Button>
     </StackPanel>
-    <Border BorderThickness="1" BorderBrush="{DynamicResource SystemControlHighlightBaseMediumLowBrush}" Margin="0 0 0 16">
+    <Border BorderThickness="1" BorderBrush="{DynamicResource CatalogBaseMediumColor}" Margin="0 0 0 16">
       <ScrollViewer Name="scroller"
                     HorizontalScrollBarVisibility="Auto"
                     VerticalScrollBarVisibility="Auto">
diff --git a/samples/ControlCatalog/Pages/SplitViewPage.xaml b/samples/ControlCatalog/Pages/SplitViewPage.xaml
index 61bfb490b8..2edd895349 100644
--- a/samples/ControlCatalog/Pages/SplitViewPage.xaml
+++ b/samples/ControlCatalog/Pages/SplitViewPage.xaml
@@ -32,7 +32,7 @@
 
         <TextBlock Text="PaneBackground" />
         <ComboBox Name="PaneBackgroundSelector" SelectedIndex="0" Width="170" Margin="10">
-          <ComboBoxItem Tag="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem>
+          <ComboBoxItem Tag="{DynamicResource CatalogChromeMediumColor}">CatalogChromeMediumColor</ComboBoxItem>
           <ComboBoxItem Tag="Red">Red</ComboBoxItem>
           <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
           <ComboBoxItem Tag="Green">Green</ComboBoxItem>
@@ -48,7 +48,7 @@
 
       </StackPanel>
 
-      <Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}"
+      <Border BorderBrush="{DynamicResource CatalogBaseLowColor}"
             BorderThickness="1">
         <!--{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}-->
         <SplitView Name="SplitView"
@@ -77,7 +77,7 @@
                   <Border Width="48">
                     <Viewbox Width="24" Height="24" HorizontalAlignment="Left">
                       <Canvas Width="24" Height="24">
-                        <Path Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" />
+                        <Path Fill="{DynamicResource CatalogBaseHighColor}" Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" />
                       </Canvas>
                     </Viewbox>
                   </Border>
@@ -89,11 +89,11 @@
           </SplitView.Pane>
 
           <Grid>
-            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" HorizontalAlignment="Center" VerticalAlignment="Center"  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
-            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" TextAlignment="Left"  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
-            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" HorizontalAlignment="Right" TextAlignment="Left"  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
-            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" VerticalAlignment="Bottom" TextAlignment="Left"  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
-            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" VerticalAlignment="Bottom" HorizontalAlignment="Right" TextAlignment="Left"  Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" HorizontalAlignment="Center" VerticalAlignment="Center"  Foreground="{DynamicResource CatalogBaseHighColor}" />
+            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" TextAlignment="Left"  Foreground="{DynamicResource CatalogBaseHighColor}" />
+            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" HorizontalAlignment="Right" TextAlignment="Left"  Foreground="{DynamicResource CatalogBaseHighColor}" />
+            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" VerticalAlignment="Bottom" TextAlignment="Left"  Foreground="{DynamicResource CatalogBaseHighColor}" />
+            <TextBlock FontSize="14" FontWeight="700" Text="SplitViewContent" VerticalAlignment="Bottom" HorizontalAlignment="Right" TextAlignment="Left"  Foreground="{DynamicResource CatalogBaseHighColor}" />
           </Grid>
 
         </SplitView>
diff --git a/samples/ControlCatalog/Pages/TextBlockPage.xaml b/samples/ControlCatalog/Pages/TextBlockPage.xaml
index 6bb428e2c7..6511e2136a 100644
--- a/samples/ControlCatalog/Pages/TextBlockPage.xaml
+++ b/samples/ControlCatalog/Pages/TextBlockPage.xaml
@@ -9,7 +9,7 @@
       <WrapPanel.Styles>
         <Style Selector="Border">
           <Setter Property="BorderThickness" Value="1" />
-          <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumLowBrush}" />
+          <Setter Property="BorderBrush" Value="{DynamicResource CatalogBaseMediumColor}" />
           <Setter Property="Padding" Value="2" />
           <Setter Property="Margin" Value="10" />
           <Setter Property="Width" Value="200" />
diff --git a/samples/ControlCatalog/Pages/ThemePage.axaml b/samples/ControlCatalog/Pages/ThemePage.axaml
new file mode 100644
index 0000000000..2d948c44a0
--- /dev/null
+++ b/samples/ControlCatalog/Pages/ThemePage.axaml
@@ -0,0 +1,79 @@
+<UserControl x:Class="ControlCatalog.Pages.ThemePage"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:pages="clr-namespace:ControlCatalog.Pages"
+             d:DesignWidth="300"
+             mc:Ignorable="d">
+
+  <UserControl.Resources>
+    <ResourceDictionary>
+      <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Dark">
+          <SolidColorBrush x:Key="DemoBackground">Black</SolidColorBrush>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+          <SolidColorBrush x:Key="DemoBackground">White</SolidColorBrush>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="{x:Static pages:ThemePage.Pink}">
+          <SolidColorBrush x:Key="DemoBackground">#ffe5ea</SolidColorBrush>
+          <SolidColorBrush x:Key="NormalBackgroundBrush" Color="#ffc0cb" />
+          <SolidColorBrush x:Key="PointerOverBackgroundBrush" Color="#ffb3c0" />
+          <SolidColorBrush x:Key="PressedBackgroundBrush" Color="#ff4d6c" />
+          <SolidColorBrush x:Key="NormalBorderBrush" Color="#ff8096" />
+          <SolidColorBrush x:Key="PointerOverBorderBrush" Color="#ff8096" />
+          <SolidColorBrush x:Key="PressedBorderBrush" Color="#ff4d6c" />
+
+          <!-- Override colors for fluent theme -->
+          <StaticResource x:Key="ButtonBackground" ResourceKey="NormalBackgroundBrush" />
+          <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="PointerOverBackgroundBrush" />
+          <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="PressedBackgroundBrush" />
+          <StaticResource x:Key="ButtonBorderBrush" ResourceKey="NormalBorderBrush" />
+          <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="PointerOverBorderBrush" />
+          <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="PressedBorderBrush" />
+          <StaticResource x:Key="TextControlBackground" ResourceKey="NormalBackgroundBrush" />
+          <StaticResource x:Key="TextControlBackgroundPointerOver" ResourceKey="PointerOverBackgroundBrush" />
+          <StaticResource x:Key="TextControlBackgroundFocused" ResourceKey="PointerOverBackgroundBrush" />
+          <StaticResource x:Key="TextControlBorderBrush" ResourceKey="NormalBorderBrush" />
+          <StaticResource x:Key="TextControlBorderBrushPointerOver" ResourceKey="PointerOverBorderBrush" />
+          <StaticResource x:Key="TextControlBorderBrushFocused" ResourceKey="PressedBorderBrush" />
+          <StaticResource x:Key="ComboBoxBackground" ResourceKey="NormalBackgroundBrush" />
+          <StaticResource x:Key="ComboBoxBackgroundPointerOver" ResourceKey="PointerOverBackgroundBrush" />
+          <StaticResource x:Key="ComboBoxBackgroundPressed" ResourceKey="PressedBackgroundBrush" />
+          <StaticResource x:Key="ComboBoxBorderBrush" ResourceKey="NormalBorderBrush" />
+          <StaticResource x:Key="ComboBoxBorderBrushPointerOver" ResourceKey="PointerOverBorderBrush" />
+          <StaticResource x:Key="ComboBoxBorderBrushPressed" ResourceKey="PressedBorderBrush" />
+          <!-- Override colors for default theme -->
+          <StaticResource x:Key="ThemeControlMidBrush" ResourceKey="NormalBackgroundBrush" />
+          <StaticResource x:Key="ThemeControlHighBrush" ResourceKey="PressedBackgroundBrush" />
+          <StaticResource x:Key="ThemeBorderLowBrush" ResourceKey="NormalBorderBrush" />
+          <StaticResource x:Key="ThemeBorderMidBrush" ResourceKey="PointerOverBorderBrush" />
+        </ResourceDictionary>
+      </ResourceDictionary.ThemeDictionaries>
+    </ResourceDictionary>
+  </UserControl.Resources>
+
+  <ThemeVariantScope x:Name="ThemeVariantScope">
+    <Border Background="{DynamicResource DemoBackground}"
+            VerticalAlignment="Top"
+            HorizontalAlignment="Left"
+            Padding="4"
+            CornerRadius="4">
+      <Grid RowDefinitions="Auto, 4, Auto, 4, Auto, 4, Auto" ColumnDefinitions="150, 150">
+        <ComboBox Grid.Column="0" Grid.Row="0" x:Name="Selector" HorizontalAlignment="Stretch">
+          <ComboBox.ItemTemplate>
+            <DataTemplate x:DataType="x:String">
+              <TextBlock Text="{Binding TargetNullValue=Unset}" />
+            </DataTemplate>
+          </ComboBox.ItemTemplate>
+        </ComboBox>
+        <TextBlock Grid.Column="0" Grid.Row="2" Text="Username:" VerticalAlignment="Center" />
+        <TextBlock Grid.Column="0" Grid.Row="4" Text="Password:" VerticalAlignment="Center" />
+        <TextBox Grid.Column="1" Grid.Row="2" Watermark="Input here" HorizontalAlignment="Stretch" />
+        <TextBox Grid.Column="1" Grid.Row="4" Watermark="Input here" HorizontalAlignment="Stretch" />
+        <Button Grid.Column="1" Grid.Row="6" Content="Login" HorizontalAlignment="Stretch" />
+      </Grid>
+    </Border>
+  </ThemeVariantScope>
+</UserControl>
diff --git a/samples/ControlCatalog/Pages/ThemePage.axaml.cs b/samples/ControlCatalog/Pages/ThemePage.axaml.cs
new file mode 100644
index 0000000000..af7b2fe37d
--- /dev/null
+++ b/samples/ControlCatalog/Pages/ThemePage.axaml.cs
@@ -0,0 +1,37 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
+
+namespace ControlCatalog.Pages
+{
+    public class ThemePage : UserControl
+    {
+        public static ThemeVariant Pink { get; } = new("Pink", ThemeVariant.Light);
+        
+        public ThemePage()
+        {
+            AvaloniaXamlLoader.Load(this);
+
+            var selector = this.FindControl<ComboBox>("Selector")!;
+            var themeVariantScope = this.FindControl<ThemeVariantScope>("ThemeVariantScope")!;
+
+            selector.Items = new[]
+            {
+                new ThemeVariant("Default"),
+                ThemeVariant.Dark,
+                ThemeVariant.Light,
+                Pink
+            };
+            selector.SelectedIndex = 0;
+
+            selector.SelectionChanged += (_, _) =>
+            {
+                if (selector.SelectedItem is ThemeVariant theme)
+                {
+                    themeVariantScope.RequestedThemeVariant = theme;
+                }
+            };
+        }
+    }
+}
diff --git a/samples/IntegrationTestApp/App.axaml b/samples/IntegrationTestApp/App.axaml
index a833e096df..eb34222d14 100644
--- a/samples/IntegrationTestApp/App.axaml
+++ b/samples/IntegrationTestApp/App.axaml
@@ -2,6 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="IntegrationTestApp.App">
     <Application.Styles>
-        <FluentTheme Mode="Light"/>
+        <FluentTheme />
     </Application.Styles>
 </Application>
diff --git a/samples/PlatformSanityChecks/App.xaml b/samples/PlatformSanityChecks/App.xaml
index 1b9d64fca6..817142fefd 100644
--- a/samples/PlatformSanityChecks/App.xaml
+++ b/samples/PlatformSanityChecks/App.xaml
@@ -1,5 +1,5 @@
 <Application xmlns="https://github.com/avaloniaui">
     <Application.Styles>
-        <SimpleTheme Mode="Light" />
+        <SimpleTheme />
     </Application.Styles>
 </Application>
diff --git a/samples/Previewer/App.xaml b/samples/Previewer/App.xaml
index 1b9d64fca6..817142fefd 100644
--- a/samples/Previewer/App.xaml
+++ b/samples/Previewer/App.xaml
@@ -1,5 +1,5 @@
 <Application xmlns="https://github.com/avaloniaui">
     <Application.Styles>
-        <SimpleTheme Mode="Light" />
+        <SimpleTheme />
     </Application.Styles>
 </Application>
diff --git a/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml b/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
index 8bdcf2bb0a..4ab09e9584 100644
--- a/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
+++ b/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
@@ -20,6 +20,21 @@
     </Border>
   </Design.PreviewWith>
 
+  <ResourceDictionary.ThemeDictionaries>
+    <ResourceDictionary x:Key="Dark">
+      <Color x:Key="HamburgerBaseHighColor">#99FFFFFF</Color>
+      <Color x:Key="HamburgerChromeMediumColor">#FF1F1F1F</Color>
+      <Color x:Key="HamburgerAltHighColor">#FF000000</Color>
+      <Color x:Key="HamburgerChromeLowColor">#FF171717</Color>
+    </ResourceDictionary>
+    <ResourceDictionary x:Key="Default">
+      <Color x:Key="HamburgerBaseHighColor">#99000000</Color>
+      <Color x:Key="HamburgerChromeMediumColor">#FFE6E6E6</Color>
+      <Color x:Key="HamburgerAltHighColor">#FFFFFFFF</Color>
+      <Color x:Key="HamburgerChromeLowColor">#FFF2F2F2</Color>
+    </ResourceDictionary>
+  </ResourceDictionary.ThemeDictionaries>
+  
   <x:Double x:Key="PaneCompactWidth">40</x:Double>
   <x:Double x:Key="PaneExpandWidth">220</x:Double>
   <x:Double x:Key="HeaderHeight">36</x:Double>
@@ -36,7 +51,6 @@
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="VerticalAlignment" Value="Stretch" />
-    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="FontWeight" Value="Normal" />
     <Setter Property="MinHeight" Value="0" />
     <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
@@ -64,7 +78,7 @@
     </Setter>
 
     <Style Selector="^:pointerover /template/ ContentPresenter">
-      <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
       <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
       <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
     </Style>
@@ -101,7 +115,7 @@
                     VerticalAlignment="Center"
                     Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
                     IsVisible="False"
-                    CornerRadius="{DynamicResource ControlCornerRadius}"/>
+                    CornerRadius="4"/>
             <ContentPresenter Name="PART_ContentPresenter"
                               Padding="{TemplateBinding Padding}"
                               Margin="0"
@@ -121,9 +135,9 @@
       <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
       
       <Style Selector="^ /template/ Border#PART_LayoutRoot">
-        <Setter Property="Background" Value="{DynamicResource SystemChromeLowColor}" />
+        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
         <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
-        <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
       </Style>
     </Style>
     
@@ -136,18 +150,18 @@
     </Style>
 
     <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
-      <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
       <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
-      <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
     </Style>
   </ControlTheme>
 
   <!--  HamburgerMenu  -->
   <ControlTheme x:Key="{x:Type catalog:HamburgerMenu}" TargetType="catalog:HamburgerMenu">
     <Setter Property="Padding" Value="12 8 4 0" />
-    <Setter Property="PaneBackground" Value="{DynamicResource SystemChromeMediumColor}" />
-    <Setter Property="Background" Value="{DynamicResource SystemChromeMediumColor}" />
-    <Setter Property="ContentBackground" Value="{DynamicResource SystemAltHighColor}" />
+    <Setter Property="PaneBackground" Value="{DynamicResource HamburgerChromeMediumColor}" />
+    <Setter Property="Background" Value="{DynamicResource HamburgerChromeMediumColor}" />
+    <Setter Property="ContentBackground" Value="{DynamicResource HamburgerAltHighColor}" />
     <Setter Property="ItemContainerTheme" Value="{StaticResource HamburgerMenuTabItem}"/>
     <Setter Property="TabStripPlacement" Value="Left" />
     <Setter Property="Template">
diff --git a/samples/Sandbox/App.axaml b/samples/Sandbox/App.axaml
index f601f9f78f..cf3e5e445a 100644
--- a/samples/Sandbox/App.axaml
+++ b/samples/Sandbox/App.axaml
@@ -3,6 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="Sandbox.App">
     <Application.Styles>
-        <FluentTheme Mode="Dark"/>
+        <FluentTheme />
     </Application.Styles>
 </Application>