Make Mode property stylable and new theme switching in ControlCatalog.

samples/ControlCatalog/App.xaml

@@ -6,6 +6,7 @@
              x:Class="ControlCatalog.App">
   <Application.Styles>
     <FluentTheme Mode="Light"/>
+    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
     <Style Selector="TextBlock.h1, TextBlock.h2, TextBlock.h3">
       <Setter Property="TextWrapping" Value="Wrap" />
     </Style>

samples/ControlCatalog/App.xaml.cs

@@ -16,12 +16,12 @@ namespace ControlCatalog
             DataContext = new ApplicationViewModel();
         }
 
-        private static readonly StyleInclude DataGridFluent = new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
+        public static readonly StyleInclude DataGridFluent = new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
         {
             Source = new Uri("avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml")
         };
 
-        private static readonly StyleInclude DataGridDefault = new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
+        public static readonly StyleInclude DataGridDefault = new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
         {
             Source = new Uri("avares://Avalonia.Controls.DataGrid/Themes/Default.xaml")
         };
@@ -31,8 +31,7 @@ namespace ControlCatalog
             new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Fluent/FluentDark.xaml")
-            },
-            DataGridFluent
+            }
         };
 
         public static Styles FluentLight = new Styles
@@ -40,8 +39,7 @@ namespace ControlCatalog
             new StyleInclude(new Uri("avares://ControlCatalog/Styles"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Fluent/FluentLight.xaml")
-            },
-            DataGridFluent
+            }
         };
 
         public static Styles DefaultLight = new Styles
@@ -65,8 +63,7 @@ namespace ControlCatalog
             new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Default/DefaultTheme.xaml")
-            },
-            DataGridDefault
+            }
         };
 
         public static Styles DefaultDark = new Styles
@@ -90,8 +87,7 @@ namespace ControlCatalog
             new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
             {
                 Source = new Uri("avares://Avalonia.Themes.Default/DefaultTheme.xaml")
-            },
-            DataGridDefault
+            }
         };
 
         public override void Initialize()

samples/ControlCatalog/MainView.xaml.cs

@@ -3,15 +3,12 @@ using System.Collections;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
-using Avalonia.Markup.Xaml.MarkupExtensions;
-using Avalonia.Markup.Xaml.Styling;
-using Avalonia.Markup.Xaml.XamlIl;
 using Avalonia.Media;
 using Avalonia.Media.Immutable;
 using Avalonia.Platform;
-using ControlCatalog.Pages;
-using ControlCatalog.Models;
 using Avalonia.Themes.Fluent;
+using ControlCatalog.Models;
+using ControlCatalog.Pages;
 
 namespace ControlCatalog
 {
@@ -44,7 +41,47 @@ namespace ControlCatalog
             {
                 if (themes.SelectedItem is CatalogTheme theme)
                 {
-                    (Application.Current.Styles[0] as FluentTheme).Mode = FluentThemeMode.Dark;
+                    var themeStyle = Application.Current.Styles[0];
+                    if (theme == CatalogTheme.FluentLight)
+                    {
+                        if (themeStyle is FluentTheme fluentTheme)
+                        {
+                            if (fluentTheme.Mode == FluentThemeMode.Dark)
+                            {
+                                fluentTheme.Mode = FluentThemeMode.Light;
+                            }
+                        }
+                        else
+                        {
+                            Application.Current.Styles[0] = new FluentTheme(new Uri("avares://ControlCatalog/Styles"));
+                            Application.Current.Styles[1] = App.DataGridFluent;
+                        }
+                    }
+                    else if (theme == CatalogTheme.FluentDark)
+                    {
+                        if (themeStyle is FluentTheme fluentTheme)
+                        {
+                            if (fluentTheme.Mode == FluentThemeMode.Light)
+                            {
+                                fluentTheme.Mode = FluentThemeMode.Dark;
+                            }
+                        }
+                        else
+                        {
+                            Application.Current.Styles[0] = new FluentTheme(new Uri("avares://ControlCatalog/Styles")) { Mode = FluentThemeMode.Dark };
+                            Application.Current.Styles[1] = App.DataGridFluent;
+                        }
+                    }
+                    else if (theme == CatalogTheme.DefaultLight)
+                    {
+                        Application.Current.Styles[0] = App.DefaultLight;
+                        Application.Current.Styles[1] = App.DataGridDefault;
+                    }
+                    else if (theme == CatalogTheme.DefaultDark)
+                    {
+                        Application.Current.Styles[0] = App.DefaultDark;
+                        Application.Current.Styles[1] = App.DataGridDefault;
+                    }
                 }
             };
 

src/Avalonia.Themes.Fluent/FluentTheme.cs

@@ -18,7 +18,7 @@ namespace Avalonia.Themes.Fluent
     /// <summary>
     /// Includes the fluent theme in an application.
     /// </summary>
-    public class FluentTheme : IStyle, IResourceProvider
+    public class FluentTheme : AvaloniaObject, IStyle, IResourceProvider
     {
         private readonly Uri _baseUri;
         private Styles _fluentDark = new();
@@ -26,7 +26,6 @@ namespace Avalonia.Themes.Fluent
         private Styles _sharedStyles = new();
         private bool _isLoading;
         private IStyle? _loaded;
-        private FluentThemeMode _mode;
 
         /// <summary>
         /// Initializes a new instance of the <see cref="FluentTheme"/> class.
@@ -48,31 +47,32 @@ namespace Avalonia.Themes.Fluent
             InitStyles(_baseUri);
         }
 
+
+        public static readonly StyledProperty<FluentThemeMode> ModeProperty =
+            AvaloniaProperty.Register<FluentTheme, FluentThemeMode>(nameof(Mode));
         /// <summary>
         /// Gets or sets the mode of the fluent theme (light, dark).
         /// </summary>
         public FluentThemeMode Mode
         {
-            get => _mode;
-            set
+            get => GetValue(ModeProperty);
+            set => SetValue(ModeProperty, value);
+        }
+        protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+        {
+            base.OnPropertyChanged(change);
+            if (change.Property == ModeProperty)
             {
-                if (_mode != value)
+                if (Mode == FluentThemeMode.Dark)
                 {
-                    _mode = value;
-                    if (_mode == FluentThemeMode.Dark)
-                    {
-                        (Loaded as Styles)![1] = _fluentDark[0];
-                        (Loaded as Styles)![2] = _fluentDark[1];
-                    }
-                    else
-                    {
-                        (Loaded as Styles)![1] = _fluentLight[0];
-                        (Loaded as Styles)![2] = _fluentLight[1];
-                    }
-
-
+                    (Loaded as Styles)![1] = _fluentDark[0];
+                    (Loaded as Styles)![2] = _fluentDark[1];
+                }
+                else
+                {
+                    (Loaded as Styles)![1] = _fluentLight[0];
+                    (Loaded as Styles)![2] = _fluentLight[1];
                 }
-
             }
         }