Fix theme flickering on Chromium

richardr1126 · Feb 13, 2025 · 1f2ebb7 · 1f2ebb7
1 parent bc790df
commit 1f2ebb7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 51 deletions.
diff --git a/public/theme.js b/public/theme.js
diff --git 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
@@ -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 }) {
     <html lang="en" suppressHydrationWarning>
       <head>
         <meta name="color-scheme" content="light dark" />
-        <Script src="/theme.js" strategy="beforeInteractive" />
       </head>
       <body className="antialiased">
         <Providers>

diff --git 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<Theme>(() => {
-    if (typeof window === 'undefined') return 'system';
-    return (localStorage.getItem('theme') as Theme) || 'system';
-  });
+  const [theme, setTheme] = useState<Theme>('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 (
     <ThemeContext.Provider value={{ theme, setTheme: handleThemeChange }}>
       {children}