markmental/ws4kp-linhanced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish implementing themes, restore original assets to be the default
Some checks are pending
build-docker / Build Image (push) Waiting to run
Details

Browse source
This commit is contained in:
mrkmntal 2026-04-08 15:16:20 -04:00
commit 854d6ccc15
27 changed files with 44 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
server/scripts/modules/utils/theme.mjs
View file

@ -2,7 +2,11 @@ const THEME_STORAGE_KEY = 'settings-theme-select';
const DEFAULT_THEME = 'default';
const BUILTIN_ASSETS = {
background1: '../images/backgrounds/1.png',
background1Chart: '../images/backgrounds/1-chart.png',
background2: '../images/backgrounds/2.png',
background3: '../images/backgrounds/3.png',
background4: '../images/backgrounds/4.png',
background5: '../images/backgrounds/5.png',
logoCorner: 'images/logos/logo-corner.png',
};
@ -24,11 +28,19 @@ const getThemeAssetUrl = (themeName, assetKey) => {
return BUILTIN_ASSETS[assetKey];
}
switch (assetKey) {
switch (assetKey) {
case 'background1':
return `../themes/${themeName}/1.png`;
case 'background1Chart':
return `../themes/${themeName}/1-chart.png`;
case 'background2':
return `../themes/${themeName}/2.png`;
case 'background3':
return `../themes/${themeName}/3.png`;
case 'background4':
return `../themes/${themeName}/4.png`;
case 'background5':
return `../themes/${themeName}/5.png`;
case 'logoCorner':
return `themes/${themeName}/logo-corner.png`;
default:
@ -41,7 +53,11 @@ const applyTheme = (themeName) => {
localStorage.setItem(THEME_STORAGE_KEY, selectedTheme);
document.documentElement.style.setProperty('--theme-background-1', `url('${getThemeAssetUrl(selectedTheme, 'background1')}')`);
document.documentElement.style.setProperty('--theme-background-1-chart', `url('${getThemeAssetUrl(selectedTheme, 'background1Chart')}')`);
document.documentElement.style.setProperty('--theme-background-2', `url('${getThemeAssetUrl(selectedTheme, 'background2')}')`);
document.documentElement.style.setProperty('--theme-background-3', `url('${getThemeAssetUrl(selectedTheme, 'background3')}')`);
document.documentElement.style.setProperty('--theme-background-4', `url('${getThemeAssetUrl(selectedTheme, 'background4')}')`);
document.documentElement.style.setProperty('--theme-background-5', `url('${getThemeAssetUrl(selectedTheme, 'background5')}')`);
document.querySelectorAll('.theme-logo').forEach((img) => {
img.src = getThemeAssetUrl(selectedTheme, 'logoCorner');