marcoallegretti/likwid
marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-03-26 19:03:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): remove public theme switching

Browse source
This commit is contained in:
Marco Allegretti 2026-02-15 17:06:01 +01:00
parent 3b1f8aa177
commit c8e90fccbf
3 changed files with 59 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/layouts/Layout.astro
View file

@ -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 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" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>{title} | Likwid</title> <title>{title} | Likwid</title>
<script is:inline define:vars={{ themes, defaultTheme }}> <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
(function() { (function() {
const saved = localStorage.getItem('likwid-theme') || defaultTheme; const saved = publicDemoSite ? defaultTheme : (localStorage.getItem('likwid-theme') || defaultTheme);
const theme = themes[saved] || themes[defaultTheme]; const theme = themes[saved] || themes[defaultTheme];
const root = document.documentElement; const root = document.documentElement;
const c = theme.colors; const c = theme.colors;

78
frontend/src/layouts/PublicLayout.astro
View file

@ -35,9 +35,9 @@ const defaultTheme = DEFAULT_THEME;
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>{title} | Likwid</title> <title>{title} | Likwid</title>
<script is:inline define:vars={{ themes, defaultTheme }}> <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
(function() { (function() {
const saved = localStorage.getItem('likwid-theme') || defaultTheme; const saved = publicDemoSite ? defaultTheme : (localStorage.getItem('likwid-theme') || defaultTheme);
const theme = themes[saved] || themes[defaultTheme]; const theme = themes[saved] || themes[defaultTheme];
const root = document.documentElement; const root = document.documentElement;
const c = theme.colors; const c = theme.colors;
@ -103,11 +103,6 @@ const defaultTheme = DEFAULT_THEME;
<a href="/docs">Documentation</a> <a href="/docs">Documentation</a>
</div> </div>
<div class="nav-actions"> <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> <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} {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
</div> </div>
@ -154,10 +149,9 @@ const defaultTheme = DEFAULT_THEME;
</div> </div>
</footer> </footer>
</div> </div>
<script is:inline define:vars={{ themes, defaultTheme }}> <script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
const nav = document.getElementById('public-nav'); const nav = document.getElementById('public-nav');
const toggle = document.getElementById('public-nav-toggle'); const toggle = document.getElementById('public-nav-toggle');
const themeSelect = document.getElementById('theme-select');
function openNav() { function openNav() {
if (!nav || !toggle) return; 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> </script>
</body> </body>
</html> </html>
@ -449,20 +391,6 @@ const defaultTheme = DEFAULT_THEME;
align-items: center; 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 { .public-main {
flex: 1; flex: 1;
} }

82
frontend/src/pages/settings.astro
View file

@ -1,6 +1,14 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import { API_BASE as apiBase } from '../lib/api'; 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"> <Layout title="Settings">
@ -13,7 +21,7 @@ import { API_BASE as apiBase } from '../lib/api';
</section> </section>
</Layout> </Layout>
<script define:vars={{ apiBase }}> <script define:vars={{ apiBase, publicDemoSite }}>
import { getAllThemes, loadSavedTheme, saveTheme } from '../lib/themes'; import { getAllThemes, loadSavedTheme, saveTheme } from '../lib/themes';
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
@ -42,36 +50,50 @@ import { API_BASE as apiBase } from '../lib/api';
const user = await res.json(); const user = await res.json();
const currentTheme = loadSavedTheme(); let appearanceHtml = '';
const themeOptions = getAllThemes() if (publicDemoSite) {
.map((t) => { appearanceHtml = `
const selected = t.id === currentTheme ? 'selected' : ''; <div class="form-section ui-card ui-card-pad-lg ui-form">
return `<option value="${t.id}" ${selected}>${t.name}</option>`; <h2>Appearance</h2>
}) <p class="hint">On the public demo, appearance is managed by the instance administrator.</p>
.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>
</div> </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"> appearanceHtml = `
<div class="preview-colors"> <div class="form-section ui-card ui-card-pad-lg ui-form">
<span class="preview-swatch preview-bg" title="Background"></span> <h2>Appearance</h2>
<span class="preview-swatch preview-surface" title="Surface"></span>
<span class="preview-swatch preview-primary" title="Primary"></span> <div class="form-group">
<span class="preview-swatch preview-success" title="Success"></span> <label for="theme-select">Theme</label>
<span class="preview-swatch preview-error" title="Error"></span> <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> </div>
</div> `;
}
container.innerHTML = `
${appearanceHtml}
<form id="profile-form" class="settings-form"> <form id="profile-form" class="settings-form">
<div class="form-section ui-card ui-card-pad-lg ui-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> </div>
`; `;
setupThemeSwitcher(); if (!publicDemoSite) {
setupThemeSwitcher();
}
document.getElementById('profile-form')?.addEventListener('submit', async (e) => { document.getElementById('profile-form')?.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
@ -148,6 +172,8 @@ import { API_BASE as apiBase } from '../lib/api';
} }
function setupThemeSwitcher() { function setupThemeSwitcher() {
if (publicDemoSite) return;
function updatePreview() { function updatePreview() {
const previewBg = document.querySelector('.preview-bg'); const previewBg = document.querySelector('.preview-bg');
const previewSurface = document.querySelector('.preview-surface'); const previewSurface = document.querySelector('.preview-surface');