diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js
index b5c7c6eae4d..2bae195d44a 100644
--- a/_javascript/modules/components/img-popup.js
+++ b/_javascript/modules/components/img-popup.js
@@ -4,12 +4,47 @@
  * Dependencies: https://github.com/biati-digital/glightbox
  */
 
-const IMG_CLASS = 'popup';
+const html = document.documentElement;
+const lightImages = '.popup:not(.dark)';
+const darkImages = '.popup:not(.light)';
+let selector = lightImages;
+
+if (
+  (html.hasAttribute('data-mode') &&
+    html.getAttribute('data-mode') === 'dark') ||
+  (!html.hasAttribute('data-mode') &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches)
+) {
+  selector = darkImages;
+}
+
+function updateImages(event, lightbox) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.direction === ModeToggle.ID
+  ) {
+    if (selector === lightImages) {
+      selector = darkImages;
+    } else {
+      selector = lightImages;
+    }
+  }
+
+  lightbox.destroy();
+  lightbox = GLightbox({ selector: `${selector}` });
+}
 
 export function imgPopup() {
-  if (document.getElementsByClassName(IMG_CLASS).length === 0) {
+  if (document.querySelector(`${selector}`) === null) {
     return;
   }
 
-  GLightbox({ selector: `.${IMG_CLASS}` });
+  let lightbox = GLightbox({ selector: `${selector}` });
+
+  if (document.getElementById('mode-toggle')) {
+    window.addEventListener('message', (event) => {
+      updateImages(event, lightbox);
+    });
+  }
 }