diff --git a/src/js/scriptlets/dom-inspector.js b/src/js/scriptlets/dom-inspector.js
index 686ae4a28..2f0abf04c 100644
--- a/src/js/scriptlets/dom-inspector.js
+++ b/src/js/scriptlets/dom-inspector.js
@@ -784,6 +784,12 @@ const bootstrap = function(ev) {
     }
     const pickerDoc = ev.target.contentDocument;
 
+    pickerDoc.documentElement.style.setProperty(
+        'color-scheme',
+        'dark light',
+        'important'
+    );
+
     const style = pickerDoc.createElement('style');
     style.textContent = [
         'body {',
@@ -855,6 +861,7 @@ pickerRoot.style.cssText = [
     'border: 0',
     'border-radius: 0',
     'box-shadow: none',
+    'color-scheme: light dark',
     'display: block',
     'height: 100%',
     'left: 0',
diff --git a/src/js/scriptlets/epicker.js b/src/js/scriptlets/epicker.js
index 875839b81..363ec9f99 100644
--- a/src/js/scriptlets/epicker.js
+++ b/src/js/scriptlets/epicker.js
@@ -1272,6 +1272,7 @@ const pickerCSSStyle = [
     'border: 0',
     'border-radius: 0',
     'box-shadow: none',
+    'color-scheme: light dark',
     'display: block',
     'filter: none',
     'height: 100vh',
@@ -1291,7 +1292,6 @@ const pickerCSSStyle = [
     'visibility: hidden',
     'width: 100%',
     'z-index: 2147483647',
-    'color-scheme: light dark',
     ''
 ];