landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

🎨 Optimize preset theme code

Browse Source
This commit is contained in:
landaiqing
2025-10-20 21:58:37 +08:00
parent 9a15df01ee
commit aa8139884b
26 changed files with 245 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/views/editor/basic/themeExtension.ts
View File

@@ -1,7 +1,6 @@
import { Extension, Compartment } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
import { createThemeByColors } from '@/views/editor/theme/registry';
import { createThemeByColors } from '@/views/editor/theme';
import { useThemeStore } from '@/stores/themeStore';
// 主题区间 - 用于动态切换主题
@@ -10,20 +9,13 @@ export const themeCompartment = new Compartment();
/**
* 根据主题类型获取主题扩展
*/
const getThemeExtension = (themeType: SystemThemeType): Extension | null => {
const getThemeExtension = (): Extension | null => {
const themeStore = useThemeStore();
// 处理 auto 主题类型
let isDark = themeType === SystemThemeType.SystemThemeDark;
if (themeType === SystemThemeType.SystemThemeAuto) {
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// 根据主题类型获取对应的颜色配置
const colors = isDark ? themeStore.currentColors.dark : themeStore.currentColors.light;
// 直接获取当前主题颜色配置
const colors = themeStore.currentColors;
if (!colors) {
console.warn('Theme colors not loaded yet');
return null;
}
@@ -34,8 +26,8 @@ const getThemeExtension = (themeType: SystemThemeType): Extension | null => {
/**
* 创建主题扩展（用于编辑器初始化）
*/
export const createThemeExtension = (themeType: SystemThemeType = SystemThemeType.SystemThemeDark): Extension => {
const extension = getThemeExtension(themeType);
export const createThemeExtension = (): Extension => {
const extension = getThemeExtension();
// 如果主题未加载，返回空扩展
if (!extension) {
@@ -48,17 +40,16 @@ export const createThemeExtension = (themeType: SystemThemeType = SystemThemeTyp
/**
* 更新编辑器主题
*/
export const updateEditorTheme = (view: EditorView, themeType: SystemThemeType): void => {
export const updateEditorTheme = (view: EditorView): void => {
if (!view?.dispatch) {
return;
}
try {
const extension = getThemeExtension(themeType);
const extension = getThemeExtension();
// 如果主题未加载，不更新
if (!extension) {
console.warn('Cannot update theme: theme not loaded');
return;
}

2
frontend/src/views/editor/theme/dark/aura.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#21202e',
backgroundSecondary: '#21202e',
backgroundSecondary: '#2B2A3BFF',
surface: '#21202e',
dropdownBackground: '#21202e',
dropdownBorder: '#3b334b',

2
frontend/src/views/editor/theme/dark/dracula.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#282A36',
backgroundSecondary: '#282A36',
backgroundSecondary: '#323543FF',
surface: '#282A36',
dropdownBackground: '#282A36',
dropdownBorder: '#191A21',

2
frontend/src/views/editor/theme/dark/github-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#24292e',
backgroundSecondary: '#24292e',
backgroundSecondary: '#2E343BFF',
surface: '#24292e',
dropdownBackground: '#24292e',
dropdownBorder: '#1b1f23',

2
frontend/src/views/editor/theme/dark/material-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#263238',
backgroundSecondary: '#263238',
backgroundSecondary: '#2D3E46FF',
surface: '#263238',
dropdownBackground: '#263238',
dropdownBorder: '#FFFFFF10',

2
frontend/src/views/editor/theme/dark/one-dark.ts
View File

@@ -15,7 +15,7 @@ const chalky = "#e5c07b",
whiskey = "#d19a66",
violet = "#c678dd",
darkBackground = "#21252b",
highlightBackground = "#2c313a",
highlightBackground = "#313949FF",
background = "#282c34",
tooltipBackground = "#353a42",
selection = "#3E4451",

2
frontend/src/views/editor/theme/dark/solarized-dark.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#002B36',
backgroundSecondary: '#002B36',
backgroundSecondary: '#003643FF',
surface: '#002B36',
dropdownBackground: '#002B36',
dropdownBorder: '#2AA19899',

2
frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#24283b',
backgroundSecondary: '#24283b',
backgroundSecondary: '#2B3151FF',
surface: '#24283b',
dropdownBackground: '#24283b',
dropdownBorder: '#7982a9',

2
frontend/src/views/editor/theme/dark/tokyo-night.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#1a1b26',
backgroundSecondary: '#1a1b26',
backgroundSecondary: '#272839FF',
surface: '#1a1b26',
dropdownBackground: '#1a1b26',
dropdownBorder: '#787c99',

12
frontend/src/views/editor/theme/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Extension } from '@codemirror/state';
import type { ThemeColors } from './types';
import { createBaseTheme } from './base';
/**
* 根据自定义颜色配置创建主题
*/
export function createThemeByColors(colors: ThemeColors): Extension {
return createBaseTheme(colors);
}

2
frontend/src/views/editor/theme/light/github-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#fff',
backgroundSecondary: '#fff',
backgroundSecondary: '#f1faf1',
surface: '#fff',
dropdownBackground: '#fff',
dropdownBorder: '#e1e4e8',

2
frontend/src/views/editor/theme/light/material-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#FAFAFA',
backgroundSecondary: '#FAFAFA',
backgroundSecondary: '#f1faf1',
surface: '#FAFAFA',
dropdownBackground: '#FAFAFA',
dropdownBorder: '#00000010',

2
frontend/src/views/editor/theme/light/solarized-light.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#FDF6E3',
backgroundSecondary: '#FDF6E3',
backgroundSecondary: '#FFEEBCD4',
surface: '#FDF6E3',
dropdownBackground: '#FDF6E3',
dropdownBorder: '#D3AF86',

2
frontend/src/views/editor/theme/light/tokyo-night-day.ts
View File

@@ -8,7 +8,7 @@ export const config: ThemeColors = {
// 基础色调
background: '#e1e2e7',
backgroundSecondary: '#e1e2e7',
backgroundSecondary: '#D2D8EFFF',
surface: '#e1e2e7',
dropdownBackground: '#e1e2e7',
dropdownBorder: '#6a6f8e',

59
frontend/src/views/editor/theme/registry.ts
View File

@@ -1,59 +0,0 @@
import { Extension } from '@codemirror/state';
import type { ThemeColors } from './types';
import { createBaseTheme } from './base';
// 深色主题导入
import { config as draculaConfig } from './dark/dracula';
import { config as auraConfig } from './dark/aura';
import { config as githubDarkConfig } from './dark/github-dark';
import { config as materialDarkConfig } from './dark/material-dark';
import { config as oneDarkConfig } from './dark/one-dark';
import { config as solarizedDarkConfig } from './dark/solarized-dark';
import { config as tokyoNightConfig } from './dark/tokyo-night';
import { config as tokyoNightStormConfig } from './dark/tokyo-night-storm';
// 浅色主题导入
import { config as githubLightConfig } from './light/github-light';
import { config as materialLightConfig } from './light/material-light';
import { config as solarizedLightConfig } from './light/solarized-light';
import { config as tokyoNightDayConfig } from './light/tokyo-night-day';
/**
* 主题配置映射表
* key: 主题名称（与数据库中的 name 字段一致）
* value: 主题颜色配置
*/
const themeConfigMap: Record<string, ThemeColors> = {
// 深色主题
'dracula': draculaConfig,
'aura': auraConfig,
'github-dark': githubDarkConfig,
'material-dark': materialDarkConfig,
'one-dark': oneDarkConfig,
'solarized-dark': solarizedDarkConfig,
'tokyo-night': tokyoNightConfig,
'tokyo-night-storm': tokyoNightStormConfig,
// 浅色主题
'github-light': githubLightConfig,
'material-light': materialLightConfig,
'solarized-light': solarizedLightConfig,
'tokyo-night-day': tokyoNightDayConfig,
};
/**
* 根据主题名称获取主题配置
*/
export function getThemeConfig(themeName: string): ThemeColors | null {
return themeConfigMap[themeName] || null;
}
/**
* 根据自定义颜色配置创建主题
*/
export function createThemeByColors(colors: ThemeColors): Extension {
return createBaseTheme(colors);
}