diff --git a/web/src/app.css b/web/src/app.css
index dc2d3bf3c3..3a4d29b466 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -148,6 +148,10 @@
     color: #3a3a3a;
   }
 
+  body.asset-viewer-open {
+    background-color: black;
+  }
+
   input:focus-visible {
     outline-offset: 0px !important;
     outline: none !important;
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 7decdac835..ad34e68fb8 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
@@ -147,6 +148,7 @@
   };
 
   onMount(async () => {
+    syncAssetViewerOpenClass(true);
     unsubscribes.push(
       slideshowState.subscribe((value) => {
         if (value === SlideshowState.PlaySlideshow) {
@@ -177,6 +179,7 @@
 
     activityManager.reset();
     assetViewerManager.closeEditor();
+    syncAssetViewerOpenClass(false);
   });
 
   const handleGetAllAlbums = async () => {
@@ -359,6 +362,12 @@
     }
   });
 
+  const syncAssetViewerOpenClass = (isOpen: boolean) => {
+    if (browser) {
+      document.body.classList.toggle('asset-viewer-open', isOpen);
+    }
+  };
+
   const refresh = async () => {
     await refreshStack();
     await handleGetAllAlbums();