Skip to content

Avoid repeated theme DOM sync during startup #2779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mjc wants to merge 1 commit into
base: main
Choose a base branch
from
+9 −1
Open

Avoid repeated theme DOM sync during startup #2779

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion apps/web/src/hooks/useTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const DYNAMIC_THEME_COLOR_SELECTOR = `meta[name="${THEME_COLOR_META_NAME}"][data
let listeners: Array<() => void> = [];
let lastSnapshot: ThemeSnapshot | null = null;
let lastDesktopTheme: Theme | null = null;
let lastAppliedTheme: ThemeSnapshot | null = null;

function emitChange() {
for (const listener of listeners) listener();
Expand Down Expand Up @@ -89,11 +90,18 @@ export function syncBrowserChromeTheme() {

function applyTheme(theme: Theme, suppressTransitions = false) {
if (typeof document === "undefined" || typeof window === "undefined") return;
const systemDark = getSystemDark();
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Guard matchMedia access before computing systemDark

applyTheme now calls getSystemDark() unconditionally, so environments where window.matchMedia is unavailable (older/embedded webviews or test runtimes without a polyfill) will throw before any theme is applied. Before this change, getSystemDark() was only evaluated for theme === "system", so explicit "light"/"dark" themes did not depend on matchMedia; this commit introduces a new runtime failure path for those themes.

Useful? React with 👍 / 👎.

if (lastAppliedTheme?.theme === theme && lastAppliedTheme.systemDark === systemDark) {
syncDesktopTheme(theme);
return;
}
Comment on lines +93 to +97

if (suppressTransitions) {
document.documentElement.classList.add("no-transitions");
}
const isDark = theme === "dark" || (theme === "system" && getSystemDark());
const isDark = theme === "dark" || (theme === "system" && systemDark);
document.documentElement.classList.toggle("dark", isDark);
lastAppliedTheme = { theme, systemDark };
syncBrowserChromeTheme();
syncDesktopTheme(theme);
if (suppressTransitions) {
Expand Down
Loading