diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index 9c5f184c2..8a9b9453f 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -12,6 +12,13 @@
     height: 100%;
     width: 100%;
     }
+.CodeMirror-gutters {
+    background-color: var(--cm-gutter-surface);
+    border-color: var(--cm-gutter-border);
+    }
+.CodeMirror-linenumber {
+    color: var(--cm-gutter-ink);
+    }
 
 /* For when panels are used */
 .codeMirrorContainer > div:not([class^="CodeMirror"]) {
@@ -25,27 +32,23 @@
     }
 
 /* CodeMirror theme overrides */
-.cm-s-default .cm-variable { color: var(--sf-variable-ink); }
-.cm-s-default .cm-value { color: #930; }
-.cm-s-default .cm-comment { color: var(--sf-comment-ink); }
-.cm-s-default .cm-keyword { color: #90b; }
-.cm-s-default .cm-regex {
-    text-underline-position: under;
-    text-decoration-color: darkgray;
-    text-decoration-style: solid;
-    text-decoration-line: underline;
+.cm-s-default .cm-comment {
+    color: var(--sf-comment-ink);
+    }
+.cm-s-default .cm-def {
+    color: var(--sf-def-ink);
+    }
+.cm-s-default .cm-directive {
+    color: var(--sf-directive-ink);
+    font-weight: bold;
     }
 .cm-s-default .cm-error {
     color: inherit;
     }
 .cm-s-default .cm-error,
 .CodeMirror-linebackground.error {
-    background-color: #ff000016;
-    text-decoration: underline red;
-    text-underline-position: under;
-    }
-.cm-s-default .cm-warning {
-    text-decoration: underline var(--sf-warning-ink);
+    background-color: var(--sf-error-surface);
+    text-decoration: underline var(--sf-error-ink);
     text-underline-position: under;
     }
 .cm-s-default .cm-link {
@@ -54,28 +57,42 @@
 .cm-s-default .cm-link:hover {
     color: var(--link-ink);
     }
-
-.cm-directive { color: #333; font-weight: bold; }
-.cm-staticext { color: #008; }
-.cm-staticnetBlock { color: #800; }
-.cm-staticnetAllow { color: #004f00; }
-.cm-staticOpt { background-color: #ddd; font-weight: bold; }
+.cm-s-default .cm-keyword {
+    color: var(--sf-keyword-ink);
+    }
+.cm-s-default .cm-regex {
+    text-underline-position: under;
+    text-decoration-color: var(--sf-regex-ink);
+    text-decoration-style: solid;
+    text-decoration-line: underline;
+    }
+.cm-s-default .cm-tag {
+    color: var(--sf-tag-ink);
+    }
+.cm-s-default .cm-value { color: var(--sf-value-ink); }
+.cm-s-default .cm-variable {
+    color: var(--sf-variable-ink);
+    }
+.cm-s-default .cm-warning {
+    text-decoration: underline var(--sf-warning-ink);
+    text-underline-position: under;
+    }
 
 /* Rules */
 .cm-s-default .cm-allowrule {
-    color: green;
+    color: var(--df-allow-ink);
     font-weight: bold;
     }
 .cm-s-default .cm-blockrule {
-    color: red;
+    color: var(--df-block-ink);
     font-weight: bold;
     }
 .cm-s-default .cm-nooprule {
-    color: darkslategray;
+    color: var(--df-noop-ink);
     font-weight: bold;
     }
 .cm-s-default .cm-sortkey {
-    color: #708;
+    color: var(--sf-keyword-ink);
     }
 
 div.CodeMirror span.CodeMirror-matchingbracket {
@@ -89,7 +106,8 @@ div.CodeMirror span.CodeMirror-matchingbracket {
 
 .cm-search-widget {
     align-items: center;
-    background-color: var(--bg-code);
+    background-color: var(--cm-gutter-surface);
+    border-bottom: 1px solid var(--cm-gutter-border);
     cursor: default;
     direction: ltr;
     display: flex;
@@ -106,14 +124,14 @@ div.CodeMirror span.CodeMirror-matchingbracket {
     flex-grow: 1;
     }
 .cm-search-widget .fa-icon {
-    fill: #888;
+    fill: var(--cm-gutter-ink);
     font-size: 140%;
     }
 .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
     fill: #000;
     }
 .cm-search-widget-input input {
-    border: 1px solid gray;
+    border: 1px solid var(--cm-gutter-ink);
     display: inline-flex;
     flex-grow: 1;
     max-width: 16em;
@@ -139,6 +157,9 @@ div.CodeMirror span.CodeMirror-matchingbracket {
     border: 1px dotted black;
     }
 
+.CodeMirror-merge {
+    border-color: var(--cm-gutter-border);
+    }
 .CodeMirror-merge-l-deleted {
     background-image: none;
     }
@@ -147,10 +168,12 @@ div.CodeMirror span.CodeMirror-matchingbracket {
     }
 /* This probably needs to be added to CodeMirror repo */
 .CodeMirror-merge-gap {
+    background-color: var(--cm-gutter-surface);
+    border-color: var(--cm-gutter-border);
     vertical-align: top;
     }
 .CodeMirror-merge-spacer {
-    background-color: var(--bg-code);
+    background-color: var(--cm-gutter-surface);
     }
 
 .CodeMirror-hints {
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index ba01adb7a..eafa247bf 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -12,9 +12,12 @@
 */
 :root {
     --blue-10: #80ebff;
+    --blue-40: #0090ed;
     --blue-50: #0060df;
     --blue-60: #0250bb;
+    --dark-gray-10: #52525e;
     --dark-gray-30: #42414d;
+    --dark-gray-40: #3a3944;
     --dark-gray-50: #32313c;
     --dark-gray-80: #1c1b22;
     --dark-gray-90: #15141a;
@@ -29,13 +32,17 @@
     --light-gray-10-a12: #f9f9fb1f;
     --light-gray-10-a16: #f9f9fb29;
     --light-gray-20: #f0f0f4;
+    --light-gray-25: #e8e8ed;
     --light-gray-30: #e0e0e6;
     --light-gray-30-a50: #e0e0e680;
     --light-gray-40: #cfcfd8;
     --light-gray-50: #bfbfc9;
     --light-gray-60: #afafba;
     --light-gray-70: #9f9fad;
+    --light-gray-80: #8f8f9e;
     --light-gray-90: #80808f;
+    --orange-80: #9e280b;
+    --purple-60: #952bb9;
     --red-60: #e22850;
     --violet-40: #ab71ff;
     --violet-60: #7542e5;
@@ -160,12 +167,29 @@
     --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
     --popup-icon-x-ink: var(--red-60);
 
+    /* codemirror */
+    --cm-gutter-border: var(--light-gray-40);
+    --cm-gutter-ink: var(--light-gray-90);
+    --cm-gutter-surface: var(--light-gray-25);
+
     /* syntax highlight: static filtering */
-    --sf-variable-ink: var(--default-ink);
     --sf-comment-ink: var(--light-gray-90);
+    --sf-def-ink: #0000ff;
+    --sf-directive-ink: var(--dark-gray-40);
+    --sf-error-ink: #ff0000;
+    --sf-error-surface: #ff000016;
+    --sf-keyword-ink: var(--purple-60);
+    --sf-regex-ink: var(--light-gray-60);
+    --sf-tag-ink: #117700;
+    --sf-value-ink: var(--orange-80);
+    --sf-variable-ink: var(--default-ink);
     --sf-warning-ink: var(--yellow-50);
 
     /* syntax highlight: dynamic filtering */
+    --df-allow-ink: #117700;
+    --df-block-ink: #ff0000;
+    --df-noop-ink: var(--dark-gray-10);
+    --df-key-ink: var(--violet-70);
 }
 
 /**