Add dark mode toggle

src/App.native.tsx

@@ -5,12 +5,13 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import SplashScreen from 'react-native-splash-screen'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {observer} from 'mobx-react-lite'
 import {ThemeProvider} from './view/lib/ThemeContext'
 import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {MobileShell} from './view/shell/mobile'
 
-function App() {
+const App = observer(() => {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -41,7 +42,7 @@ function App() {
     <GestureHandlerRootView style={{flex: 1}}>
       <RootSiblingParent>
         <RootStoreProvider value={rootStore}>
-          <ThemeProvider>
+          <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
             <SafeAreaProvider>
               <MobileShell />
             </SafeAreaProvider>
@@ -50,6 +51,6 @@ function App() {
       </RootSiblingParent>
     </GestureHandlerRootView>
   )
-}
+})
 
 export default App

src/state/models/root-store.ts

@@ -67,6 +67,7 @@ export class RootStoreModel {
       me: this.me.serialize(),
       nav: this.nav.serialize(),
       onboard: this.onboard.serialize(),
+      shell: this.shell.serialize(),
     }
   }
 
@@ -84,6 +85,9 @@ export class RootStoreModel {
       if (hasProp(v, 'onboard')) {
         this.onboard.hydrate(v.onboard)
       }
+      if (hasProp(v, 'shell')) {
+        this.shell.hydrate(v.shell)
+      }
     }
   }
 

src/state/models/shell-ui.ts

@@ -1,5 +1,6 @@
 import {makeAutoObservable} from 'mobx'
 import {ProfileViewModel} from './profile-view'
+import {isObj, hasProp} from '../lib/type-guards'
 
 export class ConfirmModal {
   name = 'confirm'
@@ -135,6 +136,7 @@ export interface ComposerOpts {
 }
 
 export class ShellUiModel {
+  darkMode = false
   minimalShellMode = false
   isMainMenuOpen = false
   isModalActive = false
@@ -156,7 +158,25 @@ export class ShellUiModel {
   composerOpts: ComposerOpts | undefined
 
   constructor() {
-    makeAutoObservable(this)
+    makeAutoObservable(this, {serialize: false, hydrate: false})
+  }
+
+  serialize(): unknown {
+    return {
+      darkMode: this.darkMode,
+    }
+  }
+
+  hydrate(v: unknown) {
+    if (isObj(v)) {
+      if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') {
+        this.darkMode = v.darkMode
+      }
+    }
+  }
+
+  setDarkMode(v: boolean) {
+    this.darkMode = v
   }
 
   setMinimalShellMode(v: boolean) {

src/view/shell/mobile/Menu.tsx

@@ -6,6 +6,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
+import {observer} from 'mobx-react-lite'
 import VersionNumber from 'react-native-version-number'
 import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
@@ -18,16 +19,12 @@ import {
 } from '../../lib/icons'
 import {UserAvatar} from '../../com/util/UserAvatar'
 import {Text} from '../../com/util/text/Text'
+import {ToggleButton} from '../../com/util/forms/ToggleButton'
 import {CreateSceneModal} from '../../../state/models/shell-ui'
 import {usePalette} from '../../lib/hooks/usePalette'
 
-export const Menu = ({
-  visible,
-  onClose,
-}: {
-  visible: boolean
-  onClose: () => void
-}) => {
+export const Menu = observer(
+  ({visible, onClose}: {visible: boolean; onClose: () => void}) => {
     const pal = usePalette('default')
     const store = useStores()
 
@@ -137,12 +134,16 @@ export const Menu = ({
         </TouchableOpacity>
         <View style={[styles.section, pal.border]}>
           <MenuItem
-          icon={<HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />}
+            icon={
+              <HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />
+            }
             label="Home"
             url="/"
           />
           <MenuItem
-          icon={<BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />}
+            icon={
+              <BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />
+            }
             label="Notifications"
             url="/notifications"
             count={store.me.notificationCount}
@@ -173,7 +174,10 @@ export const Menu = ({
         <View style={[styles.section, pal.border]}>
           <MenuItem
             icon={
-            <UserGroupIcon style={pal.text as StyleProp<ViewStyle>} size="30" />
+              <UserGroupIcon
+                style={pal.text as StyleProp<ViewStyle>}
+                size="30"
+              />
             }
             label="Create a scene"
             onPress={onPressCreateScene}
@@ -190,15 +194,23 @@ export const Menu = ({
             url="/settings"
           />
         </View>
+        <View style={[styles.section, pal.border]}>
+          <ToggleButton
+            label="Dark mode"
+            isSelected={store.shell.darkMode}
+            onPress={() => store.shell.setDarkMode(!store.shell.darkMode)}
+          />
+        </View>
         <View style={styles.footer}>
           <Text style={[pal.textLight]}>
-          Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
-          )
+            Build version {VersionNumber.appVersion} (
+            {VersionNumber.buildVersion})
           </Text>
         </View>
       </View>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   view: {