feat: Themes and appeareance settings are now local to your device and not synced (#2847)

packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts

@@ -27,10 +27,10 @@ export const PrefDefaults = {
   [PrefKey.NotesHideDate]: false,
   [PrefKey.NotesHideTags]: false,
   [PrefKey.NotesHideEditorIcon]: false,
-  [PrefKey.UseSystemColorScheme]: false,
-  [PrefKey.UseTranslucentUI]: true,
-  [PrefKey.AutoLightThemeIdentifier]: 'Default',
-  [PrefKey.AutoDarkThemeIdentifier]: NativeFeatureIdentifier.TYPES.DarkTheme,
+  [PrefKey.DEPRECATED_UseSystemColorScheme]: false,
+  [PrefKey.DEPRECATED_UseTranslucentUI]: true,
+  [PrefKey.DEPRECATED_AutoLightThemeIdentifier]: 'Default',
+  [PrefKey.DEPRECATED_AutoDarkThemeIdentifier]: NativeFeatureIdentifier.TYPES.DarkTheme,
   [PrefKey.NoteAddToParentFolders]: true,
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat.CurrentDateAndTime,
   [PrefKey.CustomNoteTitleFormat]: 'YYYY-MM-DD [at] hh:mm A',
@@ -46,7 +46,7 @@ export const PrefDefaults = {
   [PrefKey.SystemViewPreferences]: {},
   [PrefKey.AuthenticatorNames]: '',
   [PrefKey.ComponentPreferences]: {},
-  [PrefKey.ActiveThemes]: [],
+  [PrefKey.DEPRECATED_ActiveThemes]: [],
   [PrefKey.ActiveComponents]: [],
   [PrefKey.AlwaysShowSuperToolbar]: true,
   [PrefKey.AddImportsToTag]: true,

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -28,10 +28,6 @@ export enum PrefKey {
   NotesHideDate = 'hideDate',
   NotesHideTags = 'hideTags',
   NotesHideEditorIcon = 'hideEditorIcon',
-  UseSystemColorScheme = 'useSystemColorScheme',
-  UseTranslucentUI = 'useTranslucentUI',
-  AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
-  AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
   NoteAddToParentFolders = 'noteAddToParentFolders',
   NewNoteTitleFormat = 'newNoteTitleFormat',
   CustomNoteTitleFormat = 'customNoteTitleFormat',
@@ -47,12 +43,16 @@ export enum PrefKey {
   AuthenticatorNames = 'authenticatorNames',
   PaneGesturesEnabled = 'paneGesturesEnabled',
   ComponentPreferences = 'componentPreferences',
-  ActiveThemes = 'activeThemes',
   ActiveComponents = 'activeComponents',
   AlwaysShowSuperToolbar = 'alwaysShowSuperToolbar',
   AddImportsToTag = 'addImportsToTag',
   AlwaysCreateNewTagForImports = 'alwaysCreateNewTagForImports',
   ExistingTagForImports = 'existingTagForImports',
+  DEPRECATED_ActiveThemes = 'activeThemes',
+  DEPRECATED_UseSystemColorScheme = 'useSystemColorScheme',
+  DEPRECATED_UseTranslucentUI = 'useTranslucentUI',
+  DEPRECATED_AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
+  DEPRECATED_AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
 }
 
 export type PrefValue = {
@@ -73,10 +73,11 @@ export type PrefValue = {
   [PrefKey.NotesHideDate]: boolean
   [PrefKey.NotesHideTags]: boolean
   [PrefKey.NotesHideEditorIcon]: boolean
-  [PrefKey.UseSystemColorScheme]: boolean
-  [PrefKey.UseTranslucentUI]: boolean
-  [PrefKey.AutoLightThemeIdentifier]: string
-  [PrefKey.AutoDarkThemeIdentifier]: string
+  [PrefKey.DEPRECATED_ActiveThemes]: string[]
+  [PrefKey.DEPRECATED_UseSystemColorScheme]: boolean
+  [PrefKey.DEPRECATED_UseTranslucentUI]: boolean
+  [PrefKey.DEPRECATED_AutoLightThemeIdentifier]: string
+  [PrefKey.DEPRECATED_AutoDarkThemeIdentifier]: string
   [PrefKey.NoteAddToParentFolders]: boolean
   [PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat
   [PrefKey.CustomNoteTitleFormat]: string
@@ -95,7 +96,6 @@ export type PrefValue = {
   [PrefKey.AuthenticatorNames]: string
   [PrefKey.PaneGesturesEnabled]: boolean
   [PrefKey.ComponentPreferences]: AllComponentPreferences
-  [PrefKey.ActiveThemes]: string[]
   [PrefKey.ActiveComponents]: string[]
   [PrefKey.AlwaysShowSuperToolbar]: boolean
   [PrefKey.AddImportsToTag]: boolean

packages/services/src/Domain/Event/ApplicationEvent.ts

@@ -49,6 +49,7 @@ export enum ApplicationEvent {
   /** When StorageService is ready (but NOT yet decrypted) to start servicing read/write requests */
   StorageReady = 'Application:StorageReady',
   PreferencesChanged = 'Application:PreferencesChanged',
+  LocalPreferencesChanged = 'Application:LocalPreferencesChanged',
   UnprotectedSessionBegan = 'Application:UnprotectedSessionBegan',
   UserRolesChanged = 'Application:UserRolesChanged',
   FeaturesAvailabilityChanged = 'Application:FeaturesAvailabilityChanged',

packages/services/src/Domain/Preferences/LocalPrefKey.ts

@@ -0,0 +1,15 @@
+export enum LocalPrefKey {
+  ActiveThemes = 'activeThemes',
+  UseSystemColorScheme = 'useSystemColorScheme',
+  UseTranslucentUI = 'useTranslucentUI',
+  AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
+  AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
+}
+
+export type LocalPrefValue = {
+  [LocalPrefKey.ActiveThemes]: string[]
+  [LocalPrefKey.UseSystemColorScheme]: boolean
+  [LocalPrefKey.UseTranslucentUI]: boolean
+  [LocalPrefKey.AutoLightThemeIdentifier]: string
+  [LocalPrefKey.AutoDarkThemeIdentifier]: string
+}

packages/services/src/Domain/Preferences/PreferenceServiceInterface.ts

@@ -1,7 +1,9 @@
 import { PrefKey, PrefValue } from '@standardnotes/models'
 import { AbstractService } from '../Service/AbstractService'
+import { LocalPrefKey, LocalPrefValue } from './LocalPrefKey'
 
 export enum PreferencesServiceEvent {
+  LocalPreferencesChanged = 'LocalPreferencesChanged',
   PreferencesChanged = 'PreferencesChanged',
 }
 
@@ -10,7 +12,15 @@ export interface PreferenceServiceInterface extends AbstractService<PreferencesS
   getValue<K extends PrefKey>(key: K, defaultValue?: PrefValue[K]): PrefValue[K] | undefined
   getValue<K extends PrefKey>(key: K, defaultValue: PrefValue[K] | undefined): PrefValue[K] | undefined
 
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue: LocalPrefValue[K]): LocalPrefValue[K]
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue?: LocalPrefValue[K]): LocalPrefValue[K] | undefined
+  getLocalValue<K extends LocalPrefKey>(
+    key: K,
+    defaultValue: LocalPrefValue[K] | undefined,
+  ): LocalPrefValue[K] | undefined
+
   setValue<K extends PrefKey>(key: K, value: PrefValue[K]): Promise<void>
   /** Set value without triggering sync or event notifications */
   setValueDetached<K extends PrefKey>(key: K, value: PrefValue[K]): Promise<void>
+  setLocalValue<K extends LocalPrefKey>(key: K, value: LocalPrefValue[K]): void
 }

packages/services/src/Domain/Storage/StorageKeys.ts

@@ -50,6 +50,7 @@ export enum StorageKey {
   FileBackupsLocation = 'file_backups_location',
   VaultSelectionOptions = 'vault_selection_options',
   Subscription = 'subscription',
+  LocalPreferences = 'local_preferences',
 }
 
 export enum NonwrappedStorageKey {

packages/services/src/Domain/index.ts

@@ -134,6 +134,7 @@ export * from './KeySystem/KeySystemKeyManager'
 export * from './Mfa/MfaServiceInterface'
 export * from './Mutator/MutatorClientInterface'
 export * from './Payloads/PayloadManagerInterface'
+export * from './Preferences/LocalPrefKey'
 export * from './Preferences/PreferenceId'
 export * from './Preferences/PreferenceServiceInterface'
 export * from './Protection/MobileUnlockTiming'

packages/snjs/lib/Application/Application.ts

@@ -81,6 +81,7 @@ import {
   CreateDecryptedBackupFile,
   CreateEncryptedBackupFile,
   WebSocketsService,
+  PreferencesServiceEvent,
 } from '@standardnotes/services'
 import {
   SNNote,
@@ -326,8 +327,12 @@ export class SNApplication implements ApplicationInterface, AppGroupManagedAppli
 
     const preferencesService = this.dependencies.get<PreferencesService>(TYPES.PreferencesService)
     this.serviceObservers.push(
-      preferencesService.addEventObserver(() => {
-        void this.notifyEvent(ApplicationEvent.PreferencesChanged)
+      preferencesService.addEventObserver((event) => {
+        if (event === PreferencesServiceEvent.PreferencesChanged) {
+          void this.notifyEvent(ApplicationEvent.PreferencesChanged)
+        } else if (event === PreferencesServiceEvent.LocalPreferencesChanged) {
+          void this.notifyEvent(ApplicationEvent.LocalPreferencesChanged)
+        }
       }),
     )
 

packages/snjs/lib/Application/Dependencies/Dependencies.ts

@@ -147,6 +147,7 @@ import {
   DesignateSurvivor,
   SyncBackoffService,
   SyncBackoffServiceInterface,
+  StorageServiceInterface,
 } from '@standardnotes/services'
 import { ItemManager } from '../../Services/Items/ItemManager'
 import { PayloadManager } from '../../Services/Payloads/PayloadManager'
@@ -1282,6 +1283,7 @@ export class Dependencies {
         this.get<ItemManager>(TYPES.ItemManager),
         this.get<MutatorService>(TYPES.MutatorService),
         this.get<SyncService>(TYPES.SyncService),
+        this.get<StorageServiceInterface>(TYPES.DiskStorageService),
         this.get<InternalEventBus>(TYPES.InternalEventBus),
       )
     })

packages/snjs/lib/Migrations/Versions/2_202_1.ts

@@ -66,7 +66,7 @@ export class Migration2_202_1 extends Migration {
     const activeThemes = allActiveitems.filter((component) => component.isTheme())
     const activeComponents = allActiveitems.filter((component) => !component.isTheme())
 
-    await this.services.preferences.setValueDetached(PrefKey.ActiveThemes, Uuids(activeThemes))
+    await this.services.preferences.setValueDetached(PrefKey.DEPRECATED_ActiveThemes, Uuids(activeThemes))
     await this.services.preferences.setValueDetached(PrefKey.ActiveComponents, Uuids(activeComponents))
   }
 }

packages/snjs/lib/Migrations/Versions/2_208_0.ts

@@ -0,0 +1,55 @@
+import { LocalPrefKey, ApplicationStage } from '@standardnotes/services'
+import { Migration } from '@Lib/Migrations/Migration'
+import { PrefDefaults, PrefKey } from '@standardnotes/models'
+
+export class Migration2_208_0 extends Migration {
+  static override version(): string {
+    return '2.208.0'
+  }
+
+  protected registerStageHandlers(): void {
+    this.registerStageHandler(ApplicationStage.FullSyncCompleted_13, async () => {
+      await this.migrateSyncedPreferencesToLocal()
+
+      this.markDone()
+    })
+  }
+
+  private async migrateSyncedPreferencesToLocal(): Promise<void> {
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.ActiveThemes,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_ActiveThemes,
+        PrefDefaults[PrefKey.DEPRECATED_ActiveThemes],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.UseSystemColorScheme,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_UseSystemColorScheme,
+        PrefDefaults[PrefKey.DEPRECATED_UseSystemColorScheme],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.AutoLightThemeIdentifier,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_AutoLightThemeIdentifier,
+        PrefDefaults[PrefKey.DEPRECATED_AutoLightThemeIdentifier],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.AutoDarkThemeIdentifier,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_AutoDarkThemeIdentifier,
+        PrefDefaults[PrefKey.DEPRECATED_AutoDarkThemeIdentifier],
+      ),
+    )
+    this.services.preferences.setLocalValue(
+      LocalPrefKey.UseTranslucentUI,
+      this.services.preferences.getValue(
+        PrefKey.DEPRECATED_UseTranslucentUI,
+        PrefDefaults[PrefKey.DEPRECATED_UseTranslucentUI],
+      ),
+    )
+  }
+}

packages/snjs/lib/Migrations/Versions/index.ts

@@ -6,6 +6,7 @@ import { Migration2_42_0 } from './2_42_0'
 import { Migration2_167_6 } from './2_167_6'
 import { Migration2_168_6 } from './2_168_6'
 import { Migration2_202_1 } from './2_202_1'
+import { Migration2_208_0 } from './2_208_0'
 
 export const MigrationClasses = [
   Migration2_0_15,
@@ -16,6 +17,7 @@ export const MigrationClasses = [
   Migration2_167_6,
   Migration2_168_6,
   Migration2_202_1,
+  Migration2_208_0,
 ]
 
 export {
@@ -27,4 +29,5 @@ export {
   Migration2_167_6,
   Migration2_168_6,
   Migration2_202_1,
+  Migration2_208_0,
 }

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

@@ -48,6 +48,7 @@ import {
   ItemManagerInterface,
   SyncServiceInterface,
   FeatureStatus,
+  LocalPrefKey,
 } from '@standardnotes/services'
 import { GetFeatureUrl } from './UseCase/GetFeatureUrl'
 import { ComponentManagerEventData } from './ComponentManagerEventData'
@@ -393,7 +394,7 @@ export class ComponentManager
     this.logger.info('Toggling theme', uiFeature.uniqueIdentifier)
 
     if (this.isThemeActive(uiFeature)) {
-      await this.removeActiveTheme(uiFeature)
+      this.removeActiveTheme(uiFeature)
       return
     }
 
@@ -403,7 +404,7 @@ export class ComponentManager
     }
 
     /* Activate current before deactivating others, so as not to flicker */
-    await this.addActiveTheme(uiFeature)
+    this.addActiveTheme(uiFeature)
 
     /* Deactive currently active theme(s) if new theme is not layerable */
     if (!uiFeature.layerable) {
@@ -416,7 +417,7 @@ export class ComponentManager
         }
 
         if (!candidate.layerable) {
-          await this.removeActiveTheme(candidate)
+          this.removeActiveTheme(candidate)
         }
       }
     }
@@ -453,7 +454,7 @@ export class ComponentManager
     const features: NativeFeatureIdentifier[] = []
     const uuids: Uuid[] = []
 
-    const strings = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+    const strings = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
     for (const string of strings) {
       const nativeIdentifier = NativeFeatureIdentifier.create(string)
       if (!nativeIdentifier.isFailed()) {
@@ -534,24 +535,24 @@ export class ComponentManager
     return preferences[preferencesLookupKey]
   }
 
-  async addActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    const activeThemes = (this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []).slice()
+  addActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, []).slice()
 
     activeThemes.push(theme.uniqueIdentifier.value)
 
-    await this.preferences.setValue(PrefKey.ActiveThemes, activeThemes)
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, activeThemes)
   }
 
-  async replaceActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    await this.preferences.setValue(PrefKey.ActiveThemes, [theme.uniqueIdentifier.value])
+  replaceActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, [theme.uniqueIdentifier.value])
   }
 
