feat(templates): improve color handling in Boilerplate #8276 (#8285)

bitfoundation · Aug 12, 2024 · 8bad103 · 8bad103
1 parent 08af469
commit 8bad103
Show file tree

Hide file tree

Showing 24 changed files with 97 additions and 58 deletions.
diff --git a/.github/workflows/todo-sample.cd.yml b/.github/workflows/todo-sample.cd.yml
@@ -149,6 +149,16 @@ jobs:
     - name: Set app center secret
       run: (Get-Content TodoSample\src\Client\TodoSample.Client.Windows\Program.cs) -Replace 'appCenterSecret = null;', 'appCenterSecret = "39f576f2-7c16-4990-af3f-7b70509d41e2";' | Out-File -Encoding utf8 TodoSample\src\Client\TodoSample.Client.Windows\Program.cs
       shell: pwsh
+
+    - name: Delete App Splash Screen
+      run: rm TodoSample/src/Client/TodoSample.Client.Windows/Resources/SplashScreen.png
+
+    - name: Extract App Splash Screen from env
+      uses: timheuer/[email protected]
+      with:
+          fileDir: './TodoSample/src/Client/TodoSample.Client.Windows/Resources/'
+          fileName: 'SplashScreen.png'
+          encodedString: ${{ vars.TODO_WPF_SPLASH_SCREEN }}
 
     - name: Generate CSS/JS files
       run: dotnet build TodoSample\src\Client\TodoSample.Client.Core\TodoSample.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" --no-restore -c Release

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/app.ts b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/app.ts
@@ -17,11 +17,11 @@ BitTheme.init({
         if (newTheme === 'dark') {
             document.body.classList.add('theme-dark');
             document.body.classList.remove('theme-light');
-            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#0d1117');
         } else {
             document.body.classList.add('theme-light');
             document.body.classList.remove('theme-dark');
-            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#ffffff');
         }
+        const primaryBgColor = getComputedStyle(document.documentElement).getPropertyValue('--bit-clr-bg-pri');
+        document.querySelector("meta[name=theme-color]")!.setAttribute('content', primaryBgColor);
     }
 });
diff --git a/...ates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs b/...ates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/ThemeColors.cs
@@ -0,0 +1,8 @@
+namespace Boilerplate.Client.Core.Styles;
+
+public class ThemeColors
+{
+    public static readonly string PrimaryDarkBgColor = "#000000";
+    public static readonly string PrimaryLightBgColor = "#FFFFFF";
+    // In case you need to change the background color, make sure to also update app.scss's --bit-clr-bg-pri accordingly.
+}
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/app.scss
@@ -2,6 +2,11 @@
     --bit-status-bar-height: 0px;
 }
 
