✨ Added preset theme

frontend/src/views/editor/theme/dark/material-dark.ts

@@ -1,128 +1,57 @@
-import {EditorView} from '@codemirror/view'
 import {Extension} from '@codemirror/state'
-import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'
-import {tags as t} from '@lezer/highlight'
+import {createBaseTheme} from '../base'
+import type {ThemeColors} from '../types'
 
-export const config = {
-  name: 'materialDark',
+export const config: ThemeColors = {
+  name: 'material-dark',
   dark: true,
+  
+  // 基础色调
   background: '#263238',
-  foreground: '#EEFFFF',
-  selection: '#80CBC420',
-  cursor: '#FFCC00',
+  backgroundSecondary: '#263238',
+  surface: '#263238',
   dropdownBackground: '#263238',
   dropdownBorder: '#FFFFFF10',
-  activeLine: '#4c616c22',
-  lineNumber: '#37474F',
-  activeLineNumber: '#607a86',
-  matchingBracket: '#263238',
-  keyword: '#C792EA',
-  storage: '#C792EA',
-  variable: '#EEFFFF',
-  parameter: '#EEFFFF',
-  function: '#82AAFF',
-  string: '#C3E88D',
-  constant: '#F78C6C',
-  type: '#B2CCD6',
-  class: '#FFCB6B',
-  number: '#F78C6C',
+  
+  // 文本颜色
+  foreground: '#EEFFFF',
+  foregroundSecondary: '#EEFFFF',
   comment: '#546E7A',
+  
+  // 语法高亮色 - 核心
+  keyword: '#C792EA',
+  string: '#C3E88D',
+  function: '#82AAFF',
+  number: '#F78C6C',
+  operator: '#C792EA',
+  variable: '#EEFFFF',
+  type: '#B2CCD6',
+  
+  // 语法高亮色 - 扩展
+  constant: '#F78C6C',
+  storage: '#C792EA',
+  parameter: '#EEFFFF',
+  class: '#FFCB6B',
   heading: '#C3E88D',
   invalid: '#FF5370',
   regexp: '#89DDFF',
+  
+  // 界面元素
+  cursor: '#FFCC00',
+  selection: '#80CBC420',
+  selectionBlur: '#80CBC420',
+  activeLine: '#4c616c22',
+  lineNumber: '#37474F',
+  activeLineNumber: '#607a86',
+  
+  // 边框和分割线
+  borderColor: '#FFFFFF10',
+  borderLight: '#EEFFFF19',
+  
+  // 搜索和匹配
+  searchMatch: '#82AAFF',
+  matchingBracket: '#263238',
 }
 
-export const materialDarkTheme = EditorView.theme({
-  '&': {
-    color: config.foreground,
-    backgroundColor: config.background,
-  },
-
-  '.cm-content': {caretColor: config.cursor},
-
-  '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},
-
-  '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
-  '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
-  '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
-
-  '.cm-searchMatch': {
-    backgroundColor: config.dropdownBackground,
-    outline: `1px solid ${config.dropdownBorder}`
-  },
-  '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: config.selection
-  },
-
-  '.cm-activeLine': {backgroundColor: config.activeLine},
-  '.cm-selectionMatch': {backgroundColor: config.selection},
-
-  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-    backgroundColor: config.matchingBracket,
-    outline: 'none'
-  },
-
-  '.cm-gutters': {
-    backgroundColor: config.background,
-    color: config.foreground,
-    border: 'none'
-  },
-  '.cm-activeLineGutter': {backgroundColor: config.background},
-
-  '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber},
-  '.cm-lineNumbers .cm-activeLineGutter': {color: config.activeLineNumber},
-
-  '.cm-foldPlaceholder': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: config.foreground
-  },
-  '.cm-tooltip': {
-    border: `1px solid ${config.dropdownBorder}`,
-    backgroundColor: config.dropdownBackground,
-    color: config.foreground,
-  },
-  '.cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent'
-  },
-  '.cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: config.foreground,
-    borderBottomColor: config.foreground,
-  },
-  '.cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      background: config.selection,
-      color: config.foreground,
-    }
-  }
-}, {dark: config.dark})
-
-export const materialDarkHighlightStyle = HighlightStyle.define([
-  {tag: t.keyword, color: config.keyword},
-  {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},
-  {tag: [t.propertyName], color: config.function},
-  {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},
-  {tag: [t.function(t.variableName), t.labelName], color: config.function},
-  {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},
-  {tag: [t.definition(t.name), t.separator], color: config.variable},
-  {tag: [t.className], color: config.class},
-  {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number},
-  {tag: [t.typeName], color: config.type, fontStyle: config.type},
-  {tag: [t.operator, t.operatorKeyword], color: config.keyword},
-  {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp},
-  {tag: [t.meta, t.comment], color: config.comment},
-  {tag: t.strong, fontWeight: 'bold'},
-  {tag: t.emphasis, fontStyle: 'italic'},
-  {tag: t.link, textDecoration: 'underline'},
-  {tag: t.heading, fontWeight: 'bold', color: config.heading},
-  {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable},
-  {tag: t.invalid, color: config.invalid},
-  {tag: t.strikethrough, textDecoration: 'line-through'},
-])
-
-export const materialDark: Extension = [
-  materialDarkTheme,
-  syntaxHighlighting(materialDarkHighlightStyle),
-]
+// 使用通用主题工厂函数创建 Material Dark 主题
+export const materialDark: Extension = createBaseTheme(config)