Add theme presets, gradient backgrounds, and macOS-style window chrome

Replaces the old light/dark toggle with 10 fixed color themes (plus Black & Grey and White) that drive a coordinated gradient palette across the whole admin UI, a Google Fonts picker, and a native-page dark-mode stylesheet that now covers modals and plugin/theme card grids. Fixes several background/gradient seams where the sidebar, toolbar, and content frame were each painting their own independent copy of the page gradient instead of sharing one continuous plane. Also adds a macOS-style traffic-light title bar to every page (close, minimize, maximize) and a persistent bottom taskbar so a minimized page can be restored from anywhere, plus a Plugins management page. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-07-03 11:49:15 -05:00
parent db07e21f9e
commit 4a547d2c50
26 changed files with 1816 additions and 223 deletions
@@ -0,0 +1,26 @@
+/**
+ * Shared logic for applying the theme/font settings to the live document —
+ * used both for the settings page's live preview (Settings.vue) and the
+ * real per-page-load application (SiteShell.vue::onMounted).
+ */
+import { resolvePreset, buildPalette } from './themePresets.js';
+
+export function applyThemePalette(themePresetId) {
+  const palette = buildPalette(resolvePreset(themePresetId));
+  const root = document.documentElement.style;
+  Object.entries(palette).forEach(([prop, value]) => root.setProperty(prop, value));
+}
+
+export function applyFontFamily(family) {
+  if (!family) return;
+  const linkId = 'aurora-google-font';
+  let link = document.getElementById(linkId);
+  if (!link) {
+    link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@400;500;600;700&display=swap`;
+  document.documentElement.style.setProperty('--aurora-font-family', `'${family}', sans-serif`);
+}