feat(dracula): add draculaInit method to dracula theme.

uiwjs · Dec 7, 2022 · 8c4e397 · 8c4e397
1 parent 4044b17
commit 8c4e397
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git a/themes/dracula/README.md b/themes/dracula/README.md
@@ -16,6 +16,32 @@
 npm install @uiw/codemirror-theme-dracula --save
 ```
 
+```jsx
+import { tags as t } from '@lezer/highlight';
+import { dracula, draculaInit } from '@uiw/codemirror-theme-dracula';
+
+<CodeMirror theme={dracula} />
+<CodeMirror
+  theme={draculaInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    },
+    styles: [
+      { tag: t.comment, color: '#6272a4' },
+    ]
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const draculaInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const dracula: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx

diff --git a/themes/dracula/src/index.ts b/themes/dracula/src/index.ts
@@ -5,28 +5,38 @@
  * Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const dracula = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#282a36',
-    foreground: '#f8f8f2',
-    caret: '#f8f8f0',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  styles: [
-    { tag: t.comment, color: '#6272a4' },
-    { tag: t.string, color: '#f1fa8c' },
-    { tag: t.atom, color: '#bd93f9' },
-    { tag: t.meta, color: '#f8f8f2' },
-    { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' },
-    { tag: [t.function(t.propertyName), t.propertyName], color: '#66d9ef' },
-    { tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName], color: '#50fa7b' },
-    { tag: t.atom, color: '#bd93f9' },
-  ],
-});
+export const draculaInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#282a36',
+      foreground: '#f8f8f2',
+      caret: '#f8f8f0',
+      selection: 'rgba(255, 255, 255, 0.1)',
+      selectionMatch: 'rgba(255, 255, 255, 0.2)',
+      gutterBackground: '#282a36',
+      gutterForeground: '#6D8A88',
+      lineHighlight: 'rgba(255, 255, 255, 0.1)',
+      ...settings,
+    },
+    styles: [
+      { tag: t.comment, color: '#6272a4' },
+      { tag: t.string, color: '#f1fa8c' },
+      { tag: t.atom, color: '#bd93f9' },
+      { tag: t.meta, color: '#f8f8f2' },
+      { tag: [t.keyword, t.operator, t.tagName], color: '#ff79c6' },
+      { tag: [t.function(t.propertyName), t.propertyName], color: '#66d9ef' },
+      {
+        tag: [t.definition(t.variableName), t.function(t.variableName), t.className, t.attributeName],
+        color: '#50fa7b',
+      },
+      { tag: t.atom, color: '#bd93f9' },
+      ...styles,
+    ],
+  });
+};
+
+export const dracula = draculaInit();