Add application theme support and update UI styling

Reformatted `DeviceTypeHelper` docs and added global namespace. Introduced `AppTheme` enum in `AppTheme.cs`. Updated `SettingOptions` to include `AppTheme` property. Added `SetAppTheme` method to `AppManager` and P/Invoke for `ShouldSystemUseDarkMode`. Updated `IAppManager` interface to include `SetAppTheme`. Updated `Resources.resw` for theme settings in English and German. Made `MainWindow` static in `App.xaml.cs` and called `SetAppTheme`. Updated various XAML files to use theme resources for styling. Removed static resource references in `MainWindow.xaml`. Commented out acrylic brush definitions in `DefaultTheme.xaml`. Added theme selection card in `SettingsPage.xaml`. Added `ApplicationThemeViewModel` for theme management. Updated `ConfigurationViewModel` for theme management and initialization. Handled potential null `MainUIUrl` in `MainUIViewModel`. Updated `SettingsViewModel` for theme management and saving. Handled null or empty `LabelColor` in `WidgetViewModel`. Signed-off-by: Christoph Hofmann <[email protected]>
openhab · Jan 5, 2025 · a080f73 · a080f73
1 parent d74cd63
commit a080f73
Show file tree

Hide file tree

Showing 21 changed files with 270 additions and 192 deletions.
diff --git a/src/openHAB.Core/Common/DeviceTypeHelper.cs b/src/openHAB.Core/Common/DeviceTypeHelper.cs
@@ -1,14 +1,17 @@
 namespace openHAB.Core.Common;
 
-/// <summary>Helper class to get the target platform the app is running on.</summary>
+/// <summary>
+/// Helper class to get the target platform the app is running on.
+/// </summary>
 public class DeviceTypeHelper
 {
+
     /// <summary>
     /// Initializes static members of the <see cref="DeviceTypeHelper"/> class.
     /// </summary>
     static DeviceTypeHelper()
     {
-        DeviceFamily = RecognizeDeviceFamily(Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily);
+        DeviceFamily = RecognizeDeviceFamily(global::Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily);
     }
 
     /// <summary>Gets the device family.</summary>

diff --git a/src/openHAB.Core/Model/AppTheme.cs b/src/openHAB.Core/Model/AppTheme.cs
@@ -0,0 +1,24 @@
+using Microsoft.UI.Xaml;
+
+namespace openHAB.Core.Model;
+
+/// <summary>
+/// Specifies the application theme.
+/// </summary>
+public enum AppTheme
+{
+    /// <summary>
+    /// Light theme.
+    /// </summary>
+    Light = ApplicationTheme.Light,
+
+    /// <summary>
+    /// Dark theme.
+    /// </summary>
+    Dark = ApplicationTheme.Dark,
+
+    /// <summary>
+    /// System default theme.
+    /// </summary>
+    System = 2
+}
diff --git a/src/openHAB.Core/Model/SettingOptions.cs b/src/openHAB.Core/Model/SettingOptions.cs
@@ -78,6 +78,16 @@ public bool UseSVGIcons
         set;
     }
 
+    /// <summary>
+    /// Gets or sets the application theme.
+    /// </summary>
+    /// <value>The application theme.</value>
+    public AppTheme AppTheme
+    {
+        get;
+        set;
+    }
+
     /// <summary>
     /// Saves the current settings to a file.
     /// </summary>

diff --git a/src/openHAB.Core/Services/AppManager.cs b/src/openHAB.Core/Services/AppManager.cs
@@ -1,8 +1,10 @@
 using System;
 using System.Globalization;
+using System.Runtime.InteropServices;
 using System.Threading.Tasks;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Options;
+using Microsoft.UI.Xaml;
 using openHAB.Core.Client.Models;
 using openHAB.Core.Model;
 using openHAB.Core.Services.Contracts;
@@ -67,6 +69,35 @@ public void SetProgramLanguage(string langcode)
         }
     }
 
