fix: dark mode toggling

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

@@ -233,7 +233,6 @@ export class ThemeManager extends AbstractService {
         if (theme && !theme.active) {
           this.application.mutator.toggleTheme(theme).catch(console.error)
         }
-        void this.application.setPreference(PrefKey.DarkMode, false)
       }
     }
 
@@ -324,6 +323,8 @@ export class ThemeManager extends AbstractService {
       }
     }
     document.getElementsByTagName('head')[0].appendChild(link)
+
+    void this.application.setPreference(PrefKey.DarkMode, false)
   }
 
   private getBackgroundColor() {

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

@@ -48,17 +48,23 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   const [themes, setThemes] = useState<ThemeItem[]>([])
   const [toggleableComponents, setToggleableComponents] = useState<SNComponent[]>([])
 
-  const [isDarkModeOn, setDarkModeOn] = useState(
+  const [isDarkModeOn, setDarkModeOn] = useState(() =>
     application.getPreference(PrefKey.DarkMode, PrefDefaults[PrefKey.DarkMode]),
   )
   const defaultThemeOn =
     !themes.map((item) => item?.component).find((theme) => theme?.active && !theme.isLayerable()) && !isDarkModeOn
 
   useEffect(() => {
-    application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+    const removeObserver = application.addEventObserver(async (event) => {
+      if (event !== ApplicationEvent.PreferencesChanged) {
+        return
+      }
+
       const isDarkModeOn = application.getPreference(PrefKey.DarkMode, PrefDefaults[PrefKey.DarkMode])
       setDarkModeOn(isDarkModeOn)
     })
+
+    return removeObserver
   }, [application])
 
   const prefsButtonRef = useRef<HTMLButtonElement>(null)

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

@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { FeatureIdentifier, FeatureStatus, PrefKey } from '@standardnotes/snjs'
+import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
@@ -37,10 +37,6 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
 
         if (themeIsLayerableOrNotActive) {
           application.mutator.toggleTheme(item.component).catch(console.error)
-
-          if (!isThemeLayerable) {
-            application.setPreference(PrefKey.DarkMode, false)
-          }
         }
       } else {
         premiumModal.activate(`${item.name} theme`)