Implement Themes

src/Controls/samples/Controls.Sample.Droid/MainActivity.cs

@@ -1,9 +1,14 @@
 using Android.App;
+using Android.Content.PM;
 using Microsoft.Maui;
 
 namespace Maui.Controls.Sample.Droid
 {
-	[Activity(Label = "@string/app_name", Theme = "@style/Maui.SplashTheme", MainLauncher = true)]
+	[Activity(
+		Label = "@string/app_name",
+		Theme = "@style/Maui.SplashTheme",
+		MainLauncher = true,
+		ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode)]
 	[IntentFilter(
 		new[] { Microsoft.Maui.Essentials.Platform.Intent.ActionAppAction },
 		Categories = new[] { Android.Content.Intent.CategoryDefault })]

src/Controls/samples/Controls.Sample.Droid/Resources/values/strings.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <resources>
-    <string name="app_name">Controls</string>
+    <string name="app_name">.NET MAUI Gallery</string>
 </resources>

src/Controls/samples/Controls.Sample/Pages/CompatibilityPage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/Controls/ActivityIndicatorPage.xaml

@@ -23,7 +23,7 @@
                 Style="{StaticResource Subhead}"/>
             <ActivityIndicator
                 IsRunning="True"
-                Color="{StaticResource AccentColor}" />
+                Color="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}" />
         </VerticalStackLayout>
     </ContentPage.Content>
 </views:BasePage>

src/Controls/samples/Controls.Sample/Pages/ControlsPage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/Core/AppThemeBindingPage.xaml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<views:BasePage
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Pages.AppThemeBindingPage"
+    xmlns:views="clr-namespace:Maui.Controls.Sample.Pages.Base"
+    Title="AppThemeBinding">
+    <views:BasePage.Resources>
+        <ResourceDictionary>
+
+            <!-- Light colors -->
+            <Color x:Key="LightPrimaryColor">Orange</Color>
+
+            <!-- Dark colors -->
+            <Color x:Key="DarkPrimaryColor">Teal</Color>
+
+        </ResourceDictionary>
+    </views:BasePage.Resources>
+    <views:BasePage.Content>
+        <StackLayout
+            Margin="12">
+            <Label
+                Text="AppThemeBinding"
+                Style="{StaticResource Headline}"/>
+            <Label 
+                Text="This text is green in light mode, and red in dark mode."
+                TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
+            <Label
+                Text="Using AppThemeBinding in a ResourceDictionary"
+                Style="{StaticResource Headline}"/>
+            <Label 
+                Text="This text use LightSecondaryColor Resource (Orange Color) in light mode, and DarkSecondaryColor Resource (Teal Color) in dark mode."
+                TextColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}"/>
+        </StackLayout>
+    </views:BasePage.Content>
+</views:BasePage>

src/Controls/samples/Controls.Sample/Pages/Core/AppThemeBindingPage.xaml.cs

@@ -0,0 +1,10 @@
+namespace Maui.Controls.Sample.Pages
+{
+	public partial class AppThemeBindingPage
+	{
+		public AppThemeBindingPage()
+		{
+			InitializeComponent();
+		}
+	}
+}

src/Controls/samples/Controls.Sample/Pages/CorePage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/CustomNavigationPage.xaml

@@ -2,6 +2,6 @@
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Maui.Controls.Sample.Pages.CustomNavigationPage"
-    BarBackgroundColor="{StaticResource AccentColor}"
+    BarBackgroundColor="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}"
     BarTextColor="{StaticResource WhiteColor}">
 </NavigationPage>

src/Controls/samples/Controls.Sample/Pages/GesturesPage.xaml

@@ -35,8 +35,8 @@
                     Text="{Binding FilterValue, Mode=OneWayToSource}"
                     ReturnCommand="{Binding FilterCommand}"
                     ReturnType="Search"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/LayoutsPage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/MainPage.xaml

@@ -12,15 +12,15 @@
             <Style x:Key="TitleStyle" TargetType="Label">
                 <Setter Property="FontSize" Value="Title" />
                 <Setter Property="FontFamily" Value="Segoe UI Bold" />
-                <Setter Property="TextColor" Value="{StaticResource WhiteColor}" />
+                <Setter Property="TextColor" Value="{DynamicResource DarkTextPrimaryColor}" />
                 <Setter Property="HorizontalOptions" Value="Center" />
                 <Setter Property="Margin" Value="0, 24, 0, 0" />
             </Style>
 
             <Style x:Key="SubTitleStyle" TargetType="Label">
                 <Setter Property="FontSize" Value="Small" />
                 <Setter Property="FontFamily" Value="Segoe UI" />
-                <Setter Property="TextColor" Value="{StaticResource WhiteColor}" />
+                <Setter Property="TextColor" Value="{DynamicResource DarkTextPrimaryColor}" />
                 <Setter Property="HorizontalTextAlignment" Value="Center" />
                 <Setter Property="HorizontalOptions" Value="Center" />
                 <Setter Property="Margin" Value="24, 12" />
