From 98bce1b0da675715b2e5482c0ad61ba21135f62f Mon Sep 17 00:00:00 2001
From: Server-Bibliothek <server-bibliothek@lokal>
Date: Di, 04 Aug 2026 07:00:04 +0200
Subject: [PATCH] Add a desktop client that knows what is installed locally

---
 desktop/frontend/src/theme.ts |   58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 58 insertions(+), 0 deletions(-)

diff --git a/desktop/frontend/src/theme.ts b/desktop/frontend/src/theme.ts
new file mode 100644
index 0000000..4c0222f
--- /dev/null
+++ b/desktop/frontend/src/theme.ts
@@ -0,0 +1,58 @@
+/**
+ * Theme-Umschaltung (System/hell/dunkel) auf Basis der Design-System-Defines.
+ * Beide Defines werden als <style> eingehängt; je nach Modus ist genau eines
+ * aktiv (das andere per `disabled` abgeschaltet). „System" folgt der
+ * Windows-Einstellung (prefers-color-scheme).
+ *
+ * Gleiches Vorgehen wie in der Weboberfläche und im meeting-transkriptor, damit
+ * die Bedienung über unsere Anwendungen hinweg einheitlich bleibt.
+ */
+// Relativer Pfad (umgeht das exports-Feld des Pakets, das ?raw sonst blockt).
+import hellCss from '../../../node_modules/@dh-software/dh-components-themes/build/defines.orange-light.css?raw';
+import dunkelCss from '../../../node_modules/@dh-software/dh-components-themes/build/defines.orange-dark.css?raw';
+
+export type ThemeModus = 'system' | 'hell' | 'dunkel';
+
+const SPEICHER_SCHLUESSEL = 'software-bibliothek-client-theme';
+
+let hellStil: HTMLStyleElement;
+let dunkelStil: HTMLStyleElement;
+let aktuellerModus: ThemeModus = 'system';
+const dunkelMedia = window.matchMedia('(prefers-color-scheme: dark)');
+
+function anwenden(): void {
+  const dunkel = aktuellerModus === 'dunkel' || (aktuellerModus === 'system' && dunkelMedia.matches);
+  hellStil.disabled = dunkel;
+  dunkelStil.disabled = !dunkel;
+  document.documentElement.style.colorScheme = dunkel ? 'dark' : 'light';
+  document.documentElement.dataset.theme = dunkel ? 'dunkel' : 'hell';
+}
+
+/** Liest den zuletzt gewählten Modus (Standard: System). */
+export function gemerkterModus(): ThemeModus {
+  const gemerkt = localStorage.getItem(SPEICHER_SCHLUESSEL);
+  return gemerkt === 'hell' || gemerkt === 'dunkel' || gemerkt === 'system' ? gemerkt : 'system';
+}
+
+/** Hängt beide Theme-Defines ein und aktiviert den gemerkten Modus. */
+export function initTheme(): void {
+  hellStil = document.createElement('style');
+  hellStil.textContent = hellCss;
+  dunkelStil = document.createElement('style');
+  dunkelStil.textContent = dunkelCss;
+  document.head.append(hellStil, dunkelStil);
+  dunkelMedia.addEventListener('change', () => {
+    if (aktuellerModus === 'system') {
+      anwenden();
+    }
+  });
+  aktuellerModus = gemerkterModus();
+  anwenden();
+}
+
+/** Setzt den Modus und merkt ihn für den nächsten Aufruf. */
+export function setzeTheme(modus: ThemeModus): void {
+  aktuellerModus = modus;
+  localStorage.setItem(SPEICHER_SCHLUESSEL, modus);
+  anwenden();
+}

--
Gitblit v1.9.3