feat(theme-provider): theme provider changes #320

Author: airikej

tedi/providers/tedi.provider.ts

@@ -1,39 +1,20 @@
 import {
   EnvironmentProviders,
-  inject,
   makeEnvironmentProviders,
-  provideAppInitializer,
 } from "@angular/core";
 import { TEDI_THEME_DEFAULT_TOKEN } from "../tokens/theme.token";
 import {
-  AVAILABLE_THEMES,
   Theme,
-  THEME_CLASS_PREFIX,
   THEME_FALLBACK_VALUE,
 } from "../services/theme/theme.service";
 import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../tokens/translation.token";
 import { Language } from "../services/translation/translation.service";
-import { DOCUMENT } from "@angular/common";
 
 export interface TediConfig {
   theme?: Theme;
   language?: Language;
 }
 
-function applyInitialTheme() {
-  return () => {
-    const document = inject(DOCUMENT);
-    const defaultTheme = inject(TEDI_THEME_DEFAULT_TOKEN);
-    const html = document.documentElement;
-
-    for (const t of AVAILABLE_THEMES) {
-      html.classList.remove(`${THEME_CLASS_PREFIX}${t}`);
-    }
-
-    html.classList.add(`${THEME_CLASS_PREFIX}${defaultTheme}`);
-  };
-}
-
 export function provideTedi(config: TediConfig = {}): EnvironmentProviders {
   return makeEnvironmentProviders([
     {
@@ -44,6 +25,5 @@ export function provideTedi(config: TediConfig = {}): EnvironmentProviders {
       provide: TEDI_TRANSLATION_DEFAULT_TOKEN,
       useValue: config.language ?? "et",
     },
-    provideAppInitializer(applyInitialTheme()),
   ]);
-}
+}

tedi/services/theme/theme.service.ts

@@ -3,8 +3,8 @@ import { DOCUMENT } from "@angular/common";
 import { TEDI_THEME_DEFAULT_TOKEN } from "../../tokens/theme.token";
 import { cookieSignal } from "../../utils/cookies.util";
 
-export type Theme = "default" | "dark" | "rit";
-export const AVAILABLE_THEMES: Theme[] = ["default", "dark", "rit"];
+export type TEDITheme = "default" | "dark";
+export type Theme = TEDITheme | string;
 export const THEME_CLASS_PREFIX = "tedi-theme--";
 export const THEME_COOKIE_NAME = "tedi-theme";
 export const THEME_FALLBACK_VALUE: Theme = "default";
@@ -14,17 +14,24 @@ export class ThemeService {
   private readonly document = inject(DOCUMENT);
   private readonly defaultTheme = inject(TEDI_THEME_DEFAULT_TOKEN);
 
-  readonly theme = cookieSignal<Theme>(THEME_COOKIE_NAME, this.defaultTheme);
+  readonly theme = cookieSignal<Theme>(
+    THEME_COOKIE_NAME,
+    this.defaultTheme
+  );
 
   constructor() {
     effect(() => {
       const html = this.document.documentElement;
+      const nextTheme = this.theme();
 
-      for (const t of AVAILABLE_THEMES) {
-        html.classList.remove(`${THEME_CLASS_PREFIX}${t}`);
+      for (let i = html.classList.length - 1; i >= 0; i--) {
+        const className = html.classList.item(i);
+        if (className?.startsWith(THEME_CLASS_PREFIX)) {
+          html.classList.remove(className);
+        }
       }
 
-      html.classList.add(`${THEME_CLASS_PREFIX}${this.theme()}`);
+      html.classList.add(`${THEME_CLASS_PREFIX}${nextTheme}`);
     });
   }
-}
+}