Add optional dark mode flash prevention styles to index.html and App.razor (#4485)

dvoituron · web-flow · commit 8bd7fe0ad762 · 2026-01-27T11:42:08.000+01:00
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Dark/ThemeDark.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Theme/Dark/ThemeDark.md
@@ -64,6 +64,27 @@ body[data-theme="dark"] {
 }
 ```
 
+## Flash effect (optional)
+
+When using the dark theme, you may notice a brief white "flash" before the page fully renders. 
+This occurs because the browser's default background color is white, and the FluentUI styles may not load instantly—especially on slower network connections.
+
+To prevent this flash, add the following CSS to your `index.html`, `App.razor`, or `_layout.cshtml` file (in the `<head>...</head>` HTML section).
+This sets a dark background color immediately, before the FluentUI styles are applied.
+
+```html
+<style>
+  @media (prefers-color-scheme: dark) {
+    body {
+      background-color: #292929;
+      color: #ffffff;
+    }
+  }
+</style>
+```
+
+**Notes:** In Razor/CSHTML files, escape the `@` symbol by doubling it: use `@@media` instead of `@media`.
+
 ## themeChanged event
 
 A JavaScript `themeChanged` event is triggered each time the `data-theme` attribute changes.
diff --git a/examples/Demo/FluentUI.Demo.Client/wwwroot/index.html b/examples/Demo/FluentUI.Demo.Client/wwwroot/index.html
@@ -13,6 +13,19 @@
   <base href="/" />
   <link rel="stylesheet" href="app.css" />
   <link rel="stylesheet" href="FluentUI.Demo.Client.styles.css" />
+  <style>
+        /* Set the default dark mode styles,
+           used before the Fluent UI theme switcher is initialized
+           This is to avoid a flash of white when in dark mode.
+           Update as needed to match your dark theme.
+        */
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #292929;
+                color: #ffffff;
+            }
+        }
+  </style>
 </head>
 
 <body>
diff --git a/examples/Demo/FluentUI.Demo/Components/App.razor b/examples/Demo/FluentUI.Demo/Components/App.razor
@@ -18,6 +18,20 @@
     <link rel="stylesheet" href="FluentUI.Demo.styles.css" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <HeadOutlet @rendermode="@DemoRenderMode" />
+
+    <style>
+        /* Set the default dark mode styles, 
+           used before the Fluent UI theme switcher is initialized
+           This is to avoid a flash of white when in dark mode.
+           Update as needed to match your dark theme.
+        */
+        @@media (prefers-color-scheme: dark) {
+            body {
+                background-color: #292929;
+                color: #ffffff;
+            }
+        }
+    </style>
 </head>
 
 <body use-reboot="@reboot">
