From 4044b1746af959b5a9d4320b903e6c3e19852a3d Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 7 Dec 2022 09:20:48 +0800
Subject: [PATCH] feat(duotone): add duotoneLightInit/duotoneDarkInit method to
duotone theme.
---
themes/duotone/README.md | 24 +++++++++
themes/duotone/src/index.ts | 104 ++++++++++++++++++++----------------
themes/eclipse/README.md | 2 +-
3 files changed, 84 insertions(+), 46 deletions(-)
diff --git a/themes/duotone/README.md b/themes/duotone/README.md
index ac95768f1..a83972faf 100644
--- 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';
+
+
+
+```
+
+## 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
index 388e0e174..eb2f6a6df 100644
--- 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
index 29b6e31f8..64edc0266 100644
--- 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';