Start of themes development

views/index.ejs

@@ -31,6 +31,10 @@
     window.WS4KP_SERVER_AVAILABLE = true;
   </script>
   <% } %>
+  <script type="text/javascript">
+    window.WS4KP_THEMES = <%- JSON.stringify(themes ?? ['default']) %>;
+    window.WS4KP_THEME_ASSETS = <%- JSON.stringify(themeAssets ?? {}) %>;
+  </script>
 
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
@@ -180,6 +184,14 @@
     <div class="info">
       <a href="https://mentalnet.xyz/forgejo/markmental/ws4kp-linhanced">More information</a>
     </div>
+    <div class="info">
+      <label for="theme-select">Theme</label>
+      <select id="theme-select" name="theme-select">
+        <% (themes ?? ['default']).forEach((themeName) => { %>
+          <option value="<%= themeName %>"><%= themeName === 'default' ? 'Default' : themeName %></option>
+        <% }) %>
+      </select>
+    </div>
     <div class="media"></div>
 
     <div class='heading'>Selected displays</div>

views/partials/header.ejs

@@ -1,5 +1,5 @@
 <div class="header">
-	<div class="logo"><img src="images/logos/logo-corner.png" /></div>
+	<div class="logo"><img class="theme-logo" src="images/logos/logo-corner.png" /></div>
 	<% if (locals?.titleDual) { %>
 		<div class="title dual">
 			<div class="top">
@@ -25,4 +25,4 @@
 								<img src="images/logos/noaa.gif" />
 							</div>
 							<%}%>
-</div>
+</div>

views/partials/radar.ejs

@@ -1,5 +1,5 @@
 <div class="header">
-	<div class="logo"><img src="images/logos/logo-corner.png" /></div>
+	<div class="logo"><img class="theme-logo" src="images/logos/logo-corner.png" /></div>
 	<div class="title dual">
 		<div class="top">
 			Local