From 70d3db5eed00f94b3e1330f1846c9568ac5e63fa Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 6 Dec 2022 23:28:06 +0800 Subject: [PATCH] feat(xcode): add xcodeLightInit/xcodeDarkInit method to xcode theme. --- themes/vscode/README.md | 6 ++- themes/xcode/README.md | 24 +++++++++ themes/xcode/src/index.ts | 104 +++++++++++++++++++++----------------- 3 files changed, 87 insertions(+), 47 deletions(-) diff --git a/themes/vscode/README.md b/themes/vscode/README.md index b49d02939..a5eca99a0 100644 --- 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'; - ``` diff --git a/themes/xcode/README.md b/themes/xcode/README.md index 33824cc31..62ec04cb0 100644 --- 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'; + + + +``` + +## 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 index 1cf5d31a2..6b26be28c 100644 --- 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();