Move appearance settings to settings page

src/view/shell/desktop/RightNav.tsx

@@ -52,33 +52,6 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
         </View>
       </View>
       <InviteCodes />
-      <View>
-        <Text type="sm" style={[pal.textLight, styles.colorModeText]}>
-          Set color theme
-        </Text>
-        <View style={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>
   )
 })
@@ -121,45 +94,6 @@ const InviteCodes = observer(() => {
   )
 })
 
-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({
   rightNav: {
     position: 'absolute',
@@ -187,59 +121,4 @@ const styles = StyleSheet.create({
   inviteCodesIcon: {
     marginRight: 6,
   },
-
-  cycleColorModeToggle: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    marginHorizontal: 12,
-  },
-  cycleColorModeToggleIcon: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 26,
-    height: 26,
-    borderRadius: 15,
-  },
-
-  colorModeText: {
-    marginLeft: 10,
-    marginBottom: 6,
-  },
-
-  selectableBtns: {
-    flexDirection: 'row',
-    marginLeft: 10,
-  },
-  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,
-  },
 })