@ddietr/codemirror-themes - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/theme/dracula.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const draculaTheme: Extension;
@@ -4,0 +28,0 @@ export declare const draculaHighlightStyle: HighlightStyle;

dist/theme/dracula.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'dracula',
+    dark: true,
+    background: '#282A36',
+    foreground: '#F8F8F2',
+    selection: '#44475A',
+    cursor: '#F8F8F2',
+    dropdownBackground: '#343746',
+    dropdownBorder: '#191A21',
+    keyword: '#FF79C6',
+    storage: '#FF79C6',
+    variable: '#BD93F9',
+    parameter: '#FFB86C',
+    function: '#50FA7B',
+    string: '#F1FA8C',
+    constant: '#BD93F9',
+    type: '#8BE9FD',
+    class: '#8BE9FD',
+    number: '#BD93F9',
+    comment: '#6272A4',
+    heading: '#BD93F9',
+    invalid: '#FF5555',
+    regexp: '#F1FA8C',
+};
 const draculaTheme = EditorView.theme({
     '&': {
-        color: '#F8F8F2',
-        backgroundColor: '#282A36',
-        '& ::selection': { backgroundColor: '#44475A' },
-        caretColor: '#F8F8F2',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#F8F8F2' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#44475A' },
-    '.cm-panels': { backgroundColor: '#343746', color: '#F8F8F2' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#343746',
-        outline: `1px solid #191A21`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#44475A'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#44475A' },
-    '.cm-selectionMatch': { backgroundColor: '#44475A' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '#FF5555',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#282A36',
-        color: '#F8F8F2',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#F8F8F2'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #191A21',
-        backgroundColor: '#343746'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#44475A',
-            color: '#F8F8F2'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: true });
+}, { dark: config.dark });
 const draculaHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#FF79C6' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#BD93F9' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#50FA7B' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#F1FA8C' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#50FA7B' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#BD93F9' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#BD93F9' },
-    { tag: [tags.className], color: '#8BE9FD' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#BD93F9' },
-    { tag: [tags.typeName], color: '#8BE9FD', fontStyle: 'italic' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#FF79C6' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#F1FA8C' },
-    { tag: [tags.meta, tags.comment], color: '#6272A4' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#BD93F9' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#BD93F9' },
-    { tag: tags.invalid, color: '#FF5555' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const dracula = [
 
-export { dracula, draculaHighlightStyle, draculaTheme };
+export { config, dracula, draculaHighlightStyle, draculaTheme };

dist/theme/github-dark.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const githubDarkTheme: Extension;
@@ -4,0 +28,0 @@ export declare const githubDarkHighlightStyle: HighlightStyle;

dist/theme/github-dark.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'githubDark',
+    dark: true,
+    background: '#24292e',
+    foreground: '#d1d5da',
+    selection: '#3392FF44',
+    cursor: '#c8e1ff',
+    dropdownBackground: '#2f363d',
+    dropdownBorder: '#1b1f23',
+    keyword: '#f97583',
+    storage: '#f97583',
+    variable: '#e1e4e8',
+    parameter: '#ffab70',
+    function: '#b392f0',
+    string: '#9ecbff',
+    constant: '#79b8ff',
+    type: '#79b8ff',
+    class: '#b392f0',
+    number: '#79b8ff',
+    comment: '#6a737d',
+    heading: '#79b8ff',
+    invalid: '#f97583',
+    regexp: '#dbedff',
+};
 const githubDarkTheme = EditorView.theme({
     '&': {
-        color: '#d1d5da',
-        backgroundColor: '#24292e',
-        '& ::selection': { backgroundColor: '#3392FF44' },
-        caretColor: '#c8e1ff',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#c8e1ff' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#3392FF44' },
-    '.cm-panels': { backgroundColor: '#2f363d', color: '#d1d5da' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#2f363d',
-        outline: `1px solid #1b1f23`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#3392FF44'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#3392FF44' },
-    '.cm-selectionMatch': { backgroundColor: '#3392FF44' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '#f97583',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#24292e',
-        color: '#d1d5da',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#d1d5da'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #1b1f23',
-        backgroundColor: '#2f363d'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#3392FF44',
-            color: '#d1d5da'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: true });
+}, { dark: config.dark });
 const githubDarkHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#f97583' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#e1e4e8' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#b392f0' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#9ecbff' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#b392f0' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#79b8ff' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#e1e4e8' },
-    { tag: [tags.className], color: '#b392f0' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#79b8ff' },
-    { tag: [tags.typeName], color: '#79b8ff', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#f97583' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#dbedff' },
-    { tag: [tags.meta, tags.comment], color: '#6a737d' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#79b8ff' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#e1e4e8' },
-    { tag: tags.invalid, color: '#f97583' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const githubDark = [
 
-export { githubDark, githubDarkHighlightStyle, githubDarkTheme };
+export { config, githubDark, githubDarkHighlightStyle, githubDarkTheme };

dist/theme/github-light.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const githubLightTheme: Extension;
@@ -4,0 +28,0 @@ export declare const githubLightHighlightStyle: HighlightStyle;

dist/theme/github-light.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'githubLight',
+    dark: false,
+    background: '#fff',
+    foreground: '#444d56',
+    selection: '#0366d625',
+    cursor: '#044289',
+    dropdownBackground: '#fafbfc',
+    dropdownBorder: '#e1e4e8',
+    keyword: '#d73a49',
+    storage: '#d73a49',
+    variable: '#24292e',
+    parameter: '#e36209',
+    function: '#6f42c1',
+    string: '#032f62',
+    constant: '#005cc5',
+    type: '#005cc5',
+    class: '#6f42c1',
+    number: '#005cc5',
+    comment: '#6a737d',
+    heading: '#005cc5',
+    invalid: '#cb2431',
+    regexp: '#032f62',
+};
 const githubLightTheme = EditorView.theme({
     '&': {
-        color: '#444d56',
-        backgroundColor: '#fff',
-        '& ::selection': { backgroundColor: '#0366d625' },
-        caretColor: '#044289',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#044289' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#0366d625' },
-    '.cm-panels': { backgroundColor: '#fafbfc', color: '#444d56' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#fafbfc',
-        outline: `1px solid #e1e4e8`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#0366d625'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#0366d625' },
-    '.cm-selectionMatch': { backgroundColor: '#0366d625' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '#cb2431',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#fff',
-        color: '#444d56',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#444d56'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #e1e4e8',
-        backgroundColor: '#fafbfc'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#0366d625',
-            color: '#444d56'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: false });
+}, { dark: config.dark });
 const githubLightHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#d73a49' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#24292e' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#6f42c1' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#032f62' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#6f42c1' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#005cc5' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#24292e' },
-    { tag: [tags.className], color: '#6f42c1' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#005cc5' },
-    { tag: [tags.typeName], color: '#005cc5', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#d73a49' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#032f62' },
-    { tag: [tags.meta, tags.comment], color: '#6a737d' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#005cc5' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#24292e' },
-    { tag: tags.invalid, color: '#cb2431' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const githubLight = [
 
-export { githubLight, githubLightHighlightStyle, githubLightTheme };
+export { config, githubLight, githubLightHighlightStyle, githubLightTheme };

dist/theme/material-dark.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const materialDarkTheme: Extension;
@@ -4,0 +28,0 @@ export declare const materialDarkHighlightStyle: HighlightStyle;

dist/theme/material-dark.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'materialDark',
+    dark: true,
+    background: '#263238',
+    foreground: '#EEFFFF',
+    selection: '#80CBC420',
+    cursor: '#FFCC00',
+    dropdownBackground: '#263238',
+    dropdownBorder: '#FFFFFF10',
+    keyword: '#89DDFF',
+    storage: '#89DDFF',
+    variable: '#EEFFFF',
+    parameter: '#EEFFFF',
+    function: '#82AAFF',
+    string: '#C3E88D',
+    constant: '#89DDFF',
+    type: '#FFCB6B',
+    class: '#FFCB6B',
+    number: '#F78C6C',
+    comment: '#546E7A',
+    heading: '#89DDFF',
+    invalid: '#f0717870',
+    regexp: '#C3E88D',
+};
 const materialDarkTheme = EditorView.theme({
     '&': {
-        color: '#EEFFFF',
-        backgroundColor: '#263238',
-        '& ::selection': { backgroundColor: '#80CBC420' },
-        caretColor: '#FFCC00',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#FFCC00' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#80CBC420' },
-    '.cm-panels': { backgroundColor: '#263238', color: '#EEFFFF' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#263238',
-        outline: `1px solid #FFFFFF10`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#80CBC420'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#80CBC420' },
-    '.cm-selectionMatch': { backgroundColor: '#80CBC420' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '#f0717870',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#263238',
-        color: '#EEFFFF',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#EEFFFF'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #FFFFFF10',
-        backgroundColor: '#263238'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#80CBC420',
-            color: '#EEFFFF'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: true });
+}, { dark: config.dark });
 const materialDarkHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#89DDFF' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#EEFFFF' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#82AAFF' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#C3E88D' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#82AAFF' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#89DDFF' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#EEFFFF' },
-    { tag: [tags.className], color: '#FFCB6B' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#F78C6C' },
-    { tag: [tags.typeName], color: '#FFCB6B', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#89DDFF' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#C3E88D' },
-    { tag: [tags.meta, tags.comment], color: '#546E7A' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#89DDFF' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#EEFFFF' },
-    { tag: tags.invalid, color: '#f0717870' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const materialDark = [
 
-export { materialDark, materialDarkHighlightStyle, materialDarkTheme };
+export { config, materialDark, materialDarkHighlightStyle, materialDarkTheme };

dist/theme/material-light.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const materialLightTheme: Extension;
@@ -4,0 +28,0 @@ export declare const materialLightHighlightStyle: HighlightStyle;

dist/theme/material-light.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'materialLight',
+    dark: false,
+    background: '#FAFAFA',
+    foreground: '#90A4AE',
+    selection: '#80CBC440',
+    cursor: '#272727',
+    dropdownBackground: '#FAFAFA',
+    dropdownBorder: '#00000010',
+    keyword: '#39ADB5',
+    storage: '#39ADB5',
+    variable: '#90A4AE',
+    parameter: '#90A4AE',
+    function: '#6182B8',
+    string: '#91B859',
+    constant: '#39ADB5',
+    type: '#E2931D',
+    class: '#E2931D',
+    number: '#F76D47',
+    comment: '#90A4AE',
+    heading: '#39ADB5',
+    invalid: '#E5393570',
+    regexp: '#91B859',
+};
 const materialLightTheme = EditorView.theme({
     '&': {
-        color: '#90A4AE',
-        backgroundColor: '#FAFAFA',
-        '& ::selection': { backgroundColor: '#80CBC440' },
-        caretColor: '#272727',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#272727' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#80CBC440' },
-    '.cm-panels': { backgroundColor: '#FAFAFA', color: '#90A4AE' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#FAFAFA',
-        outline: `1px solid #00000010`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#80CBC440'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#80CBC440' },
-    '.cm-selectionMatch': { backgroundColor: '#80CBC440' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '#E5393570',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#FAFAFA',
-        color: '#90A4AE',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#90A4AE'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #00000010',
-        backgroundColor: '#FAFAFA'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#80CBC440',
-            color: '#90A4AE'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: false });
+}, { dark: config.dark });
 const materialLightHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#39ADB5' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#90A4AE' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#6182B8' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#91B859' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#6182B8' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#39ADB5' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#90A4AE' },
-    { tag: [tags.className], color: '#E2931D' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#F76D47' },
-    { tag: [tags.typeName], color: '#E2931D', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#39ADB5' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#91B859' },
-    { tag: [tags.meta, tags.comment], color: '#90A4AE' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#39ADB5' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#90A4AE' },
-    { tag: tags.invalid, color: '#E5393570' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const materialLight = [
 
-export { materialLight, materialLightHighlightStyle, materialLightTheme };
+export { config, materialLight, materialLightHighlightStyle, materialLightTheme };

dist/theme/solarized-dark.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const solarizedDarkTheme: Extension;
@@ -4,0 +28,0 @@ export declare const solarizedDarkHighlightStyle: HighlightStyle;

dist/theme/solarized-dark.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'solarizedDark',
+    dark: true,
+    background: '#002b36',
+    foreground: '#93a1a1',
+    selection: '#073642',
+    cursor: '#839496',
+    dropdownBackground: '#00212b',
+    dropdownBorder: '#2aa19899',
+    keyword: '#859900',
+    storage: '#93A1A1',
+    variable: '#839496',
+    parameter: '',
+    function: '#268BD2',
+    string: '#2AA198',
+    constant: '#CB4B16',
+    type: '#859900',
+    class: '#CB4B16',
+    number: '#D33682',
+    comment: '#657B83',
+    heading: '#268BD2',
+    invalid: '',
+    regexp: '#D30102',
+};
 const solarizedDarkTheme = EditorView.theme({
     '&': {
-        color: '#93a1a1',
-        backgroundColor: '#002b36',
-        '& ::selection': { backgroundColor: '#073642' },
-        caretColor: '#839496',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#839496' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#073642' },
-    '.cm-panels': { backgroundColor: '#00212b', color: '#93a1a1' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#00212b',
-        outline: `1px solid #2aa19899`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#073642'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#073642' },
-    '.cm-selectionMatch': { backgroundColor: '#073642' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#002b36',
-        color: '#93a1a1',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#93a1a1'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #2aa19899',
-        backgroundColor: '#00212b'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#073642',
-            color: '#93a1a1'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: true });
+}, { dark: config.dark });
 const solarizedDarkHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#859900' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#839496' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#268BD2' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#2AA198' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#268BD2' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#CB4B16' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#839496' },
-    { tag: [tags.className], color: '#CB4B16' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#D33682' },
-    { tag: [tags.typeName], color: '#859900', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#859900' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#D30102' },
-    { tag: [tags.meta, tags.comment], color: '#657B83' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#268BD2' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#839496' },
-    { tag: tags.invalid, color: '' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const solarizedDark = [
 
-export { solarizedDark, solarizedDarkHighlightStyle, solarizedDarkTheme };
+export { config, solarizedDark, solarizedDarkHighlightStyle, solarizedDarkTheme };

dist/theme/solarized-light.d.ts

 import { Extension } from '@codemirror/state';
 import { HighlightStyle } from '@codemirror/highlight';
+export declare const config: {
+    name: string;
+    dark: boolean;
+    background: string;
+    foreground: string;
+    selection: string;
+    cursor: string;
+    dropdownBackground: string;
+    dropdownBorder: string;
+    keyword: string;
+    storage: string;
+    variable: string;
+    parameter: string;
+    function: string;
+    string: string;
+    constant: string;
+    type: string;
+    class: string;
+    number: string;
+    comment: string;
+    heading: string;
+    invalid: string;
+    regexp: string;
+};
 export declare const solarizedLightTheme: Extension;
@@ -4,0 +28,0 @@ export declare const solarizedLightHighlightStyle: HighlightStyle;

dist/theme/solarized-light.js

 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, tags } from '@codemirror/highlight';
 
+const config = {
+    name: 'solarizedLight',
+    dark: false,
+    background: '#fdf6e3',
+    foreground: '#586e75',
+    selection: '#eee8d5',
+    cursor: '#657b83',
+    dropdownBackground: '#eee8d5',
+    dropdownBorder: '#d3af86',
+    keyword: '#859900',
+    storage: '#073642',
+    variable: '#657b83',
+    parameter: '',
+    function: '#268BD2',
+    string: '#2AA198',
+    constant: '#CB4B16',
+    type: '#859900',
+    class: '#268BD2',
+    number: '#D33682',
+    comment: '#93A1A1',
+    heading: '#268BD2',
+    invalid: '',
+    regexp: '#D30102',
+};
 const solarizedLightTheme = EditorView.theme({
     '&': {
-        color: '#586e75',
-        backgroundColor: '#fdf6e3',
-        '& ::selection': { backgroundColor: '#eee8d5' },
-        caretColor: '#657b83',
+        color: config.foreground,
+        backgroundColor: config.background,
+        '& ::selection': { backgroundColor: config.selection },
+        caretColor: config.cursor,
     },
-    '&.cm-focused .cm-cursor': { borderLeftColor: '#657b83' },
-    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: '#eee8d5' },
-    '.cm-panels': { backgroundColor: '#eee8d5', color: '#586e75' },
+    '&.cm-focused .cm-cursor': { borderLeftColor: config.cursor },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: config.selection },
+    '.cm-panels': { backgroundColor: config.dropdownBackground, color: config.foreground },
     '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
     '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
     '.cm-searchMatch': {
-        backgroundColor: '#eee8d5',
-        outline: `1px solid #d3af86`
+        backgroundColor: config.dropdownBackground,
+        outline: `1px solid ${config.dropdownBorder}`
     },
     '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#eee8d5'
+        backgroundColor: config.selection
     },
-    '.cm-activeLine': { backgroundColor: '#eee8d5' },
-    '.cm-selectionMatch': { backgroundColor: '#eee8d5' },
+    '.cm-activeLine': { backgroundColor: config.selection },
+    '.cm-selectionMatch': { backgroundColor: config.selection },
     '.cm-matchingBracket, .cm-nonmatchingBracket': {
-        backgroundColor: '',
+        backgroundColor: config.invalid,
         outline: 'none'
     },
     '.cm-gutters': {
-        backgroundColor: '#fdf6e3',
-        color: '#586e75',
+        backgroundColor: config.background,
+        color: config.foreground,
         border: 'none'
@@ -38,42 +62,42 @@ },
         border: 'none',
-        color: '#586e75'
+        color: config.foreground
     },
     '.cm-tooltip': {
-        border: '1px solid #d3af86',
-        backgroundColor: '#eee8d5'
+        border: `1px solid ${config.dropdownBorder}`,
+        backgroundColor: config.dropdownBackground
     },
     '.cm-tooltip-autocomplete': {
         '& > ul > li[aria-selected]': {
-            backgroundColor: '#eee8d5',
-            color: '#586e75'
+            backgroundColor: config.selection,
+            color: config.foreground
         }
     }
-}, { dark: false });
+}, { dark: config.dark });
 const solarizedLightHighlightStyle = HighlightStyle.define([
     // const, let, function, if
-    { tag: tags.keyword, color: '#859900' },
+    { tag: tags.keyword, color: config.keyword },
     // document
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: '#657b83' },
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: config.variable },
     // getElementById
-    { tag: [tags.propertyName], color: '#268BD2' },
+    { tag: [tags.propertyName], color: config.function },
     // "string"
-    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: '#2AA198' },
+    { tag: [tags.processingInstruction, tags.string, tags.inserted, tags.special(tags.string)], color: config.string },
     // render
-    { tag: [tags.function(tags.variableName), tags.labelName], color: '#268BD2' },
+    { tag: [tags.function(tags.variableName), tags.labelName], color: config.function },
     // ???
-    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: '#CB4B16' },
+    { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: config.constant },
     // btn, count, fn render()
-    { tag: [tags.definition(tags.name), tags.separator], color: '#657b83' },
-    { tag: [tags.className], color: '#268BD2' },
-    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: '#D33682' },
-    { tag: [tags.typeName], color: '#859900', fontStyle: '' },
-    { tag: [tags.operator, tags.operatorKeyword], color: '#859900' },
-    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: '#D30102' },
-    { tag: [tags.meta, tags.comment], color: '#93A1A1' },
+    { tag: [tags.definition(tags.name), tags.separator], color: config.variable },
+    { tag: [tags.className], color: config.class },
+    { tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: config.number },
+    { tag: [tags.typeName], color: config.type, fontStyle: config.type },
+    { tag: [tags.operator, tags.operatorKeyword], color: config.keyword },
+    { tag: [tags.url, tags.escape, tags.regexp, tags.link], color: config.regexp },
+    { tag: [tags.meta, tags.comment], color: config.comment },
     { tag: tags.strong, fontWeight: 'bold' },
     { tag: tags.emphasis, fontStyle: 'italic' },
     { tag: tags.link, textDecoration: 'underline' },
-    { tag: tags.heading, fontWeight: 'bold', color: '#268BD2' },
-    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: '#657b83' },
-    { tag: tags.invalid, color: '' },
+    { tag: tags.heading, fontWeight: 'bold', color: config.heading },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: config.variable },
+    { tag: tags.invalid, color: config.invalid },
 ]);
@@ -85,2 +109,2 @@ const solarizedLight = [
 
-export { solarizedLight, solarizedLightHighlightStyle, solarizedLightTheme };
+export { config, solarizedLight, solarizedLightHighlightStyle, solarizedLightTheme };

package.json

 {
   "name": "@ddietr/codemirror-themes",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
@@ -22,11 +22,11 @@ "description": "",
     "@rollup/plugin-typescript": "^8.2.1",
-    "rollup": "^2.44.0",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.3"
+    "rollup": "^2.47.0",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
   },
   "dependencies": {
     "@codemirror/highlight": "^0.18.3",
-    "@codemirror/state": "^0.18.3",
-    "@codemirror/view": "^0.18.3"
+    "@codemirror/state": "^0.18.7",
+    "@codemirror/view": "^0.18.11"
   }
 }

README.md

@@ -1,2 +0,2 @@
-WIP
+# Codemirror 6 Themes
 
@@ -6,3 +6,3 @@ ## Install
 ```bash
-npm i dennis84/codemirror-themes#master --save
+npm i @ddietr/codemirror-themes
 ```
@@ -21,1 +21,9 @@
 ```
+
+## Build
+
+```bash
+go build
+./m
+npm i
+```

theme/dracula.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'dracula',
+  dark: true,
+  background: '#282A36',
+  foreground: '#F8F8F2',
+  selection: '#44475A',
+  cursor: '#F8F8F2',
+  dropdownBackground: '#343746',
+  dropdownBorder: '#191A21',
+  keyword: '#FF79C6',
+  storage: '#FF79C6',
+  variable: '#BD93F9',
+  parameter: '#FFB86C',
+  function: '#50FA7B',
+  string: '#F1FA8C',
+  constant: '#BD93F9',
+  type: '#8BE9FD',
+  class: '#8BE9FD',
+  number: '#BD93F9',
+  comment: '#6272A4',
+  heading: '#BD93F9',
+  invalid: '#FF5555',
+  regexp: '#F1FA8C',
+}
+
 export const draculaTheme = EditorView.theme({
   '&': {
-    color: '#F8F8F2',
-    backgroundColor: '#282A36',
-    '& ::selection': {backgroundColor: '#44475A'},
-    caretColor: '#F8F8F2',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#F8F8F2'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#44475A'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#343746', color: '#F8F8F2'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#343746',
-    outline: `1px solid #191A21`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#44475A'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#44475A'},
-  '.cm-selectionMatch': {backgroundColor: '#44475A'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '#FF5555',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#282A36',
-    color: '#F8F8F2',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#F8F8F2'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #191A21',
-    backgroundColor: '#343746'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#44475A',
-      color: '#F8F8F2'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: true})
+}, {dark: config.dark})
 
 export const draculaHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#FF79C6'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#BD93F9'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#50FA7B'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#F1FA8C'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#50FA7B'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#BD93F9'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#BD93F9'},
-  {tag: [t.className], color: '#8BE9FD'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#BD93F9'},
-  {tag: [t.typeName], color: '#8BE9FD', fontStyle: 'italic'},
-  {tag: [t.operator, t.operatorKeyword], color: '#FF79C6'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#F1FA8C'},
-  {tag: [t.meta, t.comment], color: '#6272A4'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {tag: t.strong, fontWeight: 'bold'},
   {tag: t.emphasis, fontStyle: 'italic'},
   {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: '#BD93F9'},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#BD93F9'},
-  {tag: t.invalid, color: '#FF5555'},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/github-dark.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'githubDark',
+  dark: true,
+  background: '#24292e',
+  foreground: '#d1d5da',
+  selection: '#3392FF44',
+  cursor: '#c8e1ff',
+  dropdownBackground: '#2f363d',
+  dropdownBorder: '#1b1f23',
+  keyword: '#f97583',
+  storage: '#f97583',
+  variable: '#e1e4e8',
+  parameter: '#ffab70',
+  function: '#b392f0',
+  string: '#9ecbff',
+  constant: '#79b8ff',
+  type: '#79b8ff',
+  class: '#b392f0',
+  number: '#79b8ff',
+  comment: '#6a737d',
+  heading: '#79b8ff',
+  invalid: '#f97583',
+  regexp: '#dbedff',
+}
+
 export const githubDarkTheme = EditorView.theme({
   '&': {
-    color: '#d1d5da',
-    backgroundColor: '#24292e',
-    '& ::selection': {backgroundColor: '#3392FF44'},
-    caretColor: '#c8e1ff',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#c8e1ff'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#3392FF44'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#2f363d', color: '#d1d5da'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#2f363d',
-    outline: `1px solid #1b1f23`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#3392FF44'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#3392FF44'},
-  '.cm-selectionMatch': {backgroundColor: '#3392FF44'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '#f97583',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#24292e',
-    color: '#d1d5da',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#d1d5da'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #1b1f23',
-    backgroundColor: '#2f363d'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#3392FF44',
-      color: '#d1d5da'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: true})
+}, {dark: config.dark})
 
 export const githubDarkHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#f97583'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#e1e4e8'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#b392f0'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#9ecbff'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#b392f0'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#79b8ff'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#e1e4e8'},
-  {tag: [t.className], color: '#b392f0'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#79b8ff'},
-  {tag: [t.typeName], color: '#79b8ff', fontStyle: ''},
-  {tag: [t.operator, t.operatorKeyword], color: '#f97583'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#dbedff'},
-  {tag: [t.meta, t.comment], color: '#6a737d'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {tag: t.strong, fontWeight: 'bold'},
   {tag: t.emphasis, fontStyle: 'italic'},
   {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: '#79b8ff'},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e1e4e8'},
-  {tag: t.invalid, color: '#f97583'},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/github-light.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'githubLight',
+  dark: false,
+  background: '#fff',
+  foreground: '#444d56',
+  selection: '#0366d625',
+  cursor: '#044289',
+  dropdownBackground: '#fafbfc',
+  dropdownBorder: '#e1e4e8',
+  keyword: '#d73a49',
+  storage: '#d73a49',
+  variable: '#24292e',
+  parameter: '#e36209',
+  function: '#6f42c1',
+  string: '#032f62',
+  constant: '#005cc5',
+  type: '#005cc5',
+  class: '#6f42c1',
+  number: '#005cc5',
+  comment: '#6a737d',
+  heading: '#005cc5',
+  invalid: '#cb2431',
+  regexp: '#032f62',
+}
+
 export const githubLightTheme = EditorView.theme({
   '&': {
-    color: '#444d56',
-    backgroundColor: '#fff',
-    '& ::selection': {backgroundColor: '#0366d625'},
-    caretColor: '#044289',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#044289'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#0366d625'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#fafbfc', color: '#444d56'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#fafbfc',
-    outline: `1px solid #e1e4e8`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#0366d625'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#0366d625'},
-  '.cm-selectionMatch': {backgroundColor: '#0366d625'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '#cb2431',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#fff',
-    color: '#444d56',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#444d56'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #e1e4e8',
-    backgroundColor: '#fafbfc'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#0366d625',
-      color: '#444d56'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: false})
+}, {dark: config.dark})
 
 export const githubLightHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#d73a49'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#24292e'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#6f42c1'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#032f62'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#6f42c1'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#005cc5'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#24292e'},
-  {tag: [t.className], color: '#6f42c1'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#005cc5'},
-  {tag: [t.typeName], color: '#005cc5', fontStyle: ''},
-  {tag: [t.operator, t.operatorKeyword], color: '#d73a49'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62'},
-  {tag: [t.meta, t.comment], color: '#6a737d'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {tag: t.strong, fontWeight: 'bold'},
   {tag: t.emphasis, fontStyle: 'italic'},
   {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: '#005cc5'},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#24292e'},
-  {tag: t.invalid, color: '#cb2431'},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/material-dark.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'materialDark',
+  dark: true,
+  background: '#263238',
+  foreground: '#EEFFFF',
+  selection: '#80CBC420',
+  cursor: '#FFCC00',
+  dropdownBackground: '#263238',
+  dropdownBorder: '#FFFFFF10',
+  keyword: '#89DDFF',
+  storage: '#89DDFF',
+  variable: '#EEFFFF',
+  parameter: '#EEFFFF',
+  function: '#82AAFF',
+  string: '#C3E88D',
+  constant: '#89DDFF',
+  type: '#FFCB6B',
+  class: '#FFCB6B',
+  number: '#F78C6C',
+  comment: '#546E7A',
+  heading: '#89DDFF',
+  invalid: '#f0717870',
+  regexp: '#C3E88D',
+}
+
 export const materialDarkTheme = EditorView.theme({
   '&': {
-    color: '#EEFFFF',
-    backgroundColor: '#263238',
-    '& ::selection': {backgroundColor: '#80CBC420'},
-    caretColor: '#FFCC00',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#FFCC00'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#80CBC420'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#263238', color: '#EEFFFF'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#263238',
-    outline: `1px solid #FFFFFF10`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#80CBC420'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#80CBC420'},
-  '.cm-selectionMatch': {backgroundColor: '#80CBC420'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '#f0717870',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#263238',
-    color: '#EEFFFF',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#EEFFFF'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #FFFFFF10',
-    backgroundColor: '#263238'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#80CBC420',
-      color: '#EEFFFF'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: true})
+}, {dark: config.dark})
 
 export const materialDarkHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#89DDFF'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#EEFFFF'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#82AAFF'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#C3E88D'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#82AAFF'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#89DDFF'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#EEFFFF'},
-  {tag: [t.className], color: '#FFCB6B'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F78C6C'},
-  {tag: [t.typeName], color: '#FFCB6B', fontStyle: ''},
-  {tag: [t.operator, t.operatorKeyword], color: '#89DDFF'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#C3E88D'},
-  {tag: [t.meta, t.comment], color: '#546E7A'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {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: '#EEFFFF'},
-  {tag: t.invalid, color: '#f0717870'},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/material-light.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'materialLight',
+  dark: false,
+  background: '#FAFAFA',
+  foreground: '#90A4AE',
+  selection: '#80CBC440',
+  cursor: '#272727',
+  dropdownBackground: '#FAFAFA',
+  dropdownBorder: '#00000010',
+  keyword: '#39ADB5',
+  storage: '#39ADB5',
+  variable: '#90A4AE',
+  parameter: '#90A4AE',
+  function: '#6182B8',
+  string: '#91B859',
+  constant: '#39ADB5',
+  type: '#E2931D',
+  class: '#E2931D',
+  number: '#F76D47',
+  comment: '#90A4AE',
+  heading: '#39ADB5',
+  invalid: '#E5393570',
+  regexp: '#91B859',
+}
+
 export const materialLightTheme = EditorView.theme({
   '&': {
-    color: '#90A4AE',
-    backgroundColor: '#FAFAFA',
-    '& ::selection': {backgroundColor: '#80CBC440'},
-    caretColor: '#272727',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#272727'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#80CBC440'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#FAFAFA', color: '#90A4AE'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#FAFAFA',
-    outline: `1px solid #00000010`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#80CBC440'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#80CBC440'},
-  '.cm-selectionMatch': {backgroundColor: '#80CBC440'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '#E5393570',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#FAFAFA',
-    color: '#90A4AE',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#90A4AE'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #00000010',
-    backgroundColor: '#FAFAFA'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#80CBC440',
-      color: '#90A4AE'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: false})
+}, {dark: config.dark})
 
 export const materialLightHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#39ADB5'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#6182B8'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#6182B8'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {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: ''},
-  {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.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {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.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/solarized-dark.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'solarizedDark',
+  dark: true,
+  background: '#002b36',
+  foreground: '#93a1a1',
+  selection: '#073642',
+  cursor: '#839496',
+  dropdownBackground: '#00212b',
+  dropdownBorder: '#2aa19899',
+  keyword: '#859900',
+  storage: '#93A1A1',
+  variable: '#839496',
+  parameter: '',
+  function: '#268BD2',
+  string: '#2AA198',
+  constant: '#CB4B16',
+  type: '#859900',
+  class: '#CB4B16',
+  number: '#D33682',
+  comment: '#657B83',
+  heading: '#268BD2',
+  invalid: '',
+  regexp: '#D30102',
+}
+
 export const solarizedDarkTheme = EditorView.theme({
   '&': {
-    color: '#93a1a1',
-    backgroundColor: '#002b36',
-    '& ::selection': {backgroundColor: '#073642'},
-    caretColor: '#839496',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#839496'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#073642'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#00212b', color: '#93a1a1'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#00212b',
-    outline: `1px solid #2aa19899`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#073642'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#073642'},
-  '.cm-selectionMatch': {backgroundColor: '#073642'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#002b36',
-    color: '#93a1a1',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#93a1a1'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #2aa19899',
-    backgroundColor: '#00212b'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#073642',
-      color: '#93a1a1'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: true})
+}, {dark: config.dark})
 
 export const solarizedDarkHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#859900'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#839496'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#268BD2'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#2AA198'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#268BD2'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#CB4B16'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#839496'},
-  {tag: [t.className], color: '#CB4B16'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#D33682'},
-  {tag: [t.typeName], color: '#859900', fontStyle: ''},
-  {tag: [t.operator, t.operatorKeyword], color: '#859900'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#D30102'},
-  {tag: [t.meta, t.comment], color: '#657B83'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {tag: t.strong, fontWeight: 'bold'},
   {tag: t.emphasis, fontStyle: 'italic'},
   {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: '#268BD2'},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#839496'},
-  {tag: t.invalid, color: ''},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

theme/solarized-light.ts

@@ -5,14 +5,39 @@ import {EditorView} from '@codemirror/view'
 
+export const config = {
+  name: 'solarizedLight',
+  dark: false,
+  background: '#fdf6e3',
+  foreground: '#586e75',
+  selection: '#eee8d5',
+  cursor: '#657b83',
+  dropdownBackground: '#eee8d5',
+  dropdownBorder: '#d3af86',
+  keyword: '#859900',
+  storage: '#073642',
+  variable: '#657b83',
+  parameter: '',
+  function: '#268BD2',
+  string: '#2AA198',
+  constant: '#CB4B16',
+  type: '#859900',
+  class: '#268BD2',
+  number: '#D33682',
+  comment: '#93A1A1',
+  heading: '#268BD2',
+  invalid: '',
+  regexp: '#D30102',
+}
+
 export const solarizedLightTheme = EditorView.theme({
   '&': {
-    color: '#586e75',
-    backgroundColor: '#fdf6e3',
-    '& ::selection': {backgroundColor: '#eee8d5'},
-    caretColor: '#657b83',
+    color: config.foreground,
+    backgroundColor: config.background,
+    '& ::selection': {backgroundColor: config.selection},
+    caretColor: config.cursor,
   },
 
-  '&.cm-focused .cm-cursor': {borderLeftColor: '#657b83'},
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: '#eee8d5'},
+  '&.cm-focused .cm-cursor': {borderLeftColor: config.cursor},
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': {backgroundColor: config.selection},
 
-  '.cm-panels': {backgroundColor: '#eee8d5', color: '#586e75'},
+  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
   '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -22,19 +47,19 @@ '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
   '.cm-searchMatch': {
-    backgroundColor: '#eee8d5',
-    outline: `1px solid #d3af86`
+    backgroundColor: config.dropdownBackground,
+    outline: `1px solid ${config.dropdownBorder}`
   },
   '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#eee8d5'
+    backgroundColor: config.selection
   },
 
-  '.cm-activeLine': {backgroundColor: '#eee8d5'},
-  '.cm-selectionMatch': {backgroundColor: '#eee8d5'},
+  '.cm-activeLine': {backgroundColor: config.selection},
+  '.cm-selectionMatch': {backgroundColor: config.selection},
 
   '.cm-matchingBracket, .cm-nonmatchingBracket': {
-    backgroundColor: '',
+    backgroundColor: config.invalid,
     outline: 'none'
   },
   '.cm-gutters': {
-    backgroundColor: '#fdf6e3',
-    color: '#586e75',
+    backgroundColor: config.background,
+    color: config.foreground,
     border: 'none'
@@ -47,44 +72,44 @@ },
     border: 'none',
-    color: '#586e75'
+    color: config.foreground
   },
 
   '.cm-tooltip': {
-    border: '1px solid #d3af86',
-    backgroundColor: '#eee8d5'
+    border: `1px solid ${config.dropdownBorder}`,
+    backgroundColor: config.dropdownBackground
   },
   '.cm-tooltip-autocomplete': {
     '& > ul > li[aria-selected]': {
-      backgroundColor: '#eee8d5',
-      color: '#586e75'
+      backgroundColor: config.selection,
+      color: config.foreground
     }
   }
-}, {dark: false})
+}, {dark: config.dark})
 
 export const solarizedLightHighlightStyle = HighlightStyle.define([
   // const, let, function, if
-  {tag: t.keyword, color: '#859900'},
+  {tag: t.keyword, color: config.keyword},
   // document
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: '#657b83'},
+  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
   // getElementById
-  {tag: [t.propertyName], color: '#268BD2'},
+  {tag: [t.propertyName], color: config.function},
   // "string"
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#2AA198'},
+  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
   // render
-  {tag: [t.function(t.variableName), t.labelName], color: '#268BD2'},
+  {tag: [t.function(t.variableName), t.labelName], color: config.function},
   // ???
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#CB4B16'},
+  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
   // btn, count, fn render()
-  {tag: [t.definition(t.name), t.separator], color: '#657b83'},
-  {tag: [t.className], color: '#268BD2'},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#D33682'},
-  {tag: [t.typeName], color: '#859900', fontStyle: ''},
-  {tag: [t.operator, t.operatorKeyword], color: '#859900'},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: '#D30102'},
-  {tag: [t.meta, t.comment], color: '#93A1A1'},
+  {tag: [t.definition(t.name), t.separator], color: config.variable},
+  {tag: [t.className], color: config.class},
+  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
+  {tag: [t.typeName], color: config.type, fontStyle: config.type},
+  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
+  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
+  {tag: [t.meta, t.comment], color: config.comment},
   {tag: t.strong, fontWeight: 'bold'},
   {tag: t.emphasis, fontStyle: 'italic'},
   {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: '#268BD2'},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: '#657b83'},
-  {tag: t.invalid, color: ''},
+  {tag: t.heading, fontWeight: 'bold', color: config.heading},
+  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
+  {tag: t.invalid, color: config.invalid},
 ])
@@ -91,0 +116,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8061967

increased by15478.38%

Number of package files

33

increased by6.45%

Lines of code

1687

increased by42.6%

Number of lines in readme file

28

increased by40%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@codemirror/state@^0.18.7

• Updated@codemirror/view@^0.18.11