🎨 Optimize preset theme code
This commit is contained in:
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#21202e',
|
||||
backgroundSecondary: '#21202e',
|
||||
backgroundSecondary: '#2B2A3BFF',
|
||||
surface: '#21202e',
|
||||
dropdownBackground: '#21202e',
|
||||
dropdownBorder: '#3b334b',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#282A36',
|
||||
backgroundSecondary: '#282A36',
|
||||
backgroundSecondary: '#323543FF',
|
||||
surface: '#282A36',
|
||||
dropdownBackground: '#282A36',
|
||||
dropdownBorder: '#191A21',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#24292e',
|
||||
backgroundSecondary: '#24292e',
|
||||
backgroundSecondary: '#2E343BFF',
|
||||
surface: '#24292e',
|
||||
dropdownBackground: '#24292e',
|
||||
dropdownBorder: '#1b1f23',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#263238',
|
||||
backgroundSecondary: '#263238',
|
||||
backgroundSecondary: '#2D3E46FF',
|
||||
surface: '#263238',
|
||||
dropdownBackground: '#263238',
|
||||
dropdownBorder: '#FFFFFF10',
|
||||
|
||||
@@ -15,7 +15,7 @@ const chalky = "#e5c07b",
|
||||
whiskey = "#d19a66",
|
||||
violet = "#c678dd",
|
||||
darkBackground = "#21252b",
|
||||
highlightBackground = "#2c313a",
|
||||
highlightBackground = "#313949FF",
|
||||
background = "#282c34",
|
||||
tooltipBackground = "#353a42",
|
||||
selection = "#3E4451",
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#002B36',
|
||||
backgroundSecondary: '#002B36',
|
||||
backgroundSecondary: '#003643FF',
|
||||
surface: '#002B36',
|
||||
dropdownBackground: '#002B36',
|
||||
dropdownBorder: '#2AA19899',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#24283b',
|
||||
backgroundSecondary: '#24283b',
|
||||
backgroundSecondary: '#2B3151FF',
|
||||
surface: '#24283b',
|
||||
dropdownBackground: '#24283b',
|
||||
dropdownBorder: '#7982a9',
|
||||
|
||||
@@ -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
12
frontend/src/views/editor/theme/index.ts
Normal 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);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#fff',
|
||||
backgroundSecondary: '#fff',
|
||||
backgroundSecondary: '#f1faf1',
|
||||
surface: '#fff',
|
||||
dropdownBackground: '#fff',
|
||||
dropdownBorder: '#e1e4e8',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#FAFAFA',
|
||||
backgroundSecondary: '#FAFAFA',
|
||||
backgroundSecondary: '#f1faf1',
|
||||
surface: '#FAFAFA',
|
||||
dropdownBackground: '#FAFAFA',
|
||||
dropdownBorder: '#00000010',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#FDF6E3',
|
||||
backgroundSecondary: '#FDF6E3',
|
||||
backgroundSecondary: '#FFEEBCD4',
|
||||
surface: '#FDF6E3',
|
||||
dropdownBackground: '#FDF6E3',
|
||||
dropdownBorder: '#D3AF86',
|
||||
|
||||
@@ -8,7 +8,7 @@ export const config: ThemeColors = {
|
||||
|
||||
// 基础色调
|
||||
background: '#e1e2e7',
|
||||
backgroundSecondary: '#e1e2e7',
|
||||
backgroundSecondary: '#D2D8EFFF',
|
||||
surface: '#e1e2e7',
|
||||
dropdownBackground: '#e1e2e7',
|
||||
dropdownBorder: '#6a6f8e',
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user