Finish implementing themes, restore original assets to be the default

README.md

@@ -29,6 +29,18 @@ This fork is focused on:
 * global radar and global regional observations on the newer map stack
 * pragmatic feature additions instead of broad platform expansion
 
+## Themes
+
+`ws4kp-linhanced` supports live asset theme swapping from the main page. Themes are discovered automatically from the `themes/` directory and can be changed from the `Theme` selector under the `More information` link without reloading the page.
+
+Current themes include:
+
+* `Default`: the standard WeatherStar 4000+ asset set.
+* `oceanview`: based on the Oceanview Weather Channel presentation from the Eventide Media Center analog horror series.
+* `slackware`: based on the Oceanview theme, but with the Slackware Linux badge/logo treatment.
+
+At the moment, theming covers the major background assets and the corner logo. Additional theme asset overrides can be added by placing matching files in `themes/<theme-name>/`.
+
 ## What's your motivation
 
 Nostalgia, Linux affinity, and an interest in keeping a practical retro weather display alive without turning it into a sprawling platform.

server/scripts/modules/utils/theme.mjs

@@ -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',
 };
 
@@ -27,8 +31,16 @@ const getThemeAssetUrl = (themeName, 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');

server/styles/scss/_almanac.scss

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

server/styles/scss/_hourly-graph.scss

@@ -2,7 +2,7 @@
 @use 'shared/_utils'as u;
 
 #hourly-graph-html {
-	background-image: url(../images/backgrounds/1-chart.png);
+	background-image: var(--theme-background-1-chart);
 
 	.header {
 		.right {

server/styles/scss/_page.scss

@@ -330,7 +330,11 @@ body {
 
 :root {
 	--theme-background-1: url('../images/backgrounds/1.png');
+	--theme-background-1-chart: url('../images/backgrounds/1-chart.png');
 	--theme-background-2: url('../images/backgrounds/2.png');
+	--theme-background-3: url('../images/backgrounds/3.png');
+	--theme-background-4: url('../images/backgrounds/4.png');
+	--theme-background-5: url('../images/backgrounds/5.png');
 }
 
 #display {

server/styles/scss/_radar.scss

@@ -2,7 +2,7 @@
 @use 'shared/_utils'as u;
 
 #radar-html.weather-display {
-	background-image: url('../images/backgrounds/4.png');
+	background-image: var(--theme-background-4);
 
 	.header {
 		height: 83px;

server/styles/scss/_regional-forecast.scss

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

src/theme-discovery.mjs

@@ -13,7 +13,11 @@ const discoverThemes = async () => {
 			const files = await readdir(path.join(THEMES_DIR, themeName));
 			themeAssets[themeName] = {
 				background1: files.includes('1.png'),
+				background1Chart: files.includes('1-chart.png'),
 				background2: files.includes('2.png'),
+				background3: files.includes('3.png'),
+				background4: files.includes('4.png'),
+				background5: files.includes('5.png'),
 				logoCorner: files.includes('logo-corner.png'),
 			};
 		}));