applying dark-mode filter to et2-image and NOT the img tag used inside, to apply it also if we use a font-based image (missing auto-generated CSS files)

pixelegg/css/fancy.css

@@ -71,11 +71,13 @@
   html[data-darkmode='1'] {
     background: #000;
     filter: invert(1) hue-rotate(180deg) brightness(1);
+    /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
   }
   html[data-darkmode='1'] sl-menu-item::part(prefix),
   html[data-darkmode='1'] et2-select-country::part(prefix),
   html[data-darkmode='1'] et2-button::part(prefix),
   html[data-darkmode='1'] *::part(image),
+  html[data-darkmode='1'] et2-image,
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen),
   html[data-darkmode='1'] #blueimp-gallery ol,
@@ -93,6 +95,9 @@
   html[data-darkmode='1'] .blueimp-gallery .slide {
     filter: invert(1) hue-rotate(180deg) !important;
   }
+  html[data-darkmode='1'] et2-image > img {
+    filter: none !important;
+  }
   html[data-darkmode='1'] #blueimp-gallery video,
   html[data-darkmode='1'] #blueimp-gallery .video-content {
     filter: invert(0) hue-rotate(180deg) !important;

pixelegg/css/mobile.css

@@ -74,11 +74,13 @@
   html[data-darkmode='1'] {
     background: #000;
     filter: invert(1) hue-rotate(180deg) brightness(1);
+    /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
   }
   html[data-darkmode='1'] sl-menu-item::part(prefix),
   html[data-darkmode='1'] et2-select-country::part(prefix),
   html[data-darkmode='1'] et2-button::part(prefix),
   html[data-darkmode='1'] *::part(image),
+  html[data-darkmode='1'] et2-image,
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen),
   html[data-darkmode='1'] #blueimp-gallery ol,
@@ -96,6 +98,9 @@
   html[data-darkmode='1'] .blueimp-gallery .slide {
     filter: invert(1) hue-rotate(180deg) !important;
   }
+  html[data-darkmode='1'] et2-image > img {
+    filter: none !important;
+  }
   html[data-darkmode='1'] #blueimp-gallery video,
   html[data-darkmode='1'] #blueimp-gallery .video-content {
     filter: invert(0) hue-rotate(180deg) !important;

pixelegg/css/monochrome.css

@@ -53,11 +53,13 @@
   html[data-darkmode='1'] {
     background: #000;
     filter: invert(1) hue-rotate(180deg) brightness(1);
+    /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
   }
   html[data-darkmode='1'] sl-menu-item::part(prefix),
   html[data-darkmode='1'] et2-select-country::part(prefix),
   html[data-darkmode='1'] et2-button::part(prefix),
   html[data-darkmode='1'] *::part(image),
+  html[data-darkmode='1'] et2-image,
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen),
   html[data-darkmode='1'] #blueimp-gallery ol,
@@ -75,6 +77,9 @@
   html[data-darkmode='1'] .blueimp-gallery .slide {
     filter: invert(1) hue-rotate(180deg) !important;
   }
+  html[data-darkmode='1'] et2-image > img {
+    filter: none !important;
+  }
   html[data-darkmode='1'] #blueimp-gallery video,
   html[data-darkmode='1'] #blueimp-gallery .video-content {
     filter: invert(0) hue-rotate(180deg) !important;

pixelegg/css/pixelegg.css

@@ -64,11 +64,13 @@
   html[data-darkmode='1'] {
     background: #000;
     filter: invert(1) hue-rotate(180deg) brightness(1);
+    /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
   }
   html[data-darkmode='1'] sl-menu-item::part(prefix),
   html[data-darkmode='1'] et2-select-country::part(prefix),
   html[data-darkmode='1'] et2-button::part(prefix),
   html[data-darkmode='1'] *::part(image),
+  html[data-darkmode='1'] et2-image,
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen),
   html[data-darkmode='1'] #blueimp-gallery ol,
@@ -86,6 +88,9 @@
   html[data-darkmode='1'] .blueimp-gallery .slide {
     filter: invert(1) hue-rotate(180deg) !important;
   }
+  html[data-darkmode='1'] et2-image > img {
+    filter: none !important;
+  }
   html[data-darkmode='1'] #blueimp-gallery video,
   html[data-darkmode='1'] #blueimp-gallery .video-content {
     filter: invert(0) hue-rotate(180deg) !important;

pixelegg/mobile/fw_mobile.css

@@ -40,11 +40,13 @@
   html[data-darkmode='1'] {
     background: #000;
     filter: invert(1) hue-rotate(180deg) brightness(1);
+    /* need to explicitly disable the filter on the img tag, if used, as it would be applied twice and therefore not at all */
   }
   html[data-darkmode='1'] sl-menu-item::part(prefix),
   html[data-darkmode='1'] et2-select-country::part(prefix),
   html[data-darkmode='1'] et2-button::part(prefix),
   html[data-darkmode='1'] *::part(image),
+  html[data-darkmode='1'] et2-image,
   html[data-darkmode='1'] img,
   html[data-darkmode='1'] #blueimp-gallery:not(:fullscreen),
   html[data-darkmode='1'] #blueimp-gallery ol,
@@ -62,6 +64,9 @@
   html[data-darkmode='1'] .blueimp-gallery .slide {
     filter: invert(1) hue-rotate(180deg) !important;
   }
+  html[data-darkmode='1'] et2-image > img {
+    filter: none !important;
+  }
   html[data-darkmode='1'] #blueimp-gallery video,
   html[data-darkmode='1'] #blueimp-gallery .video-content {
     filter: invert(0) hue-rotate(180deg) !important;