From bda02f51b8354d211de34b5bd1fae66d83fee004 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Mon, 7 Feb 2022 13:56:52 +0100
Subject: [PATCH] fix: Immediately apply changes to theme variables #188

---
 .../src/lib/theme.service.spec.ts             | 28 +++++++++++++++++--
 .../src/lib/theme.service.ts                  | 18 ++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/projects/stream-chat-angular/src/lib/theme.service.spec.ts b/projects/stream-chat-angular/src/lib/theme.service.spec.ts
index 603a7f54..f070dd96 100644
--- a/projects/stream-chat-angular/src/lib/theme.service.spec.ts
+++ b/projects/stream-chat-angular/src/lib/theme.service.spec.ts
@@ -56,10 +56,12 @@ 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',
@@ -67,7 +69,8 @@ describe('ThemeService', () => {
     );
   });
 
-  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'
+    );
+  });
 });
diff --git a/projects/stream-chat-angular/src/lib/theme.service.ts b/projects/stream-chat-angular/src/lib/theme.service.ts
index d79165cd..95a7fe29 100644
--- a/projects/stream-chat-angular/src/lib/theme.service.ts
+++ b/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) {