chore: fix issues with multiple non-layerable themes being active on color scheme change [skip e2e]

packages/services/src/Domain/Component/ComponentManagerInterface.ts

@@ -37,6 +37,7 @@ export interface ComponentManagerInterface {
 
   isThemeActive(theme: UIFeature<ThemeFeatureDescription>): boolean
   toggleTheme(theme: UIFeature<ThemeFeatureDescription>, skipEntitlementCheck?: boolean): Promise<void>
+  toggleOtherNonLayerableThemes(uiFeature: UIFeature<ThemeFeatureDescription>): void
   getActiveThemes(): UIFeature<ThemeFeatureDescription>[]
   getActiveThemesIdentifiers(): { features: NativeFeatureIdentifier[]; uuids: Uuid[] }
 

packages/snjs/lib/Services/ComponentManager/ComponentManager.ts

@@ -390,6 +390,19 @@ export class ComponentManager
     return this.viewers.find((viewer) => viewer.sessionKey === key)
   }
 
+  public toggleOtherNonLayerableThemes(uiFeature: UIFeature<ThemeFeatureDescription>): void {
+    const activeThemes = this.getActiveThemes()
+    for (const candidate of activeThemes) {
+      if (candidate.featureIdentifier === uiFeature.featureIdentifier) {
+        continue
+      }
+
+      if (!candidate.layerable) {
+        this.removeActiveTheme(candidate)
+      }
+    }
+  }
+
   public async toggleTheme(uiFeature: UIFeature<ThemeFeatureDescription>, skipEntitlementCheck = false): Promise<void> {
     this.logger.info('Toggling theme', uiFeature.uniqueIdentifier)
 
@@ -410,16 +423,7 @@ export class ComponentManager
     if (!uiFeature.layerable) {
       await sleep(10)
 
-      const activeThemes = this.getActiveThemes()
+      this.toggleOtherNonLayerableThemes(uiFeature)
-      for (const candidate of activeThemes) {
-        if (candidate.featureIdentifier === uiFeature.featureIdentifier) {
-          continue
-        }
-
-        if (!candidate.layerable) {
-          this.removeActiveTheme(candidate)
-        }
-      }
     }
   }
 
@@ -454,7 +458,7 @@ export class ComponentManager
     const features: NativeFeatureIdentifier[] = []
     const uuids: Uuid[] = []
 
-    const strings = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
+    const strings = new Set(this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, []))
     for (const string of strings) {
       const nativeIdentifier = NativeFeatureIdentifier.create(string)
       if (!nativeIdentifier.isFailed()) {

packages/ui-services/src/Theme/ThemeManager.ts

@@ -217,6 +217,12 @@ export class ThemeManager extends AbstractUIService {
       }
     }
 
+    const shouldSetThemeAsPerColorScheme = this.preferences.getLocalValue(LocalPrefKey.UseSystemColorScheme, false)
+    if (shouldSetThemeAsPerColorScheme) {
+      const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+      hasChange = this.setThemeAsPerColorScheme(prefersDarkColorScheme)
+    }
+
     if (hasChange) {
       void this.cacheThemeState()
     }
@@ -230,7 +236,9 @@ export class ThemeManager extends AbstractUIService {
     }
   }
 
-  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
+  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean): boolean {
+    let didChangeTheme = false
+
     const preference = prefersDarkColorScheme
       ? LocalPrefKey.AutoDarkThemeIdentifier
       : LocalPrefKey.AutoLightThemeIdentifier
@@ -251,6 +259,7 @@ export class ThemeManager extends AbstractUIService {
     const toggleActiveTheme = () => {
       if (activeTheme) {
         void this.components.toggleTheme(activeTheme)
+        didChangeTheme = true
       }
     }
 
@@ -258,10 +267,17 @@ export class ThemeManager extends AbstractUIService {
       toggleActiveTheme()
     } else {
       const theme = themes.find((theme) => theme.featureIdentifier === themeIdentifier)
-      if (theme && !this.components.isThemeActive(theme)) {
+      if (theme) {
-        this.components.toggleTheme(theme, true).catch(console.error)
+        if (!this.components.isThemeActive(theme)) {
+          this.components.toggleTheme(theme, true).catch(console.error)
+        } else {
+          this.components.toggleOtherNonLayerableThemes(theme)
+        }
+        didChangeTheme = true
       }
     }
+
+    return didChangeTheme
   }
 
   private async activateCachedThemes() {