diff --git a/web/assets/codemirror/xq.css b/web/assets/codemirror/xq.css
index 4f7c54cf..c7d9365d 100644
--- a/web/assets/codemirror/xq.css
+++ b/web/assets/codemirror/xq.css
@@ -45,7 +45,7 @@ THE SOFTWARE.
 .cm-s-xq .CodeMirror-activeline-background { background: #e8f2ff; }
 .cm-s-xq .CodeMirror-matchingbracket { outline:1px solid grey;color:black !important;background:yellow; }
 
-.dark .cm-s-xq.CodeMirror { background-color: #222D42; border-color: #2c3950; color: rgb(255 255 255 / 65%); }
+.dark .cm-s-xq.CodeMirror { background-color:  var(--dark-color-surface-200);; border-color: #2c3950; color: rgb(255 255 255 / 65%); }
 .dark .cm-s-xq.CodeMirror:hover { background-color: rgb(0 50 42 / 30%); border-color: #008771; transition: all .3s; }
 .dark .cm-s-xq div.CodeMirror-selected { background: rgba(0, 0, 0, 0.5);  }
 .dark .cm-s-xq .CodeMirror-line::selection, .dark .cm-s-xq .CodeMirror-line > span::selection, .dark .cm-s-xq .CodeMirror-line > span > span::selection { background: rgba(39, 0, 122, 0.99); }
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index aee57e4f..ba52e3d1 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -42,6 +42,7 @@ html[data-theme='ultra-dark'] {
     --dark-color-surface-400: rgba(255, 255, 255, 0.1);
     --dark-color-surface-500: #3b404b;
     --dark-color-surface-600: #505663;
+    --dark-color-surface-700: #101113; 
     --dark-color-text-primary: rgb(255 255 255 / 85%);
     --dark-color-stroke: #202025;
 }