Apply global color-scheme to reflect theme in use (#2854)

microsoft · Oct 24, 2024 · 456877a · 456877a
1 parent 286b4f1
commit 456877a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.js b/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.js
@@ -3,6 +3,7 @@ export function addThemeChangeEvent(dotNetHelper, id) {
 
     if (element) {
         element.addEventListener("onchange", (e) => {
+            UpdateBodyDataSetTheme(e.detail.newValue);
             try {
                 // setTimeout: https://github.com/dotnet/aspnetcore/issues/26809
                 setTimeout(() => {
@@ -15,7 +16,8 @@ export function addThemeChangeEvent(dotNetHelper, id) {
 
         try {
             // This can fail when localStorage does not contain a valid JSON object
-            const theme = element.themeStorage.readLocalStorage()
+            const theme = element.themeStorage.readLocalStorage();
+            UpdateBodyDataSetTheme(theme.mode);
             return theme == null ? theme : JSON.stringify(theme);
         } catch (error) {
             ClearLocalStorage(id);
@@ -46,3 +48,12 @@ export function ClearLocalStorage(id) {
         element.themeStorage.clearLocalStorage();
     }
 }
+
+function UpdateBodyDataSetTheme(theme) {
+    if (theme) {
+        document.body.dataset.theme = theme;
+    } else {
+        const isSystemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.body.dataset.theme = isSystemDark ? 'dark' : 'light';
+    }
+}
diff --git a/src/Core/wwwroot/css/reboot.css b/src/Core/wwwroot/css/reboot.css
@@ -34,6 +34,16 @@ body, .body {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+body[data-theme="light"],
+body[data-theme="system-light"] {
+    color-scheme: light;
+}
+
+body[data-theme="dark"],
+body[data-theme="system-dark"] {
+    color-scheme: dark;
+}
+
 hr {
     margin: 1rem 0;
     color: inherit;