-  async removeActiveTheme(theme: UIFeature<ThemeFeatureDescription>): Promise<void> {
-    const activeThemes = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+  removeActiveTheme(theme: UIFeature<ThemeFeatureDescription>) {
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
 
     const filteredThemes = activeThemes.filter((activeTheme) => activeTheme !== theme.uniqueIdentifier.value)
 
-    await this.preferences.setValue(PrefKey.ActiveThemes, filteredThemes)
+    this.preferences.setLocalValue(LocalPrefKey.ActiveThemes, filteredThemes)
   }
 
   isThemeActive(theme: UIFeature<ThemeFeatureDescription>): boolean {
@@ -559,13 +560,13 @@ export class ComponentManager
       return false
     }
 
-    const activeThemes = this.preferences.getValue(PrefKey.ActiveThemes, undefined) ?? []
+    const activeThemes = this.preferences.getLocalValue(LocalPrefKey.ActiveThemes, [])
 
     return activeThemes.includes(theme.uniqueIdentifier.value)
   }
 
   async addActiveComponent(component: ComponentInterface): Promise<void> {
-    const activeComponents = (this.preferences.getValue(PrefKey.ActiveComponents, undefined) ?? []).slice()
+    const activeComponents = this.preferences.getValue(PrefKey.ActiveComponents, []).slice()
 
     activeComponents.push(component.uuid)
 

packages/snjs/lib/Services/Preferences/PreferencesService.ts

@@ -14,6 +14,10 @@ import {
   InternalEventInterface,
   ApplicationEvent,
   ApplicationStageChangedEventPayload,
+  StorageServiceInterface,
+  StorageKey,
+  LocalPrefKey,
+  LocalPrefValue,
 } from '@standardnotes/services'
 import { ContentType } from '@standardnotes/domain-core'
 
@@ -24,6 +28,7 @@ export class PreferencesService
   private shouldReload = true
   private reloading = false
   private preferences?: SNUserPrefs
+  private localPreferences: { [key in LocalPrefKey]?: LocalPrefValue[key] } = {}
   private removeItemObserver?: () => void
   private removeSyncObserver?: () => void
 
@@ -32,6 +37,7 @@ export class PreferencesService
     items: ItemManager,
     private mutator: MutatorClientInterface,
     private sync: SyncService,
+    private storage: StorageServiceInterface,
     protected override internalEventBus: InternalEventBusInterface,
   ) {
     super(internalEventBus)
@@ -69,16 +75,36 @@ export class PreferencesService
         if (this.preferences) {
           void this.notifyEvent(PreferencesServiceEvent.PreferencesChanged)
         }
+      } else if (stage === ApplicationStage.StorageDecrypted_09) {
+        this.localPreferences = this.storage.getValue(StorageKey.LocalPreferences) ?? {}
+        void this.notifyEvent(PreferencesServiceEvent.LocalPreferencesChanged)
       }
     }
   }
 
