fix fonts error

This commit is contained in:
pa
2025-11-25 22:47:16 +09:00
committed by Natsumi
parent 5090cedf38
commit fa6eb2a3e1
5 changed files with 44 additions and 18 deletions

15
package-lock.json generated
View File

@@ -18,11 +18,11 @@
"@fontsource/noto-sans-sc": "^5.2.8",
"@fontsource/noto-sans-tc": "^5.2.8",
"@kamiya4047/eslint-plugin-pretty-import": "^0.1.6",
"@sentry/vite-plugin": "^4.6.0",
"@sentry/vue": "^10.25.0",
"@sentry/vite-plugin": "^4.6.1",
"@sentry/vue": "^10.27.0",
"@types/jest": "^30.0.0",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue": "^6.0.2",
"@vueuse/core": "^14.0.0",
"animate.css": "^4.1.1",
"babel-runtime": "^6.26.0",
@@ -30,7 +30,7 @@
"cross-env": "^10.1.0",
"dayjs": "^1.11.19",
"echarts": "^6.0.0",
"electron": "^39.2.1",
"electron": "^39.2.3",
"electron-builder": "^26.0.12",
"element-plus": "^2.11.8",
"esbuild-jest": "^0.5.0",
@@ -46,9 +46,9 @@
"prettier": "^3.6.2",
"remixicon": "^4.7.0",
"sass-embedded": "^1.93.3",
"vite": "^7.2.2",
"vue": "^3.5.24",
"vue-i18n": "^11.1.12",
"vite": "^7.2.4",
"vue": "^3.5.25",
"vue-i18n": "^11.2.1",
"vue-marquee-text-component": "^2.0.1",
"vue-router": "^4.6.3",
"vue-showdown": "^4.2.0",
@@ -7999,6 +7999,7 @@
"integrity": "sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"app-builder-lib": "26.0.12",
"builder-util": "26.0.11",

View File

@@ -39,11 +39,11 @@
"@fontsource/noto-sans-sc": "^5.2.8",
"@fontsource/noto-sans-tc": "^5.2.8",
"@kamiya4047/eslint-plugin-pretty-import": "^0.1.6",
"@sentry/vite-plugin": "^4.6.0",
"@sentry/vue": "^10.25.0",
"@sentry/vite-plugin": "^4.6.1",
"@sentry/vue": "^10.27.0",
"@types/jest": "^30.0.0",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue": "^6.0.2",
"@vueuse/core": "^14.0.0",
"animate.css": "^4.1.1",
"babel-runtime": "^6.26.0",
@@ -51,7 +51,7 @@
"cross-env": "^10.1.0",
"dayjs": "^1.11.19",
"echarts": "^6.0.0",
"electron": "^39.2.1",
"electron": "^39.2.3",
"electron-builder": "^26.0.12",
"element-plus": "^2.11.8",
"esbuild-jest": "^0.5.0",
@@ -67,9 +67,9 @@
"prettier": "^3.6.2",
"remixicon": "^4.7.0",
"sass-embedded": "^1.93.3",
"vite": "^7.2.2",
"vue": "^3.5.24",
"vue-i18n": "^11.1.12",
"vite": "^7.2.4",
"vue": "^3.5.25",
"vue-i18n": "^11.2.1",
"vue-marquee-text-component": "^2.0.1",
"vue-router": "^4.6.3",
"vue-showdown": "^4.2.0",

View File

@@ -3,9 +3,6 @@
* https://github.com/kamiya10/VRCX-theme
*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
body {
--md-sys-color-primary: 208, 188, 255;
--md-sys-color-on-primary: 55, 30, 115;

View File

@@ -43,6 +43,10 @@ export const THEME_CONFIG = {
material3: {
cssFile: material3,
isDark: true,
name: 'Material 3'
name: 'Material 3',
fontLinks: [
'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap',
'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
]
}
};

View File

@@ -26,6 +26,28 @@ function changeAppDarkStyle(isDark) {
}
}
function applyThemeFonts(themeKey, fontLinks = []) {
document
.querySelectorAll('link[data-theme-font]')
.forEach((linkEl) => linkEl.remove());
if (!fontLinks?.length) {
return;
}
const head = document.head;
fontLinks.forEach((href) => {
if (!href) {
return;
}
const fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href = href;
fontLink.dataset.themeFont = themeKey;
head.appendChild(fontLink);
});
}
function changeAppThemeStyle(themeMode) {
if (themeMode === 'system') {
themeMode = systemIsDarkMode() ? 'dark' : 'light';
@@ -57,6 +79,8 @@ function changeAppThemeStyle(themeMode) {
}
$appThemeStyle.href = themeConfig.cssFile ? themeConfig.cssFile : '';
applyThemeFonts(themeMode, themeConfig.fontLinks);
if (themeConfig.isDark) {
document.documentElement.classList.add('dark');
} else {