From c8e90fccbf19cace0f5dc5a56dc2eaf65a099a9b Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Sun, 15 Feb 2026 17:06:01 +0100
Subject: [PATCH] fix(demo): remove public theme switching

---
 frontend/src/layouts/Layout.astro       |  4 +-
 frontend/src/layouts/PublicLayout.astro | 78 +----------------------
 frontend/src/pages/settings.astro       | 82 ++++++++++++++++---------
 3 files changed, 59 insertions(+), 105 deletions(-)

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 408427c..e6954b7 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -36,9 +36,9 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <title>{title} | Likwid</title>
-    <script is:inline define:vars={{ themes, defaultTheme }}>
+    <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
       (function() {
-        const saved = localStorage.getItem('likwid-theme') || defaultTheme;
+        const saved = publicDemoSite ? defaultTheme : (localStorage.getItem('likwid-theme') || defaultTheme);
         const theme = themes[saved] || themes[defaultTheme];
         const root = document.documentElement;
         const c = theme.colors;
diff --git a/frontend/src/layouts/PublicLayout.astro b/frontend/src/layouts/PublicLayout.astro
index 358ecf7..fa379b5 100644
--- a/frontend/src/layouts/PublicLayout.astro
+++ b/frontend/src/layouts/PublicLayout.astro
@@ -35,9 +35,9 @@ const defaultTheme = DEFAULT_THEME;
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <title>{title} | Likwid</title>
-    <script is:inline define:vars={{ themes, defaultTheme }}>
+    <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
       (function() {
-        const saved = localStorage.getItem('likwid-theme') || defaultTheme;
+        const saved = publicDemoSite ? defaultTheme : (localStorage.getItem('likwid-theme') || defaultTheme);
         const theme = themes[saved] || themes[defaultTheme];
         const root = document.documentElement;
         const c = theme.colors;
@@ -103,11 +103,6 @@ const defaultTheme = DEFAULT_THEME;
               <a href="/docs">Documentation</a>
             </div>
             <div class="nav-actions">
-              <select id="theme-select" class="theme-select" aria-label="Theme">
-                {Object.values(themeRegistry).map((t) => (
-                  <option value={t.id}>{t.name}</option>
-                ))}
-              </select>
               <a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
               {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
             </div>
@@ -154,10 +149,9 @@ const defaultTheme = DEFAULT_THEME;
         </div>
       </footer>
     </div>
-    <script is:inline define:vars={{ themes, defaultTheme }}>
+    <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
       const nav = document.getElementById('public-nav');
       const toggle = document.getElementById('public-nav-toggle');
-      const themeSelect = document.getElementById('theme-select');
 
       function openNav() {
         if (!nav || !toggle) return;
@@ -239,58 +233,6 @@ const defaultTheme = DEFAULT_THEME;
           }
         });
       }
-
-      function applySelectedTheme() {
-        if (!(themeSelect instanceof HTMLSelectElement)) return;
-        const selected = themeSelect.value || defaultTheme;
-        const theme = themes[selected] || themes[defaultTheme];
-        const root = document.documentElement;
-        const c = theme.colors;
-        root.style.setProperty('--color-bg', c.bg);
-        root.style.setProperty('--color-bg-alt', c.bgAlt);
-        root.style.setProperty('--color-surface', c.surface);
-        root.style.setProperty('--color-surface-hover', c.surfaceHover);
-        root.style.setProperty('--color-border', c.border);
-        root.style.setProperty('--color-border-hover', c.borderHover);
-        root.style.setProperty('--color-text', c.text);
-        root.style.setProperty('--color-text-muted', c.textMuted);
-        root.style.setProperty('--color-text-inverse', c.textInverse);
-        root.style.setProperty('--color-primary', c.primary);
-        root.style.setProperty('--color-primary-hover', c.primaryHover);
-        root.style.setProperty('--color-primary-muted', c.primaryMuted);
-        root.style.setProperty('--color-secondary', c.secondary);
-        root.style.setProperty('--color-secondary-hover', c.secondaryHover);
-        root.style.setProperty('--color-info', c.info);
-        root.style.setProperty('--color-info-hover', c.infoHover);
-        root.style.setProperty('--color-info-muted', c.infoMuted);
-        root.style.setProperty('--color-neutral', c.neutral);
-        root.style.setProperty('--color-neutral-hover', c.neutralHover);
-        root.style.setProperty('--color-neutral-muted', c.neutralMuted);
-        root.style.setProperty('--color-success', c.success);
-        root.style.setProperty('--color-success-muted', c.successMuted);
-        root.style.setProperty('--color-success-hover', c.successHover);
-        root.style.setProperty('--color-warning', c.warning);
-        root.style.setProperty('--color-warning-muted', c.warningMuted);
-        root.style.setProperty('--color-error', c.error);
-        root.style.setProperty('--color-error-muted', c.errorMuted);
-        root.style.setProperty('--color-error-hover', c.errorHover);
-        root.style.setProperty('--color-link', c.link);
-        root.style.setProperty('--color-link-visited', c.linkVisited);
-        root.style.setProperty('--color-overlay', c.overlay);
-        root.style.setProperty('--color-field-bg', c.fieldBg);
-        root.style.setProperty('--color-on-primary', c.onPrimary);
-        root.setAttribute('data-theme', selected);
-        root.setAttribute('data-theme-mode', theme.isDark ? 'dark' : 'light');
-      }
-
-      if (themeSelect instanceof HTMLSelectElement) {
-        const saved = localStorage.getItem('likwid-theme') || defaultTheme;
-        themeSelect.value = themes[saved] ? saved : defaultTheme;
-        themeSelect.addEventListener('change', () => {
-          localStorage.setItem('likwid-theme', themeSelect.value);
-          applySelectedTheme();
-        });
-      }
     </script>
   </body>
 </html>
@@ -449,20 +391,6 @@ const defaultTheme = DEFAULT_THEME;
     align-items: center;
   }
 
-  .theme-select {
-    width: auto;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.875rem;
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    color: var(--color-text);
-  }
-
-  .theme-select:hover {
-    border-color: var(--color-border-hover);
-  }
-
   .public-main {
     flex: 1;
   }
diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro
index 977d358..067e323 100644
--- a/frontend/src/pages/settings.astro
+++ b/frontend/src/pages/settings.astro
@@ -1,6 +1,14 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import { API_BASE as apiBase } from '../lib/api';
+
+function isEnabled(v: string | undefined): boolean {
+  if (!v) return false;
+  const n = v.trim().toLowerCase();
+  return n === '1' || n === 'true' || n === 'yes' || n === 'on';
+}
+
+const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_SITE);
 ---
 
 <Layout title="Settings">
