diff --git a/index.html b/index.html
index d304317..0684736 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
-
+
diff --git a/src/App.vue b/src/App.vue
index 86c9489..e94754b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -107,7 +107,12 @@ const loadGlobalConfig = async () => {
if (data) {
// 恢复主题
if (data.theme) {
- setGlobalTheme(data.theme.primaryColor, data.theme.isDark);
+ setGlobalTheme(
+ data.theme.primaryColor,
+ data.theme.isDark,
+ data.theme.fontFamily,
+ data.theme.codeFontFamily
+ );
}
// 恢复历史记录
@@ -146,7 +151,9 @@ const saveGlobalConfig = async () => {
},
theme: {
primaryColor: primaryColor.value,
- isDark: isDark.value
+ isDark: isDark.value,
+ fontFamily: fontFamily.value,
+ codeFontFamily: codeFontFamily.value
}
});
}
@@ -172,7 +179,7 @@ const openDirectory = async (path) => {
await saveGlobalConfig();
};
-watch([primaryColor, isDark], async () => {
+watch([primaryColor, isDark, fontFamily, codeFontFamily], async () => {
antdTheme.value = getAntdTheme();
// 主题变化时保存
await saveGlobalConfig();
@@ -286,9 +293,11 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
应用字体
系统默认
- 霞鹜文楷 (LXGW WenKai)
+ 思源黑体 (Noto Sans)
思源宋体 (Noto Serif)
- 站酷快乐体 (演示用)
+ 霞鹜文楷 (LXGW WenKai)
+ 圆体 (M PLUS Rounded)
+ 丸黑 (Zen Maru Gothic)
@@ -296,6 +305,9 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
系统默认 (Monospace)
Fira Code
+ JetBrains Mono
+ Roboto Mono
+ Source Code Pro
diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js
index 1b50f1e..fca361a 100644
--- a/src/composables/useTheme.js
+++ b/src/composables/useTheme.js
@@ -43,12 +43,30 @@ export function useTheme() {
fontValue = '"Noto Serif SC", serif';
} else if (fontFamily.value === 'zcool') {
fontValue = '"ZCOOL KuaiLe", cursive';
+ } else if (fontFamily.value === 'mashan') {
+ fontValue = '"Ma Shan Zheng", cursive';
+ } else if (fontFamily.value === 'longcang') {
+ fontValue = '"Long Cang", cursive';
+ } else if (fontFamily.value === 'zhimangxing') {
+ fontValue = '"Zhi Mang Xing", cursive';
+ } else if (fontFamily.value === 'huangyou') {
+ fontValue = '"ZCOOL QingKe HuangYou", sans-serif';
+ } else if (fontFamily.value === 'xiaowei') {
+ fontValue = '"ZCOOL XiaoWei", serif';
+ } else if (fontFamily.value === 'maocao') {
+ fontValue = '"Liu Jian Mao Cao", cursive';
}
root.style.setProperty('--app-font-family', fontValue);
let codeFontValue = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace';
if (codeFontFamily.value === 'fira') {
codeFontValue = '"Fira Code", monospace';
+ } else if (codeFontFamily.value === 'jetbrains') {
+ codeFontValue = '"JetBrains Mono", monospace';
+ } else if (codeFontFamily.value === 'roboto') {
+ codeFontValue = '"Roboto Mono", monospace';
+ } else if (codeFontFamily.value === 'source') {
+ codeFontValue = '"Source Code Pro", monospace';
}
root.style.setProperty('--editor-font-family', codeFontValue);
@@ -79,6 +97,20 @@ export function useTheme() {
const borderColor = isDark.value ? '#303030' : '#f0f0f0';
const hoverBackground = isDark.value ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
+ // 获取当前对应的字体栈字符串
+ let fontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
+ if (fontFamily.value === 'lxgw') fontStack = '"LXGW WenKai Screen", sans-serif';
+ else if (fontFamily.value === 'serif') fontStack = '"Noto Serif SC", serif';
+ else if (fontFamily.value === 'sans') fontStack = '"Noto Sans SC", sans-serif';
+ else if (fontFamily.value === 'rounded') fontStack = '"M PLUS Rounded 1c", sans-serif';
+ else if (fontFamily.value === 'zen') fontStack = '"Zen Maru Gothic", sans-serif';
+
+ let codeFontStack = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace';
+ if (codeFontFamily.value === 'fira') codeFontStack = '"Fira Code", monospace';
+ else if (codeFontFamily.value === 'jetbrains') codeFontStack = '"JetBrains Mono", monospace';
+ else if (codeFontFamily.value === 'roboto') codeFontStack = '"Roboto Mono", monospace';
+ else if (codeFontFamily.value === 'source') codeFontStack = '"Source Code Pro", monospace';
+
return {
algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: {
@@ -95,9 +127,11 @@ export function useTheme() {
};
};
- const setGlobalTheme = (color, dark) => {
+ const setGlobalTheme = (color, dark, font, codeFont) => {
if (color) primaryColor.value = color;
if (typeof dark === 'boolean') isDark.value = dark;
+ if (font) fontFamily.value = font;
+ if (codeFont) codeFontFamily.value = codeFont;
updateCSSVariables();
};
diff --git a/src/main.css b/src/main.css
index 280b584..ff66bcb 100644
--- a/src/main.css
+++ b/src/main.css
@@ -27,7 +27,7 @@ body {
color: var(--text-color);
font-size: var(--app-font-size);
line-height: 1.5;
- font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif;
+ font-family: var(--app-font-family, "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif);
}
button {