From d809398e64fa64caa306db41f9c3f5e6bdf04a50 Mon Sep 17 00:00:00 2001
From: Kyle Grieder <kyle.grieder@gmail.com>
Date: Tue, 21 Apr 2026 22:45:35 -0600
Subject: [PATCH] fix: prevent white flash on page load when color scheme is
 auto

---
 apps/nextjs/src/app/[locale]/layout.tsx  |  1 +
 apps/nextjs/src/styles/color-scheme.scss | 12 ++++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 apps/nextjs/src/styles/color-scheme.scss

diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
index 03f159cd6..daab79726 100644
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from "next/font/google";
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
+import "~/styles/color-scheme.scss";
 import "~/styles/scroll-area.scss";
 
 import { notFound } from "next/navigation";
diff --git a/apps/nextjs/src/styles/color-scheme.scss b/apps/nextjs/src/styles/color-scheme.scss
new file mode 100644
index 000000000..ecfb4c780
--- /dev/null
+++ b/apps/nextjs/src/styles/color-scheme.scss
@@ -0,0 +1,12 @@
+// Prevent flash of white background when color scheme is "auto" and OS prefers dark.
+// CSS media queries are evaluated synchronously during the browser's initial paint,
+// before any JavaScript executes, so this eliminates the white→dark flicker.
+html[data-mantine-color-scheme="auto"] {
+  background-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-mantine-color-scheme="auto"] {
+    background-color: #242424;
+  }
+}