From 1f2ebb7ba26be18437f3890fe026cf535fb117ec Mon Sep 17 00:00:00 2001 From: Richard Roberson Date: Thu, 13 Feb 2025 00:56:48 -0700 Subject: [PATCH] Fix theme flickering on Chromium --- public/theme.js | 30 ------------------------------ src/app/globals.css | 5 ----- src/app/layout.tsx | 2 -- src/contexts/ThemeContext.tsx | 34 ++++++++++++++++++++-------------- 4 files changed, 20 insertions(+), 51 deletions(-) delete mode 100644 public/theme.js 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 }) { -