@@ -29,6 +29,7 @@
             <Color x:Key="SectionItemBorderColor">#C8C8C8</Color>
 
             <Style x:Key="SectionItemContainerStyle" TargetType="Frame">
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightBackgroundSecondaryColor}, Dark={StaticResource DarkBackgroundSecondaryColor}}" />
                 <Setter Property="BorderColor" Value="{StaticResource SectionItemBorderColor}" />
                 <Setter Property="CornerRadius" Value="0" />
                 <Setter Property="HasShadow" Value="False" />

src/Controls/samples/Controls.Sample/Pages/OthersPage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/Pages/TempPage.xaml

@@ -11,6 +11,7 @@
                 Margin="12">
                 <Label 
                     Text="Welcome to .NET MAUI!"
+                    TextColor="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}"
                     SemanticProperties.HeadingLevel="Level1"
                     FontSize="32"
                     HorizontalOptions="CenterAndExpand" />

src/Controls/samples/Controls.Sample/Pages/UserInterfacePage.xaml

@@ -32,8 +32,8 @@
                     Grid.Column="1"
                     Placeholder="Filter"
                     Text="{Binding FilterValue, Mode=TwoWay}"
-                    PlaceholderColor="{DynamicResource TextSecondaryColor}"
-                    TextColor="{DynamicResource TextPrimaryColor}"
+                    PlaceholderColor="{AppThemeBinding Light={StaticResource LightTextSecondaryColor}, Dark={StaticResource DarkTextSecondaryColor}}"
+                    TextColor="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}"
                     FontSize="Medium"
                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="Center"/>

src/Controls/samples/Controls.Sample/ViewModels/CoreViewModel.cs

@@ -12,6 +12,9 @@ protected override IEnumerable<SectionModel> CreateItems() => new[]
 			new SectionModel(typeof(AlertsPage), "Alerts",
 				"Displaying an alert, asking a user to make a choice, or displaying a prompt."),
 
+			new SectionModel(typeof(AppThemeBindingPage), "AppThemeBindings",
+				"Devices typically include light and dark themes, which each refer to a broad set of appearance preferences that can be set at the operating system level. Applications should respect these system themes, and respond immediately when the system theme changes."),
+
 			new SectionModel(typeof(BrushesPage), "Brushes",
 				"A brush enables you to paint an area, such as the background of a control, using different approaches."),
 

src/Controls/samples/Controls.Sample/XamlApp.xaml

@@ -8,19 +8,30 @@
     <Application.Resources>
         <ResourceDictionary>
 
-            <!-- COLORS -->
+            <!-- COMMON COLORS -->
             <Color x:Key="BlackColor">#150303</Color>
             <Color x:Key="WhiteColor">#F8F8FF</Color>
-            <Color x:Key="AccentColor">#4423A8</Color>
-            <Color x:Key="BackgroundColor">#F9F8FF</Color>
-            <Color x:Key="BackgroundSecondaryColor">#F9F9FF</Color>
-            <Color x:Key="TextPrimaryColor">#B0150303</Color>
-            <Color x:Key="TextSecondaryColor">#B01d1d1d</Color>
-            <Color x:Key="BorderColor">#C8C8C8</Color>
+
+
+            <!-- LIGHT COLORS -->
+            <Color x:Key="LightAccentColor">#5639b0</Color>
+            <Color x:Key="LightBackgroundColor">#F9F8FF</Color>
+            <Color x:Key="LightBackgroundSecondaryColor">#F9F9FF</Color>
+            <Color x:Key="LightTextPrimaryColor">#B0150303</Color>
+            <Color x:Key="LightTextSecondaryColor">#B01d1d1d</Color>
+            <Color x:Key="LightBorderColor">#C8C8C8</Color>
+
+            <!-- DARK COLORS -->
+            <Color x:Key="DarkAccentColor">#7e2bea</Color>
+            <Color x:Key="DarkBackgroundColor">#181819</Color>
+            <Color x:Key="DarkBackgroundSecondaryColor">#313133</Color>
+            <Color x:Key="DarkTextPrimaryColor">#fcfcfc</Color>
+            <Color x:Key="DarkTextSecondaryColor">#f5f5f5</Color>
+            <Color x:Key="DarkBorderColor">#fefefe</Color>
 
             <!-- STYLES -->
             <Style x:Key="SearchBorderStyle" TargetType="Frame">
-                <Setter Property="BackgroundColor" Value="{DynamicResource BackgroundSecondaryColor}" />
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightBackgroundSecondaryColor}, Dark={StaticResource DarkBackgroundSecondaryColor}}" />
                 <Setter Property="HasShadow" Value="True" />
                 <Setter Property="Padding" Value="0" />
                 <Setter Property="HeightRequest" Value="40" />
@@ -29,7 +40,8 @@
             </Style>
 
             <Style x:Key="GalleryItemContainerStyle" TargetType="Frame">
-                <Setter Property="BorderColor" Value="{StaticResource BorderColor}" />
+                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightBackgroundSecondaryColor}, Dark={StaticResource DarkBackgroundSecondaryColor}}" />
+                <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource LightBorderColor}, Dark={StaticResource DarkBorderColor}}" />
                 <Setter Property="CornerRadius" Value="0" />
                 <Setter Property="HasShadow" Value="False" />
                 <Setter Property="Padding" Value="12" />
