From 14811ae9b74ec399119c9856340513ca312950f9 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Wed, 7 Dec 2022 00:21:12 +0800 Subject: [PATCH] feat(nord): add nordInit method to nord theme. --- themes/nord/README.md | 22 ++++ themes/nord/src/index.ts | 227 ++++++++++++++++++++------------------- 2 files changed, 139 insertions(+), 110 deletions(-) diff --git a/themes/nord/README.md b/themes/nord/README.md index 18b962f5d..8ee73a8e7 100644 --- a/themes/nord/README.md +++ b/themes/nord/README.md @@ -18,6 +18,28 @@ This package implements the [nord theme](https://www.nordtheme.com/) for the Cod npm install @uiw/codemirror-theme-nord --save ``` +```jsx +import { nord, nordInit } from '@uiw/codemirror-theme-nord'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const nordInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const nord: import('@codemirror/state').Extension; +``` + ## Usage ```jsx diff --git a/themes/nord/src/index.ts b/themes/nord/src/index.ts index 85d2306c0..276400c83 100644 --- a/themes/nord/src/index.ts +++ b/themes/nord/src/index.ts @@ -1,113 +1,120 @@ import { tags as t } from '@lezer/highlight'; -import { createTheme } from '@uiw/codemirror-themes'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; // Colors from https://www.nordtheme.com/docs/colors-and-palettes -export const nord = createTheme({ - theme: 'dark', - settings: { - background: '#2e3440', - foreground: '#FFFFFF', - caret: '#FFFFFF', - selection: '#3b4252', - selectionMatch: '#e5e9f0', - gutterBackground: '#2e3440', - gutterForeground: '#4c566a', - gutterActiveForeground: '#d8dee9', - lineHighlight: '#4c566a', - }, - styles: [ - { tag: t.keyword, color: '#5e81ac' }, - { - tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], - color: '#88c0d0', - }, - { tag: [t.variableName], color: '#8fbcbb' }, - { tag: [t.function(t.variableName)], color: '#8fbcbb' }, - { tag: [t.labelName], color: '#81a1c1' }, - { - tag: [t.color, t.constant(t.name), t.standard(t.name)], - color: '#5e81ac', - }, - { tag: [t.definition(t.name), t.separator], color: '#a3be8c' }, - { tag: [t.brace], color: '#8fbcbb' }, - { - tag: [t.annotation], - color: '#d30102', - }, - { - tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], - color: '#b48ead', - }, - { - tag: [t.typeName, t.className], - color: '#ebcb8b', - }, - { - tag: [t.operator, t.operatorKeyword], - color: '#a3be8c', - }, - { - tag: [t.tagName], - color: '#b48ead', - }, - { - tag: [t.squareBracket], - color: '#bf616a', - }, - { - tag: [t.angleBracket], - color: '#d08770', - }, - { - tag: [t.attributeName], - color: '#ebcb8b', - }, - { - tag: [t.regexp], - color: '#5e81ac', - }, - { - tag: [t.quote], - color: '#b48ead', - }, - { tag: [t.string], color: '#a3be8c' }, - { - tag: t.link, - color: '#a3be8c', - textDecoration: 'underline', - textUnderlinePosition: 'under', - }, - { - tag: [t.url, t.escape, t.special(t.string)], - color: '#8fbcbb', - }, - { tag: [t.meta], color: '#88c0d0' }, - { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' }, - { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' }, - { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' }, - { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' }, - { tag: t.strikethrough, textDecoration: 'line-through' }, - { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' }, - { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' }, - { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' }, - { - tag: [t.heading2, t.heading3, t.heading4], - fontWeight: 'bold', - color: '#5e81ac', - }, - { - tag: [t.heading5, t.heading6], - color: '#5e81ac', - }, - { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' }, - { - tag: [t.processingInstruction, t.inserted], - color: '#8fbcbb', - }, - { - tag: [t.contentSeparator], - color: '#ebcb8b', - }, - { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` }, - ], -}); +export const nordInit = (options?: CreateThemeOptions) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#2e3440', + foreground: '#FFFFFF', + caret: '#FFFFFF', + selection: '#3b4252', + selectionMatch: '#e5e9f0', + gutterBackground: '#2e3440', + gutterForeground: '#4c566a', + gutterActiveForeground: '#d8dee9', + lineHighlight: '#4c566a', + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#5e81ac' }, + { + tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], + color: '#88c0d0', + }, + { tag: [t.variableName], color: '#8fbcbb' }, + { tag: [t.function(t.variableName)], color: '#8fbcbb' }, + { tag: [t.labelName], color: '#81a1c1' }, + { + tag: [t.color, t.constant(t.name), t.standard(t.name)], + color: '#5e81ac', + }, + { tag: [t.definition(t.name), t.separator], color: '#a3be8c' }, + { tag: [t.brace], color: '#8fbcbb' }, + { + tag: [t.annotation], + color: '#d30102', + }, + { + tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + color: '#b48ead', + }, + { + tag: [t.typeName, t.className], + color: '#ebcb8b', + }, + { + tag: [t.operator, t.operatorKeyword], + color: '#a3be8c', + }, + { + tag: [t.tagName], + color: '#b48ead', + }, + { + tag: [t.squareBracket], + color: '#bf616a', + }, + { + tag: [t.angleBracket], + color: '#d08770', + }, + { + tag: [t.attributeName], + color: '#ebcb8b', + }, + { + tag: [t.regexp], + color: '#5e81ac', + }, + { + tag: [t.quote], + color: '#b48ead', + }, + { tag: [t.string], color: '#a3be8c' }, + { + tag: t.link, + color: '#a3be8c', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { + tag: [t.url, t.escape, t.special(t.string)], + color: '#8fbcbb', + }, + { tag: [t.meta], color: '#88c0d0' }, + { tag: [t.monospace], color: '#d8dee9', fontStyle: 'italic' }, + { tag: [t.comment], color: '#4c566a', fontStyle: 'italic' }, + { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#5e81ac', + }, + { + tag: [t.heading5, t.heading6], + color: '#5e81ac', + }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' }, + { + tag: [t.processingInstruction, t.inserted], + color: '#8fbcbb', + }, + { + tag: [t.contentSeparator], + color: '#ebcb8b', + }, + { tag: t.invalid, color: '#434c5e', borderBottom: `1px dotted #d30102` }, + ...styles, + ], + }); +}; + +export const nord = nordInit();