diff --git a/chrome/content/zotero/elements/attachmentPreview.js b/chrome/content/zotero/elements/attachmentPreview.js
index fc7243e9a6..bb2a840814 100644
--- a/chrome/content/zotero/elements/attachmentPreview.js
+++ b/chrome/content/zotero/elements/attachmentPreview.js
@@ -95,6 +95,10 @@
 			 */
 			this._isReaderInitialized = false;
 
+			this._notifierID = null;
+
+			this._prefObserver = null;
+
 			this._resizeOb = new ResizeObserver(this._handleResize.bind(this));
 		}
 
@@ -213,6 +217,8 @@
 			this.addEventListener("keypress", this._handleKeypress);
 			this.setAttribute("data-preview-type", "unknown");
 			this._notifierID = Zotero.Notifier.registerObserver(this, ["item"], "attachmentPreview");
+			this._prefObserver = Zotero.Prefs.registerObserver("reader.contentDarkMode", this._handleContentDarkModeChange);
+			this._handleContentDarkModeChange(Zotero.Prefs.get("reader.contentDarkMode"));
 		}
 
 		destroy() {
@@ -226,6 +232,7 @@
 			this.removeEventListener("focusin", this._handleFocusIn);
 			this.removeEventListener("keypress", this._handleKeypress);
 			Zotero.Notifier.unregisterObserver(this._notifierID);
+			Zotero.Prefs.unregisterObserver(this._prefObserver);
 		}
 
 		notify(event, type, ids, extraData) {
@@ -645,6 +652,10 @@
 			this.style.setProperty("--width-height-ratio", scaleRatio);
 		}
 
+		_handleContentDarkModeChange = (useDarkMode) => {
+			this.querySelector(".btn-container").classList.toggle("dark", useDarkMode);
+		};
+
 		_id(id) {
 			return this.querySelector(`#${id}`);
 		}
diff --git a/scss/elements/_attachmentPreview.scss b/scss/elements/_attachmentPreview.scss
index 8258752c04..2c42886c6c 100644
--- a/scss/elements/_attachmentPreview.scss
+++ b/scss/elements/_attachmentPreview.scss
@@ -77,21 +77,30 @@ attachment-preview {
 
 		toolbarbutton {
 			padding: 4px;
-			background-color: rgba(0,0,0,0.5);
-			
+
+			background-color: rgba(0, 0, 0, 0.55);
+			color: #fff;
+
 			&:hover {
-				background-color: rgba(0,0,0,0.4);
+				opacity: 0.75;
 			}
 
 			&:active, &[selected] {
-				background-color: rgba(0,0,0,0.3);
+				opacity: 0.5;
 			}
 
 			&:disabled,
 			&[disabled="true"] {
-				background-color: rgba(0,0,0,0.2);
+				opacity: 0.4;
 			}
 		}
+
+		// The reader can have different themes, we need to adjust the button color
+		// based on the class set by the AttachmentPreview element
+		&.dark toolbarbutton {
+			background-color: rgba(255, 255, 255, 0.55);
+			color: #000;
+		}
 		
 		&:-moz-locale-dir(rtl) {
 			transform: scaleX(-1);
@@ -99,11 +108,11 @@ attachment-preview {
 	}
 
 	.btn-prev {
-		@include svgicon-menu("arrow-left", "universal", "20", false, false, (#fff, #fff));
+		@include svgicon-menu("arrow-left", "universal", "20");
 	}
 
 	.btn-next {
-		@include svgicon-menu("arrow-right", "universal", "20", false, false, (#fff, #fff));
+		@include svgicon-menu("arrow-right", "universal", "20");
 	}
 
 	.drag-container {