github/VRCX
1
1
Fork 0
mirror of https://github.com/vrcx-team/VRCX.git synced 2026-04-06 00:32:02 +02:00
Code Issues 51 Packages Projects Releases Wiki Activity

tidy up

Browse Source
This commit is contained in:
pa
2026-01-11 20:11:54 +09:00
committed by Natsumi
parent 782402c75b
commit 8460c51706
4 changed files with 5 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -384,7 +384,7 @@ html.dark,
}
}
:root[data-theme='darkgrey'] {
:root[data-theme='dark'] {
--el-bg-color: var(--color-neutral-900);
--el-bg-color-page: var(--color-neutral-900);
--el-bg-color-overlay: var(--color-neutral-800);

2
src/localization/en.json
View File

@@ -551,7 +551,7 @@
"theme_mode_system": "System",
"theme_mode_light": "Light",
"theme_mode_dark": "Dark",
"theme_mode_darkgrey": "Dark Grey",
"theme_mode_midnight": "Midnight",
"theme_mode_blue": "Blue",
"theme_mode_darkblue": "Dark Blue",
"theme_mode_amoled": "Amoled",

61
src/shared/constants/themes.js
View File

@@ -1,75 +1,18 @@
import appCss from '../../app.css?url';
// import appLegacy from '../../assets/scss/themes/app_legacy.scss?url';
// import material3 from '../../assets/scss/themes/theme.material3.scss?url';
export const THEME_CONFIG = {
system: {
cssFiles: [appCss],
isDark: 'system',
name: 'System'
},
light: {
cssFiles: [appCss],
isDark: false,
useDarkClass: false,
name: 'Light'
},
dark: {
cssFiles: [appCss],
isDark: true,
useDarkClass: true,
name: 'Dark'
},
darkgrey: {
cssFiles: [appCss],
midnight: {
isDark: true,
useDarkClass: true,
name: 'Dark Grey'
name: 'Midnight'
}
// darkold: {
// cssFiles: [appLegacy, dark],
// isDark: true,
// useDarkClass: false,
// name: 'Dark (Old)'
// },
// darkblue: {
// cssFiles: [appLegacy, darkblue],
// isDark: true,
// useDarkClass: false,
// name: 'Dark Blue'
// },
// amoled: {
// cssFiles: [appLegacy, amoled],
// isDark: true,
// useDarkClass: false,
// name: 'Amoled'
// },
// darkvanillaold: {
// cssFiles: [appLegacy, darkvanillaold],
// isDark: true,
// useDarkClass: false,
// name: 'Dark Vanilla Old'
// },
// darkvanilla: {
// cssFiles: [appLegacy, darkvanilla],
// isDark: true,
// useDarkClass: false,
// name: 'Dark Vanilla'
// },
// pink: {
// cssFiles: [appLegacy, pink],
// isDark: true,
// useDarkClass: false,
// name: 'Pink'
// },
// material3: {
// cssFiles: [appLegacy, material3],
// isDark: true,
// useDarkClass: false,
// 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'
// ]
// }
};

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

@@ -50,25 +50,6 @@ function applyThemeFonts(themeKey, fontLinks = []) {
});
}
function ensureStylesheetLink(id) {
const linkEl = /** @type {HTMLLinkElement | null} */ (
document.getElementById(id)
);
if (!linkEl) {
const created = document.createElement('link');
created.setAttribute('id', id);
created.rel = 'stylesheet';
document.head.appendChild(created);
return created;
}
return linkEl;
}
function removeStylesheetLink(id) {
const linkEl = document.getElementById(id);
linkEl?.remove();
}
function changeAppThemeStyle(themeMode) {
if (themeMode === 'system') {
themeMode = systemIsDarkMode() ? 'dark' : 'light';
@@ -83,36 +64,11 @@ function changeAppThemeStyle(themeMode) {
themeConfig = THEME_CONFIG[themeMode];
}
const cssFiles = Array.isArray(themeConfig.cssFiles)
? themeConfig.cssFiles.filter(Boolean)
: themeConfig.cssFile
? [themeConfig.cssFile]
: [];
if (cssFiles.length > 0) {
const $appThemeStyle = ensureStylesheetLink('app-theme-style');
$appThemeStyle.href = cssFiles[0];
} else {
removeStylesheetLink('app-theme-style');
}
if (cssFiles.length > 1) {
const $appThemeOverlayStyle = ensureStylesheetLink(
'app-theme-overlay-style'
);
$appThemeOverlayStyle.href = cssFiles[1];
} else {
removeStylesheetLink('app-theme-overlay-style');
}
applyThemeFonts(themeMode, themeConfig.fontLinks);
document.documentElement.setAttribute('data-theme', themeMode);
const shouldUseDarkClass =
typeof themeConfig.useDarkClass === 'boolean'
? themeConfig.useDarkClass
: Boolean(themeConfig.isDark);
const shouldUseDarkClass = Boolean(themeConfig.isDark);
if (shouldUseDarkClass) {
document.documentElement.classList.add('dark');
} else {