Move appearance settings to settings page

src/view/screens/Settings.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   ActivityIndicator,
+  Pressable,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
@@ -282,6 +283,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]}>
@@ -411,6 +440,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,
@@ -462,4 +530,43 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 18,
   },
+
+  colorModeText: {
+    marginLeft: 10,
+    marginBottom: 6,
+  },
+
+  selectableBtns: {
+    flexDirection: 'row',
+  },
+  selectableBtn: {
+    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,
+  },
 })