+    [DllImport("UXTheme.dll", SetLastError = true, EntryPoint = "#138")]
+    public static extern bool ShouldSystemUseDarkMode();
+
+    /// <inheritdoc />
+    public void SetAppTheme(UIElement content)
+    {
+        if (!(content is FrameworkElement frameworkElement))
+        {
+            _logger.LogWarning("Unable to set app theme");
+            return;
+        }
+
+        SettingOptions settings = _options.Value;
+        switch (settings.AppTheme)
+        {
+            case AppTheme.Light:
+                frameworkElement.RequestedTheme = ElementTheme.Light;
+                break;
+            case AppTheme.Dark:
+                frameworkElement.RequestedTheme = ElementTheme.Dark;
+                break;
+            case AppTheme.System:
+                frameworkElement.RequestedTheme = ShouldSystemUseDarkMode() ? ElementTheme.Dark : ElementTheme.Light;
+                break;
+            default:
+                break;
+        }
+    }
+
     /// <inheritdoc/>
     public async Task ToggleAutostart()
     {

diff --git a/src/openHAB.Core/Services/Contracts/IAppManager.cs b/src/openHAB.Core/Services/Contracts/IAppManager.cs
@@ -1,4 +1,5 @@
 using System.Threading.Tasks;
+using Microsoft.UI.Xaml;
 using openHAB.Core.Client.Models;
 
 namespace openHAB.Core.Services.Contracts;
@@ -32,6 +33,12 @@ OpenHABVersion ServerVersion
     /// </returns>
     Task<bool> IsStartupEnabled();
 
+
+    /// <summary>
+    /// Sets the application theme.
+    /// </summary>
+    void SetAppTheme(UIElement content);
+
     /// <summary>
     /// Sets the program language.
     /// </summary>

diff --git a/src/openHAB.Core/Strings/de-de/Resources.resw b/src/openHAB.Core/Strings/de-de/Resources.resw
@@ -347,4 +347,19 @@ Bitte wählen Sie den Demomodus oder die Lokale-/Remote-Verbindungsinformation z
   <data name="OpenLogViewerButton.Label" xml:space="preserve">
     <value>Logs</value>
   </data>
+  <data name="AppTheme.Header" xml:space="preserve">
+    <value>Design</value>
+  </data>
+  <data name="AppTheme.Description" xml:space="preserve">
+    <value>Choose the color for the app</value>
+  </data>
+  <data name="AppThemeSystem" xml:space="preserve">
+    <value>Benutze System Einstellung</value>
+  </data>
+  <data name="AppThemeLight" xml:space="preserve">
+    <value>Hell</value>
+  </data>
+  <data name="AppThemeDark" xml:space="preserve">
+    <value>Dunkel</value>
+  </data>
 </root>
diff --git a/src/openHAB.Core/Strings/en-us/Resources.resw b/src/openHAB.Core/Strings/en-us/Resources.resw
@@ -354,4 +354,19 @@ Please select demo mode or configure local/remote connection.</value>
   <data name="OpenLogViewerButton.Label" xml:space="preserve">
     <value>Logs</value>
   </data>
+  <data name="AppTheme.Header" xml:space="preserve">
+    <value>Theme</value>
+  </data>
+  <data name="AppTheme.Description" xml:space="preserve">
+    <value>Choose the color theme for the app.</value>
+  </data>
+  <data name="AppThemeSystem" xml:space="preserve">
+    <value>Use system setting</value>
+  </data>
+  <data name="AppThemeLight" xml:space="preserve">
+    <value>Light</value>
+  </data>
+  <data name="AppThemeDark" xml:space="preserve">
+    <value>Dark</value>
+  </data>
 </root>
diff --git a/src/openHAB.Windows/App.xaml.cs b/src/openHAB.Windows/App.xaml.cs
@@ -18,7 +18,7 @@ public partial class App : Application
     private readonly ILogger<App> _logger;
     private readonly IAppManager _appManager;
     private readonly INotificationManager _notificationManager;
-    private MainWindow _mainWindow;
+    private static Window _mainWindow;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="App" /> class.
@@ -40,7 +40,7 @@ public static DispatcherQueue DispatcherQueue
         get; private set;
     }
 
