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 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;

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 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;
}

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

@ -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,6 +50,15 @@ import { API_BASE as apiBase } from '../lib/api';
const user = await res.json();
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) => {
@ -50,7 +67,7 @@ import { API_BASE as apiBase } from '../lib/api';
})
.join('');
container.innerHTML = `
appearanceHtml = `
<div class="form-section ui-card ui-card-pad-lg ui-form">
<h2>Appearance</h2>
@ -72,6 +89,11 @@ import { API_BASE as apiBase } from '../lib/api';
</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>
`;
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');