style: consistent dark browser UI with Safari in asset viewer

[mister-ben]

Description

This is not critical and affects a single browser.

Safari 26 matches the colour of the browser UI (address bar, tabs etc) to the background colour of body (rather than meta name="theme-colour" in earlier versions). When a photo is displayed in the asset manager, which has a black background, it's nice for the browser UI to also be black / dark to give focus to the photo.

When the site theme is dark, the browser UI is always black, so all good.
When the site theme is light, the browser UI is usually grey, with an exception. If you go directly to the photo URL, then it's black.

• Go to https://demo.immich.app/
• Enable light theme
  • Browser UI is grey, which suits this view
• Click on an image to open asset viewer
  • Browser UI remains grey
• Reload URL (or go to https://demo.immich.app/photos/7ed1f888-1a8f-407a-8f5c-7163231b8cc6)
  • Browser UI is black, which better suits this view
• Exit asset viewer
  • Browser UI is grey (expected, to match the light theme)

This change makes the UI consistently dark when AssetViewer is rendered.
It adds an action which is used by AssetViewer.
That adds the dark class to body when the component mounts. It removes the dark class from body if the dark theme is not in use. Adding/removing the class causes Safari to update the UI colour.

How Has This Been Tested?

• Follow the steps above in Safari 26, with and without the change. With the change, the browser UI is always dark regardless of the site theme setting.
• Tests added

Checklist:

• I have carefully read CONTRIBUTING.md
• I have performed a self-review of my own code
• [ ] I have made corresponding changes to the documentation if applicable N/A
• I have no unrelated changes in the PR.
• [ ] I have confirmed that any new dependencies are strictly necessary. N/A
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code
• [ ] 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/) N/A

Please describe to which degree, if any, an LLM was used in creating this pull request.

Some research of the codebase looking for what is implemented where. Not LLM-generated code.

[immich-push-o-matic]

Label error. Requires exactly 1 of: changelog:.*. Found: 🖥️web. A maintainer will add the required label.

[danieldietzler]

Couple of things I noticed in testing

• This also affects the detail panel; I don't think we want that
• You can toggle the theme with Shift + T, that will break this
• If you toggle the theme on the timeline from light to dark to light, then open an asset, and then go back to the timeline, the UI is still in dark-mode (in parts)

Generally this implementation is like way too complex for what it is though. You can simply add class="dark" to any sub-element (in this case the asset viewer I guess) and it'll work. Check out the button examples https://ui.immich.app/components/button ("always light"/"always dark") if you need an example

[mister-ben]

Unfortunately it is the body rather than the asset viewer component that needs to be black for this to work. Adding .dark to the asset viewer isn't enough; it is already black. Safari's UI matches either the body background colour, or the backgroundColor of a position="fixed" element at the top of the page, but only if it is present when the page loads. It will revert to the current body colour if the initially present fixed element is removed, but not switch to a fixed element's color if it is added.

This is why the current behaviour is inconsistent. The asset viewer's dark background is only effective for Safari's UI when you start the session with it open, i.e. going directly to https://demo.immich.app/photos/1c27e4ea-29d7-451e-b777-3191930cda3b vs. opening that image from the library.

I can't replicate the third of your observations, but all of that could be resolved by using a separate higher specificity selector instead of re-using .dark. I'd thought re-use of the existing class was simpler, but something separate probably makes more sense for a this contextual override rather than an actual theme change.

[jrasm91]

Fixed in #26346