HoneyandClaude Opus 5
31a027c93a
Go-Backend (chi, pgx, golang-migrate) + React/TS-Frontend als PWA. Enthalten: Auth inkl. OIDC, Dateien mit Versionen und Papierkorb, Freigaben (Links + intern), WebDAV, Gruppenordner, Admin/Theming, Volltextsuche mit OCR, eigener PDF-Betrachter und WOPI-Office (Collabora/OnlyOffice). Nicht im Repo: deploy/.env (Sitzungsschlüssel, DB- und Admin-Passwort) sowie alle Daten- und Build-Verzeichnisse – siehe .gitignore. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
/**
|
||
* Anwenden der Farbeinstellungen auf die CSS-Variablen.
|
||
*
|
||
* Die Werte aus dem Admin-Panel landen in der Datenbank, wirken aber erst,
|
||
* wenn sie hier auf das Wurzelelement geschrieben werden. Ein Inline-Wert am
|
||
* `documentElement` überschreibt die Vorgaben aus `index.css`, weil er
|
||
* spezifischer ist als `:root`.
|
||
*
|
||
* Neben der Volltonfarbe wird das RGB-Tripel als eigene Variable gesetzt
|
||
* (`--color-primary-rgb`). Die Oberfläche braucht die Farbe an vielen Stellen
|
||
* halbtransparent – für zarte Flächen wie den aktiven Menüpunkt oder eine
|
||
* Auswahl. Mit dem Tripel geht das als `rgba(var(--color-primary-rgb), 0.15)`,
|
||
* ohne für jede Deckkraft eine eigene Variable zu pflegen.
|
||
*/
|
||
|
||
const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
|
||
|
||
/** "#6366f1" → "99, 102, 241"; Kurzform (#abc) wird ausgeschrieben. */
|
||
function hexToRgb(hex: string): string | null {
|
||
if (!HEX.test(hex)) return null
|
||
let h = hex.slice(1)
|
||
if (h.length === 3) h = h.split('').map(c => c + c).join('')
|
||
const n = parseInt(h, 16)
|
||
return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`
|
||
}
|
||
|
||
function setColor(name: string, value?: string) {
|
||
const root = document.documentElement
|
||
const rgb = value ? hexToRgb(value) : null
|
||
if (value && rgb) {
|
||
root.style.setProperty(`--color-${name}`, value)
|
||
root.style.setProperty(`--color-${name}-rgb`, rgb)
|
||
} else {
|
||
// Ungültig oder leer: Vorgaben aus index.css wieder greifen lassen.
|
||
root.style.removeProperty(`--color-${name}`)
|
||
root.style.removeProperty(`--color-${name}-rgb`)
|
||
}
|
||
}
|
||
|
||
export function applyTheme(primary?: string, accent?: string) {
|
||
setColor('primary', primary)
|
||
setColor('accent', accent)
|
||
}
|