diff --git a/themes/abcdef/src/index.ts b/themes/abcdef/src/index.ts
index f3cd8c837..efc952778 100644
--- a/themes/abcdef/src/index.ts
+++ b/themes/abcdef/src/index.ts
@@ -4,7 +4,7 @@
  * https://codemirror.net/5/theme/abcdef.css
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsAbcdef: CreateThemeOptions['settings'] = {
   background: '#0f0f0f',
@@ -17,6 +17,26 @@ export const defaultSettingsAbcdef: CreateThemeOptions['settings'] = {
   lineHighlight: '#0a6bcb3d',
 };
 
+export const abcdefDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
+  { tag: t.atom, color: '#77F' },
+  { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
+  { tag: t.number, color: 'violet' },
+  { tag: t.definition(t.variableName), color: '#fffabc' },
+  { tag: t.variableName, color: '#abcdef' },
+  { tag: t.function(t.variableName), color: '#fffabc' },
+  { tag: t.typeName, color: '#FFDD44' },
+  { tag: t.tagName, color: '#def' },
+  { tag: t.string, color: '#2b4' },
+  { tag: t.meta, color: '#C9F' },
+  // { tag: t.qualifier, color: '#FFF700' },
+  // { tag: t.builtin, color: '#30aabc' },
+  { tag: t.bracket, color: '#8a8a8a' },
+  { tag: t.attributeName, color: '#DDFF00' },
+  { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
+  { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
+];
+
 export const abcdefInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -25,26 +45,7 @@ export const abcdefInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAbcdef,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
-      { tag: t.atom, color: '#77F' },
-      { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
-      { tag: t.number, color: 'violet' },
-      { tag: t.definition(t.variableName), color: '#fffabc' },
-      { tag: t.variableName, color: '#abcdef' },
-      { tag: t.function(t.variableName), color: '#fffabc' },
-      { tag: t.typeName, color: '#FFDD44' },
-      { tag: t.tagName, color: '#def' },
-      { tag: t.string, color: '#2b4' },
-      { tag: t.meta, color: '#C9F' },
-      // { tag: t.qualifier, color: '#FFF700' },
-      // { tag: t.builtin, color: '#30aabc' },
-      { tag: t.bracket, color: '#8a8a8a' },
-      { tag: t.attributeName, color: '#DDFF00' },
-      { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
-      { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
-      ...styles,
-    ],
+    styles: [...abcdefDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/abyss/src/index.ts b/themes/abyss/src/index.ts
index 33985a1b9..b3bee4c88 100644
--- a/themes/abyss/src/index.ts
+++ b/themes/abyss/src/index.ts
@@ -13,6 +13,30 @@ export const defaultSettingsAbyss: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const abyssDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const abyssInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const abyssInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAbyss,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...abyssDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/androidstudio/src/index.ts b/themes/androidstudio/src/index.ts
index e16fb5e69..be0e5c8b8 100644
--- a/themes/androidstudio/src/index.ts
+++ b/themes/androidstudio/src/index.ts
@@ -2,7 +2,7 @@
  * @name androidstudio
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsAndroidstudio: CreateThemeOptions['settings'] = {
   background: '#282b2e',
@@ -13,6 +13,18 @@ export const defaultSettingsAndroidstudio: CreateThemeOptions['settings'] = {
   lineHighlight: '#7f85891f',
 };
 
+export const androidstudioDarkStyle: CreateThemeOptions['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.comment, t.quote], color: 'grey' },
+  { tag: [t.meta, t.documentMeta], color: '#bbb529' },
+  { tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
+  { tag: [t.heading, t.typeName], color: '#ffc66d' },
+  { tag: [t.attributeName], color: '#a9b7c6' },
+  { tag: [t.emphasis], fontStyle: 'italic' },
+];
+
 export const androidstudioInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,18 +33,7 @@ export const androidstudioInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAndroidstudio,
       ...settings,
     },
-    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.comment, t.quote], color: 'grey' },
-      { tag: [t.meta, t.documentMeta], color: '#bbb529' },
-      { tag: [t.string, t.propertyName, t.attributeValue], color: '#6a8759' },
-      { tag: [t.heading, t.typeName], color: '#ffc66d' },
-      { tag: [t.attributeName], color: '#a9b7c6' },
-      { tag: [t.emphasis], fontStyle: 'italic' },
-      ...styles,
-    ],
+    styles: [...androidstudioDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/andromeda/src/index.ts b/themes/andromeda/src/index.ts
index e40e315cb..253d968f7 100644
--- a/themes/andromeda/src/index.ts
+++ b/themes/andromeda/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './color';
 
 export const defaultSettingsAndromeda: CreateThemeOptions['settings'] = {
@@ -13,6 +13,34 @@ export const defaultSettingsAndromeda: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const andromedaDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  {
+    tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
+    color: c.constant,
+  },
+];
+
 export const andromedaInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,34 +49,7 @@ export const andromedaInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAndromeda,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      {
-        tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
-        color: c.constant,
-      },
-      ...styles,
-    ],
+    styles: [...andromedaDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/atomone/src/index.ts b/themes/atomone/src/index.ts
index 13e4000e2..d308a7533 100644
--- a/themes/atomone/src/index.ts
+++ b/themes/atomone/src/index.ts
@@ -19,6 +19,20 @@ export const defaultSettingsAtomone: CreateThemeOptions['settings'] = {
   lineHighlight: '#2e3f5940',
 };
 
+export const atomoneDarkStyle: CreateThemeOptions['styles'] = [
+  {
+    tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+    color: 'hsl(207, 82%, 66%)',
+  },
+  { tag: [t.tagName, t.heading], color: '#e06c75' },
+  { tag: t.comment, color: '#54636D' },
+  { tag: [t.propertyName], 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%)' },
+  { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
+];
+
 export const atomoneInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -27,20 +41,7 @@ export const atomoneInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAtomone,
       ...settings,
     },
-    styles: [
-      {
-        tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-        color: 'hsl(207, 82%, 66%)',
-      },
-      { tag: [t.tagName, t.heading], color: '#e06c75' },
-      { tag: t.comment, color: '#54636D' },
-      { tag: [t.propertyName], 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%)' },
-      { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
-      ...styles,
-    ],
+    styles: [...atomoneDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/aura/src/index.ts b/themes/aura/src/index.ts
index 03ea1d24a..4f6aa28ab 100644
--- a/themes/aura/src/index.ts
+++ b/themes/aura/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsAura: CreateThemeOptions['settings'] = {
   background: '#21202e',
@@ -13,6 +13,29 @@ export const defaultSettingsAura: CreateThemeOptions['settings'] = {
   lineHighlight: '#a394f033',
 };
 
+export const auraDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#a277ff' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#edecee' },
+  { tag: [t.propertyName], color: '#ffca85' },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#61ffca' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#ffca85' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#61ffca' },
+  { tag: [t.definition(t.name), t.separator], color: '#edecee' },
+  { tag: [t.className], color: '#82e2ff' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#61ffca' },
+  { tag: [t.typeName], color: '#82e2ff' },
+  { tag: [t.operator, t.operatorKeyword], color: '#a277ff' },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: '#61ffca' },
+  { tag: [t.meta, t.comment], color: '#6d6d6d' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: '#a277ff' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#edecee' },
+  { tag: t.invalid, color: '#ff6767' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const auraInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,29 +44,7 @@ export const auraInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsAura,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#a277ff' },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: '#edecee' },
-      { tag: [t.propertyName], color: '#ffca85' },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#61ffca' },
-      { tag: [t.function(t.variableName), t.labelName], color: '#ffca85' },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#61ffca' },
-      { tag: [t.definition(t.name), t.separator], color: '#edecee' },
-      { tag: [t.className], color: '#82e2ff' },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#61ffca' },
-      { tag: [t.typeName], color: '#82e2ff' },
-      { tag: [t.operator, t.operatorKeyword], color: '#a277ff' },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: '#61ffca' },
-      { tag: [t.meta, t.comment], color: '#6d6d6d' },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: '#a277ff' },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#edecee' },
-      { tag: t.invalid, color: '#ff6767' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...auraDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/basic/src/dark.ts b/themes/basic/src/dark.ts
index 3e3bb24c0..e74d3f532 100644
--- a/themes/basic/src/dark.ts
+++ b/themes/basic/src/dark.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsBasicDark: CreateThemeOptions['settings'] = {
   background: '#2E3235',
@@ -13,6 +13,54 @@ export const defaultSettingsBasicDark: CreateThemeOptions['settings'] = {
   lineHighlight: '#B9D2FF30',
 };
 
+export const basicDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#fda331' },
+  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#b5bd68' },
+  { tag: [t.variableName], color: '#6fb3d2' },
+  { tag: [t.function(t.variableName)], color: '#fda331' },
+  { tag: [t.labelName], color: '#fc6d24' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#fda331' },
+  { tag: [t.definition(t.name), t.separator], color: '#cc99cc' },
+  { tag: [t.brace], color: '#cc99cc' },
+  { tag: [t.annotation], color: '#fc6d24' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#fda331' },
+  { tag: [t.typeName, t.className], color: '#6fb3d2' },
+  { tag: [t.operator, t.operatorKeyword], color: '#cc99cc' },
+  { tag: [t.tagName], color: '#fda331' },
+  { tag: [t.squareBracket], color: '#cc99cc' },
+  { tag: [t.angleBracket], color: '#cc99cc' },
+  { tag: [t.attributeName], color: '#6fb3d2' },
+  { tag: [t.regexp], color: '#fda331' },
+  { tag: [t.quote], color: '#DDDDDD' },
+  { tag: [t.string], color: '#b5bd68' },
+  {
+    tag: t.link,
+    color: '#6987AF',
+    textDecoration: 'underline',
+    textUnderlinePosition: 'under',
+  },
+  { tag: [t.url, t.escape, t.special(t.string)], color: '#8abeb7' },
+  { tag: [t.meta], color: '#A54543' },
+  { tag: [t.comment], color: '#808080', fontStyle: 'italic' },
+  { tag: t.monospace, color: '#DDDDDD' },
+  { tag: t.strong, fontWeight: 'bold', color: '#fda331' },
+  { tag: t.emphasis, fontStyle: 'italic', color: '#6fb3d2' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.heading, fontWeight: 'bold', color: '#DDDDDD' },
+  { tag: t.special(t.heading1), fontWeight: 'bold', color: '#DDDDDD' },
+  { tag: t.heading1, fontWeight: 'bold', color: '#DDDDDD' },
+  {
+    tag: [t.heading2, t.heading3, t.heading4],
+    fontWeight: 'bold',
+    color: '#DDDDDD',
+  },
+  { tag: [t.heading5, t.heading6], color: '#DDDDDD' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8abeb7' },
+  { tag: [t.processingInstruction, t.inserted], color: '#8abeb7' },
+  { tag: [t.contentSeparator], color: '#6fb3d2' },
+  { tag: t.invalid, color: '#B9D2FF', borderBottom: `1px dotted ${'#fc6d24'}` },
+];
+
 export const basicDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,102 +69,7 @@ export const basicDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsBasicDark,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#fda331' },
-      {
-        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-        color: '#b5bd68',
-      },
-      { tag: [t.variableName], color: '#6fb3d2' },
-      { tag: [t.function(t.variableName)], color: '#fda331' },
-      { tag: [t.labelName], color: '#fc6d24' },
-      {
-        tag: [t.color, t.constant(t.name), t.standard(t.name)],
-        color: '#fda331',
-      },
-      { tag: [t.definition(t.name), t.separator], color: '#cc99cc' },
-      { tag: [t.brace], color: '#cc99cc' },
-      {
-        tag: [t.annotation],
-        color: '#fc6d24',
-      },
-      {
-        tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-        color: '#fda331',
-      },
-      {
-        tag: [t.typeName, t.className],
-        color: '#6fb3d2',
-      },
-      {
-        tag: [t.operator, t.operatorKeyword],
-        color: '#cc99cc',
-      },
-      {
-        tag: [t.tagName],
-        color: '#fda331',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#cc99cc',
-      },
-      {
-        tag: [t.angleBracket],
-        color: '#cc99cc',
-      },
-      {
-        tag: [t.attributeName],
-        color: '#6fb3d2',
-      },
-      {
-        tag: [t.regexp],
-        color: '#fda331',
-      },
-      {
-        tag: [t.quote],
-        color: '#DDDDDD',
-      },
-      { tag: [t.string], color: '#b5bd68' },
-      {
-        tag: t.link,
-        color: '#6987AF',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-      },
-      {
-        tag: [t.url, t.escape, t.special(t.string)],
-        color: '#8abeb7',
-      },
-      { tag: [t.meta], color: '#A54543' },
-      { tag: [t.comment], color: '#808080', fontStyle: 'italic' },
-      { tag: t.monospace, color: '#DDDDDD' },
-      { tag: t.strong, fontWeight: 'bold', color: '#fda331' },
-      { tag: t.emphasis, fontStyle: 'italic', color: '#6fb3d2' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.heading, fontWeight: 'bold', color: '#DDDDDD' },
-      { tag: t.special(t.heading1), fontWeight: 'bold', color: '#DDDDDD' },
-      { tag: t.heading1, fontWeight: 'bold', color: '#DDDDDD' },
-      {
-        tag: [t.heading2, t.heading3, t.heading4],
-        fontWeight: 'bold',
-        color: '#DDDDDD',
-      },
-      {
-        tag: [t.heading5, t.heading6],
-        color: '#DDDDDD',
-      },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8abeb7' },
-      {
-        tag: [t.processingInstruction, t.inserted],
-        color: '#8abeb7',
-      },
-      {
-        tag: [t.contentSeparator],
-        color: '#6fb3d2',
-      },
-      { tag: t.invalid, color: '#B9D2FF', borderBottom: `1px dotted ${'#fc6d24'}` },
-      ...styles,
-    ],
+    styles: [...basicDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/basic/src/light.ts b/themes/basic/src/light.ts
index 13e6c9fbd..a3d61ef8e 100644
--- a/themes/basic/src/light.ts
+++ b/themes/basic/src/light.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsBasicLight: CreateThemeOptions['settings'] = {
   background: '#ffffff',
@@ -13,6 +13,59 @@ export const defaultSettingsBasicLight: CreateThemeOptions['settings'] = {
   lineHighlight: '#02255f11',
 };
 
+export const basicLightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#5e81ac' },
+  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#d08770' },
+  { tag: [t.variableName], color: '#d08770' },
+  { tag: [t.function(t.variableName)], color: '#5e81ac' },
+  { tag: [t.labelName], color: '#81a1c1' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#5e81ac' },
+  { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
+  { tag: [t.brace], color: '#8fbcbb' },
+  { tag: [t.annotation], color: '#d30102' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#88c0d0' },
+  { tag: [t.typeName, t.className], color: '#ebcb8b' },
+  { tag: [t.operator, t.operatorKeyword], color: '#a3be8c' },
+  { tag: [t.tagName], color: '#b48ead' },
+  { tag: [t.squareBracket], color: '#bf616a' },
+  { tag: [t.angleBracket], color: '#d08770' },
+  { tag: [t.attributeName], color: '#ebcb8b' },
+  { tag: [t.regexp], color: '#5e81ac' },
+  { tag: [t.quote], color: '#3b4252' },
+  { tag: [t.string], color: '#d08770' },
+  {
+    tag: t.link,
+    color: '#8fbcbb',
+    textDecoration: 'underline',
+    textUnderlinePosition: 'under',
+  },
+  { tag: [t.url, t.escape, t.special(t.string)], color: '#d08770' },
+  { tag: [t.meta], color: '#88c0d0' },
+  { tag: [t.comment], color: '#434c5e', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
+  {
+    tag: [t.heading2, t.heading3, t.heading4],
+    fontWeight: 'bold',
+    color: '#5e81ac',
+  },
+  {
+    tag: [t.heading5, t.heading6],
+    color: '#5e81ac',
+  },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
+  {
+    tag: [t.processingInstruction, t.inserted],
+    color: '#8fbcbb',
+  },
+  { tag: [t.contentSeparator], color: '#ebcb8b' },
+  { tag: t.invalid, color: '#434c5e', borderBottom: '1px dotted #d30102' },
+];
+
 export const basicLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,101 +74,7 @@ export const basicLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsBasicLight,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#5e81ac' },
-      {
-        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-        color: '#d08770',
-      },
-      { tag: [t.variableName], color: '#d08770' },
-      { tag: [t.function(t.variableName)], color: '#5e81ac' },
-      { tag: [t.labelName], color: '#81a1c1' },
-      {
-        tag: [t.color, t.constant(t.name), t.standard(t.name)],
-        color: '#5e81ac',
-      },
-      { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
-      { tag: [t.brace], color: '#8fbcbb' },
-      {
-        tag: [t.annotation],
-        color: '#d30102',
-      },
-      {
-        tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-        color: '#88c0d0',
-      },
-      {
-        tag: [t.typeName, t.className],
-        color: '#ebcb8b',
-      },
-      {
-        tag: [t.operator, t.operatorKeyword],
-        color: '#a3be8c',
-      },
-      {
-        tag: [t.tagName],
-        color: '#b48ead',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#bf616a',
-      },
-      {
-        tag: [t.angleBracket],
-        color: '#d08770',
-      },
-      {
-        tag: [t.attributeName],
-        color: '#ebcb8b',
-      },
-      {
-        tag: [t.regexp],
-        color: '#5e81ac',
-      },
-      {
-        tag: [t.quote],
-        color: '#3b4252',
-      },
-      { tag: [t.string], color: '#d08770' },
-      {
-        tag: t.link,
-        color: '#8fbcbb',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-      },
-      {
-        tag: [t.url, t.escape, t.special(t.string)],
-        color: '#d08770',
-      },
-      { tag: [t.meta], color: '#88c0d0' },
-      { tag: [t.comment], color: '#434c5e', fontStyle: 'italic' },
-      { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
-      {
-        tag: [t.heading2, t.heading3, t.heading4],
-        fontWeight: 'bold',
-        color: '#5e81ac',
-      },
-      {
-        tag: [t.heading5, t.heading6],
-        color: '#5e81ac',
-      },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
-      {
-        tag: [t.processingInstruction, t.inserted],
-        color: '#8fbcbb',
-      },
-      {
-        tag: [t.contentSeparator],
-        color: '#ebcb8b',
-      },
-      { tag: t.invalid, color: '#434c5e', borderBottom: '1px dotted #d30102' },
-      ...styles,
-    ],
+    styles: [...styles],
   });
 };
 
diff --git a/themes/bbedit/src/index.ts b/themes/bbedit/src/index.ts
index f06de4bb6..03811fc84 100644
--- a/themes/bbedit/src/index.ts
+++ b/themes/bbedit/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsBbedit: CreateThemeOptions['settings'] = {
   background: '#FFFFFF',
@@ -13,6 +13,22 @@ export const defaultSettingsBbedit: CreateThemeOptions['settings'] = {
   lineHighlight: '#00000012',
 };
 
+export const bbeditLightStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.meta, t.comment], color: '#804000' },
+  { tag: [t.keyword, t.strong], color: '#0000FF' },
+  { tag: [t.number], color: '#FF0080' },
+  { tag: [t.string], color: '#FF0080' },
+  { tag: [t.variableName], color: '#006600' },
+  { tag: [t.escape], color: '#33CC33' },
+  { tag: [t.tagName], color: '#1C02FF' },
+  { tag: [t.heading], color: '#0C07FF' },
+  { tag: [t.quote], color: '#000000' },
+  { tag: [t.list], color: '#B90690' },
+  { tag: [t.documentMeta], color: '#888888' },
+  { tag: [t.function(t.variableName)], color: '#0000A2' },
+  { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
+];
+
 export const bbeditInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,22 +37,7 @@ export const bbeditInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsBbedit,
       ...settings,
     },
-    styles: [
-      { tag: [t.meta, t.comment], color: '#804000' },
-      { tag: [t.keyword, t.strong], color: '#0000FF' },
-      { tag: [t.number], color: '#FF0080' },
-      { tag: [t.string], color: '#FF0080' },
-      { tag: [t.variableName], color: '#006600' },
-      { tag: [t.escape], color: '#33CC33' },
-      { tag: [t.tagName], color: '#1C02FF' },
-      { tag: [t.heading], color: '#0C07FF' },
-      { tag: [t.quote], color: '#000000' },
-      { tag: [t.list], color: '#B90690' },
-      { tag: [t.documentMeta], color: '#888888' },
-      { tag: [t.function(t.variableName)], color: '#0000A2' },
-      { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
-      ...styles,
-    ],
+    styles: [...bbeditLightStyle, ...styles],
   });
 };
 
diff --git a/themes/bespin/src/index.ts b/themes/bespin/src/index.ts
index 6b84f89de..12a234cc5 100644
--- a/themes/bespin/src/index.ts
+++ b/themes/bespin/src/index.ts
@@ -6,7 +6,7 @@
  * Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsBespin: CreateThemeOptions['settings'] = {
   background: '#28211c',
@@ -19,6 +19,18 @@ export const defaultSettingsBespin: CreateThemeOptions['settings'] = {
   lineHighlight: '#ffffff1a',
 };
 
+export const bespinDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.atom, t.number, t.link, t.bool], color: '#9b859d' },
+  { tag: t.comment, color: '#937121' },
+  { tag: [t.keyword, t.tagName], color: '#cf6a4c' },
+  { tag: t.string, color: '#f9ee98' },
+  { tag: t.bracket, color: '#9d9b97' },
+  { tag: [t.variableName], color: '#5ea6ea' },
+  { tag: t.definition(t.variableName), color: '#cf7d34' },
+  { tag: [t.function(t.variableName), t.className], color: '#cf7d34' },
+  { tag: [t.propertyName, t.attributeName], color: '#54be0d' },
+];
+
 export const bespinInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -27,18 +39,7 @@ export const bespinInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsBespin,
       ...settings,
     },
-    styles: [
-      { tag: [t.atom, t.number, t.link, t.bool], color: '#9b859d' },
-      { tag: t.comment, color: '#937121' },
-      { tag: [t.keyword, t.tagName], color: '#cf6a4c' },
-      { tag: t.string, color: '#f9ee98' },
-      { tag: t.bracket, color: '#9d9b97' },
-      { tag: [t.variableName], color: '#5ea6ea' },
-      { tag: t.definition(t.variableName), color: '#cf7d34' },
-      { tag: [t.function(t.variableName), t.className], color: '#cf7d34' },
-      { tag: [t.propertyName, t.attributeName], color: '#54be0d' },
-      ...styles,
-    ],
+    styles: [...bespinDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/copilot/src/index.ts b/themes/copilot/src/index.ts
index f616d34f7..27ddfa89d 100644
--- a/themes/copilot/src/index.ts
+++ b/themes/copilot/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './color';
 
 export const defaultSettingsCopilot: CreateThemeOptions['settings'] = {
@@ -13,6 +13,34 @@ export const defaultSettingsCopilot: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const copilotDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  {
+    tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
+    color: c.constant,
+  },
+];
+
 export const copilotInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,34 +49,7 @@ export const copilotInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsCopilot,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      {
-        tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
-        color: c.constant,
-      },
-      ...styles,
-    ],
+    styles: [...copilotDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/darcula/src/index.ts b/themes/darcula/src/index.ts
index 0954f5f6a..f2e8e9ae2 100644
--- a/themes/darcula/src/index.ts
+++ b/themes/darcula/src/index.ts
@@ -5,7 +5,7 @@
  * From IntelliJ IDEA by JetBrains
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsDarcula: CreateThemeOptions['settings'] = {
   background: '#2B2B2B',
@@ -19,6 +19,18 @@ export const defaultSettingsDarcula: CreateThemeOptions['settings'] = {
   lineHighlight: 'rgba(255, 255, 255, 0.1)',
 };
 
+export const darculaDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.atom, t.number], color: '#bd93f9' },
+  { tag: [t.comment], color: '#61A151' },
+  { tag: [t.string], color: '#6A8759' },
+  { tag: [t.variableName, t.operator], color: '#A9B7C6' },
+  { tag: [t.meta, t.className], color: '#A9B7C6' },
+  { tag: [t.propertyName], color: '#FFC66D' },
+  { tag: [t.keyword], color: '#CC7832' },
+  { tag: [t.tagName], color: '#ff79c6' },
+  { tag: [t.typeName], color: '#ffb86c' },
+];
+
 export const darculaInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -27,18 +39,7 @@ export const darculaInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsDarcula,
       ...settings,
     },
-    styles: [
-      { tag: [t.atom, t.number], color: '#bd93f9' },
-      { tag: [t.comment], color: '#61A151' },
-      { tag: [t.string], color: '#6A8759' },
-      { tag: [t.variableName, t.operator], color: '#A9B7C6' },
-      { tag: [t.meta, t.className], color: '#A9B7C6' },
-      { tag: [t.propertyName], color: '#FFC66D' },
-      { tag: [t.keyword], color: '#CC7832' },
-      { tag: [t.tagName], color: '#ff79c6' },
-      { tag: [t.typeName], color: '#ffb86c' },
-      ...styles,
-    ],
+    styles: [...darculaDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/dracula/src/index.ts b/themes/dracula/src/index.ts
index e74ca85c5..36abd76f1 100644
--- a/themes/dracula/src/index.ts
+++ b/themes/dracula/src/index.ts
@@ -5,7 +5,7 @@
  * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsDracula: CreateThemeOptions['settings'] = {
   background: '#282a36',
@@ -19,6 +19,20 @@ export const defaultSettingsDracula: CreateThemeOptions['settings'] = {
   lineHighlight: 'rgba(255, 255, 255, 0.1)',
 };
 
+export const draculaDarkStyle: CreateThemeOptions['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.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
+    color: '#50fa7b',
+  },
+  { tag: t.atom, color: '#bd93f9' },
+];
+
 export const draculaInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -27,20 +41,7 @@ export const draculaInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsDracula,
       ...settings,
     },
-    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.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
-        color: '#50fa7b',
-      },
-      { tag: t.atom, color: '#bd93f9' },
-      ...styles,
-    ],
+    styles: [...draculaDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/duotone/src/index.ts b/themes/duotone/src/index.ts
index 0a72fe2ad..0d3351192 100644
--- a/themes/duotone/src/index.ts
+++ b/themes/duotone/src/index.ts
@@ -4,7 +4,7 @@
  * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsDuotoneLight: CreateThemeOptions['settings'] = {
   background: '#faf8f5',
@@ -18,6 +18,16 @@ export const defaultSettingsDuotoneLight: CreateThemeOptions['settings'] = {
   lineHighlight: '#ddceb154',
 };
 
+export const douToneLightStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.comment, t.bracket], color: '#b6ad9a' },
+  { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
+  { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
+  { tag: [t.typeName, t.url, t.string], color: '#896724' },
+  { tag: [t.operator, t.string], color: '#1659df' },
+  { tag: [t.propertyName], color: '#b29762' },
+  { tag: [t.unit, t.punctuation], color: '#063289' },
+];
+
 export const duotoneLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -26,16 +36,7 @@ export const duotoneLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsDuotoneLight,
       ...settings,
     },
-    styles: [
-      { tag: [t.comment, t.bracket], color: '#b6ad9a' },
-      { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
-      { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
-      { tag: [t.typeName, t.url, t.string], color: '#896724' },
-      { tag: [t.operator, t.string], color: '#1659df' },
-      { tag: [t.propertyName], color: '#b29762' },
-      { tag: [t.unit, t.punctuation], color: '#063289' },
-      ...styles,
-    ],
+    styles: [...douToneLightStyle, ...styles],
   });
 };
 
@@ -52,6 +53,17 @@ export const defaultSettingsDuotoneDark: CreateThemeOptions['settings'] = {
   lineHighlight: '#36334280',
 };
 
+export const duotoneDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.comment, t.bracket], 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.string, color: '#ffb870' },
+  { tag: [t.propertyName], color: '#9a86fd' },
+  { tag: [t.unit, t.punctuation], color: '#e09142' },
+];
+
 export const duotoneDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -60,17 +72,7 @@ export const duotoneDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsDuotoneDark,
       ...settings,
     },