+:root[bit-theme="dark"] {
+    --bit-clr-bg-pri: #000000;
+    // In case you need to change the background color, make sure to also update ThemeColors.cs's PrimaryDarkBgColor accordingly.
+}
+
 * {
     box-sizing: border-box;
     font-family: "Segoe UI";

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/MainPage.xaml b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/MainPage.xaml
@@ -4,17 +4,13 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
     xmlns:core="clr-namespace:Boilerplate.Client.Core;assembly=Boilerplate.Client.Core"
-    BackgroundColor="{AppThemeBinding Light={OnPlatform Android=#0D2960,
-                                                        Default=#ffffff},
-                                      Dark={OnPlatform Android=#0D2960,
-                                                       Default=#000000}}">
-
+    xmlns:themeColors="clr-namespace:Boilerplate.Client.Core.Styles;assembly=Boilerplate.Client.Core"
+    BackgroundColor="{AppThemeBinding Light={x:Static themeColors:ThemeColors.PrimaryLightBgColor},
+                                      Dark={x:Static themeColors:ThemeColors.PrimaryDarkBgColor}}">
     <b:BlazorWebView
-        x:Name="blazorWebView"
-        BackgroundColor="{AppThemeBinding Light={OnPlatform Android=#0D2960,
-                                                            Default=#ffffff},
-                                          Dark={OnPlatform Android=#0D2960,
-                                                           Default=#000000}}"
+        x:Name="AppWebView"
+        BackgroundColor="{AppThemeBinding Light={x:Static themeColors:ThemeColors.PrimaryLightBgColor},
+                                          Dark={x:Static themeColors:ThemeColors.PrimaryDarkBgColor}}"
         HostPage="wwwroot/index.html">
         <b:BlazorWebView.RootComponents>
             <b:RootComponent ComponentType="{x:Type core:Routes}" Selector="#app-container" />

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/MauiProgram.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/MauiProgram.cs
@@ -3,7 +3,9 @@
 using Maui.InAppReviews;
 using Maui.Android.InAppUpdates;
 using Microsoft.Maui.LifecycleEvents;
-using Boilerplate.Client.Core;
+using Boilerplate.Client.Core.Styles;
+using Boilerplate.Client.Maui.Services;
+using Microsoft.Maui.Platform;
 #if iOS || Mac
 using UIKit;
 using WebKit;
@@ -55,7 +57,7 @@ bool HandleAppLink(NSUserActivity? userActivity)
                     {
                         var url = $"{userActivity.WebPageUrl.Path}?{userActivity.WebPageUrl.Query}";
 
-                        _ = Routes.OpenUniversalLink(url);
+                        _ = Core.Routes.OpenUniversalLink(url);
 
                         return true;
                     }
@@ -94,11 +96,10 @@ private static void SetupBlazorWebView()
         BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("CustomBlazorWebViewMapper", static (handler, view) =>
         {
             var webView = handler.PlatformView;
+            var webViewBackgroundColor = AppInfo.Current.RequestedTheme == AppTheme.Dark ?
+                ThemeColors.PrimaryDarkBgColor : ThemeColors.PrimaryLightBgColor;
 #if Windows
-            if (AppInfo.Current.RequestedTheme == AppTheme.Dark)
-            {
-                webView.DefaultBackgroundColor = Microsoft.UI.Colors.Black;
-            }
+            webView.DefaultBackgroundColor = Color.FromArgb(webViewBackgroundColor).ToWindowsColor();
 
             if (AppEnvironment.IsDev() is false)
             {
@@ -132,7 +133,7 @@ private static void SetupBlazorWebView()
                 }
             }
 #elif Android
-            webView.SetBackgroundColor(Android.Graphics.Color.Transparent);
+            webView.SetBackgroundColor(Android.Graphics.Color.ParseColor(webViewBackgroundColor));
 
             webView.OverScrollMode = Android.Views.OverScrollMode.Never;
 

diff --git a/...lerplate/src/Client/Boilerplate.Client.Maui/Platforms/Android/Resources/values/colors.xml b/...lerplate/src/Client/Boilerplate.Client.Maui/Platforms/Android/Resources/values/colors.xml
@@ -1,6 +1,3 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorPrimary">#0D2960</color>
-    <color name="colorPrimaryDark">#0D2960</color>
-    <color name="colorAccent">#0D2960</color>
 </resources>
diff --git a/...late/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Services/MauiDeviceCoordinator.cs b/...late/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Services/MauiDeviceCoordinator.cs
@@ -1,4 +1,6 @@
 //-:cnd:noEmit
+using Boilerplate.Client.Core.Styles;
+
 namespace Boilerplate.Client.Maui.Services;
 
 /// <summary>
@@ -36,7 +38,7 @@ public async Task ApplyTheme(bool isDark)
             window!.DecorView!.SystemUiFlags &= ~Android.Views.SystemUiFlags.LightStatusBar;
         }
 
-        window.SetStatusBarColor(isDark ? Android.Graphics.Color.ParseColor("#0D1117") : Android.Graphics.Color.White);
+        window.SetStatusBarColor(Android.Graphics.Color.ParseColor(isDark ? ThemeColors.PrimaryDarkBgColor : ThemeColors.PrimaryLightBgColor));
 #elif IOS
         var statusBarStyle = isDark ? UIKit.UIStatusBarStyle.LightContent : UIKit.UIStatusBarStyle.DarkContent;
         await Device.InvokeOnMainThreadAsync(() =>

diff --git a/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html b/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html
@@ -34,9 +34,6 @@
     <!--#endif-->
 
     <style>
-        body {
-            background-color: #0D2960;
-        }
 
         .bit-lds-grid div {
             background-color: #123456;
@@ -131,8 +128,8 @@
     </style>
 </head>
 
-<body class="bit-blazor-hybrid">
-    <div id="app-container" class="bit-css-clr-bg-primary bit-css-clr-fg-primary">
+<body class="bit-css-clr-bg-pri bit-css-clr-fg-pri bit-blazor-hybrid">
+    <div id="app-container">
         <div class="bit-lds-wrapper">
             <div class="bit-lds-grid">
                 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

diff --git a/...emplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/index.html b/...emplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/index.html
@@ -24,7 +24,7 @@
     <link href="images/icons/bit-icon-512.png" rel="apple-touch-icon" sizes="512x512" />
     <link href="manifest.json" rel="manifest" />
 </head>
-<body class="bit-css-clr-bg-primary bit-css-clr-fg-primary bit-blazor-web">
+<body class="bit-css-clr-bg-pri bit-css-clr-fg-pri bit-blazor-web">
     <link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
     <link href="_content/Bit.BlazorUI.Icons/styles/bit.blazorui.icons.css" rel="stylesheet" />
     <link href="_content/Bit.BlazorUI.Assets/styles/bit.blazorui.assets.css" rel="stylesheet" />

diff --git a/...lates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/manifest.json b/...lates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/manifest.json
@@ -9,7 +9,7 @@
     "theme_color": "#2EA3FF",
     "related_applications": [],
     "name": "bit Boilerplate",
-    "background_color": "#0D1117",
+    "background_color": "#0D2960",
     "short_name": "bit Boilerplate",
     "prefer_related_applications": false,
     "display_override": [ "window-controls-overlay" ],

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/App.xaml b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/App.xaml
@@ -5,4 +5,10 @@
     DispatcherUnhandledException="App_DispatcherUnhandledException"
     Exit="App_Exit"
     Startup="App_Startup"
-    StartupUri="MainWindow.xaml" />
+    StartupUri="MainWindow.xaml">
+    <Application.Resources>
+        <ResourceDictionary>
+            <SolidColorBrush x:Key="PrimaryBgColor">#0D2960</SolidColorBrush>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/App.xaml.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/App.xaml.cs
@@ -3,11 +3,31 @@
 using System.Windows;
 using System.Text.Json;
 using System.Collections;
+using Microsoft.Win32;
+using System.Windows.Media;
+using Boilerplate.Client.Core.Styles;
 
 namespace Boilerplate.Client.Windows;
 
 public partial class App
 {
+    public App()
+    {
+        InitializeComponent();
+
+        var splash = new SplashScreen(typeof(App).Assembly, @"Resources\SplashScreen.png");
+        splash.Show(autoClose: true, topMost: true);
+
+        Resources["PrimaryBgColor"] = new BrushConverter().ConvertFrom(IsDarkTheme() ? ThemeColors.PrimaryDarkBgColor : ThemeColors.PrimaryLightBgColor);
+    }
+
+    private static bool IsDarkTheme()
+    {
+        using var key = Registry.CurrentUser.OpenSubKey(@"Software\Microsoft\Windows\CurrentVersion\Themes\Personalize");
+        var value = key?.GetValue("AppsUseLightTheme");
+        return value is int i && i == 0;
+    }
+
     const string WindowsStorageFilename = "windows.storage.json";
 
     private void App_Startup(object sender, StartupEventArgs e)
@@ -38,7 +58,7 @@ private void App_DispatcherUnhandledException(object sender, System.Windows.Thre
     {
         try
         {
-            ((MainWindow)MainWindow).BlazorWebView.Services.GetRequiredService<IExceptionHandler>().Handle(e.Exception);
+            ((MainWindow)MainWindow).AppWebView.Services.GetRequiredService<IExceptionHandler>().Handle(e.Exception);
         }
         catch { }
 

diff --git a/...e/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj b/...e/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj
@@ -56,6 +56,10 @@
         <IsolatedScssFiles Include="**\*.razor.scss" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Resource Include="Resources\**\*.*" />
+    </ItemGroup>
+
     <Target Name="BeforeBuildTasks" AfterTargets="CoreCompile">
         <CallTarget Targets="BuildIsolatedScssFiles" />
     </Target>

diff --git a/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/MainWindow.xaml b/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/MainWindow.xaml
@@ -7,11 +7,12 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="Boilerplate"
+    Background="{DynamicResource PrimaryBgColor}"
     WindowState="Maximized"
     mc:Ignorable="d">
     <Grid>
         <blazor:BlazorWebView
-            x:Name="BlazorWebView"
+            x:Name="AppWebView"
             x:FieldModifier="public"
             HostPage="wwwroot\index.html">
             <blazor:BlazorWebView.RootComponents>

diff --git a/...ates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/MainWindow.xaml.cs b/...ates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/MainWindow.xaml.cs
@@ -10,28 +10,29 @@ public MainWindow()
         var services = new ServiceCollection();
         services.ConfigureServices();
         InitializeComponent();
-        BlazorWebView.Services = services.BuildServiceProvider();
+        AppWebView.Services = services.BuildServiceProvider();
         if (CultureInfoManager.MultilingualEnabled)
         {
-            BlazorWebView.Services.GetRequiredService<CultureInfoManager>().SetCurrentCulture(App.Current.Properties["Culture"]?.ToString() ?? CultureInfo.CurrentUICulture.Name);
+            AppWebView.Services.GetRequiredService<CultureInfoManager>().SetCurrentCulture(App.Current.Properties["Culture"]?.ToString() ?? CultureInfo.CurrentUICulture.Name);
         }
-        BlazorWebView.Services.GetRequiredService<IPubSubService>().Subscribe(PubSubMessages.CULTURE_CHANGED, async culture =>
+        AppWebView.Services.GetRequiredService<IPubSubService>().Subscribe(PubSubMessages.CULTURE_CHANGED, async culture =>
         {
             App.Current.Shutdown();
             Application.Restart();
         });
-        BlazorWebView.Loaded += async delegate
+        AppWebView.Loaded += async delegate
         {
-            await BlazorWebView.WebView.EnsureCoreWebView2Async();
-            var settings = BlazorWebView.WebView.CoreWebView2.Settings;
+            AppWebView.WebView.DefaultBackgroundColor = ColorTranslator.FromHtml(Background.ToString());
+            await AppWebView.WebView.EnsureCoreWebView2Async();
+            var settings = AppWebView.WebView.CoreWebView2.Settings;
             if (AppEnvironment.IsDev() is false)
             {
                 settings.IsZoomControlEnabled = false;
                 settings.AreBrowserAcceleratorKeysEnabled = false;
             }
-            BlazorWebView.WebView.NavigationCompleted += async delegate
+            AppWebView.WebView.NavigationCompleted += async delegate
             {
-                await BlazorWebView.WebView.ExecuteScriptAsync("Blazor.start()");
+                await AppWebView.WebView.ExecuteScriptAsync("Blazor.start()");
             };
         };
     }

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Program.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Program.cs
@@ -22,12 +22,11 @@ public static void Main(string[] args)
         // https://github.com/velopack/velopack
         VelopackApp.Build().Run();
         var application = new App();
-        application.InitializeComponent();
         Task.Run(async () =>
         {
             try
             {
-                var services = await App.Current.Dispatcher.InvokeAsync(() => ((MainWindow)App.Current.MainWindow).BlazorWebView.Services);
+                var services = await App.Current.Dispatcher.InvokeAsync(() => ((MainWindow)App.Current.MainWindow).AppWebView.Services);
                 var windowsUpdateSettings = services.GetRequiredService<IOptionsSnapshot<WindowsUpdateSettings>>().Value;
                 if (windowsUpdateSettings?.FilesUrl is null)
                 {

diff --git a/...it.Boilerplate/src/Client/Boilerplate.Client.Windows/Resources/SplashScreen.png b/...it.Boilerplate/src/Client/Boilerplate.Client.Windows/Resources/SplashScreen.png
diff --git a/...ate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Components/EmailTokenTemplate.razor b/...ate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Components/EmailTokenTemplate.razor
@@ -11,7 +11,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-TypeEntity" content="text/html; charset=UTF-8" />
-    <title>@EmailLocalizer[nameof(EmailStrings.ConfirmationEmailSubject), Model.Token]</title>
+    <title>@EmailLocalizer[nameof(EmailStrings.ConfirmationEmailSubject), Model.Token!]</title>
 </head>
 <body dir="@(CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? "rtl" : null)" style="font-family:Arial,sans-serif">
     <main style="padding:50px">

diff --git a/...ate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Components/SocialSignedInPage.razor b/...ate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Components/SocialSignedInPage.razor
@@ -29,8 +29,8 @@
 
         @@media (prefers-color-scheme: dark) {
             body {
-                color: #e8e8e8;
-                background: #161b22;
+                color: #E8E8E8;
+                background: #161B22;
             }
         }
     </style>

diff --git a/...plate/src/Server/Boilerplate.Server.Api/Data/Configurations/Identity/UserConfiguration.cs b/...plate/src/Server/Boilerplate.Server.Api/Data/Configurations/Identity/UserConfiguration.cs
@@ -17,13 +17,13 @@ public void Configure(EntityTypeBuilder<User> builder)
             EmailConfirmed = true,
             LockoutEnabled = true,
             Gender = Gender.Other,
-            BirthDate = new DateTime(2023, 1, 1),
+            BirthDate = new DateTimeOffset(new DateOnly(2023, 1, 1), default, default),
             FullName = "Boilerplate test account",
             UserName = userName,
             NormalizedUserName = userName.ToUpperInvariant(),
             Email = email,
             NormalizedEmail = email.ToUpperInvariant(),
-            EmailTokenRequestedOn = new DateTime(2023,1,1),
+            EmailTokenRequestedOn = new DateTimeOffset(new DateOnly(2023, 1, 1), default, default),
             PhoneNumber = "+31684207362",
             PhoneNumberConfirmed = true,
             SecurityStamp = "959ff4a9-4b07-4cc1-8141-c5fc033daf83",

diff --git a/...ate/src/Server/Boilerplate.Server.Api/Data/Configurations/Product/ProductConfiguration.cs b/...ate/src/Server/Boilerplate.Server.Api/Data/Configurations/Product/ProductConfiguration.cs
@@ -6,7 +6,7 @@ public class ProductConfiguration : IEntityTypeConfiguration<Product>
 {
     public void Configure(EntityTypeBuilder<Product> builder)
     {
-        DateTime baseDate = DateTime.Parse("2022-07-12");
+        DateTimeOffset baseDate = DateTimeOffset.Parse("2022-07-12", styles: DateTimeStyles.AssumeUniversal);
 
         builder.HasData(
                 new() { Id = Guid.Parse("9a59dda2-7b12-4cc1-9658-d2586eef91d4"), Name = "Mustang", Price = 27155, Description = "The Ford Mustang is ranked #1 in Sports Cars", CreatedOn = baseDate.AddDays(-10), CategoryId = Guid.Parse("31d78bd0-0b4f-4e87-b02f-8f66d4ab2845") },

diff --git a/...late/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Services/AppSecureJwtDataFormat.cs b/...late/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Services/AppSecureJwtDataFormat.cs
@@ -57,7 +57,7 @@ public string Protect(AuthenticationTicket data, string? purpose)
             {
                 Issuer = appSettings.Identity.Issuer,
                 Audience = appSettings.Identity.Audience,
-                IssuedAt = DateTime.UtcNow,
+                IssuedAt = DateTimeOffset.UtcNow.DateTime,
                 Expires = data.Properties.ExpiresUtc!.Value.UtcDateTime,
                 SigningCredentials = new SigningCredentials(validationParameters.IssuerSigningKey, SecurityAlgorithms.RsaSha512),
                 Subject = new ClaimsIdentity(data.Principal.Claims),

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Enums/EmailTemplate.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Enums/EmailTemplate.cs