fix screen white flashing on ui load#8077
Closed
light-and-ray wants to merge 4 commits intoComfy-Org:mainfrom
Closed
fix screen white flashing on ui load#8077light-and-ray wants to merge 4 commits intoComfy-Org:mainfrom
light-and-ray wants to merge 4 commits intoComfy-Org:mainfrom
Conversation
dosubot
bot
added
the
size:S
Contributor
📝 WalkthroughWalkthroughAdded dark-mode CSS in the HTML head to set a dark background under prefers-color-scheme, updated manifest background color and removed theme_color, and simplified body background handling in the design-system CSS to prefer the background image over the color. Changes
Possibly related PRs
Suggested reviewers
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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
🎭 Playwright Tests: ❌ FailedResults: 499 passed, 3 failed, 1 flaky, 8 skipped (Total: 511) ❌ Failed Tests📊 Browser Reports
|
🎨 Storybook Build Status
⏰ Started at: 01/20/2026, 05:44:03 AM UTC 🚀 Building Storybook
⏱️ Please wait while the Storybook build is in progress... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/design-system/src/css/style.css`:
- Around line 589-592: Add a `.dark-theme body` CSS rule so the app-level theme
overrides the OS media query: when `.dark-theme` is present set `background` to
use `var(--bg-img, var(--bg-color-dark))` (mirroring the value inside `@media
(prefers-color-scheme: dark)`), ensuring the body background follows the app's
`.dark-theme` setting rather than only the `prefers-color-scheme` user agent
preference.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
index.htmlmanifest.jsonpackages/design-system/src/css/style.css
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.vue : Use Tailwind utility classes instead of `dark:` variant - use semantic values from `style.css` theme (e.g., `bg-node-component-surface`)
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.vue : Use Tailwind utility classes instead of `dark:` variant - use semantic values from `style.css` theme (e.g., `bg-node-component-surface`)
Applied to files:
packages/design-system/src/css/style.css
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,css} : Use the correct tokens from style.css in the design system package
Applied to files:
packages/design-system/src/css/style.css
📚 Learning: 2025-12-09T03:50:03.127Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Applied to files:
index.html
🔇 Additional comments (4)
manifest.json (1)
14-14: LGTM!The
background_colorchange from#ffffffto#52525b(zinc-600) addresses the PWA splash screen white flash. This neutral gray serves as a good compromise during the brief splash screen display before the actual theme loads.index.html (1)
6-6: LGTM!The inline style ensures the background color is applied immediately, before any external CSS loads. Using
#52525b(zinc-600) as a neutral gray prevents the jarring white flash while being visually acceptable for both light and dark theme users during the brief loading period.packages/design-system/src/css/style.css (2)
143-145: LGTM!Good extraction of the explicit light and dark background color values into separate variables. This allows direct reference to each variant without depending on the cascade from
.dark-theme.
294-294: LGTM!Using the new
--bg-color-darkvariable maintains consistency with the design system while preserving backward compatibility for components that reference--bg-color.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
This comment was marked as resolved.
This comment was marked as resolved.
Contributor
Author
|
Never mind, it's me accidentaly broken |
Contributor
Author
|
I've found that "Milk White" theme is broken, but it's broken even with no my patch |
Contributor
I think that is not a theme we support by default |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.5 kB (baseline 22.4 kB) • 🔴 +124 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.02 MB (baseline 1.02 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 430 kB (baseline 430 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 8 added / 8 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.8 kB (baseline 2.8 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 32.8 kB (baseline 32.8 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 3.04 MB (baseline 3.04 MB) • 🟢 -11 BStores, services, APIs, and repositories
Status: 7 added / 7 removed Utilities & Hooks — 18.7 kB (baseline 18.7 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 4 added / 4 removed Vendor & Third-Party — 10.4 MB (baseline 10.4 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.25 MB (baseline 6.25 MB) • ⚪ 0 BBundles that do not match a named category
Status: 25 added / 25 removed |
Contributor
|
Hey @light-and-ray, I like the goal here, as a dark mode user myself. |
Contributor
Author
No, i have debugged, the main reason is that .dark-mode class is not added to the body, but the styles have been loaded
I don't understand what you mean The patch isn't perfect because the absence of .dark-mode implies a light theme, and it's bot possible to distinguish light theme from not initialized dark in css currently. I think the proper solution is to add .light-theme class for a light theme, and treat the absence of both classes as not yet initialized theme. But my patch still works with all combinations of system themes and comfyui themes with no glitches (according to my testing) Another solution can be to add a new class "theme-initialazed" to the body after applying or not applying .dark-mode class |
Contributor
Author
|
You can debug it yourself, pressing F5 and then F8 keys quickly, inisde debugging window, "sources" tab, to stop js execution right after ui reload |
Contributor
|
:where() is useful for adding 0 specificity rules that are intended to be overridden later, in this case by the |
Contributor
Author
Done |
DrJKL
added a commit
that referenced
this pull request
Jan 24, 2026
## Summary Alternative to #8077 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8287-Style-Dark-mode-body-on-load-alternative-2f26d73d365081fb8231f167e75beb83) by [Unito](https://www.unito.io)
Contributor
|
Hey @light-and-ray, tried my hand at a more minimal solution. Does it solve the problem for you? |
Contributor
Author
|
@DrJKL why did you merge without me testing? You have removed pwa manifest background color - it's now white. It should be replaced to gray, not removed. Also background image now doesn't appear |
Contributor
Author
|
Here I've added your idea, but pwa background color and background image are working |
Contributor
Author
|
No, now it doesn't work |
light-and-ray
force-pushed
the
fix_screen_flash_on_load
branch
from
09fa4a8 to
74a94e4
Compare
Contributor
Author
|
So your variant doesn't work, and if I just add background: var(--bg-img) the flashing appears again |
Contributor
|
Contributor
|
I never use it as a PWA, so this is a good exercise for me 😁 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR removes white bind flash on UI startup, caused by 3 different reasons:
<style>body { background: #52525b;}</style>in the html headI also removed "theme_color" from pwa manifest. I have not seen it used on 3 different devices where I tested, but if it is used somewhere, the default system color will be definitely more preferred then #000
I have made
background: var(--bg-img, var(--bg-color-dark));but notbackground: var(--bg-color-dark) var(--bg-img, transparent);because the second variant doesn't work - the background is completly white if --bg-img is not defined.transparentas a fallback doesn't help┆Issue is synchronized with this Notion page by Unito