Docs: implement theme by storing and reading from cookies (#6300)

Author: stsrki

Documentation/Blazorise.Docs/App.razor

@@ -13,6 +13,27 @@
 
     <HeadOutlet @rendermode="RenderMode.InteractiveServer" />
 
+    <script>
+        (function () {
+            const themeCookieName = "bdocs-theme";
+            const systemCookieName = "bdocs-system";
+            const readCookie = (name) => document.cookie.split('; ').find((row) => row.startsWith(name + '='))?.split('=')[1];
+            const storedTheme = readCookie(themeCookieName) || "System";
+            const systemIsDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const shouldUseDark = storedTheme === "Dark" || (storedTheme === "System" && systemIsDark);
+            const target = document.documentElement;
+
+            if (shouldUseDark) {
+                target.setAttribute("data-bs-theme", "dark");
+            }
+            else {
+                target.removeAttribute("data-bs-theme");
+            }
+
+            document.cookie = `${systemCookieName}=${systemIsDark};path=/;max-age=31536000;SameSite=Lax`;
+        })();
+    </script>
+
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Documentation/Blazorise.Docs/Routes.razor.cs

@@ -1,30 +1,38 @@
 using System.Threading.Tasks;
-using Blazored.LocalStorage;
 using Blazorise.Docs.Services;
-using Blazorise.Modules;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Http;
+using Microsoft.JSInterop;
 
 namespace Blazorise.Docs;
 
 public partial class Routes
 {
+    private const string ThemeCookieName = "bdocs-theme";
+    private const string SystemThemeCookieName = "bdocs-system";
+    private bool jsReady;
+
     [Inject] private ThemeService ThemeService { get; set; }
-    [Inject] private IJSUtilitiesModule JSUtilitiesModule { get; set; }
-    [Inject] ILocalStorageService LocalStorage { get; set; }
+    [Inject] private IHttpContextAccessor HttpContextAccessor { get; set; }
+    [Inject] private IJSRuntime JSRuntime { get; set; }
 
     protected override void OnInitialized()
     {
         ThemeService.ThemeChanged += OnThemeChanged;
 
+        TryLoadThemeFromCookie();
+
         base.OnInitialized();
     }
 
     protected override async Task OnAfterRenderAsync( bool firstRender )
     {
         if ( firstRender )
         {
-            var theme = await LocalStorage.GetItemAsync<string>( "theme" );
-            var systemIsDarkMode = await JSUtilitiesModule.IsSystemDarkMode();
+            var theme = await JSRuntime.InvokeAsync<string>( "blazoriseDocs.theme.getStoredTheme" );
+            var systemIsDarkMode = await JSRuntime.InvokeAsync<bool>( "blazoriseDocs.theme.isSystemDark" );
+
+            jsReady = true;
 
             ThemeService.SetTheme( theme, systemIsDarkMode );
         }
@@ -39,17 +47,28 @@ public void Dispose()
 
     async void OnThemeChanged( object sender, string theme )
     {
-        if ( ThemeService.ShouldDark )
-        {
-            await JSUtilitiesModule.AddAttributeToBody( "data-bs-theme", "dark" );
-        }
-        else
-        {
-            await JSUtilitiesModule.RemoveAttributeFromBody( "data-bs-theme" );
-        }
+        if ( !jsReady )
+            return;
 
-        await LocalStorage.SetItemAsync( "theme", theme );
+        await JSRuntime.InvokeVoidAsync( "blazoriseDocs.theme.save", theme, ThemeService.SystemIsDarkMode );
 
         await InvokeAsync( StateHasChanged );
     }
+
+    private void TryLoadThemeFromCookie()
+    {
+        var httpContext = HttpContextAccessor.HttpContext;
+
+        if ( httpContext is null )
+            return;
+
+        if ( httpContext.Request.Cookies.TryGetValue( ThemeCookieName, out var themeFromCookie ) )
+        {
+            var systemIsDarkMode = httpContext.Request.Cookies.TryGetValue( SystemThemeCookieName, out var systemCookie )
+                && bool.TryParse( systemCookie, out var parsedSystemDark )
+                && parsedSystemDark;
+
+            ThemeService.SetTheme( themeFromCookie, systemIsDarkMode );
+        }
+    }
 }

Documentation/Blazorise.Docs/Services/ThemeService.cs

@@ -4,11 +4,11 @@ namespace Blazorise.Docs.Services;
 
 public class ThemeService
 {
-    const string DarkTheme = "Dark";
-    const string LightTheme = "Light";
-    const string SystemTheme = "System";
+    public const string DarkTheme = "Dark";
+    public const string LightTheme = "Light";
+    public const string SystemTheme = "System";
 
-    public string CurrentTheme = LightTheme;
+    public string CurrentTheme { get; private set; } = SystemTheme;
     public bool SystemIsDarkMode { get; private set; }
 
     public EventHandler<string> ThemeChanged;
@@ -35,7 +35,7 @@ public void SetSystemTheme()
 
     public void SetTheme( string theme, bool systemIsDarkMode )
     {
-        CurrentTheme = theme;
+        CurrentTheme = NormalizeTheme( theme );
         SystemIsDarkMode = systemIsDarkMode;
 
         if ( ShouldDark )
@@ -51,4 +51,13 @@ public void SetTheme( string theme, bool systemIsDarkMode )
 
         ThemeChanged?.Invoke( this, CurrentTheme );
     }
+
+    private static string NormalizeTheme( string theme )
+        => theme switch
+        {
+            DarkTheme => DarkTheme,
+            LightTheme => LightTheme,
+            SystemTheme => SystemTheme,
+            _ => SystemTheme
+        };
 }

Documentation/Blazorise.Docs/wwwroot/blazorise.docs.js

@@ -115,3 +115,44 @@ window.blazorisePRO = {
         }
     }
 };