+  getLocalValue<K extends LocalPrefKey>(
+    key: K,
+    defaultValue: LocalPrefValue[K] | undefined,
+  ): LocalPrefValue[K] | undefined
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue: LocalPrefValue[K]): LocalPrefValue[K]
+  getLocalValue<K extends LocalPrefKey>(key: K, defaultValue?: LocalPrefValue[K]): LocalPrefValue[K] | undefined {
+    return this.localPreferences[key] ?? defaultValue
+  }
+
   getValue<K extends PrefKey>(key: K, defaultValue: PrefValue[K] | undefined): PrefValue[K] | undefined
   getValue<K extends PrefKey>(key: K, defaultValue: PrefValue[K]): PrefValue[K]
   getValue<K extends PrefKey>(key: K, defaultValue?: PrefValue[K]): PrefValue[K] | undefined {
     return this.preferences?.getPref(key) ?? defaultValue
   }
 
+  setLocalValue<K extends LocalPrefKey>(key: K, value: LocalPrefValue[K]): void {
+    this.localPreferences[key] = value
+
+    this.storage.setValue(StorageKey.LocalPreferences, this.localPreferences)
+
+    void this.notifyEvent(PreferencesServiceEvent.LocalPreferencesChanged)
+  }
+
   async setValue<K extends PrefKey>(key: K, value: PrefValue[K]): Promise<void> {
     await this.setValueDetached(key, value)
 

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

@@ -2,7 +2,6 @@ import {
   UIFeature,
   CreateDecryptedLocalStorageContextPayload,
   LocalStorageDecryptedContextualPayload,
-  PrefKey,
   PrefDefaults,
   ComponentInterface,
 } from '@standardnotes/models'
@@ -12,8 +11,8 @@ import {
   StorageValueModes,
   FeatureStatus,
   PreferenceServiceInterface,
-  PreferencesServiceEvent,
   ComponentManagerInterface,
+  LocalPrefKey,
 } from '@standardnotes/services'
 import { NativeFeatureIdentifier, FindNativeTheme, ThemeFeatureDescription } from '@standardnotes/features'
 import { WebApplicationInterface } from '../WebApplication/WebApplicationInterface'
@@ -75,56 +74,6 @@ export class ThemeManager extends AbstractUIService {
         }),
       )
     }
