/**
|
* 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 im Projekt 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-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();
|
}
|