@@ -40,14 +52,14 @@
                 <Setter Property="FontSize" Value="Small" />
                 <Setter Property="FontFamily" Value="Segoe UI" />
                 <Setter Property="FontAttributes" Value="Bold" />
-                <Setter Property="TextColor" Value="{StaticResource AccentColor}" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightAccentColor}, Dark={StaticResource DarkAccentColor}}" />
                 <Setter Property="Margin" Value="0, 0, 0, 6" />
             </Style>
 
             <Style x:Key="GalleryItemDescriptionStyle" TargetType="Label">
                 <Setter Property="FontSize" Value="Caption" />
                 <Setter Property="FontFamily" Value="Segoe UI" />
-                <Setter Property="TextColor" Value="{StaticResource BlackColor}" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}" />
                 <Setter Property="LineBreakMode" Value="WordWrap" />
             </Style>
 
@@ -57,16 +69,19 @@
                 <Setter Property="HorizontalTextAlignment" Value="Center" />
                 <Setter Property="HorizontalOptions" Value="Center" />
                 <Setter Property="VerticalOptions" Value="Center" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}" />
             </Style>
 
             <Style x:Key="Headline" TargetType="Label">
                 <Setter Property="FontFamily" Value="Segoe UI" />
                 <Setter Property="FontSize" Value="10" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}" />
             </Style>
 
             <Style x:Key="Subhead" TargetType="Label">
                 <Setter Property="FontFamily" Value="Segoe UI" />
                 <Setter Property="FontSize" Value="9" />
+                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightTextPrimaryColor}, Dark={StaticResource DarkTextPrimaryColor}}" />
             </Style>
 
         </ResourceDictionary>

src/Controls/samples/Controls.Sample/XamlApp.xaml.cs

@@ -15,10 +15,15 @@ public XamlApp(IServiceProvider services, ITextService textService)
 
 			Services = services;
 
-			Debug.WriteLine($"The AccentColor color is {Resources["AccentColor"]}");
 			Debug.WriteLine($"The injected text service had a message: '{textService.GetText()}'");
 
 			MainPage = Services.GetRequiredService<Page>();
+
+			RequestedThemeChanged += (sender, args) =>
+			{
+				// Respond to the theme change
+				Debug.WriteLine($"Requested theme changed: {args.RequestedTheme}");
+			};
 		}
 
 		public IServiceProvider Services { get; }

src/Controls/src/Core/HandlerImpl/Application.Impl.cs

@@ -21,6 +21,19 @@ IWindow IApplication.CreateWindow(IActivationState activationState)
 			return window;
 		}
 
+		public void ThemeChanged()
+		{
+			Current?.TriggerThemeChanged(new AppThemeChangedEventArgs(Current.RequestedTheme));
+		}
+
+		protected virtual Window CreateWindow(IActivationState activationState)
+		{
+			if (Windows.Count > 0)
+				return Windows[0];
+
+			throw new NotImplementedException($"Either set {nameof(MainPage)} or override {nameof(Application.CreateWindow)}.");
+		}
+
 		void AddWindow(Window window)
 		{
 			_windows.Add(window);
@@ -35,13 +48,5 @@ void AddWindow(Window window)
 			if (window is NavigableElement ne)
 				ne.NavigationProxy.Inner = NavigationProxy;
 		}
-
-		protected virtual Window CreateWindow(IActivationState activationState)
-		{
-			if (Windows.Count > 0)
-				return Windows[0];
-
-			throw new NotImplementedException($"Either set {nameof(MainPage)} or override {nameof(Application.CreateWindow)}.");
-		}
 	}
 }

src/Controls/tests/Core.UnitTests/TestClasses/ApplicationStub.cs

@@ -4,13 +4,17 @@ namespace Microsoft.Maui.Controls.Core.UnitTests
 {
 	class ApplicationStub : IApplication
 	{
-		List<IWindow> _windows = new List<IWindow>();
+		readonly List<IWindow> _windows = new List<IWindow>();
+
 		public IReadOnlyList<IWindow> Windows => _windows.AsReadOnly();
+
 		public string Property { get; set; } = "Default";
 
 		public IWindow CreateWindow(IActivationState activationState)
 		{
 			throw new System.NotImplementedException();
 		}
+
+		public void ThemeChanged() { }
 	}
 }

src/Core/src/IApplication.cs

@@ -2,9 +2,26 @@
 
 namespace Microsoft.Maui
 {
+	/// <summary>
+	/// Class that represents a cross-platform .NET MAUI application.
+	/// </summary>
 	public interface IApplication
 	{
+		/// <summary>
+		/// Gets the instantiated windows in an application.
+		/// </summary>
 		IReadOnlyList<IWindow> Windows { get; }
+
+		/// <summary>
+		/// Instantiate a new window.
+		/// </summary>
+		/// <param name="activationState">Argument containing specific information on each platform.</param>
+		/// <returns>The created window.</returns>
 		IWindow CreateWindow(IActivationState activationState);
+
+		/// <summary>
+		/// Notify a theme change.
+		/// </summary>
+		void ThemeChanged();
 	}
 }