diff --git a/web/src/shell/editor.scss b/web/src/shell/editor.scss
index ccb0f3845..a49420980 100644
--- a/web/src/shell/editor.scss
+++ b/web/src/shell/editor.scss
@@ -1,3 +1,16 @@
+:root[data-theme="light"] {
+  --diff-highlight-error-line-bg-color: #ffebe9;
+  --diff-highlight-error-cell-bg-color: #ffc1c0;
+  --diff-highlight-correct-line-bg-color: #dafbe1;
+  --diff-highlight-correct-cell-bg-color: #aceebb;
+}
+:root[data-theme="dark"] {
+  --diff-highlight-error-line-bg-color: #390504;
+  --diff-highlight-error-cell-bg-color: #842019;
+  --diff-highlight-correct-line-bg-color: #0d2705;
+  --diff-highlight-correct-cell-bg-color: #285d17;
+}
+
 .Editor {
   width: 100%;
 
@@ -18,20 +31,20 @@
     background-color: var(--mark-error-color);
   }
 
-  .diff-highlight-line-1 {
-    background-color: #ffebe9;
+  .diff-highlight-error-line {
+    background-color: var(--diff-highlight-error-line-bg-color);
   }
 
-  .diff-highlight-cell-1 {
-    background-color: #ffc1c0;
+  .diff-highlight-error-cell {
+    background-color: var(--diff-highlight-error-cell-bg-color);
   }
 
-  .diff-highlight-line-2 {
-    background-color: #dafbe1;
+  .diff-highlight-correct-line {
+    background-color: var(--diff-highlight-correct-line-bg-color);
   }
 
-  .diff-highlight-cell-2 {
-    background-color: #aceebb;
+  .diff-highlight-correct-cell {
+    background-color: var(--diff-highlight-correct-cell-bg-color);
   }
 
   textarea {
diff --git a/web/src/shell/test_panel.tsx b/web/src/shell/test_panel.tsx
index 1fea579d9..016a3bff9 100644
--- a/web/src/shell/test_panel.tsx
+++ b/web/src/shell/test_panel.tsx
@@ -312,13 +312,13 @@ export const TestPanel = ({
 function decorationTypeToCss(type: DecorationType) {
   switch (type) {
     case "error-line":
-      return "diff-highlight-line-1";
+      return "diff-highlight-error-line";
     case "error-cell":
-      return "diff-highlight-cell-1";
+      return "diff-highlight-error-cell";
     case "correct-line":
-      return "diff-highlight-line-2";
+      return "diff-highlight-correct-line";
     case "correct-cell":
-      return "diff-highlight-cell-2";
+      return "diff-highlight-correct-cell";
     default:
       return "";
   }