-    public Window MainWindow
+    public static Window MainWindow
     {
         get => _mainWindow;
     }
@@ -85,6 +85,8 @@ protected override async void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventA
 
         // Initialize MainWindow here
         _mainWindow = Program.Host.Services.GetRequiredService<MainWindow>();
+        _appManager.SetAppTheme(MainWindow.Content);
+
         MainWindow.Activate();
     }
 

diff --git a/src/openHAB.Windows/Controls/FrameWidget.xaml b/src/openHAB.Windows/Controls/FrameWidget.xaml
@@ -25,7 +25,7 @@
     </local:WidgetBase.Resources>
     <StackPanel VerticalAlignment="Top"
                 CornerRadius="10"
-                Background="{StaticResource SolidBackgroundFillColorBaseAltBrush}">
+                Style="{StaticResource WidgetGroup}">
         <StackPanel Margin="5,5,0,0"
                     HorizontalAlignment="Stretch"
                     Orientation="Horizontal">

diff --git a/src/openHAB.Windows/Controls/RollershutterWidget.xaml b/src/openHAB.Windows/Controls/RollershutterWidget.xaml
@@ -22,7 +22,7 @@
                     Margin="0,0,12,0"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    BorderBrush="{StaticResource DarkAcrylicColor}"
+                    BorderBrush="{ThemeResource SolidBackgroundFillColorSecondaryBrush}"
                     BorderThickness="0">
             <Button HorizontalAlignment="Stretch"
                     Click="ButtonUp_Click"

diff --git a/src/openHAB.Windows/Controls/SetpointWidget.xaml b/src/openHAB.Windows/Controls/SetpointWidget.xaml
@@ -23,7 +23,7 @@
                     Margin="0,12,12,12"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    BorderBrush="{StaticResource DarkAcrylicColor}"
+                    BorderBrush="{ThemeResource SolidBackgroundFillColorSecondaryBrush}"
                     BorderThickness="0">
             <Grid>
                 <Grid.RowDefinitions>

diff --git a/src/openHAB.Windows/Controls/SliderWidget.xaml b/src/openHAB.Windows/Controls/SliderWidget.xaml
@@ -5,7 +5,7 @@
                   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                   xmlns:local="using:openHAB.Windows.Controls"
                   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-                  mc:Ignorable="d" 
+                  mc:Ignorable="d"
                   Loaded="SliderWidget_Loaded"
                   Visibility="{x:Bind Widget.Visibility}">
 
@@ -35,12 +35,12 @@
                             IsInteractive="True"
                             MaxAngle="150"
                             MinAngle="-150"
-                            ScaleBrush="{StaticResource DarkAcrylicColor}"
+                            ScaleBrush="{ThemeResource SolidBackgroundFillColorSecondaryBrush}"
                             ScaleWidth="10"
                             StepSize="1"
                             TrailBrush="{StaticResource OpenHABLightOrangeBrush}"
                             ValueBrush="Black"
                             ValueChanged="RadialSlider_OnValueChanged"
                             Value="{x:Bind Widget.Item.GetStateAsDoubleValue(), Mode=OneWay}" />
     </Grid>
-</local:WidgetBase>
+</local:WidgetBase>
diff --git a/src/openHAB.Windows/Controls/SwitchWidget.xaml b/src/openHAB.Windows/Controls/SwitchWidget.xaml
@@ -26,7 +26,7 @@
               Margin="0,0,12,0"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
-              BorderBrush="{StaticResource DarkAcrylicColor}"
+              BorderBrush="{StaticResource SolidBackgroundFillColorSecondaryBrush}"
               BorderThickness="2">
             <Grid.RowDefinitions>
                 <RowDefinition Height="1*" />
