core(theme): Code separation based on responsibility

Author: immohammadjaved

projects/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angularui/theme",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Modern Theme Management for Angular - A lightweight, feature-rich theme library with automatic dark mode detection, SSR support, and zero configuration required.",
   "keywords": [
     "angular",
@@ -47,9 +47,9 @@
   "typings": "index.d.ts",
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./fesm2022/angularui-theme.mjs",
       "require": "./fesm2022/angularui-theme.mjs",
-      "types": "./index.d.ts",
       "default": "./fesm2022/angularui-theme.mjs"
     },
     "./package.json": {
@@ -58,7 +58,7 @@
   },
   "files": [
     "index.d.ts",
-    "fesm2022/",
+    "fesm2022/angularui-theme.mjs",
     "README.md",
     "LICENSE"
   ],
@@ -76,4 +76,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

projects/theme/src/lib/index.ts

@@ -1,3 +1,3 @@
-export { ThemeService, THEME_CONFIG } from './theme.service';
-export type { ThemeConfig, Theme } from './theme.service';
+export { ThemeService } from './theme.service';
 export { provideUiTheme } from './theme.provider';
+export type { Theme, ThemeConfig, ThemeStrategy } from './theme.types';

projects/theme/src/lib/theme.config.ts

@@ -0,0 +1,46 @@
+import { inject, InjectionToken } from '@angular/core';
+import { ThemeConfig, ValidatedThemeConfig } from './theme.types';
+
+export const THEME_CONFIG = new InjectionToken<ThemeConfig>('ThemeConfig');
+
+export function validateConfig(config: any): void {
+  const validThemes = ['light', 'dark', 'system'];
+  const validStrategies = ['attribute', 'class'];
+
+  if (config.defaultTheme && !validThemes.includes(config.defaultTheme)) {
+    console.warn(`Invalid defaultTheme: ${config.defaultTheme}. Using 'system' as fallback.`);
+    config.defaultTheme = 'system';
+  }
+
+  if (config.strategy && !validStrategies.includes(config.strategy)) {
+    console.warn(`Invalid strategy: ${config.strategy}. Using 'attribute' as fallback.`);
+    config.strategy = 'attribute';
+  }
+
+  if (config.storageKey && typeof config.storageKey !== 'string') {
+    console.warn(`Invalid storageKey: ${config.storageKey}. Using 'theme' as fallback.`);
+    config.storageKey = 'theme';
+  }
+
+  if (config.forcedTheme && !validThemes.includes(config.forcedTheme)) {
+    console.warn(`Invalid forcedTheme: ${config.forcedTheme}. Ignoring forced theme.`);
+    config.forcedTheme = undefined;
+  }
+}
+
+export function initializeConfig(): ValidatedThemeConfig {
+  const injectedConfig = inject(THEME_CONFIG, { optional: true });
+  const defaultConfig: ValidatedThemeConfig = {
+    defaultTheme: 'system',
+    storageKey: 'theme',
+    strategy: 'attribute',
+    enableAutoInit: true,
+    enableColorScheme: true,
+    enableSystem: true,
+    forcedTheme: undefined
+  };
+  
+  const mergedConfig = { ...defaultConfig, ...injectedConfig };
+  validateConfig(mergedConfig);
+  return mergedConfig;
+} 

projects/theme/src/lib/theme.dom.ts

