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

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()