feat(atomone): add atomoneInit method to atomone theme.

uiwjs · Dec 7, 2022 · 82d86e5 · 82d86e5
1 parent e6b66d0
commit 82d86e5
Show file tree

Hide file tree

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

diff --git a/themes/atomone/src/index.ts b/themes/atomone/src/index.ts
@@ -5,31 +5,38 @@
  * https://github.com/atom/one-dark-syntax
  */
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '@uiw/codemirror-themes';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
 
-export const atomone = createTheme({
-  theme: 'dark',
-  settings: {
-    background: '#272C35',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#ffffff30',
-    selectionMatch: '#2B323D',
-    gutterBackground: '#272C35',
-    gutterForeground: '#465063',
-    lineHighlight: '#2B323D',
-  },
-  styles: [
-    {
-      tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
-      color: 'hsl(207, 82%, 66%)',
+export const atomoneInit = (options?: CreateThemeOptions) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      background: '#272C35',
+      foreground: '#9d9b97',
+      caret: '#797977',
+      selection: '#ffffff30',
+      selectionMatch: '#2B323D',
+      gutterBackground: '#272C35',
+      gutterForeground: '#465063',
+      lineHighlight: '#2B323D',
+      ...settings,
     },
-    { tag: [t.tagName, t.heading], color: '#e06c75' },
-    { tag: t.comment, color: '#54636D' },
-    { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' },
-    { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
-    { tag: t.className, color: 'hsl( 39, 67%, 69%)' },
-    { tag: t.keyword, color: 'hsl(286, 60%, 67%)' },
-    { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
-  ],
-});
+    styles: [
+      {
+        tag: [t.function(t.variableName), t.function(t.propertyName), t.url, t.processingInstruction],
+        color: 'hsl(207, 82%, 66%)',
+      },
+      { tag: [t.tagName, t.heading], color: '#e06c75' },
+      { tag: t.comment, color: '#54636D' },
+      { tag: [t.propertyName], color: 'hsl(220, 14%, 71%)' },
+      { tag: [t.attributeName, t.number], color: 'hsl( 29, 54%, 61%)' },
+      { tag: t.className, color: 'hsl( 39, 67%, 69%)' },
+      { tag: t.keyword, color: 'hsl(286, 60%, 67%)' },
+      { tag: [t.string, t.regexp, t.special(t.propertyName)], color: '#98c379' },
+      ...styles,
+    ],
+  });
+};
+
+export const atomone = atomoneInit();