-    styles: [
-      { tag: [t.comment, t.bracket], 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.string, color: '#ffb870' },
-      { tag: [t.propertyName], color: '#9a86fd' },
-      { tag: [t.unit, t.punctuation], color: '#e09142' },
-      ...styles,
-    ],
+    styles: [...duotoneDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/eclipse/src/index.ts b/themes/eclipse/src/index.ts
index 30f2c07a7..0fb35a18a 100644
--- a/themes/eclipse/src/index.ts
+++ b/themes/eclipse/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsEclipse: CreateThemeOptions['settings'] = {
   background: '#fff',
@@ -13,6 +13,22 @@ export const defaultSettingsEclipse: CreateThemeOptions['settings'] = {
   gutterBorder: 'transparent',
 };
 
+export const eclipseLightStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.comment], color: '#3F7F5F' },
+  { tag: [t.documentMeta], color: '#FF1717' },
+  { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' },
+  { tag: t.atom, color: '#00f' },
+  { tag: t.number, color: '#164' },
+  { tag: t.propertyName, color: '#164' },
+  { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' },
+  { tag: t.function(t.variableName), color: '#0000C0' },
+  { tag: t.string, color: '#2A00FF' },
+  { tag: t.operator, color: 'black' },
+  { tag: t.tagName, color: '#170' },
+  { tag: t.attributeName, color: '#00c' },
+  { tag: t.link, color: '#219' },
+];
+
 export const eclipseInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,22 +37,7 @@ export const eclipseInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsEclipse,
       ...settings,
     },
