diff --git a/public/theme.js b/public/theme.js
deleted file mode 100644
index 9d1c19e..0000000
--- a/public/theme.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// Immediately apply the theme before any content loads
-(function() {
- try {
- let theme = localStorage.getItem('theme') || 'system';
- const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
- // If theme is system, use the system preference
- if (theme === 'system') {
- theme = systemTheme ? 'dark' : 'light';
- }
-
- // Remove both classes and add the current one
- document.documentElement.classList.remove('light', 'dark');
- document.documentElement.classList.add(theme);
- document.documentElement.style.colorScheme = theme;
-
- // Watch for system theme changes
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
- if (localStorage.getItem('theme') === 'system') {
- document.documentElement.classList.remove('light', 'dark');
- document.documentElement.classList.add(e.matches ? 'dark' : 'light');
- document.documentElement.style.colorScheme = e.matches ? 'dark' : 'light';
- }
- });
- } catch (e) {
- // Fallback to light theme if localStorage is not available
- document.documentElement.classList.add('light');
- document.documentElement.style.colorScheme = 'light';
- }
-})();
diff --git a/src/app/globals.css b/src/app/globals.css
index 9548ecf..4e85784 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,11 +48,6 @@ html.vibrant {
--muted: #9d7dcc;
}
-/* Ensure background color is set before content loads */
-html {
- background-color: var(--background);
-}
-
body {
color: var(--foreground);
background: var(--background);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8aab32e..0406bb8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
import { ReactNode } from "react";
import { Providers } from "@/app/providers";
import { Metadata } from "next";
-import Script from "next/script";
import { Footer } from "@/components/Footer";
import { Toaster } from 'react-hot-toast';
@@ -54,7 +53,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
-
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
index d8310dd..513e9d1 100644
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -1,6 +1,6 @@
'use client';
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState, ReactNode, useLayoutEffect } from 'react';
const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
type Theme = (typeof THEMES)[number];
@@ -25,10 +25,20 @@ const getEffectiveTheme = (theme: Theme): Theme => {
};
export function ThemeProvider({ children }: { children: ReactNode }) {
- const [theme, setTheme] = useState(() => {
- if (typeof window === 'undefined') return 'system';
- return (localStorage.getItem('theme') as Theme) || 'system';
- });
+ const [theme, setTheme] = useState('system');
+ const [mounted, setMounted] = useState(false);
+
+ // Initialize theme as early as possible to prevent flash
+ useLayoutEffect(() => {
+ const stored = localStorage.getItem('theme') as Theme;
+ if (stored && THEMES.includes(stored)) {
+ setTheme(stored);
+ const effectiveTheme = getEffectiveTheme(stored);
+ document.documentElement.classList.add(effectiveTheme);
+ document.documentElement.style.colorScheme = effectiveTheme;
+ }
+ setMounted(true);
+ }, []);
const handleThemeChange = (newTheme: Theme) => {
const root = window.document.documentElement;
@@ -42,16 +52,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
setTheme(newTheme);
};
- // Handle system theme changes
useEffect(() => {
- /*
- * Handles system theme changes by listening to prefers-color-scheme media query.
- * Updates the theme when system preferences change and theme is set to 'system'.
- * Cleans up event listener on unmount.
- *
- * Dependencies:
- * - theme: Re-runs when the theme changes to update system preference handling
- */
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = () => {
@@ -68,6 +69,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
return () => mediaQuery.removeEventListener('change', handleChange);
}, [theme]);
+ // Prevent flash during SSR
+ if (!mounted) {
+ return null;
+ }
+
return (
{children}