diff --git a/.gitignore b/.gitignore
index f06235c..3c3629e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1 @@
 node_modules
-dist
diff --git a/dist/create-theme.d.ts b/dist/create-theme.d.ts
new file mode 100644
index 0000000..1d60a7b
--- /dev/null
+++ b/dist/create-theme.d.ts
@@ -0,0 +1,49 @@
+import { Extension } from '@codemirror/state';
+import { TagStyle } from '@codemirror/language';
+interface Options {
+    /**
+     * Theme variant. Determines which styles CodeMirror will apply by default.
+     */
+    variant: Variant;
+    /**
+     * Settings to customize the look of the editor, like background, gutter, selection and others.
+     */
+    settings: Settings;
+    /**
+     * Syntax highlighting styles.
+     */
+    styles: TagStyle[];
+}
+type Variant = 'light' | 'dark';
+interface Settings {
+    /**
+     * Editor background.
+     */
+    background: string;
+    /**
+     * Default text color.
+     */
+    foreground: string;
+    /**
+     * Caret color.
+     */
+    caret: string;
+    /**
+     * Selection background.
+     */
+    selection: string;
+    /**
+     * Background of highlighted lines.
+     */
+    lineHighlight: string;
+    /**
+     * Gutter background.
+     */
+    gutterBackground: string;
+    /**
+     * Text color inside gutter.
+     */
+    gutterForeground: string;
+}
+declare const createTheme: ({ variant, settings, styles }: Options) => Extension;
+export default createTheme;
diff --git a/dist/create-theme.js b/dist/create-theme.js
new file mode 100644
index 0000000..604b5a0
--- /dev/null
+++ b/dist/create-theme.js
@@ -0,0 +1,36 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting, } from '@codemirror/language';
+const createTheme = ({ variant, settings, styles }) => {
+    const theme = EditorView.theme({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '&': {
+            backgroundColor: settings.background,
+            color: settings.foreground,
+        },
+        '.cm-content': {
+            caretColor: settings.caret,
+        },
+        '.cm-cursor, .cm-dropCursor': {
+            borderLeftColor: settings.caret,
+        },
+        '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {
+            backgroundColor: settings.selection,
+        },
+        '.cm-activeLine': {
+            backgroundColor: settings.lineHighlight,
+        },
+        '.cm-gutters': {
+            backgroundColor: settings.gutterBackground,
+            color: settings.gutterForeground,
+        },
+        '.cm-activeLineGutter': {
+            backgroundColor: settings.lineHighlight,
+        },
+    }, {
+        dark: variant === 'dark',
+    });
+    const highlightStyle = HighlightStyle.define(styles);
+    const extension = [theme, syntaxHighlighting(highlightStyle)];
+    return extension;
+};
+export default createTheme;
diff --git a/dist/index.d.ts b/dist/index.d.ts
new file mode 100644
index 0000000..3549094
--- /dev/null
+++ b/dist/index.d.ts
@@ -0,0 +1,17 @@
+export { default as createTheme } from './create-theme.js';
+export * from './themes/amy.js';
+export * from './themes/ayu-light.js';
+export * from './themes/barf.js';
+export * from './themes/bespin.js';
+export * from './themes/birds-of-paradise.js';
+export * from './themes/boys-and-girls.js';
+export * from './themes/clouds.js';
+export * from './themes/cobalt.js';
+export * from './themes/cool-glow.js';
+export * from './themes/dracula.js';
+export * from './themes/espresso.js';
+export * from './themes/noctis-lilac.js';
+export * from './themes/rose-pine-dawn.js';
+export * from './themes/smoothy.js';
+export * from './themes/solarized-light.js';
+export * from './themes/tomorrow.js';
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000..3549094
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,17 @@
+export { default as createTheme } from './create-theme.js';
+export * from './themes/amy.js';
+export * from './themes/ayu-light.js';
+export * from './themes/barf.js';
+export * from './themes/bespin.js';
+export * from './themes/birds-of-paradise.js';
+export * from './themes/boys-and-girls.js';
+export * from './themes/clouds.js';
+export * from './themes/cobalt.js';
+export * from './themes/cool-glow.js';
+export * from './themes/dracula.js';
+export * from './themes/espresso.js';
+export * from './themes/noctis-lilac.js';
+export * from './themes/rose-pine-dawn.js';
+export * from './themes/smoothy.js';
+export * from './themes/solarized-light.js';
+export * from './themes/tomorrow.js';
diff --git a/dist/themes/amy.d.ts b/dist/themes/amy.d.ts
new file mode 100644
index 0000000..cffcaf8
--- /dev/null
+++ b/dist/themes/amy.d.ts
@@ -0,0 +1 @@
+export declare const amy: import("@codemirror/state").Extension;
diff --git a/dist/themes/amy.js b/dist/themes/amy.js
new file mode 100644
index 0000000..0b40812
--- /dev/null
+++ b/dist/themes/amy.js
@@ -0,0 +1,85 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: William D. Neumann
+export const amy = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#200020',
+        foreground: '#D0D0FF',
+        caret: '#7070FF',
+        selection: '#80000080',
+        gutterBackground: '#200020',
+        gutterForeground: '#C080C0',
+        lineHighlight: '#80000040',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#404080',
+        },
+        {
+            tag: [t.string, t.regexp],
+            color: '#999999',
+        },
+        {
+            tag: t.number,
+            color: '#7090B0',
+        },
+        {
+            tag: [t.bool, t.null],
+            color: '#8080A0',
+        },
+        {
+            tag: [t.punctuation, t.derefOperator],
+            color: '#805080',
+        },
+        {
+            tag: t.keyword,
+            color: '#60B0FF',
+        },
+        {
+            tag: t.definitionKeyword,
+            color: '#B0FFF0',
+        },
+        {
+            tag: t.moduleKeyword,
+            color: '#60B0FF',
+        },
+        {
+            tag: t.operator,
+            color: '#A0A0FF',
+        },
+        {
+            tag: [t.variableName, t.self],
+            color: '#008080',
+        },
+        {
+            tag: t.operatorKeyword,
+            color: '#A0A0FF',
+        },
+        {
+            tag: t.controlKeyword,
+            color: '#80A0FF',
+        },
+        {
+            tag: t.className,
+            color: '#70E080',
+        },
+        {
+            tag: [t.function(t.propertyName), t.propertyName],
+            color: '#50A0A0',
+        },
+        {
+            tag: t.tagName,
+            color: '#009090',
+        },
+        {
+            tag: t.modifier,
+            color: '#B0FFF0',
+        },
+        {
+            tag: [t.squareBracket, t.attributeName],
+            color: '#D0D0FF',
+        },
+    ],
+});
diff --git a/dist/themes/ayu-light.d.ts b/dist/themes/ayu-light.d.ts
new file mode 100644
index 0000000..fdce6fc
--- /dev/null
+++ b/dist/themes/ayu-light.d.ts
@@ -0,0 +1 @@
+export declare const ayuLight: import("@codemirror/state").Extension;
diff --git a/dist/themes/ayu-light.js b/dist/themes/ayu-light.js
new file mode 100644
index 0000000..1a1748b
--- /dev/null
+++ b/dist/themes/ayu-light.js
@@ -0,0 +1,77 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Konstantin Pschera
+export const ayuLight = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#fcfcfc',
+        foreground: '#5c6166',
+        caret: '#ffaa33',
+        selection: '#036dd626',
+        gutterBackground: '#fcfcfc',
+        gutterForeground: '#8a919966',
+        lineHighlight: '#8a91991a',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#787b8099',
+        },
+        {
+            tag: t.string,
+            color: '#86b300',
+        },
+        {
+            tag: t.regexp,
+            color: '#4cbf99',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#ffaa33',
+        },
+        {
+            tag: t.variableName,
+            color: '#5c6166',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#fa8d3e',
+        },
+        {
+            tag: [t.keyword, t.special(t.brace)],
+            color: '#fa8d3e',
+        },
+        {
+            tag: t.operator,
+            color: '#ed9366',
+        },
+        {
+            tag: t.separator,
+            color: '#5c6166b3',
+        },
+        {
+            tag: t.punctuation,
+            color: '#5c6166',
+        },
+        {
+            tag: [t.definition(t.propertyName), t.function(t.variableName)],
+            color: '#f2ae49',
+        },
+        {
+            tag: [t.className, t.definition(t.typeName)],
+            color: '#22a4e6',
+        },
+        {
+            tag: [t.tagName, t.typeName, t.self, t.labelName],
+            color: '#55b4d4',
+        },
+        {
+            tag: t.angleBracket,
+            color: '#55b4d480',
+        },
+        {
+            tag: t.attributeName,
+            color: '#f2ae49',
+        },
+    ],
+});
diff --git a/dist/themes/barf.d.ts b/dist/themes/barf.d.ts
new file mode 100644
index 0000000..fc7d28e
--- /dev/null
+++ b/dist/themes/barf.d.ts
@@ -0,0 +1 @@
+export declare const barf: import("@codemirror/state").Extension;
diff --git a/dist/themes/barf.js b/dist/themes/barf.js
new file mode 100644
index 0000000..eb9e2e6
--- /dev/null
+++ b/dist/themes/barf.js
@@ -0,0 +1,59 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: unknown
+export const barf = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#15191EFA',
+        foreground: '#EEF2F7',
+        caret: '#C4C4C4',
+        selection: '#90B2D557',
+        gutterBackground: '#15191EFA',
+        gutterForeground: '#aaaaaa95',
+        lineHighlight: '#57575712',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#6E6E6E',
+        },
+        {
+            tag: [t.string, t.regexp, t.special(t.brace)],
+            color: '#5C81B3',
+        },
+        {
+            tag: t.number,
+            color: '#C1E1B8',
+        },
+        {
+            tag: t.bool,
+            color: '#53667D',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier, t.function(t.propertyName)],
+            color: '#A3D295',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.keyword, t.moduleKeyword, t.operatorKeyword, t.operator],
+            color: '#697A8E',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.variableName, t.attributeName],
+            color: '#708E67',
+        },
+        {
+            tag: [
+                t.function(t.variableName),
+                t.definition(t.propertyName),
+                t.derefOperator,
+            ],
+            color: '#fff',
+        },
+        {
+            tag: t.tagName,
+            color: '#A3D295',
+        },
+    ],
+});
diff --git a/dist/themes/bespin.d.ts b/dist/themes/bespin.d.ts
new file mode 100644
index 0000000..dcc6166
--- /dev/null
+++ b/dist/themes/bespin.d.ts
@@ -0,0 +1 @@
+export declare const bespin: import("@codemirror/state").Extension;
diff --git a/dist/themes/bespin.js b/dist/themes/bespin.js
new file mode 100644
index 0000000..f82efe8
--- /dev/null
+++ b/dist/themes/bespin.js
@@ -0,0 +1,53 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Michael Diolosa
+export const bespin = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#2e241d',
+        foreground: '#BAAE9E',
+        caret: '#A7A7A7',
+        selection: '#DDF0FF33',
+        gutterBackground: '#28211C',
+        gutterForeground: '#BAAE9E90',
+        lineHighlight: '#FFFFFF08',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#666666',
+        },
+        {
+            tag: [t.string, t.special(t.brace)],
+            color: '#54BE0D',
+        },
+        {
+            tag: t.regexp,
+            color: '#E9C062',
+        },
+        {
+            tag: t.number,
+            color: '#CF6A4C',
+        },
+        {
+            tag: [t.keyword, t.operator],
+            color: '#5EA6EA',
+        },
+        {
+            tag: t.variableName,
+            color: '#7587A6',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#F9EE98',
+        },
+        {
+            tag: [t.propertyName, t.function(t.variableName)],
+            color: '#937121',
+        },
+        {
+            tag: [t.typeName, t.angleBracket, t.tagName],
+            color: '#9B859D',
+        },
+    ],
+});
diff --git a/dist/themes/birds-of-paradise.d.ts b/dist/themes/birds-of-paradise.d.ts
new file mode 100644
index 0000000..fe74632
--- /dev/null
+++ b/dist/themes/birds-of-paradise.d.ts
@@ -0,0 +1 @@
+export declare const birdsOfParadise: import("@codemirror/state").Extension;
diff --git a/dist/themes/birds-of-paradise.js b/dist/themes/birds-of-paradise.js
new file mode 100644
index 0000000..e84d1f9
--- /dev/null
+++ b/dist/themes/birds-of-paradise.js
@@ -0,0 +1,65 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Joe Bergantine
+export const birdsOfParadise = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#3b2627',
+        foreground: '#E6E1C4',
+        caret: '#E6E1C4',
+        selection: '#16120E',
+        gutterBackground: '#3b2627',
+        gutterForeground: '#E6E1C490',
+        lineHighlight: '#1F1611',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#6B4E32',
+        },
+        {
+            tag: [t.keyword, t.operator, t.derefOperator],
+            color: '#EF5D32',
+        },
+        {
+            tag: t.className,
+            color: '#EFAC32',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [
+                t.typeName,
+                t.propertyName,
+                t.function(t.variableName),
+                t.definition(t.variableName),
+            ],
+            color: '#EFAC32',
+        },
+        {
+            tag: t.definition(t.typeName),
+            color: '#EFAC32',
+            fontWeight: 'bold',
+        },
+        {
+            tag: t.labelName,
+            color: '#EFAC32',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.number, t.bool],
+            color: '#6C99BB',
+        },
+        {
+            tag: [t.variableName, t.self],
+            color: '#7DAF9C',
+        },
+        {
+            tag: [t.string, t.special(t.brace), t.regexp],
+            color: '#D9D762',
+        },
+        {
+            tag: [t.angleBracket, t.tagName, t.attributeName],
+            color: '#EFCB43',
+        },
+    ],
+});
diff --git a/dist/themes/boys-and-girls.d.ts b/dist/themes/boys-and-girls.d.ts
new file mode 100644
index 0000000..2d7fc50
--- /dev/null
+++ b/dist/themes/boys-and-girls.d.ts
@@ -0,0 +1 @@
+export declare const boysAndGirls: import("@codemirror/state").Extension;
diff --git a/dist/themes/boys-and-girls.js b/dist/themes/boys-and-girls.js
new file mode 100644
index 0000000..1091459
--- /dev/null
+++ b/dist/themes/boys-and-girls.js
@@ -0,0 +1,39 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: unknown
+export const boysAndGirls = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#000205',
+        foreground: '#FFFFFF',
+        caret: '#E60065',
+        selection: '#E60C6559',
+        gutterBackground: '#000205',
+        gutterForeground: '#ffffff90',
+        lineHighlight: '#4DD7FC1A',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#404040',
+        },
+        {
+            tag: [t.string, t.special(t.brace), t.regexp],
+            color: '#00D8FF',
+        },
+        {
+            tag: t.number,
+            color: '#E62286',
+        },
+        {
+            tag: [t.variableName, t.attributeName, t.self],
+            color: '#E62286',
+            fontWeight: 'bold',
+        },
+        {
+            tag: t.function(t.variableName),
+            color: '#fff',
+            fontWeight: 'bold',
+        },
+    ],
+});
diff --git a/dist/themes/clouds.d.ts b/dist/themes/clouds.d.ts
new file mode 100644
index 0000000..5994a9a
--- /dev/null
+++ b/dist/themes/clouds.d.ts
@@ -0,0 +1 @@
+export declare const clouds: import("@codemirror/state").Extension;
diff --git a/dist/themes/clouds.js b/dist/themes/clouds.js
new file mode 100644
index 0000000..6f51ee7
--- /dev/null
+++ b/dist/themes/clouds.js
@@ -0,0 +1,45 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Fred LeBlanc
+export const clouds = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#fff',
+        foreground: '#000',
+        caret: '#000',
+        selection: '#BDD5FC',
+        gutterBackground: '#fff',
+        gutterForeground: '#00000070',
+        lineHighlight: '#FFFBD1',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#BCC8BA',
+        },
+        {
+            tag: [t.string, t.special(t.brace), t.regexp],
+            color: '#5D90CD',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#46A609',
+        },
+        {
+            tag: t.keyword,
+            color: '#AF956F',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#C52727',
+        },
+        {
+            tag: [t.angleBracket, t.tagName, t.attributeName],
+            color: '#606060',
+        },
+        {
+            tag: t.self,
+            color: '#000',
+        },
+    ],
+});
diff --git a/dist/themes/cobalt.d.ts b/dist/themes/cobalt.d.ts
new file mode 100644
index 0000000..1bf4da8
--- /dev/null
+++ b/dist/themes/cobalt.d.ts
@@ -0,0 +1 @@
+export declare const cobalt: import("@codemirror/state").Extension;
diff --git a/dist/themes/cobalt.js b/dist/themes/cobalt.js
new file mode 100644
index 0000000..282fa37
--- /dev/null
+++ b/dist/themes/cobalt.js
@@ -0,0 +1,75 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Jacob Rus
+export const cobalt = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#00254b',
+        foreground: '#FFFFFF',
+        caret: '#FFFFFF',
+        selection: '#B36539BF',
+        gutterBackground: '#00254b',
+        gutterForeground: '#FFFFFF70',
+        lineHighlight: '#00000059',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#0088FF',
+        },
+        {
+            tag: t.string,
+            color: '#3AD900',
+        },
+        {
+            tag: t.regexp,
+            color: '#80FFC2',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#FF628C',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#FFEE80',
+        },
+        {
+            tag: t.variableName,
+            color: '#CCCCCC',
+        },
+        {
+            tag: t.self,
+            color: '#FF80E1',
+        },
+        {
+            tag: [
+                t.className,
+                t.definition(t.propertyName),
+                t.function(t.variableName),
+                t.definition(t.typeName),
+                t.labelName,
+            ],
+            color: '#FFDD00',
+        },
+        {
+            tag: [t.keyword, t.operator],
+            color: '#FF9D00',
+        },
+        {
+            tag: [t.propertyName, t.typeName],
+            color: '#80FFBB',
+        },
+        {
+            tag: t.special(t.brace),
+            color: '#EDEF7D',
+        },
+        {
+            tag: t.attributeName,
+            color: '#9EFFFF',
+        },
+        {
+            tag: t.derefOperator,
+            color: '#fff',
+        },
+    ],
+});
diff --git a/dist/themes/cool-glow.d.ts b/dist/themes/cool-glow.d.ts
new file mode 100644
index 0000000..26c6560
--- /dev/null
+++ b/dist/themes/cool-glow.d.ts
@@ -0,0 +1 @@
+export declare const coolGlow: import("@codemirror/state").Extension;
diff --git a/dist/themes/cool-glow.js b/dist/themes/cool-glow.js
new file mode 100644
index 0000000..883de43
--- /dev/null
+++ b/dist/themes/cool-glow.js
@@ -0,0 +1,63 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: unknown
+export const coolGlow = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#060521',
+        foreground: '#E0E0E0',
+        caret: '#FFFFFFA6',
+        selection: '#122BBB',
+        gutterBackground: '#060521',
+        gutterForeground: '#E0E0E090',
+        lineHighlight: '#FFFFFF0F',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#AEAEAE',
+        },
+        {
+            tag: [t.string, t.special(t.brace), t.regexp],
+            color: '#8DFF8E',
+        },
+        {
+            tag: [
+                t.className,
+                t.definition(t.propertyName),
+                t.function(t.variableName),
+                t.function(t.definition(t.variableName)),
+                t.definition(t.typeName),
+            ],
+            color: '#A3EBFF',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#62E9BD',
+        },
+        {
+            tag: [t.keyword, t.operator],
+            color: '#2BF1DC',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#F8FBB1',
+        },
+        {
+            tag: [t.variableName, t.self],
+            color: '#B683CA',
+        },
+        {
+            tag: [t.angleBracket, t.tagName, t.typeName, t.propertyName],
+            color: '#60A4F1',
+        },
+        {
+            tag: t.derefOperator,
+            color: '#E0E0E0',
+        },
+        {
+            tag: t.attributeName,
+            color: '#7BACCA',
+        },
+    ],
+});
diff --git a/dist/themes/dracula.d.ts b/dist/themes/dracula.d.ts
new file mode 100644
index 0000000..ff9f18e
--- /dev/null
+++ b/dist/themes/dracula.d.ts
@@ -0,0 +1 @@
+export declare const dracula: import("@codemirror/state").Extension;
diff --git a/dist/themes/dracula.js b/dist/themes/dracula.js
new file mode 100644
index 0000000..7b8c76c
--- /dev/null
+++ b/dist/themes/dracula.js
@@ -0,0 +1,50 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Zeno Rocha
+export const dracula = createTheme({
+    variant: 'dark',
+    settings: {
+        background: '#2d2f3f',
+        foreground: '#f8f8f2',
+        caret: '#f8f8f0',
+        selection: '#44475a',
+        gutterBackground: '#282a36',
+        gutterForeground: 'rgb(144, 145, 148)',
+        lineHighlight: '#44475a',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#6272a4',
+        },
+        {
+            tag: [t.string, t.special(t.brace)],
+            color: '#f1fa8c',
+        },
+        {
+            tag: [t.number, t.self, t.bool, t.null],
+            color: '#bd93f9',
+        },
+        {
+            tag: [t.keyword, t.operator],
+            color: '#ff79c6',
+        },
+        {
+            tag: [t.definitionKeyword, t.typeName],
+            color: '#8be9fd',
+        },
+        {
+            tag: t.definition(t.typeName),
+            color: '#f8f8f2',
+        },
+        {
+            tag: [
+                t.className,
+                t.definition(t.propertyName),
+                t.function(t.variableName),
+                t.attributeName,
+            ],
+            color: '#50fa7b',
+        },
+    ],
+});
diff --git a/dist/themes/espresso.d.ts b/dist/themes/espresso.d.ts
new file mode 100644
index 0000000..c9ea73f
--- /dev/null
+++ b/dist/themes/espresso.d.ts
@@ -0,0 +1 @@
+export declare const espresso: import("@codemirror/state").Extension;
diff --git a/dist/themes/espresso.js b/dist/themes/espresso.js
new file mode 100644
index 0000000..ff3f4f6
--- /dev/null
+++ b/dist/themes/espresso.js
@@ -0,0 +1,43 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: TextMate
+export const espresso = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#FFFFFF',
+        foreground: '#000000',
+        caret: '#000000',
+        selection: '#80C7FF',
+        gutterBackground: '#FFFFFF',
+        gutterForeground: '#00000070',
+        lineHighlight: '#C1E2F8',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#AAAAAA',
+        },
+        {
+            tag: [t.keyword, t.operator, t.typeName, t.tagName, t.propertyName],
+            color: '#2F6F9F',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.attributeName, t.definition(t.propertyName)],
+            color: '#4F9FD0',
+        },
+        {
+            tag: [t.className, t.string, t.special(t.brace)],
+            color: '#CF4F5F',
+        },
+        {
+            tag: t.number,
+            color: '#CF4F5F',
+            fontWeight: 'bold',
+        },
+        {
+            tag: t.variableName,
+            fontWeight: 'bold',
+        },
+    ],
+});
diff --git a/dist/themes/noctis-lilac.d.ts b/dist/themes/noctis-lilac.d.ts
new file mode 100644
index 0000000..5b8a65e
--- /dev/null
+++ b/dist/themes/noctis-lilac.d.ts
@@ -0,0 +1 @@
+export declare const noctisLilac: import("@codemirror/state").Extension;
diff --git a/dist/themes/noctis-lilac.js b/dist/themes/noctis-lilac.js
new file mode 100644
index 0000000..4f5682c
--- /dev/null
+++ b/dist/themes/noctis-lilac.js
@@ -0,0 +1,78 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Liviu Schera
+export const noctisLilac = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#f2f1f8',
+        foreground: '#0c006b',
+        caret: '#5c49e9',
+        selection: '#d5d1f2',
+        gutterBackground: '#f2f1f8',
+        gutterForeground: '#0c006b70',
+        lineHighlight: '#e1def3',
+    },
+    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',
+        },
+    ],
+});
diff --git a/dist/themes/rose-pine-dawn.d.ts b/dist/themes/rose-pine-dawn.d.ts
new file mode 100644
index 0000000..968ea3e
--- /dev/null
+++ b/dist/themes/rose-pine-dawn.d.ts
@@ -0,0 +1 @@
+export declare const rosePineDawn: import("@codemirror/state").Extension;
diff --git a/dist/themes/rose-pine-dawn.js b/dist/themes/rose-pine-dawn.js
new file mode 100644
index 0000000..ad7b542
--- /dev/null
+++ b/dist/themes/rose-pine-dawn.js
@@ -0,0 +1,57 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Rosé Pine
+export const rosePineDawn = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#faf4ed',
+        foreground: '#575279',
+        caret: '#575279',
+        selection: '#6e6a8614',
+        gutterBackground: '#faf4ed',
+        gutterForeground: '#57527970',
+        lineHighlight: '#6e6a860d',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#9893a5',
+        },
+        {
+            tag: [t.bool, t.null],
+            color: '#286983',
+        },
+        {
+            tag: t.number,
+            color: '#d7827e',
+        },
+        {
+            tag: t.className,
+            color: '#d7827e',
+        },
+        {
+            tag: [t.angleBracket, t.tagName, t.typeName],
+            color: '#56949f',
+        },
+        {
+            tag: t.attributeName,
+            color: '#907aa9',
+        },
+        {
+            tag: t.punctuation,
+            color: '#797593',
+        },
+        {
+            tag: [t.keyword, t.modifier],
+            color: '#286983',
+        },
+        {
+            tag: [t.string, t.regexp],
+            color: '#ea9d34',
+        },
+        {
+            tag: t.variableName,
+            color: '#d7827e',
+        },
+    ],
+});
diff --git a/dist/themes/smoothy.d.ts b/dist/themes/smoothy.d.ts
new file mode 100644
index 0000000..95e241d
--- /dev/null
+++ b/dist/themes/smoothy.d.ts
@@ -0,0 +1 @@
+export declare const smoothy: import("@codemirror/state").Extension;
diff --git a/dist/themes/smoothy.js b/dist/themes/smoothy.js
new file mode 100644
index 0000000..13ae25a
--- /dev/null
+++ b/dist/themes/smoothy.js
@@ -0,0 +1,81 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Kenneth Reitz
+export const smoothy = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#FFFFFF',
+        foreground: '#000000',
+        caret: '#000000',
+        selection: '#FFFD0054',
+        gutterBackground: '#FFFFFF',
+        gutterForeground: '#00000070',
+        lineHighlight: '#00000008',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#CFCFCF',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#E66C29',
+        },
+        {
+            tag: [
+                t.className,
+                t.definition(t.propertyName),
+                t.function(t.variableName),
+                t.labelName,
+                t.definition(t.typeName),
+            ],
+            color: '#2EB43B',
+        },
+        {
+            tag: t.keyword,
+            color: '#D8B229',
+        },
+        {
+            tag: t.operator,
+            color: '#4EA44E',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#925A47',
+        },
+        {
+            tag: t.string,
+            color: '#704D3D',
+        },
+        {
+            tag: t.typeName,
+            color: '#2F8996',
+        },
+        {
+            tag: [t.variableName, t.propertyName],
+            color: '#77ACB0',
+        },
+        {
+            tag: t.self,
+            color: '#77ACB0',
+            fontWeight: 'bold',
+        },
+        {
+            tag: t.regexp,
+            color: '#E3965E',
+        },
+        {
+            tag: [t.tagName, t.angleBracket],
+            color: '#BAA827',
+        },
+        {
+            tag: t.attributeName,
+            color: '#B06520',
+        },
+        {
+            tag: t.derefOperator,
+            color: '#000',
+        },
+    ],
+});
diff --git a/dist/themes/solarized-light.d.ts b/dist/themes/solarized-light.d.ts
new file mode 100644
index 0000000..30c85a4
--- /dev/null
+++ b/dist/themes/solarized-light.d.ts
@@ -0,0 +1 @@
+export declare const solarizedLight: import("@codemirror/state").Extension;
diff --git a/dist/themes/solarized-light.js b/dist/themes/solarized-light.js
new file mode 100644
index 0000000..ace85be
--- /dev/null
+++ b/dist/themes/solarized-light.js
@@ -0,0 +1,75 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Ethan Schoonover
+export const solarizedLight = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#fef7e5',
+        foreground: '#586E75',
+        caret: '#000000',
+        selection: '#073642',
+        gutterBackground: '#fef7e5',
+        gutterForeground: '#586E7580',
+        lineHighlight: '#EEE8D5',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#93A1A1',
+        },
+        {
+            tag: t.string,
+            color: '#2AA198',
+        },
+        {
+            tag: t.regexp,
+            color: '#D30102',
+        },
+        {
+            tag: t.number,
+            color: '#D33682',
+        },
+        {
+            tag: t.variableName,
+            color: '#268BD2',
+        },
+        {
+            tag: [t.keyword, t.operator, t.punctuation],
+            color: '#859900',
+        },
+        {
+            tag: [t.definitionKeyword, t.modifier],
+            color: '#073642',
+            fontWeight: 'bold',
+        },
+        {
+            tag: [t.className, t.self, t.definition(t.propertyName)],
+            color: '#268BD2',
+        },
+        {
+            tag: t.function(t.variableName),
+            color: '#268BD2',
+        },
+        {
+            tag: [t.bool, t.null],
+            color: '#B58900',
+        },
+        {
+            tag: t.tagName,
+            color: '#268BD2',
+            fontWeight: 'bold',
+        },
+        {
+            tag: t.angleBracket,
+            color: '#93A1A1',
+        },
+        {
+            tag: t.attributeName,
+            color: '#93A1A1',
+        },
+        {
+            tag: t.typeName,
+            color: '#859900',
+        },
+    ],
+});
diff --git a/dist/themes/tomorrow.d.ts b/dist/themes/tomorrow.d.ts
new file mode 100644
index 0000000..8ab4a64
--- /dev/null
+++ b/dist/themes/tomorrow.d.ts
@@ -0,0 +1 @@
+export declare const tomorrow: import("@codemirror/state").Extension;
diff --git a/dist/themes/tomorrow.js b/dist/themes/tomorrow.js
new file mode 100644
index 0000000..7b3c4d0
--- /dev/null
+++ b/dist/themes/tomorrow.js
@@ -0,0 +1,53 @@
+import { tags as t } from '@lezer/highlight';
+import createTheme from '../create-theme.js';
+// Author: Chris Kempson
+export const tomorrow = createTheme({
+    variant: 'light',
+    settings: {
+        background: '#FFFFFF',
+        foreground: '#4D4D4C',
+        caret: '#AEAFAD',
+        selection: '#D6D6D6',
+        gutterBackground: '#FFFFFF',
+        gutterForeground: '#4D4D4C80',
+        lineHighlight: '#EFEFEF',
+    },
+    styles: [
+        {
+            tag: t.comment,
+            color: '#8E908C',
+        },
+        {
+            tag: [t.variableName, t.self, t.propertyName, t.attributeName, t.regexp],
+            color: '#C82829',
+        },
+        {
+            tag: [t.number, t.bool, t.null],
+            color: '#F5871F',
+        },
+        {
+            tag: [t.className, t.typeName, t.definition(t.typeName)],
+            color: '#C99E00',
+        },
+        {
+            tag: [t.string, t.special(t.brace)],
+            color: '#718C00',
+        },
+        {
+            tag: t.operator,
+            color: '#3E999F',
+        },
+        {
+            tag: [t.definition(t.propertyName), t.function(t.variableName)],
+            color: '#4271AE',
+        },
+        {
+            tag: t.keyword,
+            color: '#8959A8',
+        },
+        {
+            tag: t.derefOperator,
+            color: '#4D4D4C',
+        },
+    ],
+});