diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index b3bf3178c..47d6c3c1e 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -22,7 +22,7 @@ import gruvboxLight, { settings as gruvboxLightSettings } from './themes/gruvbox
 import materialDark, { settings as materialDarkSettings } from './themes/materialDark.mjs';
 import materialLight, { settings as materialLightSettings } from './themes/materialLight.mjs';
 import nord, { settings as nordSettings } from './themes/nord.mjs';
-import okaidia, { settings as okaidiaSettings } from './themes/okaidia.mjs';
+import monokai, { settings as monokaiSettings } from './themes/monokai.mjs';
 import solarizedDark, { settings as solarizedDarkSettings } from './themes/solarizedDark.mjs';
 import solarizedLight, { settings as solarizedLightSettings } from './themes/solarizedLight.mjs';
 import sublime, { settings as sublimeSettings } from './themes/sublime.mjs';
@@ -31,7 +31,7 @@ import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/t
 import tokyoNightDay, { settings as tokyoNightDaySettings } from './themes/tokyoNightDay.mjs';
 import vscodeDark, { settings as vscodeDarkSettings } from './themes/vscodeDark.mjs';
 import vscodeLight, { settings as vscodeLightSettings } from './themes/vscodeLight.mjs';
-import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
+// import xcodeDark, { settings as xcodeDarkSettings } from './themes/xcodeDark.mjs';
 import xcodeLight, { settings as xcodeLightSettings } from './themes/xcodeLight.mjs';
 import bbedit, { settings as bbeditSettings } from './themes/bbedit.mjs';
 import noctisLilac, { settings as noctisLilacSettings } from './themes/noctisLilac.mjs';
@@ -50,25 +50,25 @@ export const themes = {
   darcula,
   dracula,
   // todo: optimize
-  terminal,
-  bespin,
-  abcdef,
+  // bespin,
+  //abcdef,
   androidstudio,
   duotoneDark,
-  duotoneLight,
-  eclipse,
   githubDark,
   gruvboxDark,
   materialDark,
   nord,
-  okaidia,
+  monokai,
   solarizedDark,
   sublime,
   tokyoNight,
   tokyoNightStorm,
   vscodeDark,
-  xcodeDark,
+  //xcodeDark,
+  // LIGHT
   bbedit,
+  //duotoneLight,
+  eclipse,
   githubLight,
   gruvboxLight,
   materialLight,
@@ -106,7 +106,7 @@ export const settings = {
   materialLight: materialLightSettings,
   noctisLilac: noctisLilacSettings,
   nord: nordSettings,
-  okaidia: okaidiaSettings,
+  monokai: monokaiSettings,
   solarizedLight: solarizedLightSettings,
   solarizedDark: solarizedDarkSettings,
   sublime: sublimeSettings,
@@ -115,7 +115,7 @@ export const settings = {
   vscodeDark: vscodeDarkSettings,
   vscodeLight: vscodeLightSettings,
   xcodeLight: xcodeLightSettings,
-  xcodeDark: xcodeDarkSettings,
+  //xcodeDark: xcodeDarkSettings,
   tokyoNightDay: tokyoNightDaySettings,
 };
 
diff --git a/packages/codemirror/themes/abcdef.mjs b/packages/codemirror/themes/abcdef.mjs
index a184ea72a..917823b9f 100644
--- a/packages/codemirror/themes/abcdef.mjs
+++ b/packages/codemirror/themes/abcdef.mjs
@@ -26,11 +26,14 @@ export default createTheme({
     caret: '#00FF00',
     selection: '#515151',
     selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
+    // gutterBackground: '#555',
+    gutterBackground: 'transparent',
+    /* gutterForeground: '#FFFFFF', */
+    gutterForeground: '#7a7b7c',
     lineHighlight: '#0a6bcb3d',
   },
   styles: [
+    { tag: t.labelName, color: 'inherit' },
     { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
     { tag: t.atom, color: '#77F' },
     { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs
index b74b43026..30812d126 100644
--- a/packages/codemirror/themes/algoboy.mjs
+++ b/packages/codemirror/themes/algoboy.mjs
@@ -1,42 +1,60 @@
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
+
+const palettes = {
+  // https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-09-920495662
+  'Central Florida A': ['#FFF630', '#B3AC22', '#666213', '#191905'],
+  'Central Florida B': ['#38CEBA', '#279082', '#16524A', '#061513'],
+  'Central Florida C': ['#FF8836', '#B35F26', '#663616', '#190E05'],
+  'Central Florida D': ['#E07070', '#9D4E4E', '#5A2D2D', '#160B0B'],
+  'Central Florida E': ['#7AA4CB', '#55738E', '#314251', '#0C1014'],
+  'Feminine Energy A': ['#DC5686', '#9A415E', '#582536', '#16090D'],
+  'Feminine Energy B': ['#D0463C', '#92312A', '#531c18', '#150706'],
+  'Feminine Energy C': ['#D86918', '#974A11', '#562A0A', '#160A02'],
+  'Feminine Energy D': ['#EFC54F', '#A78A36', '#604F20', '#181408'],
+  'Feminine Energy E': ['#866399', '#5e456b', '#36283d', '#0d0a0f'],
+  'Sour Watermelon A': ['#993366', '#6B2447', '#3D1429', '#0F050A'],
+  'Sour Watermelon B': ['#996666', '#6B4747', '#3D2929', '#0F0A0A'],
+  'Sour Watermelon C': ['#999966', '#686B47', '#3d3d29', '#0f0f0A'],
+  'Sour Watermelon D': ['#99cc66', '#6b8f47', '#3d5229', '#0f140a'],
+  'Sour Watermelon E': ['#99ff66', '#6bb347', '#3d6629', '#0f190a'],
+  //https://www.deviantart.com/advancedfan2020/art/Game-Boy-Palette-Set-Color-HEX-Part-02-920073260
+  'Peri Peaceful A': ['#909BE9', '#656DA3', '#3A3E5D', '#0e0f17'],
+  'Peri Peaceful B': ['#68628d', '#494563', '#2a2738', '#0a0a0e'], // pretty dim
+  'Peri Peaceful E': ['#b5a0a9', '#7f7076', '#484044', '#121011'],
+  'Hichem Palette B': ['#4fa3a5', '#377273', '#204142', '#081010'],
+  'Hichem Palette C': ['#Fe6f9b', '#b24e6d', '#662c3e', '#190b0f'],
+  'Hichem Palette D': ['#ffbb5a', '#b3833f', '#664b24', '#191309'],
+  'JSR2 A': ['#E0EFC0', '#9da786', '#5a604d', '#161813'],
+};
+const palette = palettes['Sour Watermelon B'];
 export const settings = {
-  background: '#9bbc0f',
-  foreground: '#0f380f', // whats that?
-  caret: '#0f380f',
-  selection: '#306230',
-  selectionMatch: '#ffffff26',
-  lineHighlight: '#8bac0f',
-  lineBackground: '#9bbc0f50',
+  background: palette[3],
+  foreground: palette[1],
+  caret: palette[0],
+  selection: palette[0],
+  selectionMatch: palette[1],
+  lineHighlight: palette[3],
+  lineBackground: palette[3] + '90',
   //lineBackground: 'transparent',
   gutterBackground: 'transparent',
-  gutterForeground: '#0f380f',
-  light: true,
+  gutterForeground: palette[0],
+  light: false,
   // customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
-  theme: 'light',
+  theme: 'dark',
   settings,
   styles: [
-    { tag: t.labelName, color: 'inherit' },
-    { tag: t.keyword, color: 'inherit' },
-    { tag: t.operator, color: 'inherit' },
-    { tag: t.special(t.variableName), color: 'inherit' },
-    { tag: t.typeName, color: 'inherit' },
-    { tag: t.atom, color: 'inherit' },
-    { tag: t.number, color: 'inherit' },
-    { tag: t.definition(t.variableName), color: 'inherit' },
-    { tag: t.string, color: 'inherit' },
-    { tag: t.special(t.string), color: 'inherit' },
-    { tag: t.comment, color: 'inherit' },
-    { tag: t.variableName, color: 'inherit' },
-    { tag: t.tagName, color: 'inherit' },
-    { tag: t.bracket, color: 'inherit' },
-    { tag: t.meta, color: 'inherit' },
-    { tag: t.attributeName, color: 'inherit' },
-    { tag: t.propertyName, color: 'inherit' },
-    { tag: t.className, color: 'inherit' },
-    { tag: t.invalid, color: 'inherit' },
-    { tag: [t.unit, t.punctuation], color: 'inherit' },
+    { tag: t.comment, color: palette[2] },
+    { tag: t.string, color: palette[1] },
+    { tag: [t.atom, t.number], color: palette[1] },
+    { tag: [t.meta, t.labelName, t.variableName], color: palette[0] },
+    {
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: palette[1],
+    },
+    { tag: [t.function(t.variableName), t.propertyName], color: palette[0] },
+    { tag: t.atom, color: palette[1] },
   ],
 });
diff --git a/packages/codemirror/themes/androidstudio.mjs b/packages/codemirror/themes/androidstudio.mjs
index 6a1655ceb..097f7951b 100644
--- a/packages/codemirror/themes/androidstudio.mjs
+++ b/packages/codemirror/themes/androidstudio.mjs
@@ -22,15 +22,20 @@ export default createTheme({
     caret: '#00FF00',
     selection: '#4e5254',
     selectionMatch: '#4e5254',
+    gutterForeground: '#cccccc50',
     lineHighlight: '#7f85891f',
   },
   styles: [
-    { tag: [t.keyword, t.deleted, t.className], color: '#cc7832' },
-    { tag: [t.number, t.literal, t.derefOperator], color: '#6897bb' },
-    { tag: [t.link, t.variableName], color: '#629755' },
+    { tag: t.labelName, color: 'inherit' },
+    { tag: [t.keyword, t.deleted, t.className], color: '#a9b7c6' },
+    { tag: [t.number, t.literal], color: '#6897bb' },
+    //{ tag: [t.link, t.variableName], color: '#629755' },
+    { tag: [t.link, t.variableName], color: '#a9b7c6' },
     { tag: [t.comment, t.quote], color: 'grey' },
     { tag: [t.meta, t.documentMeta], color: '#bbb529' },
-    { tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+    //{ tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+    { tag: [t.propertyName, t.attributeValue], color: '#a9b7c6' },
+    { tag: [t.string], color: '#6a8759' },
     { tag: [t.heading, t.typeName], color: '#ffc66d' },
     { tag: [t.attributeName], color: '#a9b7c6' },
     { tag: [t.emphasis], fontStyle: 'italic' },
diff --git a/packages/codemirror/themes/atomone.mjs b/packages/codemirror/themes/atomone.mjs
index 1839b4958..85951d157 100644
--- a/packages/codemirror/themes/atomone.mjs
+++ b/packages/codemirror/themes/atomone.mjs
@@ -10,7 +10,7 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#272C35',
   lineBackground: '#272C3599',
-  foreground: '#9d9b97',
+  foreground: 'hsl(220, 14%, 71%)',
   caret: '#797977',
   selection: '#ffffff30',
   selectionMatch: '#2B323D',
@@ -40,7 +40,7 @@ export default createTheme({
     },
     { tag: [t.tagName, t.heading], color: '#e06c75' },
     { tag: t.comment, color: '#54636D' },
-    { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' },
+    { tag: [t.variableName, t.propertyName, t.labelName], color: 'hsl(220, 14%, 71%)' },
     { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
     { tag: t.className, color: 'hsl( 39, 67%, 69%)' },
     { tag: t.keyword, color: 'hsl(286, 60%, 67%)' },
diff --git a/packages/codemirror/themes/darcula.mjs b/packages/codemirror/themes/darcula.mjs
index ac61c6b1f..176acbfe3 100644
--- a/packages/codemirror/themes/darcula.mjs
+++ b/packages/codemirror/themes/darcula.mjs
@@ -7,8 +7,8 @@
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 export const settings = {
-  background: '#2B2B2B',
-  lineBackground: '#2B2B2B99',
+  background: '#242424',
+  lineBackground: '#24242499',
   foreground: '#f8f8f2',
   caret: '#FFFFFF',
   selection: 'rgba(255, 255, 255, 0.1)',
@@ -22,22 +22,24 @@ export const settings = {
 export default createTheme({
   theme: 'dark',
   settings: {
-    background: '#2B2B2B',
+    background: '#242424',
     foreground: '#f8f8f2',
     caret: '#FFFFFF',
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: 'rgba(255, 255, 255, 0.1)',
+    gutterBackground: 'transparent',
     gutterForeground: '#999',
     gutterBorder: 'transparent',
     lineHighlight: 'rgba(255, 255, 255, 0.1)',
   },
   styles: [
-    { tag: [t.atom, t.number], color: '#bd93f9' },
-    { tag: [t.comment], color: '#61A151' },
+    { tag: t.labelName, color: '#CCCCCC' },
+    { tag: [t.atom, t.number], color: '#7A9EC2' },
+    { tag: [t.comment], color: '#707070' },
     { tag: [t.string], color: '#6A8759' },
-    { tag: [t.variableName, t.operator], color: '#A9B7C6' },
-    { tag: [t.meta, t.className], color: '#A9B7C6' },
+    { tag: [t.variableName, t.operator], color: '#CCCCCC' },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#FFC66D' },
+    { tag: [t.meta, t.className], color: '#FFC66D' },
     { tag: [t.propertyName], color: '#FFC66D' },
     { tag: [t.keyword], color: '#CC7832' },
     { tag: [t.tagName], color: '#ff79c6' },
diff --git a/packages/codemirror/themes/dracula.mjs b/packages/codemirror/themes/dracula.mjs
index e1e78d30c..10147edaa 100644
--- a/packages/codemirror/themes/dracula.mjs
+++ b/packages/codemirror/themes/dracula.mjs
@@ -4,6 +4,7 @@
  * Michael Kaminsky (http://github.com/mkaminsky11)
  * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
  */
+// this is different from https://thememirror.net/dracula
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 
@@ -15,11 +16,13 @@ export const settings = {
   selection: 'rgba(255, 255, 255, 0.1)',
   selectionMatch: 'rgba(255, 255, 255, 0.2)',
   gutterBackground: '#282a36',
-  gutterForeground: '#6D8A88',
+  gutterForeground: '#6272a4',
   gutterBorder: 'transparent',
   lineHighlight: 'rgba(255, 255, 255, 0.1)',
 };
 
+const purple = '#BD93F9';
+
 export default createTheme({
   theme: 'dark',
   settings: {
@@ -29,21 +32,20 @@ export default createTheme({
     selection: 'rgba(255, 255, 255, 0.1)',
     selectionMatch: 'rgba(255, 255, 255, 0.2)',
     gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
+    gutterForeground: '#6272a4',
     gutterBorder: 'transparent',
     lineHighlight: 'rgba(255, 255, 255, 0.1)',
   },
   styles: [
     { tag: t.comment, color: '#6272a4' },
     { tag: t.string, color: '#f1fa8c' },
-    { tag: t.atom, color: '#bd93f9' },
-    { tag: t.meta, color: '#f8f8f2' },
-    { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' },
-    { tag: [t.function(t.propertyName), t.propertyName], color: '#66d9ef' },
+    { tag: [t.atom, t.number], color: purple },
+    { tag: [t.meta, t.labelName, t.variableName], color: '#f8f8f2' },
     {
-      tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
-      color: '#50fa7b',
+      tag: [t.keyword, t.tagName, t.arithmeticOperator],
+      color: '#ff79c6',
     },
+    { tag: [t.function(t.variableName), t.propertyName], color: '#50fa7b' },
     { tag: t.atom, color: '#bd93f9' },
   ],
 });
diff --git a/packages/codemirror/themes/duotoneDark.mjs b/packages/codemirror/themes/duotoneDark.mjs
index 51e048415..057302cb7 100644
--- a/packages/codemirror/themes/duotoneDark.mjs
+++ b/packages/codemirror/themes/duotoneDark.mjs
@@ -9,7 +9,7 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#2a2734',
   lineBackground: '#2a273499',
-  foreground: '#6c6783',
+  foreground: '#eeebff',
   caret: '#ffad5c',
   selection: 'rgba(255, 255, 255, 0.1)',
   gutterBackground: '#2a2734',
@@ -23,20 +23,20 @@ export default createTheme({
     background: '#2a2734',
     foreground: '#6c6783',
     caret: '#ffad5c',
-    selection: '#91ff6c26',
-    selectionMatch: '#91ff6c26',
+    selection: '#9a86fd',
+    selectionMatch: '#9a86fd',
     gutterBackground: '#2a2734',
     gutterForeground: '#545167',
     lineHighlight: '#36334280',
   },
   styles: [
-    { tag: [t.comment, t.bracket], color: '#6c6783' },
+    { tag: [t.comment, t.bracket, t.operator], color: '#6c6783' },
     { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
     { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
-    { tag: [t.typeName, t.url], color: '#7a63ee' },
-    { tag: t.operator, color: '#ffad5c' },
+    { tag: [t.typeName, t.url], color: '#eeebff' },
     { tag: t.string, color: '#ffb870' },
-    { tag: [t.propertyName], color: '#9a86fd' },
-    { tag: [t.unit, t.punctuation], color: '#e09142' },
+    /* { tag: [t.propertyName], color: '#9a86fd' }, */
+    { tag: [t.propertyName], color: '#eeebff' },
+    { tag: t.labelName, color: '#eeebff' },
   ],
 });
diff --git a/packages/codemirror/themes/githubDark.mjs b/packages/codemirror/themes/githubDark.mjs
index b8a0b17e3..5187dcc21 100644
--- a/packages/codemirror/themes/githubDark.mjs
+++ b/packages/codemirror/themes/githubDark.mjs
@@ -25,10 +25,12 @@ export default createTheme({
     lineHighlight: '#36334280',
   },
   styles: [
+    { tag: t.labelName, color: '#d2a8ff' },
     { tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
     { tag: [t.comment, t.bracket], color: '#8b949e' },
     { tag: [t.className, t.propertyName], color: '#d2a8ff' },
-    { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' },
+    { tag: [t.variableName, t.attributeName], color: '#d2a8ff' },
+    { tag: [t.number, t.operator], color: '#79c0ff' },
     { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
     { tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
     { tag: [t.name, t.quote], color: '#7ee787' },
diff --git a/packages/codemirror/themes/gruvboxDark.mjs b/packages/codemirror/themes/gruvboxDark.mjs
index 0e2c73799..31d7e42c1 100644
--- a/packages/codemirror/themes/gruvboxDark.mjs
+++ b/packages/codemirror/themes/gruvboxDark.mjs
@@ -35,7 +35,7 @@ export default createTheme({
     { tag: t.keyword, color: '#fb4934' },
     { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#8ec07c' },
     { tag: [t.variableName], color: '#83a598' },
-    { tag: [t.function(t.variableName)], color: '#b8bb26', fontStyle: 'bold' },
+    { tag: [t.function(t.variableName)], color: '#8ec07c', fontStyle: 'bold' },
     { tag: [t.labelName], color: '#ebdbb2' },
     { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#d3869b' },
     { tag: [t.definition(t.name), t.separator], color: '#ebdbb2' },
@@ -43,7 +43,7 @@ export default createTheme({
     { tag: [t.annotation], color: '#fb4934d' },
     { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#d3869b' },
     { tag: [t.typeName, t.className], color: '#fabd2f' },
-    { tag: [t.operator, t.operatorKeyword], color: '#fb4934' },
+    { tag: [t.operatorKeyword], color: '#fb4934' },
     {
       tag: [t.tagName],
       color: '#8ec07c',
diff --git a/packages/codemirror/themes/materialDark.mjs b/packages/codemirror/themes/materialDark.mjs
index 87d9b3c70..f13412885 100644
--- a/packages/codemirror/themes/materialDark.mjs
+++ b/packages/codemirror/themes/materialDark.mjs
@@ -2,50 +2,50 @@ import { tags as t } from '@lezer/highlight';
 import { createTheme } from './theme-helper.mjs';
 
 export const settings = {
-  background: '#2e3235',
-  lineBackground: '#2e323599',
+  background: '#212121',
+  lineBackground: '#21212199',
   foreground: '#bdbdbd',
   caret: '#a0a4ae',
   selection: '#d7d4f0',
   selectionMatch: '#d7d4f0',
-  gutterBackground: '#2e3235',
+  gutterBackground: '#212121',
   gutterForeground: '#999',
   gutterActiveForeground: '#4f5b66',
-  lineHighlight: '#545b61',
+  lineHighlight: '#111111',
 };
 
 export default createTheme({
   theme: 'dark',
   settings: {
-    background: '#2e3235',
+    background: '#212121',
     foreground: '#bdbdbd',
     caret: '#a0a4ae',
     selection: '#d7d4f063',
     selectionMatch: '#d7d4f063',
-    gutterBackground: '#2e3235',
+    gutterBackground: '#212121',
     gutterForeground: '#999',
     gutterActiveForeground: '#4f5b66',
-    lineHighlight: '#545b6130',
+    lineHighlight: '#333333',
   },
   styles: [
     { tag: t.keyword, color: '#cf6edf' },
     { tag: [t.name, t.deleted, t.character, t.macroName], color: '#56c8d8' },
-    { tag: [t.propertyName], color: '#facf4e' },
+    { tag: [t.propertyName], color: '#82AAFF' },
     { tag: [t.variableName], color: '#bdbdbd' },
-    { tag: [t.function(t.variableName)], color: '#56c8d8' },
+    { tag: [t.function(t.variableName)], color: '#82AAFF' },
     { tag: [t.labelName], color: '#cf6edf' },
     { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#facf4e' },
-    { tag: [t.definition(t.name), t.separator], color: '#fa5788' },
+    { tag: [t.definition(t.name), t.separator], color: '#56c8d8' },
     { tag: [t.brace], color: '#cf6edf' },
-    { tag: [t.annotation], color: '#ff5f52' },
-    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ffad42' },
-    { tag: [t.typeName, t.className], color: '#ffad42' },
-    { tag: [t.operator, t.operatorKeyword], color: '#7186f0' },
+    { tag: [t.annotation], color: '#f07178' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#f07178' },
+    { tag: [t.typeName, t.className], color: '#f07178' },
+    { tag: [t.operator, t.operatorKeyword], color: '#82AAFF' },
     { tag: [t.tagName], color: '#99d066' },
-    { tag: [t.squareBracket], color: '#ff5f52' },
+    { tag: [t.squareBracket], color: '#f07178' },
     { tag: [t.angleBracket], color: '#606f7a' },
     { tag: [t.attributeName], color: '#bdbdbd' },
-    { tag: [t.regexp], color: '#ff5f52' },
+    { tag: [t.regexp], color: '#f07178' },
     { tag: [t.quote], color: '#6abf69' },
     { tag: [t.string], color: '#99d066' },
     {
@@ -58,7 +58,7 @@ export default createTheme({
     { tag: [t.meta], color: '#707d8b' },
     { tag: [t.comment], color: '#707d8b', fontStyle: 'italic' },
     { tag: t.monospace, color: '#bdbdbd' },
-    { tag: t.strong, fontWeight: 'bold', color: '#ff5f52' },
+    { tag: t.strong, fontWeight: 'bold', color: '#f07178' },
     { tag: t.emphasis, fontStyle: 'italic', color: '#99d066' },
     { tag: t.strikethrough, textDecoration: 'line-through' },
     { tag: t.heading, fontWeight: 'bold', color: '#facf4e' },
@@ -70,8 +70,8 @@ export default createTheme({
     },
     { tag: [t.heading5, t.heading6], color: '#facf4e' },
     { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#56c8d8' },
-    { tag: [t.processingInstruction, t.inserted], color: '#ff5f52' },
+    { tag: [t.processingInstruction, t.inserted], color: '#f07178' },
     { tag: [t.contentSeparator], color: '#56c8d8' },
-    { tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #ff5f52` },
+    { tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #f07178` },
   ],
 });
diff --git a/packages/codemirror/themes/okaidia.mjs b/packages/codemirror/themes/monokai.mjs
similarity index 95%
rename from packages/codemirror/themes/okaidia.mjs
rename to packages/codemirror/themes/monokai.mjs
index a6e32bd93..294b946b5 100644
--- a/packages/codemirror/themes/okaidia.mjs
+++ b/packages/codemirror/themes/monokai.mjs
@@ -26,6 +26,7 @@ export default createTheme({
     lineHighlight: '#0000003b',
   },
   styles: [
+    { tag: t.labelName, color: '#bababa' },
     { tag: [t.comment, t.documentMeta], color: '#8292a2' },
     { tag: [t.number, t.bool, t.null, t.atom], color: '#ae81ff' },
     { tag: [t.attributeValue, t.className, t.name], color: '#e6db74' },
@@ -36,7 +37,7 @@ export default createTheme({
     { tag: [t.regexp, t.className, t.typeName, t.definition(t.typeName)], color: '#66d9ef' },
     {
       tag: [t.definition(t.variableName), t.definition(t.propertyName), t.function(t.variableName)],
-      color: '#fd971f',
+      color: '#a6e22e',
     },
     // { tag: t.keyword, color: '#f92672' },
     { tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket], color: '#f92672' },
diff --git a/packages/codemirror/themes/sublime.mjs b/packages/codemirror/themes/sublime.mjs
index c3186463e..068b9bac9 100644
--- a/packages/codemirror/themes/sublime.mjs
+++ b/packages/codemirror/themes/sublime.mjs
@@ -26,6 +26,7 @@ export default createTheme({
     lineHighlight: '#00000059',
   },
   styles: [
+    { tag: t.labelName, color: '#A2A9B5' },
     { tag: [t.meta, t.comment], color: '#A2A9B5' },
     { tag: [t.attributeName, t.keyword], color: '#B78FBA' },
     { tag: t.function(t.variableName), color: '#5AB0B0' },
diff --git a/packages/codemirror/themes/vscodeDark.mjs b/packages/codemirror/themes/vscodeDark.mjs
index cb46d3286..703790fd5 100644
--- a/packages/codemirror/themes/vscodeDark.mjs
+++ b/packages/codemirror/themes/vscodeDark.mjs
@@ -4,7 +4,7 @@ import { createTheme } from './theme-helper.mjs';
 export const settings = {
   background: '#1e1e1e',
   lineBackground: '#1e1e1e99',
-  foreground: '#9cdcfe',
+  foreground: '#fff',
   caret: '#c6c6c6',
   selection: '#6199ff2f',
   selectionMatch: '#72a1ff59',
@@ -18,7 +18,7 @@ export default createTheme({
   theme: 'dark',
   settings: {
     background: '#1e1e1e',
-    foreground: '#9cdcfe',
+    foreground: '#fff',
     caret: '#c6c6c6',
     selection: '#6199ff2f',
     selectionMatch: '#72a1ff59',