From 1c1c49f895a84420752ec9ad4578ee5f611bcb6c Mon Sep 17 00:00:00 2001 From: Denys Sedchenko Date: Thu, 6 Jun 2024 22:48:04 -0400 Subject: [PATCH] feat(themes): add vscode light theme (#660) * feat(themes): add vscode light theme * feat(themes): update demo --- themes/vscode/src/dark.ts | 97 ++++++++++++++++++++++++++++ themes/vscode/src/index.ts | 98 +---------------------------- themes/vscode/src/light.ts | 96 ++++++++++++++++++++++++++++ www/src/pages/theme/themes/Datas.ts | 3 +- 4 files changed, 197 insertions(+), 97 deletions(-) create mode 100644 themes/vscode/src/dark.ts create mode 100644 themes/vscode/src/light.ts diff --git a/themes/vscode/src/dark.ts b/themes/vscode/src/dark.ts new file mode 100644 index 000000000..f5df73265 --- /dev/null +++ b/themes/vscode/src/dark.ts @@ -0,0 +1,97 @@ + +/** + * https://github.com/uiwjs/react-codemirror/issues/409 + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = { + background: '#1e1e1e', + foreground: '#9cdcfe', + caret: '#c6c6c6', + selection: '#6199ff2f', + selectionMatch: '#72a1ff59', + lineHighlight: '#ffffff0f', + gutterBackground: '#1e1e1e', + gutterForeground: '#838383', + gutterActiveForeground: '#fff', + fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace', +}; + +export function vscodeDarkInit(options?: Partial) { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsVscodeDark, + ...settings, + }, + styles: [ + { + tag: [ + t.keyword, + t.operatorKeyword, + t.modifier, + t.color, + t.constant(t.name), + t.standard(t.name), + t.standard(t.tagName), + t.special(t.brace), + t.atom, + t.bool, + t.special(t.variableName), + ], + color: '#569cd6', + }, + { + tag: [t.controlKeyword, t.moduleKeyword], + color: '#c586c0', + }, + { + tag: [ + t.name, + t.deleted, + t.character, + t.macroName, + t.propertyName, + t.variableName, + t.labelName, + t.definition(t.name), + ], + color: '#9cdcfe', + }, + { tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' }, + { + tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace], + color: '#4ec9b0', + }, + { + tag: [t.function(t.variableName), t.function(t.propertyName)], + color: '#dcdcaa', + }, + { tag: [t.number], color: '#b5cea8' }, + { + tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], + color: '#d4d4d4', + }, + { + tag: [t.regexp], + color: '#d16969', + }, + { + tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], + color: '#ce9178', + }, + { tag: [t.angleBracket], color: '#808080' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: [t.meta, t.comment], color: '#6a9955' }, + { tag: t.link, color: '#6a9955', textDecoration: 'underline' }, + { tag: t.invalid, color: '#ff0000' }, + ...styles, + ], + }); +} + +export const vscodeDark = vscodeDarkInit(); diff --git a/themes/vscode/src/index.ts b/themes/vscode/src/index.ts index 6800c62b1..93b0d07b1 100644 --- a/themes/vscode/src/index.ts +++ b/themes/vscode/src/index.ts @@ -1,96 +1,2 @@ -/** - * https://github.com/uiwjs/react-codemirror/issues/409 - */ -import { tags as t } from '@lezer/highlight'; -import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; - -export const defaultSettingsVscodeDark: CreateThemeOptions['settings'] = { - background: '#1e1e1e', - foreground: '#9cdcfe', - caret: '#c6c6c6', - selection: '#6199ff2f', - selectionMatch: '#72a1ff59', - lineHighlight: '#ffffff0f', - gutterBackground: '#1e1e1e', - gutterForeground: '#838383', - gutterActiveForeground: '#fff', - fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace', -}; - -export function vscodeDarkInit(options?: Partial) { - const { theme = 'dark', settings = {}, styles = [] } = options || {}; - return createTheme({ - theme: theme, - settings: { - ...defaultSettingsVscodeDark, - ...settings, - }, - styles: [ - { - tag: [ - t.keyword, - t.operatorKeyword, - t.modifier, - t.color, - t.constant(t.name), - t.standard(t.name), - t.standard(t.tagName), - t.special(t.brace), - t.atom, - t.bool, - t.special(t.variableName), - ], - color: '#569cd6', - }, - { - tag: [t.controlKeyword, t.moduleKeyword], - color: '#c586c0', - }, - { - tag: [ - t.name, - t.deleted, - t.character, - t.macroName, - t.propertyName, - t.variableName, - t.labelName, - t.definition(t.name), - ], - color: '#9cdcfe', - }, - { tag: t.heading, fontWeight: 'bold', color: '#9cdcfe' }, - { - tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace], - color: '#4ec9b0', - }, - { - tag: [t.function(t.variableName), t.function(t.propertyName)], - color: '#dcdcaa', - }, - { tag: [t.number], color: '#b5cea8' }, - { - tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], - color: '#d4d4d4', - }, - { - tag: [t.regexp], - color: '#d16969', - }, - { - tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], - color: '#ce9178', - }, - { tag: [t.angleBracket], color: '#808080' }, - { tag: t.strong, fontWeight: 'bold' }, - { tag: t.emphasis, fontStyle: 'italic' }, - { tag: t.strikethrough, textDecoration: 'line-through' }, - { tag: [t.meta, t.comment], color: '#6a9955' }, - { tag: t.link, color: '#6a9955', textDecoration: 'underline' }, - { tag: t.invalid, color: '#ff0000' }, - ...styles, - ], - }); -} - -export const vscodeDark = vscodeDarkInit(); +export * from './light' +export * from './dark' diff --git a/themes/vscode/src/light.ts b/themes/vscode/src/light.ts new file mode 100644 index 000000000..d26d0954a --- /dev/null +++ b/themes/vscode/src/light.ts @@ -0,0 +1,96 @@ +/** + * https://github.com/uiwjs/react-codemirror/issues/409 + */ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsVscodeLight: CreateThemeOptions['settings'] = { + background: '#ffffff', + foreground: '#383a42', + caret: '#000', + selection: '#add6ff', + selectionMatch: '#a8ac94', + lineHighlight: '#f0f0f0', + gutterBackground: '#fff', + gutterForeground: '#237893', + gutterActiveForeground: '#0b216f', + fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace', +}; + +export function vscodeLightInit(options?: Partial) { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsVscodeDark, + ...settings, + }, + styles: [ + { + tag: [ + t.keyword, + t.operatorKeyword, + t.modifier, + t.color, + t.constant(t.name), + t.standard(t.name), + t.standard(t.tagName), + t.special(t.brace), + t.atom, + t.bool, + t.special(t.variableName), + ], + color: '#0000ff', + }, + { + tag: [t.moduleKeyword, t.controlKeyword], + color: '#af00db', + }, + { + tag: [ + t.name, + t.deleted, + t.character, + t.macroName, + t.propertyName, + t.variableName, + t.labelName, + t.definition(t.name), + ], + color: '#0070c1', + }, + { tag: t.heading, fontWeight: 'bold', color: '#0070c1' }, + { + tag: [t.typeName, t.className, t.tagName, t.number, t.changed, t.annotation, t.self, t.namespace], + color: '#267f99', + }, + { + tag: [t.function(t.variableName), t.function(t.propertyName)], + color: '#795e26', + }, + { tag: [t.number], color: '#098658' }, + { + tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp], + color: '#383a42', + }, + { + tag: [t.regexp], + color: '#af00db', + }, + { + tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted], + color: '#a31515', + }, + { tag: [t.angleBracket], color: '#383a42' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: [t.meta, t.comment], color: '#008000' }, + { tag: t.link, color: '#4078f2', textDecoration: 'underline' }, + { tag: t.invalid, color: '#e45649' }, + ...styles, + ], + }); +} + +export const vscodeLight = vscodeLightInit(); diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 98a192ff6..85699161e 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -16,7 +16,7 @@ import { materialLight, materialDark } from '@uiw/codemirror-theme-material'; import { monokai } from '@uiw/codemirror-theme-monokai'; import { monokaiDimmed } from '@uiw/codemirror-theme-monokai-dimmed'; import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac'; -import { vscodeDark } from '@uiw/codemirror-theme-vscode'; +import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode'; import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone'; import { githubLight, githubDark } from '@uiw/codemirror-theme-github'; import { gruvboxDark, gruvboxLight } from '@uiw/codemirror-theme-gruvbox-dark'; @@ -75,6 +75,7 @@ export const themeData = { tokyoNightDay, tomorrowNightBlue, vscodeDark, + vscodeLight, whiteLight, whiteDark, xcodeLight,