✨ Added preset theme

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

@@ -1,7 +1,6 @@
-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'
 
 // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
 
@@ -22,133 +21,56 @@ const chalky = "#e5c07b",
     selection = "#3E4451",
     cursor = "#528bff"
 
-/// The colors used in the theme, as CSS color strings.
-export const color = {
-    chalky,
-    coral,
-    cyan,
-    invalid,
-    ivory,
-    stone,
-    malibu,
-    sage,
-    whiskey,
-    violet,
-    darkBackground,
-    highlightBackground,
-    background,
-    tooltipBackground,
-    selection,
-    cursor
+export const config: ThemeColors = {
+  name: 'one-dark',
+  dark: true,
+  
+  // 基础色调
+  background: background,
+  backgroundSecondary: highlightBackground,
+  surface: tooltipBackground,
+  dropdownBackground: darkBackground,
+  dropdownBorder: stone,
+  
+  // 文本颜色
+  foreground: ivory,
+  foregroundSecondary: stone,
+  comment: stone,
+  
+  // 语法高亮色 - 核心
+  keyword: violet,
+  string: sage,
+  function: malibu,
+  number: chalky,
+  operator: cyan,
+  variable: coral,
+  type: chalky,
+  
+  // 语法高亮色 - 扩展
+  constant: whiskey,
+  storage: violet,
+  parameter: coral,
+  class: chalky,
+  heading: coral,
+  invalid: invalid,
+  regexp: cyan,
+  
+  // 界面元素
+  cursor: cursor,
+  selection: selection,
+  selectionBlur: selection,
+  activeLine: '#6699ff0b',
+  lineNumber: stone,
+  activeLineNumber: ivory,
+  
+  // 边框和分割线
+  borderColor: darkBackground,
+  borderLight: ivory + '19',
+  
+  // 搜索和匹配
+  searchMatch: malibu,
+  matchingBracket: '#bad0f847',
 }
 
-/// The editor theme styles for One Dark.
-export const oneDarkTheme = EditorView.theme({
-    "&": {
-        color: ivory,
-        backgroundColor: background
-    },
-
-    ".cm-content": {
-        caretColor: cursor
-    },
-
-    ".cm-cursor, .cm-dropCursor": {borderLeftColor: cursor},
-    "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {backgroundColor: selection},
-
-    ".cm-panels": {backgroundColor: darkBackground, color: ivory},
-    ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"},
-    ".cm-panels.cm-panels-bottom": {borderTop: "2px solid black"},
-
-    ".cm-searchMatch": {
-        backgroundColor: "#72a1ff59",
-        outline: "1px solid #457dff"
-    },
-    ".cm-searchMatch.cm-searchMatch-selected": {
-        backgroundColor: "#6199ff2f"
-    },
-
-    ".cm-activeLine": {backgroundColor: "#6699ff0b"},
-    ".cm-selectionMatch": {backgroundColor: "#aafe661a"},
-
-    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-        backgroundColor: "#bad0f847"
-    },
-
-    ".cm-gutters": {
-        backgroundColor: background,
-        color: stone,
-        border: "none"
-    },
-
-    ".cm-activeLineGutter": {
-        backgroundColor: highlightBackground
-    },
-
-    ".cm-foldPlaceholder": {
-        backgroundColor: "transparent",
-        border: "none",
-        color: "#ddd"
-    },
-
-    ".cm-tooltip": {
-        border: "none",
-        backgroundColor: tooltipBackground
-    },
-    ".cm-tooltip .cm-tooltip-arrow:before": {
-        borderTopColor: "transparent",
-        borderBottomColor: "transparent"
-    },
-    ".cm-tooltip .cm-tooltip-arrow:after": {
-        borderTopColor: tooltipBackground,
-        borderBottomColor: tooltipBackground
-    },
-    ".cm-tooltip-autocomplete": {
-        "& > ul > li[aria-selected]": {
-            backgroundColor: highlightBackground,
-            color: ivory
-        }
-    }
-}, {dark: true})
-
-/// The highlighting style for code in the One Dark theme.
-export const oneDarkHighlightStyle = HighlightStyle.define([
-    {tag: t.keyword,
-        color: violet},
-    {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-        color: coral},
-    {tag: [t.function(t.variableName), t.labelName],
-        color: malibu},
-    {tag: [t.color, t.constant(t.name), t.standard(t.name)],
-        color: whiskey},
-    {tag: [t.definition(t.name), t.separator],
-        color: ivory},
-    {tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-        color: chalky},
-    {tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-        color: cyan},
-    {tag: [t.meta, t.comment],
-        color: stone},
-    {tag: t.strong,
-        fontWeight: "bold"},
-    {tag: t.emphasis,
-        fontStyle: "italic"},
-    {tag: t.strikethrough,
-        textDecoration: "line-through"},
-    {tag: t.link,
-        color: stone,
-        textDecoration: "underline"},
-    {tag: t.heading,
-        fontWeight: "bold",
-        color: coral},
-    {tag: [t.atom, t.bool, t.special(t.variableName)],
-        color: whiskey },
-    {tag: [t.processingInstruction, t.string, t.inserted],
-        color: sage},
-    {tag: t.invalid,
-        color: invalid},
-])
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-export const oneDark: Extension = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)]
+// 使用通用主题工厂函数创建 One Dark 主题
+export const oneDark: Extension = createBaseTheme(config)