-
-    this.eventDisposers.push(
-      this.preferences.addEventObserver(async (event) => {
-        if (event !== PreferencesServiceEvent.PreferencesChanged) {
-          return
-        }
-
-        this.toggleTranslucentUIColors()
-
-        let hasChange = false
-
-        const { features, uuids } = this.components.getActiveThemesIdentifiers()
-
-        const featuresList = new ActiveThemeList(this.application.items, features)
-        const uuidsList = new ActiveThemeList(this.application.items, uuids)
-
-        for (const active of this.themesActiveInTheUI.getList()) {
-          if (!featuresList.has(active) && !uuidsList.has(active)) {
-            this.deactivateThemeInTheUI(active)
-            hasChange = true
-          }
-        }
-
-        for (const feature of features) {
-          if (!this.themesActiveInTheUI.has(feature)) {
-            const theme = FindNativeTheme(feature.value)
-            if (theme) {
-              const uiFeature = new UIFeature<ThemeFeatureDescription>(theme)
-              this.activateTheme(uiFeature)
-              hasChange = true
-            }
-          }
-        }
-
-        for (const uuid of uuids) {
-          if (!this.themesActiveInTheUI.has(uuid)) {
-            const theme = this.application.items.findItem<ComponentInterface>(uuid.value)
-            if (theme) {
-              const uiFeature = new UIFeature<ThemeFeatureDescription>(theme)
-              this.activateTheme(uiFeature)
-              hasChange = true
-            }
-          }
-        }
-
-        if (hasChange) {
-          this.cacheThemeState().catch(console.error)
-        }
-      }),
-    )
   }
 
   override async onAppEvent(event: ApplicationEvent) {
@@ -154,15 +103,15 @@ export class ThemeManager extends AbstractUIService {
         }
         break
       }
