feat(abcdef): add abcdefInit method to abcdef theme.

Author: jaywcjlove

themes/abcdef/README.md

@@ -16,6 +16,32 @@
 npm install @uiw/codemirror-theme-abcdef --save
 ```
 
+```jsx
+import { tags as t } from '@lezer/highlight';
+import { abcdef, abcdefInit } from '@uiw/codemirror-theme-abcdef';
+
+<CodeMirror theme={abcdef} />
+<CodeMirror
+  theme={abcdefInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    },
+    styles: [
+      { tag: t.comment, color: '#6272a4' },
+    ]
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const abcdefInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const abcdef: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx

themes/abcdef/src/index.ts

@@ -4,37 +4,44 @@
  * https://codemirror.net/5/theme/abcdef.css
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const abcdef = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#0f0f0f',
-    foreground: '#defdef',
-    caret: '#00FF00',
-    selection: '#515151',
-    selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
-    lineHighlight: '#314151',
-  },
-  styles: [
-    { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
-    { tag: t.atom, color: '#77F' },
-    { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
-    { tag: t.number, color: 'violet' },
-    { tag: t.definition(t.variableName), color: '#fffabc' },
-    { tag: t.variableName, color: '#abcdef' },
-    { tag: t.function(t.variableName), color: '#fffabc' },
-    { tag: t.typeName, color: '#FFDD44' },
-    { tag: t.tagName, color: '#def' },
-    { tag: t.string, color: '#2b4' },
-    { tag: t.meta, color: '#C9F' },
-    // { tag: t.qualifier, color: '#FFF700' },
-    // { tag: t.builtin, color: '#30aabc' },
-    { tag: t.bracket, color: '#8a8a8a' },
-    { tag: t.attributeName, color: '#DDFF00' },
-    { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
-    { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
-  ],
-});
+export const abcdefInit = (options?: CreateThemeOptions) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#0f0f0f',
+      foreground: '#defdef',
+      caret: '#00FF00',
+      selection: '#515151',
+      selectionMatch: '#515151',
+      gutterBackground: '#555',
+      gutterForeground: '#FFFFFF',
+      lineHighlight: '#314151',
+      ...settings,
+    },
+    styles: [
+      { tag: t.keyword, color: 'darkgoldenrod', fontWeight: 'bold' },
+      { tag: t.atom, color: '#77F' },
+      { tag: t.comment, color: '#7a7b7c', fontStyle: 'italic' },
+      { tag: t.number, color: 'violet' },
+      { tag: t.definition(t.variableName), color: '#fffabc' },
+      { tag: t.variableName, color: '#abcdef' },
+      { tag: t.function(t.variableName), color: '#fffabc' },
+      { tag: t.typeName, color: '#FFDD44' },
+      { tag: t.tagName, color: '#def' },
+      { tag: t.string, color: '#2b4' },
+      { tag: t.meta, color: '#C9F' },
+      // { tag: t.qualifier, color: '#FFF700' },
+      // { tag: t.builtin, color: '#30aabc' },
+      { tag: t.bracket, color: '#8a8a8a' },
+      { tag: t.attributeName, color: '#DDFF00' },
+      { tag: t.heading, color: 'aquamarine', fontWeight: 'bold' },
+      { tag: t.link, color: 'blueviolet', fontWeight: 'bold' },
+      ...styles,
+    ],
+  });
+};
+
+export const abcdef = abcdefInit();