danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix theme flickering on Chromium

Browse source
This commit is contained in:
Richard Roberson 2025-02-13 00:56:48 -07:00
parent bc790df89e
commit 1f2ebb7ba2
4 changed files with 20 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
public/theme.js
View file

@ -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';
}
})();

5
src/app/globals.css
View file

@ -48,11 +48,6 @@ html.vibrant {
--muted: #9d7dcc; --muted: #9d7dcc;
} }
/* Ensure background color is set before content loads */
html {
background-color: var(--background);
}
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);

2
src/app/layout.tsx
View file

@ -2,7 +2,6 @@ import "./globals.css";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { Metadata } from "next"; import { Metadata } from "next";
import Script from "next/script";
import { Footer } from "@/components/Footer"; import { Footer } from "@/components/Footer";
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
@ -54,7 +53,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head> <head>
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<Script src="/theme.js" strategy="beforeInteractive" />
</head> </head>
<body className="antialiased"> <body className="antialiased">
<Providers> <Providers>

34
src/contexts/ThemeContext.tsx
View file

@ -1,6 +1,6 @@
'use client'; '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; const THEMES = ['system', 'light', 'dark', 'aqua', 'forest', 'vibrant'] as const;
type Theme = (typeof THEMES)[number]; type Theme = (typeof THEMES)[number];
@ -25,10 +25,20 @@ const getEffectiveTheme = (theme: Theme): Theme => {
}; };
export function ThemeProvider({ children }: { children: ReactNode }) { export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<Theme>(() => { const [theme, setTheme] = useState<Theme>('system');
if (typeof window === 'undefined') return 'system'; const [mounted, setMounted] = useState(false);
return (localStorage.getItem('theme') as Theme) || 'system';
}); // 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 handleThemeChange = (newTheme: Theme) => {
const root = window.document.documentElement; const root = window.document.documentElement;
@ -42,16 +52,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
setTheme(newTheme); setTheme(newTheme);
}; };
// Handle system theme changes
useEffect(() => { 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 mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = () => { const handleChange = () => {
@ -68,6 +69,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
return () => mediaQuery.removeEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange);
}, [theme]); }, [theme]);
// Prevent flash during SSR
if (!mounted) {
return null;
}
return ( return (
<ThemeContext.Provider value={{ theme, setTheme: handleThemeChange }}> <ThemeContext.Provider value={{ theme, setTheme: handleThemeChange }}>
{children} {children}