7 files changed, 58 insertions, 34 deletions
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index ab710a3d0..e3a4ccd8c 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -171,6 +171,10 @@ export interface ChangeEmailModal {
   name: 'change-email'
 }
 
+export interface ChangePasswordModal {
+  name: 'change-password'
+}
+
 export interface SwitchAccountModal {
   name: 'switch-account'
 }
@@ -202,6 +206,7 @@ export type Modal =
   | BirthDateSettingsModal
   | VerifyEmailModal
   | ChangeEmailModal
+  | ChangePasswordModal
   | SwitchAccountModal
 
   // Curation
diff --git a/src/state/persisted/legacy.ts b/src/state/persisted/legacy.ts
index 6bb75ae86..767faf48f 100644
--- a/src/state/persisted/legacy.ts
+++ b/src/state/persisted/legacy.ts
@@ -69,6 +69,7 @@ const DEPRECATED_ROOT_STATE_STORAGE_KEY = 'root'
 export function transform(legacy: Partial<LegacySchema>): Schema {
   return {
     colorMode: legacy.shell?.colorMode || defaults.colorMode,
+    darkTheme: defaults.darkTheme,
     session: {
       accounts: legacy.session?.accounts || defaults.session.accounts,
       currentAccount:
diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts
index 870e14aaf..ade97ef74 100644
--- a/src/state/persisted/schema.ts
+++ b/src/state/persisted/schema.ts
@@ -18,6 +18,7 @@ export type PersistedAccount = z.infer<typeof accountSchema>
 
 export const schema = z.object({
   colorMode: z.enum(['system', 'light', 'dark']),
+  darkTheme: z.enum(['dim', 'dark']).optional(),
   session: z.object({
     accounts: z.array(accountSchema),
     currentAccount: accountSchema.optional(),
@@ -60,6 +61,7 @@ export type Schema = z.infer<typeof schema>
 
 export const defaults: Schema = {
   colorMode: 'system',
+  darkTheme: 'dim',
   session: {
     accounts: [],
     currentAccount: undefined,
diff --git a/src/state/queries/preferences/types.ts b/src/state/queries/preferences/types.ts
index cd9a2e8f9..45c9eed7d 100644
--- a/src/state/queries/preferences/types.ts
+++ b/src/state/queries/preferences/types.ts
@@ -5,15 +5,23 @@ import {
   BskyFeedViewPreference,
 } from '@atproto/api'
 
-export const configurableLabelGroups = [
+export const configurableAdultLabelGroups = [
   'nsfw',
   'nudity',
   'suggestive',
   'gore',
+] as const
+
+export const configurableOtherLabelGroups = [
   'hate',
   'spam',
   'impersonation',
 ] as const
+
+export const configurableLabelGroups = [
+  ...configurableAdultLabelGroups,
+  ...configurableOtherLabelGroups,
+] as const
 export type ConfigurableLabelGroup = (typeof configurableLabelGroups)[number]
 
 export type LabelGroup =
diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx
index ed2e6fcf1..c44f96dd6 100644
--- a/src/state/session/index.tsx
+++ b/src/state/session/index.tsx
@@ -236,7 +236,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       if (!deactivated) {
         /*dont await*/ agent.upsertProfile(_existing => {
           return {
-            displayName: handle,
+            displayName: '',
           }
         })
       }
diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx
index 192b88314..4f0391aa6 100644
--- a/src/state/shell/color-mode.tsx
+++ b/src/state/shell/color-mode.tsx
@@ -1,57 +1,65 @@
 import React from 'react'
-import {isWeb} from '#/platform/detection'
 import * as persisted from '#/state/persisted'
 
-type StateContext = persisted.Schema['colorMode']
-type SetContext = (v: persisted.Schema['colorMode']) => void
+type StateContext = {
+  colorMode: persisted.Schema['colorMode']
+  darkTheme: persisted.Schema['darkTheme']
+}
+type SetContext = {
+  setColorMode: (v: persisted.Schema['colorMode']) => void
+  setDarkTheme: (v: persisted.Schema['darkTheme']) => void
+}
 
-const stateContext = React.createContext<StateContext>('system')
-const setContext = React.createContext<SetContext>(
-  (_: persisted.Schema['colorMode']) => {},
-)
+const stateContext = React.createContext<StateContext>({
+  colorMode: 'system',
+  darkTheme: 'dark',
+})
+const setContext = React.createContext<SetContext>({} as SetContext)
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('colorMode'))
+  const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
+  const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
 
-  const setStateWrapped = React.useCallback(
-    (colorMode: persisted.Schema['colorMode']) => {
-      setState(colorMode)
-      persisted.write('colorMode', colorMode)
-      updateDocument(colorMode)
+  const setColorModeWrapped = React.useCallback(
+    (_colorMode: persisted.Schema['colorMode']) => {
+      setColorMode(_colorMode)
+      persisted.write('colorMode', _colorMode)
     },
-    [setState],
+    [setColorMode],
+  )
+
+  const setDarkThemeWrapped = React.useCallback(
+    (_darkTheme: persisted.Schema['darkTheme']) => {
+      setDarkTheme(_darkTheme)
+      persisted.write('darkTheme', _darkTheme)
+    },
+    [setDarkTheme],
   )
 
   React.useEffect(() => {
-    updateDocument(persisted.get('colorMode')) // set on load
     return persisted.onUpdate(() => {
-      setState(persisted.get('colorMode'))
-      updateDocument(persisted.get('colorMode'))
+      setColorModeWrapped(persisted.get('colorMode'))
+      setDarkThemeWrapped(persisted.get('darkTheme'))
     })
-  }, [setState])
+  }, [setColorModeWrapped, setDarkThemeWrapped])
 
   return (
-    <stateContext.Provider value={state}>
-      <setContext.Provider value={setStateWrapped}>
+    <stateContext.Provider value={{colorMode, darkTheme}}>
+      <setContext.Provider
+        value={{
+          setDarkTheme: setDarkThemeWrapped,
+          setColorMode: setColorModeWrapped,
+        }}>
         {children}
       </setContext.Provider>
     </stateContext.Provider>
   )
 }
 
-export function useColorMode() {
+export function useThemePrefs() {
   return React.useContext(stateContext)
 }
 
-export function useSetColorMode() {
+export function useSetThemePrefs() {
   return React.useContext(setContext)
 }
-
-function updateDocument(colorMode: string) {
-  if (isWeb && typeof window !== 'undefined') {
-    const html = window.document.documentElement
-    // remove any other color mode classes
-    html.className = html.className.replace(/colorMode--\w+/g, '')
-    html.classList.add(`colorMode--${colorMode}`)
-  }
-}
diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx
index 53f05055c..07909c000 100644
--- a/src/state/shell/index.tsx
+++ b/src/state/shell/index.tsx
@@ -14,7 +14,7 @@ export {
   useSetDrawerSwipeDisabled,
 } from './drawer-swipe-disabled'
 export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
-export {useColorMode, useSetColorMode} from './color-mode'
+export {useThemePrefs, useSetThemePrefs} from './color-mode'
 export {useOnboardingState, useOnboardingDispatch} from './onboarding'
 export {useComposerState, useComposerControls} from './composer'
 export {useTickEveryMinute} from './tick-every-minute'