-      case ApplicationEvent.PreferencesChanged: {
-        void this.handlePreferencesChangeEvent()
+      case ApplicationEvent.LocalPreferencesChanged: {
+        void this.handleLocalPreferencesChangeEvent()
         break
       }
     }
   }
 
   async handleMobileColorSchemeChangeEvent() {
-    const useDeviceThemeSettings = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
+    const useDeviceThemeSettings = this.preferences.getLocalValue(LocalPrefKey.UseSystemColorScheme, false)
 
     if (useDeviceThemeSettings) {
       const prefersDarkColorScheme = (await this.application.mobileDevice.getColorScheme()) === 'dark'
@@ -170,10 +119,54 @@ export class ThemeManager extends AbstractUIService {
     }
   }
 
-  private async handlePreferencesChangeEvent() {
+  private handleThemeStateChange() {
+    let hasChange = false
+
+    const { features, uuids } = this.components.getActiveThemesIdentifiers()
+
+    const featuresList = new ActiveThemeList(this.application.items, features)
+    const uuidsList = new ActiveThemeList(this.application.items, uuids)
+
+    for (const active of this.themesActiveInTheUI.getList()) {
+      if (!featuresList.has(active) && !uuidsList.has(active)) {
+        this.deactivateThemeInTheUI(active)
+        hasChange = true
+      }
+    }
+
+    for (const feature of features) {
+      if (!this.themesActiveInTheUI.has(feature)) {
+        const theme = FindNativeTheme(feature.value)
+        if (theme) {
+          const uiFeature = new UIFeature<ThemeFeatureDescription>(theme)
+          this.activateTheme(uiFeature)
+          hasChange = true
+        }
+      }
+    }
+
+    for (const uuid of uuids) {
+      if (!this.themesActiveInTheUI.has(uuid)) {
+        const theme = this.application.items.findItem<ComponentInterface>(uuid.value)
+        if (theme) {
+          const uiFeature = new UIFeature<ThemeFeatureDescription>(theme)
+          this.activateTheme(uiFeature)
+          hasChange = true
+        }
+      }
+    }
+
+    if (hasChange) {
+      this.cacheThemeState().catch(console.error)
+    }
+  }
+
+  private async handleLocalPreferencesChangeEvent() {
+    this.handleThemeStateChange()
+
     this.toggleTranslucentUIColors()
 
-    const useDeviceThemeSettings = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
+    const useDeviceThemeSettings = this.preferences.getLocalValue(LocalPrefKey.UseSystemColorScheme, false)
 
     const hasPreferenceChanged = useDeviceThemeSettings !== this.lastUseDeviceThemeSettings
 
@@ -218,7 +211,7 @@ export class ThemeManager extends AbstractUIService {
   }
 
   private colorSchemeEventHandler(event: MediaQueryListEvent) {
-    const shouldChangeTheme = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
+    const shouldChangeTheme = this.preferences.getLocalValue(LocalPrefKey.UseSystemColorScheme, false)
 
     if (shouldChangeTheme) {
       this.setThemeAsPerColorScheme(event.matches)
@@ -226,10 +219,14 @@ export class ThemeManager extends AbstractUIService {
   }
 
   private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
-    const preference = prefersDarkColorScheme ? PrefKey.AutoDarkThemeIdentifier : PrefKey.AutoLightThemeIdentifier
+    const preference = prefersDarkColorScheme
+      ? LocalPrefKey.AutoDarkThemeIdentifier
+      : LocalPrefKey.AutoLightThemeIdentifier
 
     const preferenceDefault =
-      preference === PrefKey.AutoDarkThemeIdentifier ? NativeFeatureIdentifier.TYPES.DarkTheme : DefaultThemeIdentifier
+      preference === LocalPrefKey.AutoDarkThemeIdentifier
+        ? NativeFeatureIdentifier.TYPES.DarkTheme
+        : DefaultThemeIdentifier
 
     const usecase = new GetAllThemesUseCase(this.application.items)
     const { thirdParty, native } = usecase.execute({ excludeLayerable: false })
@@ -237,7 +234,7 @@ export class ThemeManager extends AbstractUIService {
 
     const activeTheme = themes.find((theme) => this.components.isThemeActive(theme) && !theme.layerable)
 
-    const themeIdentifier = this.preferences.getValue(preference, preferenceDefault)
+    const themeIdentifier = this.preferences.getLocalValue(preference, preferenceDefault)
 
     const toggleActiveTheme = () => {
       if (activeTheme) {
@@ -337,7 +334,7 @@ export class ThemeManager extends AbstractUIService {
   }
 
   private shouldUseTranslucentUI() {
-    return this.application.getPreference(PrefKey.UseTranslucentUI, PrefDefaults[PrefKey.UseTranslucentUI])
+    return this.preferences.getLocalValue(LocalPrefKey.UseTranslucentUI, PrefDefaults[LocalPrefKey.UseTranslucentUI])
   }
 
   private toggleTranslucentUIColors() {

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -4,7 +4,7 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { WebApplication } from '@/Application/WebApplication'
-import { PrefKey, FeatureStatus, naturalSort, PrefDefaults } from '@standardnotes/snjs'
+import { FeatureStatus, naturalSort, LocalPrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
@@ -14,7 +14,7 @@ import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import EditorAppearance from './Appearance/EditorAppearance'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 
 type Props = {
   application: WebApplication
@@ -24,19 +24,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   const premiumModal = usePremiumModal()
 
   const [themeItems, setThemeItems] = useState<DropdownItem[]>([])
-  const [autoLightTheme, setAutoLightTheme] = useState<string>(() =>
-    application.getPreference(PrefKey.AutoLightThemeIdentifier, PrefDefaults[PrefKey.AutoLightThemeIdentifier]),
-  )
-  const [autoDarkTheme, setAutoDarkTheme] = useState<string>(() =>
-    application.getPreference(PrefKey.AutoDarkThemeIdentifier, PrefDefaults[PrefKey.AutoDarkThemeIdentifier]),
-  )
-  const [useDeviceSettings, setUseDeviceSettings] = useState(() =>
-    application.getPreference(PrefKey.UseSystemColorScheme, PrefDefaults[PrefKey.UseSystemColorScheme]),
-  )
 
-  const useTranslucentUI = usePreference(PrefKey.UseTranslucentUI)
+  const [autoLightTheme, setAutoLightTheme] = useLocalPreference(LocalPrefKey.AutoLightThemeIdentifier)
+  const [autoDarkTheme, setAutoDarkTheme] = useLocalPreference(LocalPrefKey.AutoDarkThemeIdentifier)
+  const [useDeviceSettings, setUseDeviceSettings] = useLocalPreference(LocalPrefKey.UseSystemColorScheme)
+
+  const [useTranslucentUI, setUseTranslucentUI] = useLocalPreference(LocalPrefKey.UseTranslucentUI)
   const toggleTranslucentUI = () => {
-    application.setPreference(PrefKey.UseTranslucentUI, !useTranslucentUI).catch(console.error)
+    setUseTranslucentUI(!useTranslucentUI)
   }
 
   useEffect(() => {
@@ -76,12 +71,12 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   }, [application])
 
   const toggleUseDeviceSettings = () => {
-    application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings).catch(console.error)
-    if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
-      application.setPreference(PrefKey.AutoLightThemeIdentifier, autoLightTheme).catch(console.error)
+    setUseDeviceSettings(!useDeviceSettings)
+    if (!application.preferences.getLocalValue(LocalPrefKey.AutoLightThemeIdentifier)) {
+      setAutoLightTheme(autoLightTheme)
     }
-    if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
-      application.setPreference(PrefKey.AutoDarkThemeIdentifier, autoDarkTheme).catch(console.error)
+    if (!application.preferences.getLocalValue(LocalPrefKey.AutoDarkThemeIdentifier)) {
+      setAutoDarkTheme(autoDarkTheme)
     }
     setUseDeviceSettings(!useDeviceSettings)
   }
@@ -92,7 +87,6 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoLightThemeIdentifier, value).catch(console.error)
     setAutoLightTheme(value)
   }
 
@@ -102,7 +96,6 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoDarkThemeIdentifier, value).catch(console.error)
     setAutoDarkTheme(value)
   }
 

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -76,7 +76,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
 
   useEffect(() => {
     return application.preferences.addEventObserver((event) => {
-      if (event === PreferencesServiceEvent.PreferencesChanged) {
+      if (event === PreferencesServiceEvent.LocalPreferencesChanged) {
         reloadThemes()
       }
     })

packages/web/src/javascripts/Hooks/usePreference.tsx

@@ -1,6 +1,29 @@
 import { useApplication } from '@/Components/ApplicationProvider'
-import { ApplicationEvent, PrefKey, PrefDefaults } from '@standardnotes/snjs'
-import { useEffect, useState } from 'react'
+import { ApplicationEvent, PrefKey, PrefDefaults, LocalPrefKey, LocalPrefValue } from '@standardnotes/snjs'
+import { useCallback, useEffect, useState } from 'react'
+
+export function useLocalPreference<Key extends LocalPrefKey>(preference: Key) {
+  const application = useApplication()
+
+  const [value, setValue] = useState(application.preferences.getLocalValue(preference, PrefDefaults[preference]))
+
+  const setNewValue = useCallback(
+    (newValue: LocalPrefValue[Key]) => {
+      application.preferences.setLocalValue(preference, newValue)
+    },
+    [application, preference],
+  )
+
+  useEffect(() => {
+    return application.addEventObserver(async () => {
+      const latestValue = application.preferences.getLocalValue(preference, PrefDefaults[preference])
+
+      setValue(latestValue)
+    }, ApplicationEvent.LocalPreferencesChanged)
+  }, [application, preference])
+
+  return [value, setNewValue] as const
+}
 
 export default function usePreference<Key extends PrefKey>(preference: Key) {
   const application = useApplication()