variables for code mirror

css/common-files/color_variables.css

@@ -60,7 +60,7 @@
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;
-  --theme-highlight-pink: #FF7DE9;
+  --theme-highlight-pink: #df80ff;
   --tone-1: var(--grey-10);
   --tone-2: var(--grey-20);
   --tone-3: var(--grey-30);
@@ -113,7 +113,17 @@
   --in-content-dark-header-background: var(--tone-9)!important;
   --secure-connection-color: var(--accent-1);
   --theme-sidebar-background: #1B1B1D!important;
+  --cm-background: var(--tone-8)!important;
+  --cm-selection: #353b48!important;
+  --cm-marker: #555 !important;
+  --cm-linenumber:#58575c!important;
+  --cm-cursor:#fff!important;
+  --cm-active-line-background: rgba(185,215,253,.15)!important;
+  --cm-matching-bracket: rgba(255,255,255,.25) !important;
+  --cm-search-background: rgba(24,29,32,1) !important;
+  --cm-red: #de7474!important;
   --start-indicator-for-updater-scripts: black;
   --end-indicator-for-updater-scripts: black;
   --dummy-variable-for-updater-scripys: black
-}
+
+}

css/userContent-files/webextension-tweaks/generic_style.css

@@ -118,42 +118,38 @@
                url-prefix("moz-extension://ublock_origin_UUID/"),
                url-prefix("moz-extension://umatrix_UUID/") {
   .CodeMirror {
-     border: 1px solid #2a2a2c!important;
-     background: var(--tone-8)!important;
+     border: 1px solid !important;
+     border-color: var(--cm-background)!important;
+     background: var(--cm-background)!important;
      color: #b1b1b3!important;
      font-size: 11px!important;
      line-height: 14px!important
   }
-  div.CodeMirror-selected {
-    background: #353b48!important
-  }
+  div.CodeMirror-selected,
   .CodeMirror-line > span > span::selection,
   .CodeMirror-line > span::selection,
   .CodeMirror-line::selection {
-    background: #353b48!important
-  }
-  .CodeMirror-line > span > span::-moz-selection,
-  .CodeMirror-line > span::-moz-selection,
-  .CodeMirror-line::-moz-selection {
-    background: #353b48!important
+    background: var(--cm-selection)!important
   }
   .CodeMirror-gutters {
     background: var(--theme-sidebar-background)!important;
-    border-right: 0 solid #4a4a4f!important
+    border-right: 0 solid var(--in-content-border-color)!important
   }
   .CodeMirror-guttermarker,
   .CodeMirror-guttermarker-subtle {
-    color: #555!important
+    color: var(--cm-marker)!important
   }
   .CodeMirror-linenumber {
     padding: 0 8px 0 5px!important;
-    color: #58575c!important
+    color: var(--cm-linenumber)!important
   }
   .CodeMirror-cursor {
     border-left: 1px solid!important;
-    border-color: #fff!important
+    border-color: var(--cm-cursor)!important
   }
-  span.cm-comment {
+  span.cm-comment,
+  span.cm-hr,
+  span.cm-meta {
     color: #939393!important
   }
   span.cm-atom,
@@ -162,70 +158,62 @@
   span.cm-error,
   span.cm-keyword,
   span.cm-quote {
-    color: #ff7de9!important
+    color: var(--theme-highlight-red)!important
   }
   span.cm-number,
   span.cm-string,
   span.cm-string-2 {
     color: #6b89ff!important
   }
-  span.cm-hr,
-  span.cm-meta {
-    color: #939393!important
-  }
   span.cm-header,
   span.cm-qualifier,
-  span.cm-variable-2 {
-    color: #75bfff!important
-  }
-  span.cm-property {
-    color: #86de74!important
-  }
+  span.cm-variable-2,
   span.cm-bracket,
   span.cm-def,
   span.cm-link:visited,
   span.cm-tag {
-    color: #75bfff!important
+    color: var(--theme-highlight-blue)!important
+  }
+  span.cm-property {
+    color: var(--theme-highlight-green)!important
   }
   span.cm-variable {
-    color: #b98eff!important
+    color: var(--theme-highlight-purple)!important
   }
-  span.cm-variable-3 {
-    color: #d7d7db!important
+  span.cm-variable-3,
+  span.cm-special {
+    color: var(--in-content-text-color)!important
   }
   span.cm-link {
-    color: #737373!important
+    color: var(--in-content-box-border-color)!important
   }
   span.cm-operator {
-    color: #b1b1b3!important
-  }
-  span.cm-special {
-    color: #d7d7db!important
+    color: var(--in-content-page-color)!important
   }
   .CodeMirror-activeline-background {
-    background: rgba(185,215,253,.15)!important
+    background: var(--cm-active-line-background)!important
   }
   .CodeMirror-matchingbracket {
-    outline: rgba(255,255,255,.25) solid 1px!important;
-    color: #fff!important
+    outline: var(--cm-matching-bracket) solid 1px!important;
+    color: var(--cm-cursor)!important
   }
   .CodeMirror-merge-l-chunk {
-    background: var(--tone-7)!important
+    background: var(--in-content-page-background)!important
   }
   .cm-search-widget {
     background-color: var(--theme-sidebar-background)!important;
     border: 1px solid;
     border-bottom: none!important;
-    border-color: #2a2a2c!important;
+    border-color: var(--in-content-category-header-background)!important;
     max-height: 15px!important;
     justify-content: right!important
   }
   .cm-search-widget input {
     -moz-appearance: none!important;
-    background-color: rgba(24,29,32,1)!important;
+    background-color: var(--cm-search-background)!important;
     border: 1px solid!important;
-    border-color: var(--tone-7)!important;
-    color: var(--tone-4)!important;
+    border-color: var(--in-content-table-border-dark-color)!important;
+    color: var(--in-content-page-color)!important;
     border-radius: 8px!important;
     padding-left: 8px!important
   }
@@ -233,29 +221,29 @@
     background-color: var(--warning-background-color)!important
   }
   .cm-staticOpt {
-    background-color: var(--tone-6)!important;
+    background-color: var(--in-content-box-background)!important;
     font-weight: 700
   }
   .CodeMirror-merge-gap {
-    background-color: var(--theme-sidebar-background)!important;
+    background-color: var(--in-content-category-header-background)!important;
     border-top: 1px solid!important;
     border-bottom: 1px solid!important;
     border-right: none!important;
     border-left: none!important;
-    border-color: #2a2a2c!important
+    border-color: var(--cm-background)!important
   }
   .CodeMirror-merge {
     border: none!important
   }
   .cm-search-widget span.fa {
-    color: var(--tone-6)!important;
+    color: var(--in-content-border-color)!important;
     font-size: 100%!important
   }
   .cm-staticext {
     color: var(--theme-highlight-blue)!important
   }
   .cm-staticnetBlock {
-    color: #de7474!important
+    color: var(--cm-red)!important
   }
   .cm-staticnetAllow {
     color: var(--theme-highlight-green)!important