@@ -0,0 +1,57 @@
+import { ValidatedThemeConfig } from './theme.types';
+
+export interface DomManager {
+  applyTheme(theme: 'light' | 'dark', config: ValidatedThemeConfig): void;
+}
+
+export class ThemeDomManager implements DomManager {
+  applyTheme(theme: 'light' | 'dark', config: ValidatedThemeConfig): void {
+    try {
+      const element = document.documentElement;
+
+      if (config.strategy === 'class') {
+        this.applyClassTheme(element, theme);
+      } else {
+        this.applyAttributeTheme(element, theme);
+      }
+
+      if (config.enableColorScheme) {
+        this.applyColorScheme(element, theme);
+      }
+    } catch (error) {
+      console.error('Failed to apply theme:', error);
+    }
+  }
+
+  private applyClassTheme(element: HTMLElement, theme: 'light' | 'dark'): void {
+    try {
+      if (theme === 'dark') {
+        element.classList.add('dark');
+      } else {
+        element.classList.remove('dark');
+      }
+    } catch (error) {
+      console.warn('Failed to apply class theme:', error);
+    }
+  }
+
+  private applyAttributeTheme(element: HTMLElement, theme: 'light' | 'dark'): void {
+    try {
+      if (theme === 'dark') {
+        element.setAttribute('data-theme', 'dark');
+      } else {
+        element.removeAttribute('data-theme');
+      }
+    } catch (error) {
+      console.warn('Failed to apply attribute theme:', error);
+    }
+  }
+
+  private applyColorScheme(element: HTMLElement, theme: 'light' | 'dark'): void {
+    try {
+      element.style.colorScheme = theme;
+    } catch (error) {
+      console.warn('Failed to apply color scheme:', error);
+    }
+  }
+} 

projects/theme/src/lib/theme.media.ts

@@ -0,0 +1,56 @@
+import { ValidatedThemeConfig } from './theme.types';
+
+export interface MediaManager {
+  mediaQuery: MediaQueryList | null;
+  setup(config: ValidatedThemeConfig): void;
+  updateSystemTheme(): 'light' | 'dark';
+  cleanup(): void;
+}
+
+export class SystemThemeManager implements MediaManager {
+  mediaQuery: MediaQueryList | null = null;
+  private isDestroyed = false;
+
+  setup(config: ValidatedThemeConfig): void {
+    try {
+      if (typeof window !== 'undefined' && 
+          window.matchMedia && 
+          config.enableSystem && 
+          !this.isDestroyed) {
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.updateSystemTheme();
+      }
+    } catch (error) {
+      console.warn('Failed to setup media query for system theme detection:', error);
+    }
+  }
+
+  updateSystemTheme(): 'light' | 'dark' {
+    try {
+      if (this.mediaQuery && !this.isDestroyed) {
+        return this.mediaQuery.matches ? 'dark' : 'light';
+      }
+      return 'light';
+    } catch (error) {
+      console.warn('Failed to update system theme:', error);
+      return 'light';
+    }
+  }
+
+  addChangeListener(callback: () => void): void {
+    if (this.mediaQuery && !this.isDestroyed) {
+      this.mediaQuery.addEventListener('change', callback);
+    }
+  }
+
+  removeChangeListener(callback: () => void): void {
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', callback);
+    }
+  }
+
+  cleanup(): void {
+    this.isDestroyed = true;
+    this.mediaQuery = null;
+  }
+} 

projects/theme/src/lib/theme.provider.ts

@@ -1,26 +1,17 @@
-import { Provider, EnvironmentProviders } from '@angular/core';
-import { provideAppInitializer, inject } from '@angular/core';
-import { ThemeService, ThemeConfig, THEME_CONFIG } from './theme.service';
+import { Provider, EnvironmentProviders, provideAppInitializer, inject } from '@angular/core';
+import { ThemeService } from './theme.service';
+import { THEME_CONFIG } from './theme.config';
+import type { ThemeConfig } from './theme.types';
 
-/**
- * Provider function to configure the theme service
- * @param config Theme configuration options
- * @returns Provider array for Angular DI
- */
 export function provideUiTheme(config?: ThemeConfig): (Provider | EnvironmentProviders)[] {
   return [
-    {
-      provide: THEME_CONFIG,
-      useValue: config || {}
-    },
-    provideAppInitializer(() => {
-      const themeService = inject(ThemeService);
-      // Initialize the theme service if enableAutoInit is enabled or not explicitly disabled
-      if (config?.enableAutoInit !== false) {
+    ...(config ? [{ provide: THEME_CONFIG, useValue: config }] : []),
+    ...(config?.enableAutoInit !== false ? [
+      provideAppInitializer(() => {
+        const themeService = inject(ThemeService);
         themeService.initialize();
-      }
-
-      return Promise.resolve();
-    })
+        return Promise.resolve();
+      })
+    ] : [])
   ];
 }