fix(desktop): eliminate white flash on window resize#1380
fix(desktop): eliminate white flash on window resize#1380timmske wants to merge 1 commit intopingdotgg:mainfrom
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
size:M
apps/desktop/src/main.ts
Outdated
| // Background colors that match the app's CSS theme tokens. | ||
| // Dark: color-mix(in srgb, neutral-950 95%, white) ≈ #161616 | ||
| // Light: white | ||
| const THEME_BG_DARK = "#161616"; | ||
| const THEME_BG_LIGHT = "#ffffff"; |
There was a problem hiding this comment.
I'm not particularly a fan of duplicating the colors here, especially for an easy-to-miss bug like this one. We should have a single-source-of-truth somewhere and import it both places.
There was a problem hiding this comment.
Good point — updated. The colors now live in a single @t3tools/shared/theme module that the desktop main process imports. The index.html inline script no longer carries any color literals; it just applies the .dark class so the CSS custom properties resolve correctly.
Set BrowserWindow.backgroundColor to match the active theme so Electron paints the correct color while the renderer catches up during resize. - Add @t3tools/shared/theme as single source of truth for the native window background colors (#161616 dark, #ffffff light). - Read nativeTheme.shouldUseDarkColors at window creation to pick the initial background. - Update all windows via setBackgroundColor when the user switches themes. - Add a synchronous <script> in index.html <head> that applies the .dark class before first paint so CSS custom properties resolve correctly. Closes pingdotgg#1349
timmske
force-pushed
the
fix/white-flash-on-resize
branch
from
7225859 to
4fbbeca
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| const bg = themeBackgroundColor(); | ||
| for (const win of BrowserWindow.getAllWindows()) { | ||
| win.setBackgroundColor(bg); | ||
| } |
There was a problem hiding this comment.
Stale background color when OS theme changes
Medium Severity
When the app is set to "system" theme, OS-level dark/light mode changes update the renderer (via prefers-color-scheme media query) but never call setBackgroundColor on the BrowserWindow. The SET_THEME_CHANNEL handler only fires when the user explicitly changes the theme in the UI. Without a nativeTheme.on('updated') listener, the window background becomes stale after an OS theme change, causing the same wrong-color flash on resize that this PR aims to fix.
Additional Locations (1)
| * so resizing never flashes a mismatched color. | ||
| */ | ||
| export const THEME_BG_DARK = "#161616"; | ||
| export const THEME_BG_LIGHT = "#ffffff"; |
There was a problem hiding this comment.
Hardcoded colors duplicate CSS tokens risking drift
Low Severity
THEME_BG_DARK (#161616) is a manually computed approximation of the CSS color-mix(in srgb, neutral-950 95%, white) token in index.css. There is no single source of truth — if the CSS value changes (different base color, different percentage, different color space), this constant silently becomes wrong and the BrowserWindow background will flash a mismatched color during resize. This was also flagged by a reviewer.
2 participants
What changed
Set
BrowserWindow.backgroundColorto match the active theme so Electron paints the correct surface color while the renderer catches up during resize.nativeTheme.shouldUseDarkColorsat window creation to pick the initial background (#161616dark,#fffffflight)setBackgroundColorwhen the user switches themes<script>inindex.html<head>that applies the stored theme background and.darkclass before first paintWhy
The
BrowserWindowhad nobackgroundColorset. During resize Electron briefly exposes unpainted native window area, which defaults to white — producing the flash reported in #1349.Screenshots
Before: white flash visible during resize (see video in #1349)
After: background matches theme, no flash during resize
Checklist
bun fmtpassesbun lintpasses (0 warnings, 0 errors)bun typecheckpasses (7/7)bun run test— server test failures are pre-existing onmainCloses #1349
Note
Low Risk
Small, UI-only theming changes limited to Electron window creation/theme switching and an inline web boot script; minimal logic and no security/data-path impact.
Overview
Eliminates the white flash during Electron window resize by setting and maintaining
BrowserWindow.backgroundColorto match the active theme. The desktop main process now derives the background fromnativeTheme.shouldUseDarkColorsat window creation and updates all open windows viasetBackgroundColorwhendesktop:set-themeis invoked.Adds shared theme constants (
THEME_BG_DARK/THEME_BG_LIGHT) exported from@t3tools/shared/theme, and adds a synchronous<head>script inapps/web/index.htmlthat applies the.darkclass before first paint based on stored theme preference/system color scheme.Written by Cursor Bugbot for commit 4fbbeca. This will update automatically on new commits. Configure here.
Note
Fix white flash on window resize by setting native background color to match theme
backgroundColoron newBrowserWindowinstances using athemeBackgroundColor()helper so the native window background matches the active theme from first paint.SET_THEME_CHANNELIPC handler.darkclass todocumentElementbefore first paint, preventing a flash of unstyled content on load.THEME_BG_DARK(#161616) andTHEME_BG_LIGHT(#ffffff) from a new@t3tools/shared/themesubpath as the source of truth for these colors.Macroscope summarized 4fbbeca.