From 6b33f1585849b0b0e75e251230fc814ee99b6ab1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 20:50:22 +0000
Subject: [PATCH 1/3] Initial plan
From d39fc12a58d488fa44d46e8640f364e9fb4ef854 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 20:55:59 +0000
Subject: [PATCH 2/3] Fix white/dark mode toggle and add browser preference
detection
Co-authored-by: AFeuerpfeil <36232041+AFeuerpfeil@users.noreply.github.com>
---
src/app/globals.css | 12 ++++++------
src/app/layout.tsx | 25 +++++++++++++++++++++++-
src/app/theme-provider.tsx | 40 +++++++++++++++++++++++---------------
3 files changed, 54 insertions(+), 23 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 0613ae6..219bb4e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,18 +5,18 @@
--foreground: #171717;
}
-@theme inline {
- --color-background: var(--background);
- --color-foreground: var(--foreground);
-}
-
@media (prefers-color-scheme: dark) {
- :root {
+ :root:not(.light) {
--background: #0a0a0a;
--foreground: #ededed;
}
}
+.dark {
+ --background: #0a0a0a;
+ --foreground: #ededed;
+}
+
body {
background: var(--background);
color: var(--foreground);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa1e268..76c9fe9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,7 +13,30 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
+
+
+
+
{children}
diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index ee580ab..98f8120 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -11,29 +11,37 @@ interface ThemeContextType {
const ThemeContext = createContext(undefined);
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
- const [theme, setTheme] = useState(() => {
- if (typeof window === "undefined") {
- return "light";
- }
+function getInitialTheme(): Theme {
+ if (typeof window === "undefined") {
+ return "light";
+ }
+
+ const savedTheme = window.localStorage.getItem("theme");
+ if (savedTheme === "light" || savedTheme === "dark") {
+ return savedTheme;
+ }
- const savedTheme = window.localStorage.getItem("theme");
- if (savedTheme === "light" || savedTheme === "dark") {
- return savedTheme;
- }
+ const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ return isDark ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+ const [theme, setTheme] = useState("light");
+ const [mounted, setMounted] = useState(false);
- const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
- return isDark ? "dark" : "light";
- });
+ useEffect(() => {
+ setMounted(true);
+ const initialTheme = getInitialTheme();
+ setTheme(initialTheme);
+ document.documentElement.classList.toggle("dark", initialTheme === "dark");
+ }, []);
useEffect(() => {
- if (typeof window === "undefined") return;
+ if (!mounted) return;
document.documentElement.classList.toggle("dark", theme === "dark");
- }, [theme]);
+ }, [theme, mounted]);
const toggleTheme = () => {
- if (typeof window === "undefined") return;
-
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
window.localStorage.setItem("theme", newTheme);
From da42e52261784888d649c08f279d13b01d7aa673 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 31 Jan 2026 20:58:03 +0000
Subject: [PATCH 3/3] Address code review feedback - simplify CSS and add guard
to toggleTheme
Co-authored-by: AFeuerpfeil <36232041+AFeuerpfeil@users.noreply.github.com>
---
src/app/globals.css | 7 -------
src/app/theme-provider.tsx | 1 +
2 files changed, 1 insertion(+), 7 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 219bb4e..2373478 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -5,13 +5,6 @@
--foreground: #171717;
}
-@media (prefers-color-scheme: dark) {
- :root:not(.light) {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
.dark {
--background: #0a0a0a;
--foreground: #ededed;
diff --git a/src/app/theme-provider.tsx b/src/app/theme-provider.tsx
index 98f8120..71721fe 100644
--- a/src/app/theme-provider.tsx
+++ b/src/app/theme-provider.tsx
@@ -42,6 +42,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
}, [theme, mounted]);
const toggleTheme = () => {
+ if (!mounted) return;
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
window.localStorage.setItem("theme", newTheme);