Start of themes development

server/scripts/index.mjs

@@ -6,6 +6,7 @@ import {
 import { round2 } from './modules/utils/units.mjs';
 import { registerHiddenSetting } from './modules/share.mjs';
 import settings from './modules/settings.mjs';
+import './modules/utils/theme.mjs';
 import AutoComplete from './modules/autocomplete.mjs';
 import { loadAllData } from './modules/utils/data-loader.mjs';
 import { debugFlag } from './modules/utils/debug.mjs';

server/scripts/modules/utils/theme.mjs

@@ -0,0 +1,69 @@
+const THEME_STORAGE_KEY = 'settings-theme-select';
+const DEFAULT_THEME = 'default';
+const BUILTIN_ASSETS = {
+	background1: '../images/backgrounds/1.png',
+	background2: '../images/backgrounds/2.png',
+	logoCorner: 'images/logos/logo-corner.png',
+};
+
+const getThemeAssets = () => window.WS4KP_THEME_ASSETS ?? {};
+const getAvailableThemes = () => window.WS4KP_THEMES ?? [DEFAULT_THEME];
+
+const getStoredTheme = () => {
+	const storedTheme = localStorage.getItem(THEME_STORAGE_KEY) ?? DEFAULT_THEME;
+	return getAvailableThemes().includes(storedTheme) ? storedTheme : DEFAULT_THEME;
+};
+
+const getThemeAssetUrl = (themeName, assetKey) => {
+	if (themeName === DEFAULT_THEME) {
+		return BUILTIN_ASSETS[assetKey];
+	}
+
+	const themeAssetAvailability = getThemeAssets()[themeName] ?? {};
+	if (!themeAssetAvailability[assetKey]) {
+		return BUILTIN_ASSETS[assetKey];
+	}
+
+	switch (assetKey) {
+		case 'background1':
+			return `../themes/${themeName}/1.png`;
+		case 'background2':
+			return `../themes/${themeName}/2.png`;
+		case 'logoCorner':
+			return `themes/${themeName}/logo-corner.png`;
+		default:
+			return BUILTIN_ASSETS[assetKey];
+	}
+};
+
+const applyTheme = (themeName) => {
+	const selectedTheme = getAvailableThemes().includes(themeName) ? themeName : DEFAULT_THEME;
+	localStorage.setItem(THEME_STORAGE_KEY, selectedTheme);
+
+	document.documentElement.style.setProperty('--theme-background-1', `url('${getThemeAssetUrl(selectedTheme, 'background1')}')`);
+	document.documentElement.style.setProperty('--theme-background-2', `url('${getThemeAssetUrl(selectedTheme, 'background2')}')`);
+
+	document.querySelectorAll('.theme-logo').forEach((img) => {
+		img.src = getThemeAssetUrl(selectedTheme, 'logoCorner');
+	});
+
+	const select = document.querySelector('#theme-select');
+	if (select && select.value !== selectedTheme) {
+		select.value = selectedTheme;
+	}
+	return selectedTheme;
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+	applyTheme(getStoredTheme());
+	const select = document.querySelector('#theme-select');
+	if (!select) return;
+	select.addEventListener('change', (event) => applyTheme(event.target.value));
+	select.value = getStoredTheme();
+	applyTheme(select.value);
+});
+
+export {
+	applyTheme,
+	getStoredTheme,
+};

server/styles/scss/_extended-forecast.scss

@@ -2,7 +2,7 @@
 @use 'shared/_utils'as u;
 
 #extended-forecast-html.weather-display {
-	background-image: url('../images/backgrounds/2.png');
+	background-image: var(--theme-background-2);
 }
 
 .weather-display .main.extended-forecast {
@@ -69,4 +69,4 @@
 			}
 		}
 	}
-}
+}

server/styles/scss/_page.scss

@@ -328,6 +328,11 @@ body {
 	font-display: swap;
 }
 
+:root {
+	--theme-background-1: url('../images/backgrounds/1.png');
+	--theme-background-2: url('../images/backgrounds/2.png');
+}
+
 #display {
 	font-family: "Star4000";
 	margin: 0 0 0 0;
@@ -339,7 +344,7 @@ body {
 	width: 640px;
 	height: 480px;
 	// overflow: hidden;
-	background-image: url(../images/backgrounds/1.png);
+	background-image: var(--theme-background-1);
 	transform-origin: 0 0;
 	background-repeat: no-repeat;
 }
@@ -821,4 +826,4 @@ body.kiosk #loading .instructions {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	max-width: 250px;
-}
+}

server/styles/scss/_weather-display.scss

@@ -6,7 +6,7 @@
 	height: 480px;
 	overflow: hidden;
 	position: relative;
-	background-image: url(../images/backgrounds/1.png);
+	background-image: var(--theme-background-1);
 
 	/* this method is required to hide blocks so they can be measured while off screen */
 	height: 0px;