lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make themes more distict

Browse Source
This commit is contained in:
Lukas Cremer
2026-05-14 00:17:13 +02:00
parent f4a1b4dca9
commit ec78dfeddd
8 changed files with 995 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/app.js
View File

@@ -77,11 +77,15 @@ async function apiFetch(url, options = {}) {
// ─── Theme ───────────────────────────────────────────────────────────────────
function applyTheme(theme) {
const root = document.documentElement;
Object.entries(theme).forEach(([prop, value]) => {
root.style.setProperty(prop, value);
});
function applyTheme(themeName) {
let link = document.getElementById('class-theme');
if (!link) {
link = document.createElement('link');
link.id = 'class-theme';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
link.href = `/themes/${encodeURIComponent(themeName)}.css`;
}
@@ -109,7 +113,7 @@ function showScreen(screen) {
async function showClassPicker() {
showScreen('class-picker');
const listEl = document.getElementById('classList');
listEl.innerHTML = '<p style="color: var(--theme-muted)">Laden...</p>';
listEl.innerHTML = '<p style="opacity:0.6">Laden...</p>';
const res = await apiFetch('/api/classes');
if (!res) return;
@@ -118,24 +122,21 @@ async function showClassPicker() {
listEl.innerHTML = '';
if (classes.length === 0) {
listEl.innerHTML = '<p style="color: var(--theme-muted)">Keine Klassen verfügbar.</p>';
listEl.innerHTML = '<p style="opacity:0.6">Keine Klassen verfügbar.</p>';
return;
}
classes.forEach(cls => {
const card = document.createElement('div');
card.className = 'class-card';
const bg = cls.theme['--theme-bg-mid'] || '';
const border = cls.theme['--theme-accent'] || '';
const text = cls.theme['--theme-text'] || '';
const muted = cls.theme['--theme-muted'] || '';
if (bg) card.style.background = bg;
if (border) card.style.borderColor = border;
const c = cls.colors || {};
if (c.bg) card.style.background = c.bg;
if (c.accent) card.style.borderColor = c.accent;
card.innerHTML = `
<div class="class-card-icon">${cls.icon || '📚'}</div>
<div class="class-card-info">
<div class="class-card-name" style="color:${text}">${cls.name}</div>
<div class="class-card-desc" style="color:${muted}">${cls.description || ''}</div>
<div class="class-card-name" style="${c.text ? `color:${c.text}` : ''}">${cls.name}</div>
<div class="class-card-desc" style="${c.muted ? `color:${c.muted}` : ''}">${cls.description || ''}</div>
</div>
`;
card.onclick = () => selectClass(cls.id);