+
+const blazoriseDocsThemeCookieName = "bdocs-theme";
+const blazoriseDocsSystemCookieName = "bdocs-system";
+
+window.blazoriseDocs.theme = {
+    getStoredTheme: () => {
+        const cookie = document.cookie.split("; ").find((row) => row.startsWith(blazoriseDocsThemeCookieName + "="));
+
+        return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
+    },
+    isSystemDark: () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches,
+    setStoredTheme: (theme) => {
+        const normalizedTheme = theme && theme.length ? theme : "System";
+
+        document.cookie = `${blazoriseDocsThemeCookieName}=${encodeURIComponent(normalizedTheme)};path=/;max-age=31536000;SameSite=Lax`;
+    },
+    setSystemPreference: (isDark) => {
+        document.cookie = `${blazoriseDocsSystemCookieName}=${isDark};path=/;max-age=31536000;SameSite=Lax`;
+    },
+    applyTheme: (theme, systemIsDarkMode) => {
+        const normalizedTheme = theme && theme.length ? theme : "System";
+        const prefersDark = normalizedTheme === "Dark" || (normalizedTheme === "System" && (typeof systemIsDarkMode === "boolean" ? systemIsDarkMode : window.blazoriseDocs.theme.isSystemDark()));
+        const body = document.body;
+        const html = document.documentElement;
+
+        if (prefersDark) {
+            html && html.setAttribute("data-bs-theme", "dark");
+            body && body.setAttribute("data-bs-theme", "dark");
+        } else {
+            html && html.removeAttribute("data-bs-theme");
+            body && body.removeAttribute("data-bs-theme");
+        }
+    },
+    save: (theme, systemIsDarkMode) => {
+        const prefersDark = typeof systemIsDarkMode === "boolean" ? systemIsDarkMode : window.blazoriseDocs.theme.isSystemDark();
+
+        window.blazoriseDocs.theme.setStoredTheme(theme);
+        window.blazoriseDocs.theme.setSystemPreference(prefersDark);
+        window.blazoriseDocs.theme.applyTheme(theme, prefersDark);
+    }
+};