@@ -13,7 +21,7 @@ import { API_BASE as apiBase } from '../lib/api';
   </section>
 </Layout>
 
-<script define:vars={{ apiBase }}>
+<script define:vars={{ apiBase, publicDemoSite }}>
   import { getAllThemes, loadSavedTheme, saveTheme } from '../lib/themes';
 
   const token = localStorage.getItem('token');
@@ -42,36 +50,50 @@ import { API_BASE as apiBase } from '../lib/api';
 
       const user = await res.json();
 
-      const currentTheme = loadSavedTheme();
-      const themeOptions = getAllThemes()
-        .map((t) => {
-          const selected = t.id === currentTheme ? 'selected' : '';
-          return `<option value="${t.id}" ${selected}>${t.name}</option>`;
-        })
-        .join('');
-
-      container.innerHTML = `
-        <div class="form-section ui-card ui-card-pad-lg ui-form">
-          <h2>Appearance</h2>
-          
-          <div class="form-group">
-            <label for="theme-select">Theme</label>
-            <select id="theme-select" class="theme-select">
-              ${themeOptions}
-            </select>
-            <p class="hint">Choose a visual theme for the interface</p>
+      let appearanceHtml = '';
+      if (publicDemoSite) {
+        appearanceHtml = `
+          <div class="form-section ui-card ui-card-pad-lg ui-form">
+            <h2>Appearance</h2>
+            <p class="hint">On the public demo, appearance is managed by the instance administrator.</p>
           </div>
+        `;
+      } else {
+        const currentTheme = loadSavedTheme();
+        const themeOptions = getAllThemes()
+          .map((t) => {
+            const selected = t.id === currentTheme ? 'selected' : '';
+            return `<option value="${t.id}" ${selected}>${t.name}</option>`;
+          })
+          .join('');
 
-          <div id="theme-preview" class="theme-preview">
-            <div class="preview-colors">
-              <span class="preview-swatch preview-bg" title="Background"></span>
-              <span class="preview-swatch preview-surface" title="Surface"></span>
-              <span class="preview-swatch preview-primary" title="Primary"></span>
-              <span class="preview-swatch preview-success" title="Success"></span>
-              <span class="preview-swatch preview-error" title="Error"></span>
+        appearanceHtml = `
+          <div class="form-section ui-card ui-card-pad-lg ui-form">
+            <h2>Appearance</h2>
+            
+            <div class="form-group">
+              <label for="theme-select">Theme</label>
+              <select id="theme-select" class="theme-select">
+                ${themeOptions}
+              </select>
+              <p class="hint">Choose a visual theme for the interface</p>
+            </div>
+
+            <div id="theme-preview" class="theme-preview">
+              <div class="preview-colors">
+                <span class="preview-swatch preview-bg" title="Background"></span>
+                <span class="preview-swatch preview-surface" title="Surface"></span>
+                <span class="preview-swatch preview-primary" title="Primary"></span>
+                <span class="preview-swatch preview-success" title="Success"></span>
+                <span class="preview-swatch preview-error" title="Error"></span>
+              </div>
             </div>
           </div>
-        </div>
+        `;
+      }
+
+      container.innerHTML = `
+        ${appearanceHtml}
 
         <form id="profile-form" class="settings-form">
           <div class="form-section ui-card ui-card-pad-lg ui-form">
@@ -99,7 +121,9 @@ import { API_BASE as apiBase } from '../lib/api';
         </div>
       `;
 
-      setupThemeSwitcher();
+      if (!publicDemoSite) {
+        setupThemeSwitcher();
+      }
 
       document.getElementById('profile-form')?.addEventListener('submit', async (e) => {
         e.preventDefault();
@@ -148,6 +172,8 @@ import { API_BASE as apiBase } from '../lib/api';
   }
 
   function setupThemeSwitcher() {
+    if (publicDemoSite) return;
+
     function updatePreview() {
       const previewBg = document.querySelector('.preview-bg');
       const previewSurface = document.querySelector('.preview-surface');