diff --git a/frontend/src/app/components/ui-components/table-display-fields/code/code.component.css b/frontend/src/app/components/ui-components/table-display-fields/code/code.component.css
index 1e61ec077..9d8ce2a22 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/code/code.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/code/code.component.css
@@ -1,10 +1,15 @@
 .field-value {
-  background-color: #EAEAFF;
   border-radius: 4px;
   font-family: monospace;
   padding: 0 8px;
 }
 
+@media (prefers-color-scheme: light) {
+  .field-value {
+    background-color: #EAEAFF;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .field-value {
     background-color: #2C2C54;
diff --git a/frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.css b/frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.css
index 354fa288a..559bc7f44 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.css
+++ b/frontend/src/app/components/ui-components/table-display-fields/json-editor/json-editor.component.css
@@ -1,6 +1,17 @@
 .json-display {
-  background-color: #EAEAFF;
   border-radius: 4px;
   font-family: monospace;
   padding: 0 8px;
 }
+
+@media (prefers-color-scheme: light) {
+  .json-display {
+    background-color: #EAEAFF;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .json-display {
+    background-color: #2C2C54;
+  }
+}