feat(xcode): add xcodeLightInit/xcodeDarkInit method to xcode theme.

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

Hide file tree

Showing 3 changed files with 87 additions and 47 deletions.
diff --git a/themes/vscode/README.md b/themes/vscode/README.md
@@ -20,10 +20,12 @@ npm install @uiw/codemirror-theme-vscode --save
 import { vscodeDark, vscodeDarkInit } from '@uiw/codemirror-theme-vscode';
 
 <CodeMirror theme={vscodeDark} />
-
 <CodeMirror
   theme={vscodeDarkInit({
-    fontFamily: 'monospace',
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
   })}
 />
 ```

diff --git a/themes/xcode/README.md b/themes/xcode/README.md
@@ -20,6 +20,30 @@
 npm install @uiw/codemirror-theme-xcode --save
 ```
 
+```jsx
+import { xcodeLight, xcodeLightInit, xcodeDark, xcodeDarkInit } from '@uiw/codemirror-theme-vscode';
+
+<CodeMirror theme={xcodeLight} />
+<CodeMirror
+  theme={xcodeLightInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```ts
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare function xcodeLightInit(options?: CreateThemeOptions): import('@codemirror/state').Extension;
+export declare const xcodeLight: import('@codemirror/state').Extension;
+export declare const xcodeDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const xcodeDark: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx

diff --git a/themes/xcode/src/index.ts b/themes/xcode/src/index.ts
@@ -2,50 +2,64 @@
  * @name github
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const xcodeLight = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#fff',
-    foreground: '#3D3D3D',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#AFAFAF',
-    lineHighlight: '#EDF4FF',
-  },
-  styles: [
-    { tag: [t.comment, t.quote], color: '#707F8D' },
-    { tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
-    { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' },
-    { tag: [t.string, t.meta], color: '#D23423' },
-    { tag: [t.name], color: '#032f62' },
-    { tag: [t.typeName], color: '#522BB2' },
-    { tag: [t.variableName], color: '#23575C' },
-    { tag: [t.definition(t.variableName)], color: '#327A9E' },
-    { tag: [t.regexp, t.link], color: '#0e0eff' },
-  ],
-});
+export function xcodeLightInit(options?: CreateThemeOptions) {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#fff',
+      foreground: '#3D3D3D',
+      selection: '#BBDFFF',
+      selectionMatch: '#BBDFFF',
+      gutterBackground: '#fff',
+      gutterForeground: '#AFAFAF',
+      lineHighlight: '#EDF4FF',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.quote], color: '#707F8D' },
+      { tag: [t.typeName, t.typeOperator], color: '#aa0d91' },
+      { tag: [t.keyword], color: '#aa0d91', fontWeight: 'bold' },
+      { tag: [t.string, t.meta], color: '#D23423' },
+      { tag: [t.name], color: '#032f62' },
+      { tag: [t.typeName], color: '#522BB2' },
+      { tag: [t.variableName], color: '#23575C' },
+      { tag: [t.definition(t.variableName)], color: '#327A9E' },
+      { tag: [t.regexp, t.link], color: '#0e0eff' },
+      ...styles,
+    ],
+  });
+}
 
-export const xcodeDark = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#292A30',
-    foreground: '#CECFD0',
-    caret: '#fff',
-    selection: '#727377',
-    selectionMatch: '#727377',
-    lineHighlight: '#2F3239',
-  },
-  styles: [
-    { tag: [t.comment, t.quote], color: '#7F8C98' },
-    { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
-    { tag: [t.string, t.meta], color: '#FF8170' },
-    { tag: [t.typeName], color: '#DABAFF' },
-    { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
-    { tag: [t.name], color: '#6BAA9F' },
-    { tag: [t.variableName], color: '#ACF2E4' },
-    { tag: [t.regexp, t.link], color: '#FF8170' },
-  ],
-});
+export const xcodeLight = xcodeLightInit();
+
+export const xcodeDarkInit = (options?: CreateThemeOptions) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#292A30',
+      foreground: '#CECFD0',
+      caret: '#fff',
+      selection: '#727377',
+      selectionMatch: '#727377',
+      lineHighlight: '#2F3239',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.quote], color: '#7F8C98' },
+      { tag: [t.keyword], color: '#FF7AB2', fontWeight: 'bold' },
+      { tag: [t.string, t.meta], color: '#FF8170' },
+      { tag: [t.typeName], color: '#DABAFF' },
+      { tag: [t.definition(t.variableName)], color: '#6BDFFF' },
+      { tag: [t.name], color: '#6BAA9F' },
+      { tag: [t.variableName], color: '#ACF2E4' },
+      { tag: [t.regexp, t.link], color: '#FF8170' },
+      ...styles,
+    ],
+  });
+};
+
+export const xcodeDark = xcodeDarkInit();