diff --git a/packages/codemirror/themes.mjs b/packages/codemirror/themes.mjs
index 1792d22e..75dff5b2 100644
--- a/packages/codemirror/themes.mjs
+++ b/packages/codemirror/themes.mjs
@@ -25,6 +25,11 @@ import nord, { settings as nordSettings } from './themes/nord.mjs';
 import okaidia, { settings as okaidiaSettings } from './themes/okaidia.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';
+import tokyoNight, { settings as tokyoNightSettings } from './themes/tokyoNight.mjs';
+import tokyoNightStorm, { settings as tokyoNightStormSettings } from './themes/tokioNightStorm.mjs';
+import vscodeDark, { settings as vscodeDarkSettings } from './themes/vscodeDark.mjs';
+import vscodeLight, { settings as vscodeLightSettings } from './themes/vscodeLight.mjs';
 
 import { setTheme } from '@strudel/draw';
 
@@ -52,15 +57,16 @@ export const themes = {
   nord,
   okaidia,
   solarizedDark,
-  /*sublime,
+  sublime,
   tokyoNight,
   tokyoNightStorm,
   vscodeDark,
-  xcodeDark,*/
-  /*bbedit,*/
+  //xcodeDark,
+  //bbedit,
   githubLight,
   gruvboxLight,
   materialLight,
+  vscodeLight,
   //noctisLilac,
   solarizedLight,
   //tokyoNightDay,
@@ -102,10 +108,8 @@ export const settings = {
   eclipse: eclipseSettings,
   githubLight: githubLightSettings,
   githubDark: githubDarkSettings,
-
   gruvboxDark: gruvboxDarkSettings,
   gruvboxLight: gruvboxLightSettings,
-
   materialDark: materialDarkSettings,
   materialLight: materialLightSettings,
   /*noctisLilac: {
@@ -124,19 +128,12 @@ export const settings = {
   okaidia: okaidiaSettings,
   solarizedLight: solarizedLightSettings,
   solarizedDark: solarizedDarkSettings,
-  /*
-  sublime: {
-    background: '#303841',
-    lineBackground: '#30384199',
-    foreground: '#FFFFFF',
-    caret: '#FBAC52',
-    selection: '#4C5964',
-    selectionMatch: '#3A546E',
-    gutterBackground: '#303841',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  tokyoNightDay: {
+  sublime: sublimeSettings,
+  tokyoNight: tokyoNightSettings,
+  tokyoNightStorm: tokyoNightStormSettings,
+  vscodeDark: vscodeDarkSettings,
+  vscodeLight: vscodeLightSettings,
+  /*tokyoNightDay: {
     light: true,
     background: '#e1e2e7',
     lineBackground: '#e1e2e799',
@@ -149,42 +146,6 @@ export const settings = {
     gutterBorder: 'transparent',
     lineHighlight: '#5f5faf11',
   },
-  tokyoNightStorm: {
-    background: '#24283b',
-    lineBackground: '#24283b99',
-    foreground: '#7982a9',
-    caret: '#c0caf5',
-    selection: '#6f7bb630',
-    selectionMatch: '#1f2335',
-    gutterBackground: '#24283b',
-    gutterForeground: '#7982a9',
-    gutterBorder: 'transparent',
-    lineHighlight: '#292e42',
-  },
-  tokyoNight: {
-    background: '#1a1b26',
-    lineBackground: '#1a1b2699',
-    foreground: '#787c99',
-    caret: '#c0caf5',
-    selection: '#515c7e40',
-    selectionMatch: '#16161e',
-    gutterBackground: '#1a1b26',
-    gutterForeground: '#787c99',
-    gutterBorder: 'transparent',
-    lineHighlight: '#1e202e',
-  },
-  vscodeDark: {
-    background: '#1e1e1e',
-    lineBackground: '#1e1e1e99',
-    foreground: '#9cdcfe',
-    caret: '#c6c6c6',
-    selection: '#6199ff2f',
-    selectionMatch: '#72a1ff59',
-    lineHighlight: '#ffffff0f',
-    gutterBackground: '#1e1e1e',
-    gutterForeground: '#838383',
-    gutterActiveForeground: '#fff',
-  },
   xcodeLight: {
     light: true,
     background: '#fff',
diff --git a/packages/codemirror/themes/sublime.mjs b/packages/codemirror/themes/sublime.mjs
new file mode 100644
index 00000000..c3186463
--- /dev/null
+++ b/packages/codemirror/themes/sublime.mjs
@@ -0,0 +1,42 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#303841',
+  lineBackground: '#30384199',
+  foreground: '#FFFFFF',
+  caret: '#FBAC52',
+  selection: '#4C5964',
+  selectionMatch: '#3A546E',
+  gutterBackground: '#303841',
+  gutterForeground: '#FFFFFF70',
+  lineHighlight: '#00000059',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#303841',
+    foreground: '#FFFFFF',
+    caret: '#FBAC52',
+    selection: '#4C5964',
+    selectionMatch: '#3A546E',
+    gutterBackground: '#303841',
+    gutterForeground: '#FFFFFF70',
+    lineHighlight: '#00000059',
+  },
+  styles: [
+    { tag: [t.meta, t.comment], color: '#A2A9B5' },
+    { tag: [t.attributeName, t.keyword], color: '#B78FBA' },
+    { tag: t.function(t.variableName), color: '#5AB0B0' },
+    { tag: [t.string, t.regexp, t.attributeValue], color: '#99C592' },
+    { tag: t.operator, color: '#f47954' },
+    // { tag: t.moduleKeyword, color: 'red' },
+    { tag: [t.tagName, t.modifier], color: '#E35F63' },
+    { tag: [t.number, t.definition(t.tagName), t.className, t.definition(t.variableName)], color: '#fbac52' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#E35F63' },
+    { tag: t.variableName, color: '#539ac4' },
+    { tag: [t.propertyName, t.typeName], color: '#629ccd' },
+    { tag: t.propertyName, color: '#36b7b5' },
+  ],
+});
diff --git a/packages/codemirror/themes/tokioNightStorm.mjs b/packages/codemirror/themes/tokioNightStorm.mjs
new file mode 100644
index 00000000..be973d52
--- /dev/null
+++ b/packages/codemirror/themes/tokioNightStorm.mjs
@@ -0,0 +1,52 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#24283b',
+  lineBackground: '#24283b99',
+  foreground: '#7982a9',
+  caret: '#c0caf5',
+  selection: '#6f7bb630',
+  selectionMatch: '#1f2335',
+  gutterBackground: '#24283b',
+  gutterForeground: '#7982a9',
+  gutterBorder: 'transparent',
+  lineHighlight: '#292e42',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#24283b',
+    foreground: '#7982a9',
+    caret: '#c0caf5',
+    selection: '#6f7bb630',
+    selectionMatch: '#343b5f',
+    gutterBackground: '#24283b',
+    gutterForeground: '#7982a9',
+    gutterBorder: 'transparent',
+    lineHighlight: '#292e427a',
+  },
+  styles: [
+    { tag: t.keyword, color: '#bb9af7' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' },
+    { tag: [t.propertyName], color: '#7aa2f7' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' },
+    { tag: [t.definition(t.name), t.separator], color: '#c0caf5' },
+    { tag: [t.className], color: '#c0caf5' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' },
+    { tag: [t.typeName], color: '#2ac3de', fontStyle: '#2ac3de' },
+    { tag: [t.operator, t.operatorKeyword], color: '#bb9af7' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' },
+    { tag: [t.meta, t.comment], color: '#565f89' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#89ddff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' },
+    { tag: t.invalid, color: '#ff5370' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});
diff --git a/packages/codemirror/themes/tokyoNight.mjs b/packages/codemirror/themes/tokyoNight.mjs
new file mode 100644
index 00000000..c325b4ad
--- /dev/null
+++ b/packages/codemirror/themes/tokyoNight.mjs
@@ -0,0 +1,52 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#1a1b26',
+  lineBackground: '#1a1b2699',
+  foreground: '#787c99',
+  caret: '#c0caf5',
+  selection: '#515c7e40',
+  selectionMatch: '#16161e',
+  gutterBackground: '#1a1b26',
+  gutterForeground: '#787c99',
+  gutterBorder: 'transparent',
+  lineHighlight: '#1e202e',
+};
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#1a1b26',
+    foreground: '#787c99',
+    caret: '#c0caf5',
+    selection: '#515c7e40',
+    selectionMatch: '#16161e',
+    gutterBackground: '#1a1b26',
+    gutterForeground: '#787c99',
+    gutterBorder: 'transparent',
+    lineHighlight: '#474b6611',
+  },
+  styles: [
+    { tag: t.keyword, color: '#bb9af7' },
+    { tag: [t.name, t.deleted, t.character, t.macroName], color: '#c0caf5' },
+    { tag: [t.propertyName], color: '#7aa2f7' },
+    { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ece6a' },
+    { tag: [t.function(t.variableName), t.labelName], color: '#7aa2f7' },
+    { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#bb9af7' },
+    { tag: [t.definition(t.name), t.separator], color: '#c0caf5' },
+    { tag: [t.className], color: '#c0caf5' },
+    { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#ff9e64' },
+    { tag: [t.typeName], color: '#0db9d7' },
+    { tag: [t.operator, t.operatorKeyword], color: '#bb9af7' },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: '#b4f9f8' },
+    { tag: [t.meta, t.comment], color: '#444b6a' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: '#89ddff' },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c0caf5' },
+    { tag: t.invalid, color: '#ff5370' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+  ],
+});
diff --git a/packages/codemirror/themes/vscodeDark.mjs b/packages/codemirror/themes/vscodeDark.mjs
new file mode 100644
index 00000000..26f60b5b
--- /dev/null
+++ b/packages/codemirror/themes/vscodeDark.mjs
@@ -0,0 +1,83 @@
+/**
+ * https://github.com/uiwjs/react-codemirror/issues/409
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#1e1e1e',
+  lineBackground: '#1e1e1e99',
+  foreground: '#9cdcfe',
+  caret: '#c6c6c6',
+  selection: '#6199ff2f',
+  selectionMatch: '#72a1ff59',
+  lineHighlight: '#ffffff0f',
+  gutterBackground: '#1e1e1e',
+  gutterForeground: '#838383',
+  gutterActiveForeground: '#fff',
+}
+
+export default createTheme({
+  theme: 'dark',
+  settings: {
+    background: '#1e1e1e',
+    foreground: '#9cdcfe',
+    caret: '#c6c6c6',
+    selection: '#6199ff2f',
+    selectionMatch: '#72a1ff59',
+    lineHighlight: '#ffffff0f',
+    gutterBackground: '#1e1e1e',
+    gutterForeground: '#838383',
+    gutterActiveForeground: '#fff',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+  },
+  styles: [
+    {
+      tag: [
+        t.keyword,
+        t.operatorKeyword,
+        t.modifier,
+        t.color,
+        t.constant(t.name),
+        t.standard(t.name),
+        t.standard(t.tagName),
+        t.special(t.brace),
+        t.atom,
+        t.bool,
+        t.special(t.variableName),
+      ],
+      color: '#569cd6',
+    },
+    { tag: [t.controlKeyword, t.moduleKeyword], color: '#c586c0' },
+    {
+      tag: [
+        t.name,
+        t.deleted,
+        t.character,
+        t.macroName,
+        t.propertyName,
+        t.variableName,
+        t.labelName,
+        t.definition(t.name),
+      ],
+      color: '#9cdcfe',
+    },
+    { tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' },
+    {
+      tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
+      color: '#4ec9b0',
+    },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#dcdcaa' },
+    { tag: [t.number], color: '#b5cea8' },
+    { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], color: '#d4d4d4' },
+    { tag: [t.regexp], color: '#d16969' },
+    { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: '#ce9178' },
+    { tag: [t.angleBracket], color: '#808080' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: [t.meta, t.comment], color: '#6a9955' },
+    { tag: t.link, color: '#6a9955', textDecoration: 'underline' },
+    { tag: t.invalid, color: '#ff0000' },
+  ],
+});
diff --git a/packages/codemirror/themes/vscodeLight.mjs b/packages/codemirror/themes/vscodeLight.mjs
new file mode 100644
index 00000000..208fd1b8
--- /dev/null
+++ b/packages/codemirror/themes/vscodeLight.mjs
@@ -0,0 +1,84 @@
+/**
+ * https://github.com/uiwjs/react-codemirror/issues/409
+ */
+import { tags as t } from '@lezer/highlight';
+import { createTheme } from './theme-helper.mjs';
+
+export const settings = {
+  background: '#ffffff',
+  lineBackground: '#ffffff50',
+  foreground: '#383a42',
+  caret: '#000',
+  selection: '#add6ff',
+  selectionMatch: '#a8ac94',
+  lineHighlight: '#99999926',
+  gutterBackground: '#fff',
+  gutterForeground: '#237893',
+  gutterActiveForeground: '#0b216f',
+  fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+};
+
+export default createTheme({
+  theme: 'light',
+  settings: {
+    background: '#ffffff',
+    foreground: '#383a42',
+    caret: '#000',
+    selection: '#add6ff',
+    selectionMatch: '#a8ac94',
+    lineHighlight: '#99999926',
+    gutterBackground: '#fff',
+    gutterForeground: '#237893',
+    gutterActiveForeground: '#0b216f',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+  },
+  styles: [
+    {
+      tag: [
+        t.keyword,
+        t.operatorKeyword,
+        t.modifier,
+        t.color,
+        t.constant(t.name),
+        t.standard(t.name),
+        t.standard(t.tagName),
+        t.special(t.brace),
+        t.atom,
+        t.bool,
+        t.special(t.variableName),
+      ],
+      color: '#0000ff',
+    },
+    { tag: [t.moduleKeyword, t.controlKeyword], color: '#af00db' },
+    {
+      tag: [
+        t.name,
+        t.deleted,
+        t.character,
+        t.macroName,
+        t.propertyName,
+        t.variableName,
+        t.labelName,
+        t.definition(t.name),
+      ],
+      color: '#0070c1',
+    },
+    { tag: t.heading, fontWeight: 'bold', color: '#0070c1' },
+    {
+      tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace],
+      color: '#267f99',
+    },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: '#795e26' },
+    { tag: [t.number], color: '#098658' },
+    { tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], color: '#383a42' },
+    { tag: [t.regexp], color: '#af00db' },
+    { tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], color: '#a31515' },
+    { tag: [t.angleBracket], color: '#383a42' },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: [t.meta, t.comment], color: '#008000' },
+    { tag: t.link, color: '#4078f2', textDecoration: 'underline' },
+    { tag: t.invalid, color: '#e45649' },
+  ],
+});