Skip to content

Conversation

@evan314159
Copy link
Contributor

Description

Prevent flash of white background in dark mode on page load/reload by setting the background to dark in dark mode before page renders.

How Has This Been Tested?

Used "make dev" to build immich with change, and tested by repeatedly loading/reloading pages on Safari and Chrome. This was the minimal change that successfully removed the flash through white in dark mode.

API Changes

n/a

Checklist:

  • I have performed a self-review of my own code
  • [n/a] I have made corresponding changes to the documentation if applicable
  • I have no unrelated changes in the PR.
  • [n/a] I have confirmed that any new dependencies are strictly necessary.
  • [n/a] I have written tests for new code (if applicable)
  • [n/a] I have followed naming conventions/patterns in the surrounding code
  • [n/a] All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
  • [n/a] All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

web/src/app.html Outdated
Comment on lines 104 to 106
html.dark { background-color: rgb(10, 10, 10); }
html { background-color: rgb(255, 255, 255); }
body { transition: background-color 0.15s ease; }
Copy link
Member

Choose a reason for hiding this comment

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

can you just move these to line 31-ish?

@alextran1502 alextran1502 changed the title immich-web: prevent flashing white background in dark mode on page load/reload fix(web): prevent flashing white background in dark mode on page load/reload Jul 16, 2025
@alextran1502 alextran1502 enabled auto-merge (squash) July 16, 2025 14:34
@alextran1502 alextran1502 merged commit 32f23b8 into immich-app:main Jul 16, 2025
51 of 53 checks passed
@evan314159 evan314159 deleted the flashing branch July 16, 2025 15:54
@alextran1502
Copy link
Member

alextran1502 commented Jul 18, 2025

Hmm, I think this PR is causing the spinner icon to display a black background that runs across the page when the web app is loading the source files

image

You can reproduce by opening the network tab, then throttle to slow 4G, and reload the page. At first, it doesn't look like it has a background, but after some files finish loading, the background will show

alextran1502 added a commit that referenced this pull request Jul 24, 2025
alextran1502 added a commit that referenced this pull request Jul 24, 2025
…ge load/reload (#19934) (#20122)

Revert "fix(web): prevent flashing white background in dark mode on page load/reload (#19934)"

This reverts commit 32f23b8.
ollioddi pushed a commit to ollioddi/immich that referenced this pull request Aug 11, 2025
…/reload (immich-app#19934)

* prevent flashing white background in dark mode on page load/reload, tested with Safari and Chrome on macOS

* integrate into existing FOUC-prevention

---------

Co-authored-by: Evan <[email protected]>
ollioddi pushed a commit to ollioddi/immich that referenced this pull request Aug 11, 2025
…ge load/reload (immich-app#19934) (immich-app#20122)

Revert "fix(web): prevent flashing white background in dark mode on page load/reload (immich-app#19934)"

This reverts commit 32f23b8.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants