feat(okaidia): add okaidiaInit method to okaidia theme.

uiwjs · Dec 6, 2022 · adf94e5 · adf94e5
1 parent d45e5ee
commit adf94e5
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 47 deletions.
diff --git a/themes/okaidia/README.md b/themes/okaidia/README.md
@@ -16,6 +16,28 @@
 npm install @uiw/codemirror-theme-okaidia --save
 ```
 
+```jsx
+import { okaidia, okaidiaInit } from '@uiw/codemirror-theme-vscode';
+
+<CodeMirror theme={okaidia} />
+<CodeMirror
+  theme={okaidiaInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const okaidiaInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const okaidia: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx

diff --git a/themes/okaidia/src/index.ts b/themes/okaidia/src/index.ts
@@ -1,50 +1,57 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const okaidia = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#272822',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#49483E',
-    selectionMatch: '#49483E',
-    gutterBackground: '#272822',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  styles: [
-    { tag: [t.comment, t.documentMeta], color: '#8292a2' },
-    { tag: [t.number, t.bool, t.null, t.atom], color: '#ae81ff' },
-    { tag: [t.attributeValue, t.className, t.name], color: '#e6db74' },
-    {
-      tag: [t.propertyName, t.attributeName],
-      color: '#a6e22e',
+export const okaidiaInit = (options?: CreateThemeOptions) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#272822',
+      foreground: '#FFFFFF',
+      caret: '#FFFFFF',
+      selection: '#49483E',
+      selectionMatch: '#49483E',
+      gutterBackground: '#272822',
+      gutterForeground: '#FFFFFF70',
+      lineHighlight: '#00000059',
+      ...settings,
     },
-    {
-      tag: [t.variableName],
-      color: '#9effff',
-    },
-    {
-      tag: [t.squareBracket],
-      color: '#bababa',
-    },
-    {
-      tag: [t.string, t.special(t.brace)],
-      color: '#e6db74',
-    },
-    {
-      tag: [t.regexp, t.className, t.typeName, t.definition(t.typeName)],
-      color: '#66d9ef',
-    },
-    {
-      tag: [t.definition(t.variableName), t.definition(t.propertyName), t.function(t.variableName)],
-      color: '#fd971f',
-    },
-    // { tag: t.keyword, color: '#f92672' },
-    {
-      tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket],
-      color: '#f92672',
-    },
-  ],
-});
+    styles: [
+      { tag: [t.comment, t.documentMeta], color: '#8292a2' },
+      { tag: [t.number, t.bool, t.null, t.atom], color: '#ae81ff' },
+      { tag: [t.attributeValue, t.className, t.name], color: '#e6db74' },
+      {
+        tag: [t.propertyName, t.attributeName],
+        color: '#a6e22e',
+      },
+      {
+        tag: [t.variableName],
+        color: '#9effff',
+      },
+      {
+        tag: [t.squareBracket],
+        color: '#bababa',
+      },
+      {
+        tag: [t.string, t.special(t.brace)],
+        color: '#e6db74',
+      },
+      {
+        tag: [t.regexp, t.className, t.typeName, t.definition(t.typeName)],
+        color: '#66d9ef',
+      },
+      {
+        tag: [t.definition(t.variableName), t.definition(t.propertyName), t.function(t.variableName)],
+        color: '#fd971f',
+      },
+      // { tag: t.keyword, color: '#f92672' },
+      {
+        tag: [t.keyword, t.definitionKeyword, t.modifier, t.tagName, t.angleBracket],
+        color: '#f92672',
+      },
+      ...styles,
+    ],
+  });
+};
+
+export const okaidia = okaidiaInit();