Added a theme selector

2026-08-26 12:54:38 +02:00
parent fec4c8def5
commit 72a4741cac
19 changed files with 305 additions and 9 deletions
@@ -0,0 +1,28 @@
+// Copyright © 2026 Olaf Kolkman
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+const themePreference = 'linklog-theme';
+
+async function loadAvailableThemes() {
+  const response = await fetch('/api/public/themes');
+  if (!response.ok) return;
+  const themes = await response.json();
+  const selected = themes.some((theme) => theme.id === localStorage.getItem(themePreference))
+    ? localStorage.getItem(themePreference)
+    : themes[0]?.id;
+  if (selected) document.documentElement.dataset.theme = selected;
+  const headerActions = document.querySelector('.header-actions');
+  if (!headerActions || !themes.length) return;
+  const picker = document.createElement('select');
+  picker.className = 'theme-picker';
+  picker.setAttribute('aria-label', 'Theme');
+  picker.replaceChildren(...themes.map((theme) => new Option(theme.label, theme.id)));
+  picker.value = selected || themes[0].id;
+  picker.addEventListener('change', () => {
+    localStorage.setItem(themePreference, picker.value);
+    document.documentElement.dataset.theme = picker.value;
+  });
+  headerActions.prepend(picker);
+}
+
+loadAvailableThemes();