@svadmin/core 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Core SDK — hooks, types, context, i18n, permissions, router",
   "type": "module",
   "sideEffects": false,

package/src/index.ts

@@ -24,8 +24,8 @@ export { useLive } from './live';
 export { toast } from './toast.svelte';
 export { t, setLocale, getLocale, getAvailableLocales, addTranslations } from './i18n.svelte';
 export { audit, setAuditHandler } from './audit';
-export { getTheme, setTheme, toggleTheme, getResolvedTheme } from './theme.svelte';
-export type { ThemeMode } from './theme.svelte';
+export { getTheme, setTheme, toggleTheme, getResolvedTheme, getColorTheme, setColorTheme, colorThemes } from './theme.svelte';
+export type { ThemeMode, ColorTheme } from './theme.svelte';
 
 export type {
   DataProvider, AuthProvider, NotificationProvider, MutationMode,

package/src/theme.svelte.ts

@@ -1,8 +1,22 @@
-// Theme — dark/light/system mode management (Svelte 5 runes)
+// Theme — dark/light/system mode + color theme management (Svelte 5 runes)
 
 export type ThemeMode = 'light' | 'dark' | 'system';
+export type ColorTheme = 'blue' | 'green' | 'rose' | 'orange' | 'violet' | 'zinc';
 
 const STORAGE_KEY = 'svadmin-theme';
+const COLOR_STORAGE_KEY = 'svadmin-color-theme';
+
+// ── Color themes (display metadata) ──────────────────────
+export const colorThemes: { id: ColorTheme; label: string; color: string }[] = [
+  { id: 'blue',   label: 'Blue',   color: '#3b82f6' },
+  { id: 'green',  label: 'Green',  color: '#22c55e' },
+  { id: 'rose',   label: 'Rose',   color: '#f43f5e' },
+  { id: 'orange', label: 'Orange', color: '#f97316' },
+  { id: 'violet', label: 'Violet', color: '#8b5cf6' },
+  { id: 'zinc',   label: 'Zinc',   color: '#71717a' },
+];
+
+// ── Dark/Light mode ──────────────────────────────────────
 
 function getStoredTheme(): ThemeMode {
   if (typeof localStorage === 'undefined') return 'system';
@@ -54,3 +68,33 @@ export function toggleTheme(): void {
 export function getResolvedTheme(): 'light' | 'dark' {
   return mode === 'system' ? getSystemPreference() : mode;
 }
+
+// ── Color theme ──────────────────────────────────────────
+
+function getStoredColorTheme(): ColorTheme {
+  if (typeof localStorage === 'undefined') return 'blue';
+  return (localStorage.getItem(COLOR_STORAGE_KEY) as ColorTheme) ?? 'blue';
+}
+
+let colorTheme = $state<ColorTheme>(getStoredColorTheme());
+
+function applyColorTheme(ct: ColorTheme): void {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', ct);
+  }
+}
+
+// Apply on init
+applyColorTheme(colorTheme);
+
+export function getColorTheme(): ColorTheme {
+  return colorTheme;
+}
+
+export function setColorTheme(ct: ColorTheme): void {
+  colorTheme = ct;
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(COLOR_STORAGE_KEY, ct);
+  }
+  applyColorTheme(ct);
+}