MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: change theme handling to support element-ui scss variables

Browse Source
This commit is contained in:
pa
2025-07-27 21:39:10 +09:00
committed by Natsumi
parent 96dfe2fcef
commit def96c1a4d
6 changed files with 91 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/shared/constants/index.js
View File

@@ -9,3 +9,4 @@ export * from './user';
export * from './instance';
export * from './world';
export * from './moderation';
export * from './themes';

39
src/shared/constants/themes.js Normal file
View File

@@ -0,0 +1,39 @@
export const THEME_CONFIG = {
system: {
cssFile: '',
requiresDarkBase: false,
isDark: 'system',
name: 'System'
},
light: {
cssFile: '',
requiresDarkBase: false,
isDark: false,
name: 'Light'
},
dark: { cssFile: '', requiresDarkBase: true, isDark: true, name: 'Dark' },
darkvanillaold: {
cssFile: 'theme.darkvanillaold.css',
requiresDarkBase: true,
isDark: true,
name: 'Dark Vanilla Old'
},
darkvanilla: {
cssFile: 'theme.darkvanilla.css',
requiresDarkBase: true,
isDark: true,
name: 'Dark Vanilla'
},
pink: {
cssFile: 'theme.pink.css',
requiresDarkBase: true,
isDark: true,
name: 'Pink'
},
material3: {
cssFile: 'theme.material3.css',
requiresDarkBase: true,
isDark: true,
name: 'Material 3'
}
};

83
src/shared/utils/base/ui.js
View File

@@ -1,5 +1,6 @@
import { storeToRefs } from 'pinia';
import { useAppearanceSettingsStore } from '../../../stores';
import { THEME_CONFIG } from '../../constants';
/**
*
@@ -21,43 +22,10 @@ function changeAppDarkStyle(isDark) {
}
}
/**
*
* @param {string} themeMode
* @returns
*/
function changeAppThemeStyle(themeMode) {
const themeStyle = {};
switch (themeMode) {
case 'light':
themeStyle.href = '';
break;
case 'dark':
themeStyle.href = '';
break;
case 'darkvanillaold':
themeStyle.href = 'theme.darkvanillaold.css';
break;
case 'darkvanilla':
themeStyle.href = 'theme.darkvanilla.css';
break;
case 'pink':
themeStyle.href = 'theme.pink.css';
break;
case 'material3':
themeStyle.href = 'theme.material3.css';
break;
case 'system':
themeStyle.href = '';
break;
}
const themeConfig = THEME_CONFIG[themeMode];
if (!themeConfig) return;
/**
* prevents flickering
* giving absolute paths does prevent flickering
* when switching from another dark theme to 'dark' theme
* <del>works on my machine</del>
*/
let filePathPrefix = 'file://vrcx/';
if (LINUX) {
filePathPrefix = './';
@@ -70,38 +38,35 @@ function changeAppThemeStyle(themeMode) {
$appThemeStyle.rel = 'stylesheet';
document.head.appendChild($appThemeStyle);
}
$appThemeStyle.href = themeStyle.href
? `${filePathPrefix}${themeStyle.href}`
$appThemeStyle.href = themeConfig.cssFile
? `${filePathPrefix}${themeConfig.cssFile}`
: '';
let $appThemeDarkStyle = document.getElementById('app-theme-dark-style');
const darkThemeCssPath = `${filePathPrefix}theme.dark.css`;
const shouldApplyDarkBase =
themeConfig.requiresDarkBase ||
(themeMode === 'system' && systemIsDarkMode());
if (!$appThemeDarkStyle && themeMode !== 'light') {
if (themeMode === 'system' && !systemIsDarkMode()) {
return;
if (shouldApplyDarkBase) {
if (!$appThemeDarkStyle) {
$appThemeDarkStyle = document.createElement('link');
$appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style');
$appThemeDarkStyle.rel = 'stylesheet';
$appThemeDarkStyle.href = darkThemeCssPath;
document.head.insertBefore($appThemeDarkStyle, $appThemeStyle);
} else if ($appThemeDarkStyle.href !== darkThemeCssPath) {
$appThemeDarkStyle.href = darkThemeCssPath;
}
$appThemeDarkStyle = document.createElement('link');
$appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style');
$appThemeDarkStyle.rel = 'stylesheet';
$appThemeDarkStyle.href = darkThemeCssPath;
document.head.insertBefore($appThemeDarkStyle, $appThemeStyle);
} else {
if (themeMode === 'system' && systemIsDarkMode()) {
if ($appThemeDarkStyle.href === darkThemeCssPath) {
return;
}
$appThemeDarkStyle.href = darkThemeCssPath;
} else if (themeMode !== 'light' && themeMode !== 'system') {
if ($appThemeDarkStyle.href === darkThemeCssPath) {
return;
}
$appThemeDarkStyle.href = darkThemeCssPath;
} else {
$appThemeDarkStyle && $appThemeDarkStyle.remove();
}
$appThemeDarkStyle && $appThemeDarkStyle.remove();
}
let isDarkForExternalApp = themeConfig.isDark;
if (isDarkForExternalApp === 'system') {
isDarkForExternalApp = systemIsDarkMode();
}
changeAppDarkStyle(isDarkForExternalApp);
}
/**