-    styles: [
-      { tag: [t.comment], color: '#3F7F5F' },
-      { tag: [t.documentMeta], color: '#FF1717' },
-      { tag: t.keyword, color: '#7F0055', fontWeight: 'bold' },
-      { tag: t.atom, color: '#00f' },
-      { tag: t.number, color: '#164' },
-      { tag: t.propertyName, color: '#164' },
-      { tag: [t.variableName, t.definition(t.variableName)], color: '#0000C0' },
-      { tag: t.function(t.variableName), color: '#0000C0' },
-      { tag: t.string, color: '#2A00FF' },
-      { tag: t.operator, color: 'black' },
-      { tag: t.tagName, color: '#170' },
-      { tag: t.attributeName, color: '#00c' },
-      { tag: t.link, color: '#219' },
-      ...styles,
-    ],
+    styles: [...eclipseLightStyle, ...styles],
   });
 };
 
diff --git a/themes/github/src/index.ts b/themes/github/src/index.ts
index a847533c1..c5a7b65a7 100644
--- a/themes/github/src/index.ts
+++ b/themes/github/src/index.ts
@@ -2,7 +2,7 @@
  * @name github
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsGithubLight: CreateThemeOptions['settings'] = {
   background: '#fff',
@@ -13,6 +13,24 @@ export const defaultSettingsGithubLight: CreateThemeOptions['settings'] = {
   gutterForeground: '#6e7781',
 };
 
+export const githubLightStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
+  { tag: [t.comment, t.bracket], color: '#6a737d' },
+  { tag: [t.className, t.propertyName], color: '#6f42c1' },
+  { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
+  { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
+  { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
+  { tag: [t.name, t.quote], color: '#22863a' },
+  { tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' },
+  { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
+  { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.invalid, color: '#cb2431' },
+];
+
 export const githubLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,24 +39,7 @@ export const githubLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsGithubLight,
       ...settings,
     },
-    styles: [
-      { tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
-      { tag: [t.comment, t.bracket], color: '#6a737d' },
-      { tag: [t.className, t.propertyName], color: '#6f42c1' },
-      { tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
-      { tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
-      { tag: [t.string, t.meta, t.regexp], color: '#032f62' },
-      { tag: [t.name, t.quote], color: '#22863a' },
-      { tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' },
-      { tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
-      { tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.invalid, color: '#cb2431' },
-      ...styles,
-    ],
+    styles: [...githubLightStyle, ...styles],
   });
 };
 
@@ -53,6 +54,23 @@ export const defaultSettingsGithubDark: CreateThemeOptions['settings'] = {
   lineHighlight: '#36334280',
 };
 
+export const githubDarkStyle: CreateThemeOptions['styles'] = [
+  { 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.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' },
+  { tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' },
+  { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
+  { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.invalid, color: '#f97583' },
+];
+
 export const githubDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -61,23 +79,7 @@ export const githubDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsGithubDark,
       ...settings,
     },
-    styles: [
-      { 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.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' },
-      { tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' },
-      { tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
-      { tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.invalid, color: '#f97583' },
-      ...styles,
-    ],
+    styles: [...githubDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/gruvbox/src/index.ts b/themes/gruvbox/src/index.ts
index 42a4d8921..b52c48b56 100644
--- a/themes/gruvbox/src/index.ts
+++ b/themes/gruvbox/src/index.ts
@@ -5,7 +5,7 @@
  * From github.com/codemirror/codemirror5/blob/master/theme/gruvbox-dark.css
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsGruvboxDark: CreateThemeOptions['settings'] = {
   background: '#282828',
@@ -18,6 +18,56 @@ export const defaultSettingsGruvboxDark: CreateThemeOptions['settings'] = {
   gutterForeground: '#7c6f64',
 };
 
+export const gruvboxDarkStyle: CreateThemeOptions['styles'] = [
+  { 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.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' },
+  { tag: [t.brace], color: '#ebdbb2' },
+  { 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.tagName],
+    color: '#8ec07c',
+    fontStyle: 'bold',
+  },
+  { tag: [t.squareBracket], color: '#fe8019' },
+  { tag: [t.angleBracket], color: '#83a598' },
+  { tag: [t.attributeName], color: '#8ec07c' },
+  { tag: [t.regexp], color: '#8ec07c' },
+  { tag: [t.quote], color: '#928374' },
+  { tag: [t.string], color: '#ebdbb2' },
+  {
+    tag: t.link,
+    color: '#a89984',
+    textDecoration: 'underline',
+    textUnderlinePosition: 'under',
+  },
+  { tag: [t.url, t.escape, t.special(t.string)], color: '#d3869b' },
+  { tag: [t.meta], color: '#fabd2f' },
+  { tag: [t.comment], color: '#928374', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold', color: '#fe8019' },
+  { tag: t.emphasis, fontStyle: 'italic', color: '#b8bb26' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.heading, fontWeight: 'bold', color: '#b8bb26' },
+  { tag: [t.heading1, t.heading2], fontWeight: 'bold', color: '#b8bb26' },
+  {
+    tag: [t.heading3, t.heading4],
+    fontWeight: 'bold',
+    color: '#fabd2f',
+  },
+  { tag: [t.heading5, t.heading6], color: '#fabd2f' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d3869b' },
+  { tag: [t.processingInstruction, t.inserted], color: '#83a598' },
+  { tag: [t.contentSeparator], color: '#fb4934' },
+  { tag: t.invalid, color: '#fe8019', borderBottom: `1px dotted #fb4934d` },
+];
+
 export const gruvboxDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -26,101 +76,7 @@ export const gruvboxDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsGruvboxDark,
       ...settings,
     },
-    styles: [
-      { 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.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' },
-      { tag: [t.brace], color: '#ebdbb2' },
-      {
-        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.tagName],
-        color: '#8ec07c',
-        fontStyle: 'bold',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#fe8019',
-      },
-      {
-        tag: [t.angleBracket],
-        color: '#83a598',
-      },
-      {
-        tag: [t.attributeName],
-        color: '#8ec07c',
-      },
-      {
-        tag: [t.regexp],
-        color: '#8ec07c',
-      },
-      {
-        tag: [t.quote],
-        color: '#928374',
-      },
-      { tag: [t.string], color: '#ebdbb2' },
-      {
-        tag: t.link,
-        color: '#a89984',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-      },
-      {
-        tag: [t.url, t.escape, t.special(t.string)],
-        color: '#d3869b',
-      },
-      { tag: [t.meta], color: '#fabd2f' },
-      { tag: [t.comment], color: '#928374', fontStyle: 'italic' },
-      { tag: t.strong, fontWeight: 'bold', color: '#fe8019' },
-      { tag: t.emphasis, fontStyle: 'italic', color: '#b8bb26' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.heading, fontWeight: 'bold', color: '#b8bb26' },
-      { tag: [t.heading1, t.heading2], fontWeight: 'bold', color: '#b8bb26' },
-      {
-        tag: [t.heading3, t.heading4],
-        fontWeight: 'bold',
-        color: '#fabd2f',
-      },
-      {
-        tag: [t.heading5, t.heading6],
-        color: '#fabd2f',
-      },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d3869b' },
-      {
-        tag: [t.processingInstruction, t.inserted],
-        color: '#83a598',
-      },
-      {
-        tag: [t.contentSeparator],
-        color: '#fb4934',
-      },
-      { tag: t.invalid, color: '#fe8019', borderBottom: `1px dotted #fb4934d` },
-      ...styles,
-    ],
+    styles: [...gruvboxDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/kimbie/src/index.ts b/themes/kimbie/src/index.ts
index 8d3f1a145..3d3b49b97 100644
--- a/themes/kimbie/src/index.ts
+++ b/themes/kimbie/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './color';
 
 export const defaultSettingsKimbie: CreateThemeOptions['settings'] = {
@@ -13,6 +13,30 @@ export const defaultSettingsKimbie: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const kimbieDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const kimbieInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const kimbieInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsKimbie,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...kimbieDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/material/src/index.ts b/themes/material/src/index.ts
index 70949f46d..527ec7580 100644
--- a/themes/material/src/index.ts
+++ b/themes/material/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsMaterial: CreateThemeOptions['settings'] = {
   background: '#2e3235',
@@ -15,6 +15,54 @@ export const defaultSettingsMaterial: CreateThemeOptions['settings'] = {
 
 export const defaultSettingsMaterialDark = defaultSettingsMaterial;
 
+export const materialDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#cf6edf' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#56c8d8' },
+  { tag: [t.propertyName], color: '#facf4e' },
+  { tag: [t.variableName], color: '#bdbdbd' },
+  { tag: [t.function(t.variableName)], color: '#56c8d8' },
+  { 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.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.tagName], color: '#99d066' },
+  { tag: [t.squareBracket], color: '#ff5f52' },
+  { tag: [t.angleBracket], color: '#606f7a' },
+  { tag: [t.attributeName], color: '#bdbdbd' },
+  { tag: [t.regexp], color: '#ff5f52' },
+  { tag: [t.quote], color: '#6abf69' },
+  { tag: [t.string], color: '#99d066' },
+  {
+    tag: t.link,
+    color: '#56c8d8',
+    textDecoration: 'underline',
+    textUnderlinePosition: 'under',
+  },
+  { tag: [t.url, t.escape, t.special(t.string)], color: '#facf4e' },
+  { 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.emphasis, fontStyle: 'italic', color: '#99d066' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.heading, fontWeight: 'bold', color: '#facf4e' },
+  { tag: t.heading1, fontWeight: 'bold', color: '#facf4e' },
+  {
+    tag: [t.heading2, t.heading3, t.heading4],
+    fontWeight: 'bold',
+    color: '#facf4e',
+  },
+  { 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.contentSeparator], color: '#56c8d8' },
+  { tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #ff5f52` },
+];
+
 export const materialInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -23,102 +71,7 @@ export const materialInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsMaterial,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#cf6edf' },
-      {
-        tag: [t.name, t.deleted, t.character, t.macroName],
-        color: '#56c8d8',
-      },
-      { tag: [t.propertyName], color: '#facf4e' },
-      { tag: [t.variableName], color: '#bdbdbd' },
-      { tag: [t.function(t.variableName)], color: '#56c8d8' },
-      { 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.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.tagName],
-        color: '#99d066',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#ff5f52',
-      },
-      {
-        tag: [t.angleBracket],
-        color: '#606f7a',
-      },
-      {
-        tag: [t.attributeName],
-        color: '#bdbdbd',
-      },
-      {
-        tag: [t.regexp],
-        color: '#ff5f52',
-      },
-      {
-        tag: [t.quote],
-        color: '#6abf69',
-      },
-      { tag: [t.string], color: '#99d066' },
-      {
-        tag: t.link,
-        color: '#56c8d8',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-      },
-      {
-        tag: [t.url, t.escape, t.special(t.string)],
-        color: '#facf4e',
-      },
-      { 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.emphasis, fontStyle: 'italic', color: '#99d066' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.heading, fontWeight: 'bold', color: '#facf4e' },
-      { tag: t.heading1, fontWeight: 'bold', color: '#facf4e' },
-      {
-        tag: [t.heading2, t.heading3, t.heading4],
-        fontWeight: 'bold',
-        color: '#facf4e',
-      },
-      {
-        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.contentSeparator],
-        color: '#56c8d8',
-      },
-      { tag: t.invalid, color: '#606f7a', borderBottom: `1px dotted #ff5f52` },
-      ...styles,
-    ],
+    styles: [...materialDarkStyle, ...styles],
   });
 };
 
@@ -138,6 +91,29 @@ export const defaultSettingsMaterialLight: CreateThemeOptions['settings'] = {
   lineHighlight: '#CCD7DA50',
 };
 
+export const materialLightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#39ADB5' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
+  { tag: [t.propertyName], color: '#6182B8' },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
+  { tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
+  { tag: [t.className], color: '#E2931D' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
+  { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
+  { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
+  { tag: [t.meta, t.comment], color: '#90A4AE' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
+  { tag: t.invalid, color: '#E5393570' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const materialLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -146,29 +122,7 @@ export const materialLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsMaterialLight,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#39ADB5' },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
-      { tag: [t.propertyName], color: '#6182B8' },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
-      { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
-      { tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
-      { tag: [t.className], color: '#E2931D' },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
-      { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
-      { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
-      { tag: [t.meta, t.comment], color: '#90A4AE' },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
-      { tag: t.invalid, color: '#E5393570' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...materialLightStyle, ...styles],
   });
 };
 
diff --git a/themes/monokai-dimmed/src/index.ts b/themes/monokai-dimmed/src/index.ts
index 39c3fa9bf..3c9d85ee5 100644
--- a/themes/monokai-dimmed/src/index.ts
+++ b/themes/monokai-dimmed/src/index.ts
@@ -13,6 +13,30 @@ export const defaultSettingsMonokaiDimmed: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const monokaiDimmedDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const monokaiDimmedInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const monokaiDimmedInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsMonokaiDimmed,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...monokaiDimmedDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/monokai/src/index.ts b/themes/monokai/src/index.ts
index b1561ba93..ca526f1d5 100644
--- a/themes/monokai/src/index.ts
+++ b/themes/monokai/src/index.ts
@@ -13,6 +13,30 @@ export const defaultSettingsMonokai: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const monokaiDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const monokaiInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const monokaiInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsMonokai,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...monokaiDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/noctis-lilac/src/index.ts b/themes/noctis-lilac/src/index.ts
index 8868b9364..2be04c283 100644
--- a/themes/noctis-lilac/src/index.ts
+++ b/themes/noctis-lilac/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsNoctisLilac: CreateThemeOptions['settings'] = {
   background: '#f2f1f8',
@@ -12,6 +12,28 @@ export const defaultSettingsNoctisLilac: CreateThemeOptions['settings'] = {
   lineHighlight: '#16067911',
 };
 
+export const noctisLilacLightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.comment, color: '#9995b7' },
+  {
+    tag: t.keyword,
+    color: '#ff5792',
+    fontWeight: 'bold',
+  },
+  { tag: [t.definitionKeyword, t.modifier], color: '#ff5792' },
+  { tag: [t.className, t.tagName, t.definition(t.typeName)], color: '#0094f0' },
+  { tag: [t.number, t.bool, t.null, t.special(t.brace)], color: '#5842ff' },
+  { tag: [t.definition(t.propertyName), t.function(t.variableName)], color: '#0095a8' },
+  { tag: t.typeName, color: '#b3694d' },
+  { tag: [t.propertyName, t.variableName], color: '#fa8900' },
+  { tag: t.operator, color: '#ff5792' },
+  { tag: t.self, color: '#e64100' },
+  { tag: [t.string, t.regexp], color: '#00b368' },
+  { tag: [t.paren, t.bracket], color: '#0431fa' },
+  { tag: t.labelName, color: '#00bdd6' },
+  { tag: t.attributeName, color: '#e64100' },
+  { tag: t.angleBracket, color: '#9995b7' },
+];
+
 export const noctisLilacInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -20,70 +42,7 @@ export const noctisLilacInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsNoctisLilac,
       ...settings,
     },
-    styles: [
-      {
-        tag: t.comment,
-        color: '#9995b7',
-      },
-      {
-        tag: t.keyword,
-        color: '#ff5792',
-        fontWeight: 'bold',
-      },
-      {
-        tag: [t.definitionKeyword, t.modifier],
-        color: '#ff5792',
-      },
-      {
-        tag: [t.className, t.tagName, t.definition(t.typeName)],
-        color: '#0094f0',
-      },
-      {
-        tag: [t.number, t.bool, t.null, t.special(t.brace)],
-        color: '#5842ff',
-      },
-      {
-        tag: [t.definition(t.propertyName), t.function(t.variableName)],
-        color: '#0095a8',
-      },
-      {
-        tag: t.typeName,
-        color: '#b3694d',
-      },
-      {
-        tag: [t.propertyName, t.variableName],
-        color: '#fa8900',
-      },
-      {
-        tag: t.operator,
-        color: '#ff5792',
-      },
-      {
-        tag: t.self,
-        color: '#e64100',
-      },
-      {
-        tag: [t.string, t.regexp],
-        color: '#00b368',
-      },
-      {
-        tag: [t.paren, t.bracket],
-        color: '#0431fa',
-      },
-      {
-        tag: t.labelName,
-        color: '#00bdd6',
-      },
-      {
-        tag: t.attributeName,
-        color: '#e64100',
-      },
-      {
-        tag: t.angleBracket,
-        color: '#9995b7',
-      },
-      ...styles,
-    ],
+    styles: [...noctisLilacLightStyle, ...styles],
   });
 };
 
diff --git a/themes/nord/src/index.ts b/themes/nord/src/index.ts
index f38a0fa2f..94c717fab 100644
--- a/themes/nord/src/index.ts
+++ b/themes/nord/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsNord: CreateThemeOptions['settings'] = {
   background: '#2e3440',
@@ -13,6 +13,54 @@ export const defaultSettingsNord: CreateThemeOptions['settings'] = {
   lineHighlight: '#4c566a29',
 };
 
+export const nordDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#5e81ac' },
+  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: '#88c0d0' },
+  { tag: [t.variableName], color: '#8fbcbb' },
+  { tag: [t.function(t.variableName)], color: '#8fbcbb' },
+  { tag: [t.labelName], color: '#81a1c1' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#5e81ac' },
+  { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
+  { tag: [t.brace], color: '#8fbcbb' },
+  { tag: [t.annotation], color: '#d30102' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b48ead' },
+  { tag: [t.typeName, t.className], color: '#ebcb8b' },
+  { tag: [t.operator, t.operatorKeyword], color: '#a3be8c' },
+  { tag: [t.tagName], color: '#b48ead' },
+  { tag: [t.squareBracket], color: '#bf616a' },
+  { tag: [t.angleBracket], color: '#d08770' },
+  { tag: [t.attributeName], color: '#ebcb8b' },
+  { tag: [t.regexp], color: '#5e81ac' },
+  { tag: [t.quote], color: '#b48ead' },
+  { tag: [t.string], color: '#a3be8c' },
+  {
+    tag: t.link,
+    color: '#a3be8c',
+    textDecoration: 'underline',
+    textUnderlinePosition: 'under',
+  },
+  { tag: [t.url, t.escape, t.special(t.string)], color: '#8fbcbb' },
+  { tag: [t.meta], color: '#88c0d0' },
+  { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' },
+  { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
+  { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
+  {
+    tag: [t.heading2, t.heading3, t.heading4],
+    fontWeight: 'bold',
+    color: '#5e81ac',
+  },
+  { tag: [t.heading5, t.heading6], color: '#5e81ac' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
+  { tag: [t.processingInstruction, t.inserted], color: '#8fbcbb' },
+  { tag: [t.contentSeparator], color: '#ebcb8b' },
+  { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` },
+];
+
 // Colors from https://www.nordtheme.com/docs/colors-and-palettes
 export const nordInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
@@ -22,102 +70,7 @@ export const nordInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsNord,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#5e81ac' },
-      {
-        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-        color: '#88c0d0',
-      },
-      { tag: [t.variableName], color: '#8fbcbb' },
-      { tag: [t.function(t.variableName)], color: '#8fbcbb' },
-      { tag: [t.labelName], color: '#81a1c1' },
-      {
-        tag: [t.color, t.constant(t.name), t.standard(t.name)],
-        color: '#5e81ac',
-      },
-      { tag: [t.definition(t.name), t.separator], color: '#a3be8c' },
-      { tag: [t.brace], color: '#8fbcbb' },
-      {
-        tag: [t.annotation],
-        color: '#d30102',
-      },
-      {
-        tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-        color: '#b48ead',
-      },
-      {
-        tag: [t.typeName, t.className],
-        color: '#ebcb8b',
-      },
-      {
-        tag: [t.operator, t.operatorKeyword],
-        color: '#a3be8c',
-      },
-      {
-        tag: [t.tagName],
-        color: '#b48ead',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#bf616a',
-      },
-      {
-        tag: [t.angleBracket],
-        color: '#d08770',
-      },
-      {
-        tag: [t.attributeName],
-        color: '#ebcb8b',
-      },
-      {
-        tag: [t.regexp],
-        color: '#5e81ac',
-      },
-      {
-        tag: [t.quote],
-        color: '#b48ead',
-      },
-      { tag: [t.string], color: '#a3be8c' },
-      {
-        tag: t.link,
-        color: '#a3be8c',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-      },
-      {
-        tag: [t.url, t.escape, t.special(t.string)],
-        color: '#8fbcbb',
-      },
-      { tag: [t.meta], color: '#88c0d0' },
-      { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' },
-      { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' },
-      { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' },
-      { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' },
-      {
-        tag: [t.heading2, t.heading3, t.heading4],
-        fontWeight: 'bold',
-        color: '#5e81ac',
-      },
-      {
-        tag: [t.heading5, t.heading6],
-        color: '#5e81ac',
-      },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' },
-      {
-        tag: [t.processingInstruction, t.inserted],
-        color: '#8fbcbb',
-      },
-      {
-        tag: [t.contentSeparator],
-        color: '#ebcb8b',
-      },
-      { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` },
-      ...styles,
-    ],
+    styles: [...nordDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/okaidia/src/index.ts b/themes/okaidia/src/index.ts
index bce8e3276..471a327c6 100644
--- a/themes/okaidia/src/index.ts
+++ b/themes/okaidia/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsOkaidia: CreateThemeOptions['settings'] = {
   background: '#272822',
@@ -12,6 +12,20 @@ export const defaultSettingsOkaidia: CreateThemeOptions['settings'] = {
   lineHighlight: '#0000003b',
 };
 
+export const okaidiaDarkStyle: CreateThemeOptions['styles'] = [
+  { 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' },
+  { tag: [t.propertyName, t.attributeName], color: '#a6e22e' },
+  { tag: [t.variableName], color: '#9effff' },
+  { tag: [t.squareBracket], color: '#bababa' },
+  { tag: [t.string, t.special(t.brace)], color: '#e6db74' },
+  { 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' },
+  // { tag: t.keyword, color: '#f92672' },
+  { tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket], color: '#f92672' },
+];
+
 export const okaidiaInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -20,41 +34,7 @@ export const okaidiaInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsOkaidia,
       ...settings,
     },
-    styles: [
-      { 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' },
-      {
-        tag: [t.propertyName, t.attributeName],
-        color: '#a6e22e',
-      },
-      {
-        tag: [t.variableName],
-        color: '#9effff',
-      },
-      {
-        tag: [t.squareBracket],
-        color: '#bababa',
-      },
-      {
-        tag: [t.string, t.special(t.brace)],
-        color: '#e6db74',
-      },
-      {
-        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',
-      },
-      // { tag: t.keyword, color: '#f92672' },
-      {
-        tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket],
-        color: '#f92672',
-      },
-      ...styles,
-    ],
+    styles: [...okaidiaDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/quietlight/src/index.ts b/themes/quietlight/src/index.ts
index 8bd8bf427..b82a2a10e 100644
--- a/themes/quietlight/src/index.ts
+++ b/themes/quietlight/src/index.ts
@@ -14,6 +14,30 @@ export const defaultSettingsQuietlight: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const quietlightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const quietlightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -22,30 +46,7 @@ export const quietlightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsQuietlight,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...quietlightStyle, ...styles],
   });
 };
 
diff --git a/themes/red/src/index.ts b/themes/red/src/index.ts
index 9924a67d0..5f730dd3a 100644
--- a/themes/red/src/index.ts
+++ b/themes/red/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './color';
 
 export const defaultSettingsRed: CreateThemeOptions['settings'] = {
@@ -13,6 +13,30 @@ export const defaultSettingsRed: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const redDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const redInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const redInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsRed,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...redDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/solarized/src/dark.ts b/themes/solarized/src/dark.ts
index d526c2043..48b3b4101 100644
--- a/themes/solarized/src/dark.ts
+++ b/themes/solarized/src/dark.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './dark-color';
 
 export const defaultSettingsSolarizedDark: CreateThemeOptions['settings'] = {
@@ -14,6 +14,30 @@ export const defaultSettingsSolarizedDark: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const solarizedDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const solarizedDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -22,30 +46,7 @@ export const solarizedDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsSolarizedDark,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...solarizedDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/solarized/src/light.ts b/themes/solarized/src/light.ts
index 6b936a07b..da22ffeec 100644
--- a/themes/solarized/src/light.ts
+++ b/themes/solarized/src/light.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './light-color';
 
 export const defaultSettingsSolarizedLight: CreateThemeOptions['settings'] = {
@@ -14,6 +14,30 @@ export const defaultSettingsSolarizedLight: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const solarizedLightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const solarizedLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -22,30 +46,7 @@ export const solarizedLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsSolarizedLight,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...solarizedLightStyle, ...styles],
   });
 };
 
diff --git a/themes/sublime/src/index.ts b/themes/sublime/src/index.ts
index 3f90c524c..76ab20e5f 100644
--- a/themes/sublime/src/index.ts
+++ b/themes/sublime/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsSublime: CreateThemeOptions['settings'] = {
   background: '#303841',
@@ -12,6 +12,21 @@ export const defaultSettingsSublime: CreateThemeOptions['settings'] = {
   lineHighlight: '#00000059',
 };
 
+export const sublimeDarkStyle: CreateThemeOptions['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' },
+];
+
 export function sublimeInit(options?: Partial<CreateThemeOptions>) {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -20,21 +35,7 @@ export function sublimeInit(options?: Partial<CreateThemeOptions>) {
       ...defaultSettingsSublime,
       ...settings,
     },
-    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' },
-      ...styles,
-    ],
+    styles: [...sublimeDarkStyle, ...styles],
   });
 }
 
diff --git a/themes/theme/src/index.tsx b/themes/theme/src/index.tsx
index 9c86102b1..fafc31653 100644
--- a/themes/theme/src/index.tsx
+++ b/themes/theme/src/index.tsx
@@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
-import { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';
-import { StyleSpec } from 'style-mod';
+import { HighlightStyle, type TagStyle, syntaxHighlighting } from '@codemirror/language';
+import type { StyleSpec } from 'style-mod';
 
 export interface CreateThemeOptions {
   /**
diff --git a/themes/tokyo-night-day/src/index.ts b/themes/tokyo-night-day/src/index.ts
index feda72346..80e9f0d14 100644
--- a/themes/tokyo-night-day/src/index.ts
+++ b/themes/tokyo-night-day/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsTokyoNightDay: CreateThemeOptions['settings'] = {
   background: '#e1e2e7',
@@ -13,6 +13,29 @@ export const defaultSettingsTokyoNightDay: CreateThemeOptions['settings'] = {
   lineHighlight: '#5f5faf11',
 };
 
+export const tokyoNightDayStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: '#007197' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' },
+  { tag: [t.propertyName], color: '#3760bf' },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#3760bf' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' },
+  { tag: [t.definition(t.name), t.separator], color: '#3760bf' },
+  { tag: [t.className], color: '#3760bf' },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' },
+  { tag: [t.typeName], color: '#007197', fontStyle: '#007197' },
+  { tag: [t.operator, t.operatorKeyword], color: '#007197' },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' },
+  { tag: [t.meta, t.comment], color: '#848cb5' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: '#b15c00' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' },
+  { tag: t.invalid, color: '#f52a65' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const tokyoNightDayInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,29 +44,7 @@ export const tokyoNightDayInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsTokyoNightDay,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: '#007197' },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: '#3760bf' },
-      { tag: [t.propertyName], color: '#3760bf' },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#587539' },
-      { tag: [t.function(t.variableName), t.labelName], color: '#3760bf' },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#3760bf' },
-      { tag: [t.definition(t.name), t.separator], color: '#3760bf' },
-      { tag: [t.className], color: '#3760bf' },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#b15c00' },
-      { tag: [t.typeName], color: '#007197', fontStyle: '#007197' },
-      { tag: [t.operator, t.operatorKeyword], color: '#007197' },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: '#587539' },
-      { tag: [t.meta, t.comment], color: '#848cb5' },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: '#b15c00' },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#3760bf' },
-      { tag: t.invalid, color: '#f52a65' },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...tokyoNightDayStyle, ...styles],
   });
 };
 
diff --git a/themes/tokyo-night-storm/src/index.ts b/themes/tokyo-night-storm/src/index.ts
index a8a0f8e6d..3f945d3c8 100644
--- a/themes/tokyo-night-storm/src/index.ts
+++ b/themes/tokyo-night-storm/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsTokyoNightStorm: CreateThemeOptions['settings'] = {
   background: '#24283b',
@@ -13,6 +13,29 @@ export const defaultSettingsTokyoNightStorm: CreateThemeOptions['settings'] = {
   lineHighlight: '#292e427a',
 };
 
+export const tokyoNightStormStyle: CreateThemeOptions['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' },
+];
+
 export const tokyoNightStormInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,29 +44,7 @@ export const tokyoNightStormInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsTokyoNightStorm,
       ...settings,
     },
-    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' },
-      ...styles,
-    ],
+    styles: [...tokyoNightStormStyle, ...styles],
   });
 };
 
diff --git a/themes/tokyo-night/src/index.ts b/themes/tokyo-night/src/index.ts
index b2fb1c441..13ccd48a1 100644
--- a/themes/tokyo-night/src/index.ts
+++ b/themes/tokyo-night/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsTokyoNight: CreateThemeOptions['settings'] = {
   background: '#1a1b26',
@@ -13,6 +13,29 @@ export const defaultSettingsTokyoNight: CreateThemeOptions['settings'] = {
   lineHighlight: '#474b6611',
 };
 
+export const tokyoNightStyle: CreateThemeOptions['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' },
+];
+
 export const tokyoNightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,29 +44,7 @@ export const tokyoNightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsTokyoNight,
       ...settings,
     },
-    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' },
-      ...styles,
-    ],
+    styles: [...tokyoNightStyle, ...styles],
   });
 };
 
diff --git a/themes/tomorrow-night-blue/src/index.ts b/themes/tomorrow-night-blue/src/index.ts
index 762841176..832f2c2a3 100644
--- a/themes/tomorrow-night-blue/src/index.ts
+++ b/themes/tomorrow-night-blue/src/index.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './color';
 
 export const defaultSettingsTomorrowNightBlue: CreateThemeOptions['settings'] = {
@@ -13,6 +13,30 @@ export const defaultSettingsTomorrowNightBlue: CreateThemeOptions['settings'] =
   lineHighlight: c.activeLine,
 };
 
+export const tomorrowNightBlueStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.operator, t.operatorKeyword], color: c.keyword },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+];
+
 export const tomorrowNightBlueInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,30 +45,7 @@ export const tomorrowNightBlueInit = (options?: Partial<CreateThemeOptions>) =>
       ...defaultSettingsTomorrowNightBlue,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: c.number },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.operator, t.operatorKeyword], color: c.keyword },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.bool, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      ...styles,
-    ],
+    styles: [...tomorrowNightBlueStyle, ...styles],
   });
 };
 
diff --git a/themes/vscode/src/dark.ts b/themes/vscode/src/dark.ts
index f5df73265..a7e4b151f 100644
--- a/themes/vscode/src/dark.ts
+++ b/themes/vscode/src/dark.ts
@@ -1,9 +1,8 @@
-
 /**
  * https://github.com/uiwjs/react-codemirror/issues/409
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = {
   background: '#1e1e1e',
@@ -18,6 +17,56 @@ export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = {
   fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
 };
 
+export const vscodeDarkStyle: CreateThemeOptions['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' },
+];
+
 export function vscodeDarkInit(options?: Partial<CreateThemeOptions>) {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -26,71 +75,7 @@ export function vscodeDarkInit(options?: Partial<CreateThemeOptions>) {
       ...defaultSettingsVscodeDark,
       ...settings,
     },
-    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' },
-      ...styles,
-    ],
+    styles: [...vscodeDarkStyle, ...styles],
   });
 }
 
diff --git a/themes/vscode/src/light.ts b/themes/vscode/src/light.ts
index 280f24395..d9d872053 100644
--- a/themes/vscode/src/light.ts
+++ b/themes/vscode/src/light.ts
@@ -2,7 +2,7 @@
  * https://github.com/uiwjs/react-codemirror/issues/409
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsVscodeLight: CreateThemeOptions['settings'] = {
   background: '#ffffff',
@@ -17,6 +17,56 @@ export const defaultSettingsVscodeLight: CreateThemeOptions['settings'] = {
   fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
 };
 
+export const vscodeLightStyle: CreateThemeOptions['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' },
+];
+
 export function vscodeLightInit(options?: Partial<CreateThemeOptions>) {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -25,71 +75,7 @@ export function vscodeLightInit(options?: Partial<CreateThemeOptions>) {
       ...defaultSettingsVscodeLight,
       ...settings,
     },
-    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' },
-      ...styles,
-    ],
+    styles: [...vscodeLightStyle, ...styles],
   });
 }
 
diff --git a/themes/white/src/dark.ts b/themes/white/src/dark.ts
index 9704332bd..074763195 100644
--- a/themes/white/src/dark.ts
+++ b/themes/white/src/dark.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './dark-color';
 
 export const defaultSettingsWhiteDark: CreateThemeOptions['settings'] = {
@@ -13,6 +13,35 @@ export const defaultSettingsWhiteDark: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const whiteDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword, fontWeight: 'bold' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  {
+    tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
+    color: c.constant,
+  },
+  { tag: [t.operator], color: '#bb9af7' },
+  { tag: [t.number], color: '#a8a8b1' },
+  { tag: [t.bracket], color: '#bb9af7' },
+];
+
 export const whiteDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,35 +50,7 @@ export const whiteDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsWhiteDark,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword, fontWeight: 'bold' },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      {
-        tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
-        color: c.constant,
-      },
-      { tag: [t.operator], color: '#bb9af7' },
-      { tag: [t.number], color: '#a8a8b1' },
-      { tag: [t.bracket], color: '#bb9af7' },
-      ...styles,
-    ],
+    styles: [...whiteDarkStyle, ...styles],
   });
 };
 
diff --git a/themes/white/src/light.ts b/themes/white/src/light.ts
index a09582021..515e1db76 100644
--- a/themes/white/src/light.ts
+++ b/themes/white/src/light.ts
@@ -1,5 +1,5 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { config as c } from './light-color';
 
 export const defaultSettingsWhiteLight: CreateThemeOptions['settings'] = {
@@ -13,6 +13,35 @@ export const defaultSettingsWhiteLight: CreateThemeOptions['settings'] = {
   lineHighlight: c.activeLine,
 };
 
+export const whiteLightStyle: CreateThemeOptions['styles'] = [
+  { tag: t.keyword, color: c.keyword, fontWeight: 'bold' },
+  { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
+  { tag: [t.propertyName], color: c.function },
+  { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
+  { tag: [t.function(t.variableName), t.labelName], color: c.function },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
+  { tag: [t.definition(t.name), t.separator], color: c.variable },
+  { tag: [t.className], color: c.class },
+  { tag: [t.typeName], color: c.type, fontStyle: c.type },
+  { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
+  { tag: [t.meta, t.comment], color: c.comment },
+  { tag: t.tagName, color: c.tag },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.link, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: c.heading },
+  { tag: [t.atom, t.special(t.variableName)], color: c.variable },
+  { tag: t.invalid, color: c.invalid },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  {
+    tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
+    color: c.constant,
+  },
+  { tag: [t.operator], color: '#0431fa' },
+  { tag: [t.number], color: '#a8a8b1' },
+  { tag: [t.bracket], color: '#0431fa' },
+];
+
 export const whiteLightInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -21,35 +50,7 @@ export const whiteLightInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsWhiteLight,
       ...settings,
     },
-    styles: [
-      { tag: t.keyword, color: c.keyword, fontWeight: 'bold' },
-      { tag: [t.name, t.deleted, t.character, t.macroName], color: c.variable },
-      { tag: [t.propertyName], color: c.function },
-      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: c.string },
-      { tag: [t.function(t.variableName), t.labelName], color: c.function },
-      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: c.constant },
-      { tag: [t.definition(t.name), t.separator], color: c.variable },
-      { tag: [t.className], color: c.class },
-      { tag: [t.typeName], color: c.type, fontStyle: c.type },
-      { tag: [t.url, t.escape, t.regexp, t.link], color: c.regexp },
-      { tag: [t.meta, t.comment], color: c.comment },
-      { tag: t.tagName, color: c.tag },
-      { tag: t.strong, fontWeight: 'bold' },
-      { tag: t.emphasis, fontStyle: 'italic' },
-      { tag: t.link, textDecoration: 'underline' },
-      { tag: t.heading, fontWeight: 'bold', color: c.heading },
-      { tag: [t.atom, t.special(t.variableName)], color: c.variable },
-      { tag: t.invalid, color: c.invalid },
-      { tag: t.strikethrough, textDecoration: 'line-through' },
-      {
-        tag: [t.operatorKeyword, t.bool, t.null, t.variableName],
-        color: c.constant,
-      },
-      { tag: [t.operator], color: '#0431fa' },
-      { tag: [t.number], color: '#a8a8b1' },
-      { tag: [t.bracket], color: '#0431fa' },
-      ...styles,
-    ],
+    styles: [...whiteLightStyle, ...styles],
   });
 };
 
diff --git a/themes/xcode/src/index.ts b/themes/xcode/src/index.ts
index 42c234d3d..ff60733e6 100644
--- a/themes/xcode/src/index.ts
+++ b/themes/xcode/src/index.ts
@@ -2,7 +2,7 @@
  * @name Xcode
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes';
 
 export const defaultSettingsXcodeLight: CreateThemeOptions['settings'] = {
   background: '#fff',
@@ -14,6 +14,18 @@ export const defaultSettingsXcodeLight: CreateThemeOptions['settings'] = {
   lineHighlight: '#d5e6ff69',
 };
 
+export const xcodeLightStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.comment, t.quote], color: '#707F8D' },
+  { tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
+  { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' },
+  { tag: [t.string, t.meta], color: '#D23423' },
+  { tag: [t.name], color: '#032f62' },
+  { tag: [t.typeName], color: '#522BB2' },
+  { tag: [t.variableName], color: '#23575C' },
+  { tag: [t.definition(t.variableName)], color: '#327A9E' },
+  { tag: [t.regexp, t.link], color: '#0e0eff' },
+];
+
 export function xcodeLightInit(options?: Partial<CreateThemeOptions>) {
   const { theme = 'light', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -22,18 +34,7 @@ export function xcodeLightInit(options?: Partial<CreateThemeOptions>) {
       ...defaultSettingsXcodeLight,
       ...settings,
     },
-    styles: [
-      { tag: [t.comment, t.quote], color: '#707F8D' },
-      { tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
-      { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' },
-      { tag: [t.string, t.meta], color: '#D23423' },
-      { tag: [t.name], color: '#032f62' },
-      { tag: [t.typeName], color: '#522BB2' },
-      { tag: [t.variableName], color: '#23575C' },
-      { tag: [t.definition(t.variableName)], color: '#327A9E' },
-      { tag: [t.regexp, t.link], color: '#0e0eff' },
-      ...styles,
-    ],
+    styles: [...xcodeLightStyle, ...styles],
   });
 }
 
@@ -48,6 +49,17 @@ export const defaultSettingsXcodeDark: CreateThemeOptions['settings'] = {
   lineHighlight: '#ffffff0f',
 };
 
+export const xcodeDarkStyle: CreateThemeOptions['styles'] = [
+  { tag: [t.comment, t.quote], color: '#7F8C98' },
+  { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
+  { tag: [t.string, t.meta], color: '#FF8170' },
+  { tag: [t.typeName], color: '#DABAFF' },
+  { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
+  { tag: [t.name], color: '#6BAA9F' },
+  { tag: [t.variableName], color: '#ACF2E4' },
+  { tag: [t.regexp, t.link], color: '#FF8170' },
+];
+
 export const xcodeDarkInit = (options?: Partial<CreateThemeOptions>) => {
   const { theme = 'dark', settings = {}, styles = [] } = options || {};
   return createTheme({
@@ -56,17 +68,7 @@ export const xcodeDarkInit = (options?: Partial<CreateThemeOptions>) => {
       ...defaultSettingsXcodeDark,
       ...settings,
     },
-    styles: [
-      { tag: [t.comment, t.quote], color: '#7F8C98' },
-      { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
-      { tag: [t.string, t.meta], color: '#FF8170' },
-      { tag: [t.typeName], color: '#DABAFF' },
-      { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
-      { tag: [t.name], color: '#6BAA9F' },
-      { tag: [t.variableName], color: '#ACF2E4' },
-      { tag: [t.regexp, t.link], color: '#FF8170' },
-      ...styles,
-    ],
+    styles: [...xcodeDarkStyle, ...styles],
   });
 };