@svadmin/core 0.8.0 → 0.9.0

package/package.json

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

package/src/index.ts

@@ -37,8 +37,8 @@ export { audit, setAuditHandler, setAuditLogProvider, getAuditLogProvider } from
 export type { AuditLogProvider } from './audit';
 export { setChatProvider, getChatProvider, setChatContext, getChatContext } from './chatProvider.svelte';
 export type { ChatProvider, ChatMessage, ChatContext, ChatAction } from './chatProvider.svelte';
-export { getTheme, setTheme, toggleTheme, getResolvedTheme, getColorTheme, setColorTheme, colorThemes } from './theme.svelte';
-export type { ThemeMode, ColorTheme } from './theme.svelte';
+export { getTheme, setTheme, toggleTheme, getResolvedTheme, getColorTheme, setColorTheme, colorThemes, configureTheme, getThemeConfig, clearCssOverrides } from './theme.svelte';
+export type { ThemeMode, ColorTheme, ThemeStrategy, ThemeConfig } from './theme.svelte';
 export { setUnsavedChanges, getUnsavedChanges, initUnsavedChangesNotifier } from './unsaved-changes.svelte';
 export { setAdminOptions, getAdminOptions, getTextTransformers } from './options';
 export type { AdminOptions, TextTransformers, OvertimeConfig } from './options';

package/src/theme.svelte.ts

@@ -1,11 +1,75 @@
 // Theme — dark/light/system mode + color theme management (Svelte 5 runes)
+//
+// Supports two class strategies:
+//   - 'standard' (default): adds 'dark' class for dark mode (light-first)
+//   - 'dark-first': adds 'light' class for light mode (dark-first, e.g. Elygate-style)
 
 export type ThemeMode = 'light' | 'dark' | 'system';
 export type ColorTheme = 'blue' | 'green' | 'rose' | 'orange' | 'violet' | 'zinc';
 
+/** Controls how the theme class is applied to <html> */
+export type ThemeStrategy = 'standard' | 'dark-first';
+
+export interface ThemeConfig {
+  /** Class strategy: 'standard' toggles '.dark', 'dark-first' toggles '.light' */
+  strategy?: ThemeStrategy;
+  /** Custom CSS variables to inject as overrides on <html> */
+  cssOverrides?: Record<string, string>;
+  /** Whether to disable the built-in color-scheme attribute */
+  disableColorScheme?: boolean;
+}
+
 const STORAGE_KEY = 'svadmin-theme';
 const COLOR_STORAGE_KEY = 'svadmin-color-theme';
 
+// ── Theme configuration ──────────────────────────────────
+let themeConfig: ThemeConfig = {};
+
+/**
+ * Configure the theme system. Must be called before setTheme() or
+ * automatically via AdminApp's themeConfig prop.
+ */
+export function configureTheme(config: ThemeConfig): void {
+  themeConfig = { ...config };
+  // Re-apply the current theme with new strategy
+  applyTheme(mode);
+  // Apply CSS overrides
+  if (config.cssOverrides) {
+    applyCssOverrides(config.cssOverrides);
+  }
+}
+
+/** Get current theme configuration */
+export function getThemeConfig(): ThemeConfig {
+  return { ...themeConfig };
+}
+
+function applyCssOverrides(overrides: Record<string, string>): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(overrides)) {
+    const cssVar = key.startsWith('--') ? key : `--${key}`;
+    root.style.setProperty(cssVar, value);
+  }
+}
+
+/** Remove previously applied CSS overrides */
+export function clearCssOverrides(keys?: string[]): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  if (keys) {
+    for (const key of keys) {
+      const cssVar = key.startsWith('--') ? key : `--${key}`;
+      root.style.removeProperty(cssVar);
+    }
+  } else if (themeConfig.cssOverrides) {
+    for (const key of Object.keys(themeConfig.cssOverrides)) {
+      const cssVar = key.startsWith('--') ? key : `--${key}`;
+      root.style.removeProperty(cssVar);
+    }
+  }
+}
+
 // ── Color themes (display metadata) ──────────────────────
 export const colorThemes: { id: ColorTheme; label: string; color: string }[] = [
   { id: 'blue',   label: 'Blue',   color: '#3b82f6' },
@@ -32,8 +96,24 @@ let mode = $state<ThemeMode>(getStoredTheme());
 
 function applyTheme(m: ThemeMode): void {
   const resolved = m === 'system' ? getSystemPreference() : m;
-  if (typeof document !== 'undefined') {
-    document.documentElement.classList.toggle('dark', resolved === 'dark');
+  if (typeof document === 'undefined') return;
+
+  const strategy = themeConfig.strategy ?? 'standard';
+  const el = document.documentElement;
+
+  if (strategy === 'dark-first') {
+    // Dark-first: default is dark, add 'light' class for light mode
+    el.classList.toggle('light', resolved === 'light');
+    el.classList.remove('dark'); // ensure no conflict
+  } else {
+    // Standard: default is light, add 'dark' class for dark mode
+    el.classList.toggle('dark', resolved === 'dark');
+    el.classList.remove('light'); // ensure no conflict
+  }
+
+  // Set color-scheme attribute unless disabled
+  if (!themeConfig.disableColorScheme) {
+    el.style.colorScheme = resolved;
   }
 }