@@ -56,7 +56,7 @@
             <VisualStateGroup x:Name="ToggleStates">
                 <VisualState x:Name="OnState">
                     <VisualState.Setters>
-                        <Setter Target="OnBorder.(Border.Background)" Value="{StaticResource DarkAcrylicColor}" />
+                        <Setter Target="OnBorder.(Border.Background)" Value="{StaticResource SolidBackgroundFillColorSecondaryBrush}" />
                     </VisualState.Setters>
                     <Storyboard>
                         <ColorAnimation d:IsOptimized="True"
@@ -68,7 +68,7 @@
                 </VisualState>
                 <VisualState x:Name="OffState">
                     <VisualState.Setters>
-                        <Setter Target="OffBorder.(Border.Background)" Value="{StaticResource DarkAcrylicColor}" />
+                        <Setter Target="OffBorder.(Border.Background)" Value="{StaticResource SolidBackgroundFillColorSecondaryBrush}" />
                     </VisualState.Setters>
                     <Storyboard>
                         <ColorAnimation d:IsOptimized="True"

diff --git a/src/openHAB.Windows/MainWindow.xaml b/src/openHAB.Windows/MainWindow.xaml
@@ -31,15 +31,11 @@
                    TargetType="TextBlock">
                 <Setter Property="FontSize"
                         Value="42" />
-                <Setter Property="Foreground"
-                        Value="{StaticResource TextFillColorPrimaryBrush}" />
             </Style>
             <Style x:Key="BreakcrumbItemText"
                    TargetType="TextBlock">
                 <Setter Property="FontSize"
                         Value="21" />
-                <Setter Property="Foreground"
-                        Value="{StaticResource TextFillColorPrimaryBrush}" />
             </Style>
             <!-- Navigation View Styling -->
             <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver"
@@ -137,8 +133,6 @@
                              MenuItemsSource="{x:Bind Vm.Sitemaps, Mode=OneWay}"
                              MenuItemTemplateSelector="{StaticResource Selector}"
                              SelectedItem="{x:Bind Vm.SelectedMenuItem, Mode=TwoWay}"
-                             Foreground="{StaticResource TextFillColorPrimaryBrush}"
-                             Background="{StaticResource AcrylicBackgroundFillColorBaseBrush}"
                              IsBackButtonVisible="Collapsed"
                              AlwaysShowHeader="False"
                              IsSettingsVisible="True"
@@ -164,8 +158,7 @@
                                 MaxWidth="35"
                                 VerticalAlignment="Center">
                             <FontIcon Glyph="&#xE72C;"
-                                      FontSize="12"
-                                      Foreground="{StaticResource TextFillColorPrimaryBrush}" />
+                                      FontSize="12" />
                         </Button>
                     </StackPanel>
                     <BreadcrumbBar Grid.Row="1"
@@ -200,15 +193,13 @@
                                    Margin="10,-3,0,0"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource MenuSubHeader}"
-                                   Foreground="{StaticResource TextFillColorPrimaryBrush}"
                                    Text="Sitemaps" />
                         <Button Grid.Column="1"
                                 Margin="0,0,10,0"
                                 HorizontalAlignment="Right"
                                 Command="{Binding Vm.RefreshCommand, ElementName=Window}">
                             <FontIcon Glyph="&#xE72C;"
-                                      FontSize="12"
-                                      Foreground="{StaticResource TextFillColorPrimaryBrush}" />
+                                      FontSize="12" />
                         </Button>
                     </Grid>
                     <TextBlock Margin="10,10,10,0"
@@ -262,10 +253,10 @@
                               Margin="20"
                               HorizontalContentAlignment="Stretch"
                               VerticalContentAlignment="Stretch">
-                    <ProgressRing.Background>
+                    <!--<ProgressRing.Background>
                         <SolidColorBrush Color="Black"
                                          Opacity="0.7" />
-                    </ProgressRing.Background>
+                    </ProgressRing.Background>-->
                 </ProgressRing>
                 <TextBlock x:Uid="Loading" />
             </StackPanel>