Merge branch 'ericvolp12-inherit_system_theme' into main

src/App.native.tsx

@@ -51,7 +51,7 @@ const App = observer(() => {
     return null
   }
   return (
-    <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+    <ThemeProvider theme={rootStore.shell.colorMode}>
       <RootSiblingParent>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>

src/App.web.tsx

@@ -30,7 +30,7 @@ const App = observer(() => {
   }
 
   return (
-    <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+    <ThemeProvider theme={rootStore.shell.colorMode}>
       <RootSiblingParent>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>

src/lib/ThemeContext.tsx

@@ -89,10 +89,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
 }) => {
-  const colorScheme = useColorScheme()
+  const colorSchemeFromRN = useColorScheme()
+
+  // if theme is 'system', use the device's configured color scheme
+  let colorScheme = theme === 'system' ? colorSchemeFromRN : theme
 
   const value = useMemo(
-    () => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme),
+    () => (colorScheme === 'dark' ? darkTheme : defaultTheme),
     [colorScheme, theme],
   )
 

src/state/models/ui/shell.ts

@@ -189,7 +189,7 @@ export interface ComposerOpts {
 }
 
 export class ShellUiModel {
-  darkMode = false
+  colorMode = 'system'
   minimalShellMode = false
   isDrawerOpen = false
   isDrawerSwipeDisabled = false
@@ -210,20 +210,20 @@ export class ShellUiModel {
 
   serialize(): unknown {
     return {
-      darkMode: this.darkMode,
+      colorMode: this.colorMode,
     }
   }
 
   hydrate(v: unknown) {
     if (isObj(v)) {
-      if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') {
-        this.darkMode = v.darkMode
+      if (hasProp(v, 'colorMode') && typeof v.colorMode === 'string') {
+        this.colorMode = v.colorMode
       }
     }
   }
 
-  setDarkMode(v: boolean) {
-    this.darkMode = v
+  setColorMode(mode: string) {
+    this.colorMode = mode
   }
 
   setMinimalShellMode(v: boolean) {

src/view/screens/Settings.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   ActivityIndicator,
+  Pressable,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
@@ -287,6 +288,34 @@ export const SettingsScreen = withAuthRequired(
             </Text>
           </TouchableOpacity>
 
+          <View style={styles.spacer20} />
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
+            Appearance
+          </Text>
+          <View>
+            <View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="system"
+                label="System"
+                left
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="light"
+                label="Light"
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+              <SelectableBtn
+                current={store.shell.colorMode}
+                value="dark"
+                label="Dark"
+                right
+                onChange={(v: string) => store.shell.setColorMode(v)}
+              />
+            </View>
+          </View>
           <View style={styles.spacer20} />
 
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
@@ -442,6 +471,45 @@ function AccountDropdownBtn({handle}: {handle: string}) {
   )
 }
 
+interface SelectableBtnProps {
+  current: string
+  value: string
+  label: string
+  left?: boolean
+  right?: boolean
+  onChange: (v: string) => void
+}
+
+function SelectableBtn({
+  current,
+  value,
+  label,
+  left,
+  right,
+  onChange,
+}: SelectableBtnProps) {
+  const pal = usePalette('default')
+  const palPrimary = usePalette('inverted')
+  return (
+    <Pressable
+      style={[
+        styles.selectableBtn,
+        left && styles.selectableBtnLeft,
+        right && styles.selectableBtnRight,
+        pal.border,
+        current === value ? palPrimary.view : pal.view,
+      ]}
+      onPress={() => onChange(value)}
+      accessibilityRole="button"
+      accessibilityLabel={value}
+      accessibilityHint={`Set color theme to  ${value}`}>
+      <Text style={current === value ? palPrimary.text : pal.text}>
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,
@@ -493,4 +561,45 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 18,
   },
+
+  colorModeText: {
+    marginLeft: 10,
+    marginBottom: 6,
+  },
+
+  selectableBtns: {
+    flexDirection: 'row',
+  },
+  selectableBtn: {
+    flex: isDesktopWeb ? undefined : 1,
+    width: isDesktopWeb ? 100 : undefined,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderLeftWidth: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+  },
+  selectableBtnLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderLeftWidth: 1,
+  },
+  selectableBtnRight: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+  toggleBtn: {
+    paddingHorizontal: 0,
+  },
 })

src/view/shell/Drawer.tsx

@@ -27,7 +27,6 @@ import {
   CogIcon,
   MagnifyingGlassIcon2,
   MagnifyingGlassIcon2Solid,
-  MoonIcon,
   UserIconSolid,
   SatelliteDishIcon,
   SatelliteDishIconSolid,
@@ -119,12 +118,6 @@ export const DrawerContent = observer(() => {
     track('Menu:FeedbackClicked')
     Linking.openURL(FEEDBACK_FORM_URL)
   }, [track])
-
-  const onDarkmodePress = React.useCallback(() => {
-    track('Menu:ItemClicked', {url: '#darkmode'})
-    store.shell.setDarkMode(!store.shell.darkMode)
-  }, [track, store])
-
   // rendering
   // =
 
@@ -303,29 +296,6 @@ export const DrawerContent = observer(() => {
           <View style={styles.smallSpacer} />
         </ScrollView>
         <View style={styles.footer}>
-          {!isWeb && (
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessibilityLabel="Toggle dark mode"
-              accessibilityHint={
-                theme.colorScheme === 'dark'
-                  ? 'Sets display to light mode'
-                  : 'Sets display to dark mode'
-              }
-              onPress={onDarkmodePress}
-              style={[
-                styles.footerBtn,
-                theme.colorScheme === 'light'
-                  ? pal.btn
-                  : styles.footerBtnDarkMode,
-              ]}>
-              <MoonIcon
-                size={22}
-                style={pal.text as StyleProp<ViewStyle>}
-                strokeWidth={2}
-              />
-            </TouchableOpacity>
-          )}
           <TouchableOpacity
             accessibilityRole="link"
             accessibilityLabel="Send feedback"
@@ -536,9 +506,6 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 25,
   },
-  footerBtnDarkMode: {
-    backgroundColor: colors.black,
-  },
   footerBtnFeedback: {
     paddingHorizontal: 24,
   },

src/view/shell/desktop/RightNav.tsx

@@ -10,19 +10,11 @@ import {FEEDBACK_FORM_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {pluralize} from 'lib/strings/helpers'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {MoonIcon, SunIcon} from 'lib/icons'
 import {formatCount} from 'view/com/util/numeric/format'
 
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
-  const mode = useColorSchemeStyle('Light', 'Dark')
-  const otherMode = mode === 'Dark' ? 'Light' : 'Dark'
-
-  const onDarkmodePress = React.useCallback(() => {
-    store.shell.setDarkMode(!store.shell.darkMode)
-  }, [store])
 
   return (
     <View style={[styles.rightNav, pal.view]}>
@@ -60,29 +52,6 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
         </View>
       </View>
       <InviteCodes />
-      <View>
-        <TouchableOpacity
-          style={[styles.darkModeToggle]}
-          onPress={onDarkmodePress}
-          accessibilityRole="button"
-          accessibilityLabel="Toggle dark mode"
-          accessibilityHint={
-            mode === 'Dark'
-              ? 'Sets display to light mode'
-              : 'Sets display to dark mode'
-          }>
-          <View style={[pal.viewLight, styles.darkModeToggleIcon]}>
-            {mode === 'Dark' ? (
-              <SunIcon size={18} style={pal.textLight} />
-            ) : (
-              <MoonIcon size={18} style={pal.textLight} />
-            )}
-          </View>
-          <Text type="sm" style={pal.textLight}>
-            {otherMode} mode
-          </Text>
-        </TouchableOpacity>
-      </View>
     </View>
   )
 })
@@ -152,20 +121,4 @@ const styles = StyleSheet.create({
   inviteCodesIcon: {
     marginRight: 6,
   },
-
-  darkModeToggle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    marginHorizontal: 12,
-    marginTop: 8,
-  },
-  darkModeToggleIcon: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 26,
-    height: 26,
-    borderRadius: 15,
-  },
 })