feat(sublime): add sublimeInit method to xcode theme.

uiwjs · Dec 6, 2022 · a664aae · a664aae
1 parent 70d3db5
commit a664aae
Show file tree

Hide file tree

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

diff --git a/themes/sublime/src/index.ts b/themes/sublime/src/index.ts
@@ -1,28 +1,35 @@
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const sublime = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#303841',
-    foreground: '#FFFFFF',
-    caret: '#FBAC52',
-    selection: '#4C5964',
-    selectionMatch: '#3A546E',
-    gutterBackground: '#303841',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  styles: [
-    { tag: [t.meta, t.comment], color: '#A2A9B5' },
-    { tag: [t.attributeName, t.keyword], color: '#B78FBA' },
-    { tag: t.function(t.variableName), color: '#5AB0B0' },
-    { tag: [t.string, t.regexp, t.attributeValue], color: '#99C592' },
-    { tag: t.operator, color: '#f47954' },
-    // { tag: t.moduleKeyword, color: 'red' },
-    { tag: [t.propertyName, t.typeName], color: '#629ccd' },
-    { tag: [t.tagName, t.modifier], color: '#E35F63' },
-    { tag: [t.number, t.definition(t.tagName), t.className, t.definition(t.variableName)], color: '#fbac52' },
-    { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#E35F63' },
-  ],
-});
+export function sublimeInit(options?: CreateThemeOptions) {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#303841',
+      foreground: '#FFFFFF',
+      caret: '#FBAC52',
+      selection: '#4C5964',
+      selectionMatch: '#3A546E',
+      gutterBackground: '#303841',
+      gutterForeground: '#FFFFFF70',
+      lineHighlight: '#00000059',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.meta, t.comment], color: '#A2A9B5' },
+      { tag: [t.attributeName, t.keyword], color: '#B78FBA' },
+      { tag: t.function(t.variableName), color: '#5AB0B0' },
+      { tag: [t.string, t.regexp, t.attributeValue], color: '#99C592' },
+      { tag: t.operator, color: '#f47954' },
+      // { tag: t.moduleKeyword, color: 'red' },
+      { tag: [t.propertyName, t.typeName], color: '#629ccd' },
+      { tag: [t.tagName, t.modifier], color: '#E35F63' },
+      { tag: [t.number, t.definition(t.tagName), t.className, t.definition(t.variableName)], color: '#fbac52' },
+      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#E35F63' },
+      ...styles,
+    ],
+  });
+}
+
+export const sublime = sublimeInit();
diff --git a/themes/vscode/README.md b/themes/vscode/README.md
@@ -30,6 +30,14 @@ import { vscodeDark, vscodeDarkInit } from '@uiw/codemirror-theme-vscode';
 />
 ```
 
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare function vscodeDarkInit(options?: CreateThemeOptions): import('@codemirror/state').Extension;
+export declare const vscodeDark: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx