feat(themes): add vscode light theme (#660)

* feat(themes): add vscode light theme * feat(themes): update demo
uiwjs · Jun 7, 2024 · 1c1c49f · 1c1c49f
1 parent 2c7080a
commit 1c1c49f
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 97 deletions.
diff --git a/themes/vscode/src/dark.ts 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<CreateThemeOptions>) {
+  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
@@ -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<CreateThemeOptions>) {
-  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
@@ -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<CreateThemeOptions>) {
+  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
@@ -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,