Merge pull request #13 from tidbcloud/chore/themes

feat: themes can config

packages/extensions/themes/package.json

@@ -18,7 +18,13 @@
     "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
     "build": "tsc && rollup -c"
   },
-  "keywords": [],
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "extensions",
+    "themes"
+  ],
   "author": "",
   "license": "MIT",
   "devDependencies": {

packages/extensions/themes/src/dark.ts

@@ -0,0 +1,80 @@
+import { tags as t } from '@lezer/highlight'
+
+import { CreateThemeOptions, createTheme } from './theme-utils'
+
+export const defaultSettingsDark: CreateThemeOptions['settings'] = {
+  background: '#282c34',
+  color: '#abb2bf',
+  caret: '#528bff',
+  selection: '#151C26',
+  selectionMatch: '#064470',
+  searchMatch: '#6199ff2f',
+  gutterBackground: '#282c34',
+  gutterColor: '#7d8799',
+  gutterBorder: 'none',
+  lineHighlight: '#6699ff0b',
+  tooltipBackground: '#353a42',
+  tooltipBorder: 'none',
+  autocompleteActiveBackground: '#6699ff0b',
+  autocompleteActiveColor: '#abb2bf'
+}
+
+export const dark = ((options?: any) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {}
+
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultSettingsDark,
+      ...settings
+    },
+    styles: [
+      { tag: t.keyword, color: '#25AFF4' },
+      {
+        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+        color: '#e06c75'
+      },
+      { tag: [t.function(t.variableName), t.labelName], color: '#1A0099' },
+      {
+        tag: [t.color, t.constant(t.name), t.standard(t.name)],
+        color: '#d19a66'
+      },
+      { tag: [t.definition(t.name), t.separator], color: '#abb2bf' },
+      {
+        tag: [
+          t.typeName,
+          t.className,
+          t.changed,
+          t.annotation,
+          t.modifier,
+          t.self,
+          t.namespace
+        ],
+        color: '#8992F5'
+      },
+      { tag: [t.number], color: '#D65C99' },
+      {
+        tag: [
+          t.operator,
+          t.operatorKeyword,
+          t.url,
+          t.escape,
+          t.regexp,
+          t.link,
+          t.special(t.string)
+        ],
+        color: '#56b6c2'
+      },
+      { tag: [t.meta, t.comment], color: '#4FB07F' },
+      { tag: t.strong, fontWeight: 'bold' },
+      { tag: t.heading, color: '#e06c75' },
+      { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d19a66' },
+      {
+        tag: [t.processingInstruction, t.string, t.inserted],
+        color: '#B96CE0'
+      },
+      { tag: t.invalid, color: '#ffffff' },
+      ...styles
+    ]
+  })
+})()

packages/extensions/themes/src/index.ts

@@ -1,2 +1,3 @@
-export * from './bbedit'
-export * from './one-dark'
+export * from './light'
+export * from './dark'
+export * from './theme-utils'

packages/extensions/themes/src/light.ts

@@ -0,0 +1,44 @@
+import { tags as t } from '@lezer/highlight'
+
+import { CreateThemeOptions, createTheme } from './theme-utils'
+
+export const defaultLightSettings: CreateThemeOptions['settings'] = {
+  background: '#FFFFFF',
+  color: '#000000',
+  caret: '#009AE5',
+  selection: '#E7F7FE',
+  selectionMatch: '#CEEDFC',
+  gutterBackground: '#FFFFFF',
+  gutterColor: '#999',
+  gutterBorder: 'none',
+  lineHighlight: '#F5FBFE',
+  gutterActiveForeground: '#0CA6F20D'
+}
+
+export const light = ((options?: any) => {
+  const { theme = 'light', settings = {}, styles = [] } = options || {}
+
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultLightSettings,
+      ...settings
+    },
+    styles: [
+      { tag: [t.meta, t.comment], color: '#3BAF6D' },
+      { tag: [t.keyword, t.strong], color: '#027DBB' },
+      { tag: [t.number], color: '#DF2271' },
+      { tag: [t.string], color: '#843FA6' },
+      { tag: [t.variableName], color: '#056142' },
+      { tag: [t.escape], color: '#40BF6A' },
+      { tag: [t.tagName], color: '#2152C4' },
+      { tag: [t.heading], color: '#2152C4' },
+      { tag: [t.quote], color: '#333333' },
+      { tag: [t.list], color: '#C20A94' },
+      { tag: [t.documentMeta], color: '#999999' },
+      { tag: [t.function(t.variableName)], color: '#1A0099' },
+      { tag: [t.definition(t.typeName), t.typeName], color: '#6D79DE' },
+      ...styles
+    ]
+  })
+})()