fix: Immediately apply changes to theme variables #188

Author: szuperaz

projects/stream-chat-angular/src/lib/theme.service.spec.ts

@@ -56,18 +56,21 @@ describe('ThemeService', () => {
     );
   });
 
-  it('should delete previously set custom light theme properties', () => {
+  it('should delete previously set custom light theme properties (theme is currently inactive)', () => {
+    service.theme$.next('dark');
     spyOn(document.documentElement.style, 'setProperty');
     service.customLightThemeVariables = { '--white-snow': 'white' };
     service.customLightThemeVariables = { '--grey': 'darkgrey' };
+    service.theme$.next('light');
 
     expect(document.documentElement.style.setProperty).toHaveBeenCalledWith(
       '--white-snow',
       null
     );
   });
 
-  it('should delete previously set custom dark theme properties', () => {
+  it('should delete previously set custom dark theme properties (theme is currently active)', () => {
+    service.theme$.next('dark');
     spyOn(document.documentElement.style, 'setProperty');
     service.customDarkThemeVariables = { '--white-snow': 'black' };
     service.customDarkThemeVariables = { '--grey': 'darkgrey' };
@@ -88,4 +91,25 @@ describe('ThemeService', () => {
       '#005fff'
     );
   });
+
+  it('should apply changes to current theme immediately', () => {
+    spyOn(document.documentElement.style, 'setProperty');
+    service.customLightThemeVariables = { '--white-snow': 'white' };
+
+    expect(document.documentElement.style.setProperty).toHaveBeenCalledWith(
+      '--white-snow',
+      'white'
+    );
+  });
+
+  it('should apply changes to inactive theme when theme becomes active', () => {
+    spyOn(document.documentElement.style, 'setProperty');
+    service.customDarkThemeVariables = { '--white-snow': 'black' };
+    service.theme$.next('dark');
+
+    expect(document.documentElement.style.setProperty).toHaveBeenCalledWith(
+      '--white-snow',
+      'black'
+    );
+  });
 });

projects/stream-chat-angular/src/lib/theme.service.ts

@@ -31,6 +31,7 @@ export class ThemeService {
     '--white-smoke': '#13151b',
     '--white-snow': '#070a0d',
   };
+  private variablesToDelete: { [key: string]: string }[] = [];
 
   constructor() {
     this.theme$.subscribe((theme) => {
@@ -40,6 +41,9 @@ export class ThemeService {
       const lightVariables = this.customLightThemeVariables
         ? this.customLightThemeVariables
         : {};
+      this.variablesToDelete.forEach((variables) =>
+        this.deleteVariables(variables)
+      );
       if (theme === 'dark') {
         this.deleteVariables(lightVariables);
         this.setVariables(darkVariables);
@@ -58,8 +62,13 @@ export class ThemeService {
     variables: { [key: string]: string } | undefined
   ) {
     const prevVariables = this.customLightThemeVariables;
-    this.deleteVariables(prevVariables);
+    if (prevVariables) {
+      this.variablesToDelete.push(prevVariables);
+    }
     this._customLightThemeVariables = variables;
+    if (this.theme$.getValue() === 'light') {
+      this.theme$.next('light');
+    }
   }
 
   get customDarkThemeVariables() {
@@ -70,8 +79,13 @@ export class ThemeService {
     variables: { [key: string]: string } | undefined
   ) {
     const prevVariables = this.customDarkThemeVariables;
-    this.deleteVariables(prevVariables);
+    if (prevVariables) {
+      this.variablesToDelete.push(prevVariables);
+    }
     this._customDarkThemeVariables = variables;
+    if (this.theme$.getValue() === 'dark') {
+      this.theme$.next('dark');
+    }
   }
 
   private deleteVariables(variables: { [key: string]: string } | undefined) {