style: consistent dark browser UI with Safari in asset viewer

web/src/lib/actions/__test__/force-dark-theme.spec.ts

@@ -0,0 +1,38 @@
+import { Theme } from '$lib/constants';
+import { themeManager } from '$lib/managers/theme-manager.svelte';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { forceDarkTheme } from '../force-dark-theme';
+
+describe('forceDarkTheme Action', () => {
+  beforeEach(() => {
+    document.body.className = '';
+  });
+
+  it('adds dark class on render, and removes it on destroy when light theme in use', () => {
+    themeManager.setTheme(Theme.LIGHT);
+
+    expect(document.body.classList.contains('dark')).toBe(false);
+
+    const node = document.createElement('div');
+    const action = forceDarkTheme(node);
+
+    expect(document.body.classList.contains('dark')).toBe(true);
+
+    action?.destroy?.();
+    expect(document.body.classList.contains('dark')).toBe(false);
+  });
+
+  it('does not remove dark class on destroy when dark theme in use', () => {
+    themeManager.setTheme(Theme.DARK);
+
+    expect(document.body.classList.contains('dark')).toBe(true);
+
+    const node = document.createElement('div');
+    const action = forceDarkTheme(node);
+
+    expect(document.body.classList.contains('dark')).toBe(true);
+
+    action?.destroy?.();
+    expect(document.body.classList.contains('dark')).toBe(true);
+  });
+});

web/src/lib/actions/force-dark-theme.ts

@@ -0,0 +1,18 @@
+import { themeManager } from '$lib/managers/theme-manager.svelte';
+import type { Action } from 'svelte/action';
+
+/**
+ * Ensures the 'dark' theme is used while the element is mounted, which makes
+ * Safari 26 darken the browser UI. More "cinema" like UX for AssetViewer.
+ */
+export const forceDarkTheme: Action = (_) => {
+  document.body.classList.add('dark');
+
+  return {
+    destroy() {
+      if (!themeManager.isDark) {
+        document.body.classList.remove('dark');
+      }
+    },
+  };
+};

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
+  import { forceDarkTheme } from '$lib/actions/force-dark-theme';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
   import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
@@ -442,6 +443,7 @@
   id="immich-asset-viewer"
   class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
   use:focusTrap
+  use:forceDarkTheme
   bind:this={assetViewerHtmlElement}
 >
   <!-- Top navigation bar -->