feat(duotone): add duotoneLightInit/duotoneDarkInit method to duotone…

… theme.
uiwjs · Dec 7, 2022 · 4044b17 · 4044b17
1 parent 3cd796d
commit 4044b17
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 46 deletions.
diff --git a/themes/duotone/README.md b/themes/duotone/README.md
@@ -20,6 +20,30 @@
 npm install @uiw/codemirror-theme-duotone --save
 ```
 
+```jsx
+import { duotoneLight, duotoneLightInit, duotoneDark, duotoneDarkInit } from '@uiw/codemirror-theme-duotone';
+
+<CodeMirror theme={duotoneLight} />
+<CodeMirror
+  theme={duotoneLightInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const duotoneLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const duotoneLight: import('@codemirror/state').Extension;
+export declare const duotoneDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
+export declare const duotoneDark: import('@codemirror/state').Extension;
+```
+
 ## Usage
 
 ```jsx

diff --git a/themes/duotone/src/index.ts b/themes/duotone/src/index.ts
@@ -4,50 +4,64 @@
  * by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const duotoneLight = createTheme({
-  theme: 'light',
-  settings: {
-    background: '#faf8f5',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    lineHighlight: '#EFEFEF',
-  },
-  styles: [
-    { tag: [t.comment, t.bracket], color: '#b6ad9a' },
-    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
-    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
-    { tag: [t.typeName, t.url, t.string], color: '#896724' },
-    { tag: [t.operator, t.string], color: '#1659df' },
-    { tag: [t.propertyName], color: '#b29762' },
-    { tag: [t.unit, t.punctuation], color: '#063289' },
-  ],
-});
+export const duotoneLightInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#faf8f5',
+      foreground: '#b29762',
+      caret: '#93abdc',
+      selection: '#e3dcce',
+      selectionMatch: '#e3dcce',
+      gutterBackground: '#faf8f5',
+      gutterForeground: '#cdc4b1',
+      lineHighlight: '#EFEFEF',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.bracket], color: '#b6ad9a' },
+      { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#063289' },
+      { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.variableName], color: '#2d2006' },
+      { tag: [t.typeName, t.url, t.string], color: '#896724' },
+      { tag: [t.operator, t.string], color: '#1659df' },
+      { tag: [t.propertyName], color: '#b29762' },
+      { tag: [t.unit, t.punctuation], color: '#063289' },
+      ...styles,
+    ],
+  });
+};
 
-export const duotoneDark = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#2a2734',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280',
-  },
-  styles: [
-    { tag: [t.comment, t.bracket], color: '#6c6783' },
-    { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
-    { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
-    { tag: [t.typeName, t.url], color: '#7a63ee' },
-    { tag: t.operator, color: '#ffad5c' },
-    { tag: t.string, color: '#ffb870' },
-    { tag: [t.propertyName], color: '#9a86fd' },
-    { tag: [t.unit, t.punctuation], color: '#e09142' },
-  ],
-});
+export const duotoneLight = duotoneLightInit();
+
+export const duotoneDarkInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#2a2734',
+      foreground: '#6c6783',
+      caret: '#ffad5c',
+      selection: 'rgba(255, 255, 255, 0.1)',
+      gutterBackground: '#2a2734',
+      gutterForeground: '#545167',
+      lineHighlight: '#36334280',
+      ...settings,
+    },
+    styles: [
+      { tag: [t.comment, t.bracket], color: '#6c6783' },
+      { tag: [t.atom, t.number, t.keyword, t.link, t.attributeName, t.quote], color: '#ffcc99' },
+      { tag: [t.emphasis, t.heading, t.tagName, t.propertyName, t.className, t.variableName], color: '#eeebff' },
+      { tag: [t.typeName, t.url], color: '#7a63ee' },
+      { tag: t.operator, color: '#ffad5c' },
+      { tag: t.string, color: '#ffb870' },
+      { tag: [t.propertyName], color: '#9a86fd' },
+      { tag: [t.unit, t.punctuation], color: '#e09142' },
+      ...styles,
+    ],
+  });
+};
+
+export const duotoneDark = duotoneDarkInit();
diff --git a/themes/eclipse/README.md b/themes/eclipse/README.md
@@ -17,7 +17,7 @@ npm install @uiw/codemirror-theme-eclipse --save
 ```
 
 ```jsx
-import { eclipse, eclipseInit } from '@uiw/codemirror-theme-github';
+import { eclipse, eclipseInit } from '@uiw/codemirror-theme-eclipse';
 
 <CodeMirror theme={eclipse} />
 <CodeMirror