Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

change color scheme settings into toggle group list

authored by whey.party and committed by

Tangled 6f4797de 72bc09d9

+42 -33
+42 -33
src/screens/Settings/AppearanceSettings.tsx
··· 1 1 import {useCallback} from 'react' 2 + import {View} from 'react-native' 2 3 import Animated, { 3 4 FadeInUp, 4 5 FadeOutUp, ··· 17 18 import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem' 18 19 import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf' 19 20 import * as SegmentedControl from '#/components/forms/SegmentedControl' 21 + import * as Toggle from '#/components/forms/Toggle' 20 22 import {type Props as SVGIconProps} from '#/components/icons/common' 21 23 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' 22 24 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' ··· 32 34 export function AppearanceSettingsScreen({}: Props) { 33 35 const {_} = useLingui() 34 36 const {fonts} = useAlf() 37 + const t = useTheme() 35 38 36 39 const {colorMode, colorScheme, darkTheme} = useThemePrefs() 37 40 const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs() ··· 79 82 [fonts], 80 83 ) 81 84 85 + const colorSchemes = [ 86 + {name: 'witchsky', label: _(msg`Witchsky`)}, 87 + {name: 'bluesky', label: _(msg`Bluesky`)}, 88 + {name: 'blacksky', label: _(msg`Blacksky`)}, 89 + {name: 'deer', label: _(msg`Deer`)}, 90 + {name: 'zeppelin', label: _(msg`Zeppelin`)}, 91 + {name: 'kitty', label: _(msg`Kitty`)}, 92 + ] 93 + 82 94 return ( 83 95 <LayoutAnimationConfig skipExiting skipEntering> 84 96 <Layout.Screen testID="preferencesThreadsScreen"> ··· 114 126 onChange={onChangeAppearance} 115 127 /> 116 128 117 - <AppearanceToggleButtonGroup 118 - title={_(msg`Color scheme`)} 119 - icon={PizzaIcon} 120 - items={[ 121 - { 122 - label: _(msg`Witchsky`), 123 - name: 'witchsky', 124 - }, 125 - { 126 - label: _(msg`Bluesky`), 127 - name: 'bluesky', 128 - }, 129 - { 130 - label: _(msg`Blacksky`), 131 - name: 'blacksky', 132 - }, 133 - { 134 - label: _(msg`Deer`), 135 - name: 'deer', 136 - }, 137 - { 138 - label: _(msg`Zeppelin`), 139 - name: 'zeppelin', 140 - }, 141 - { 142 - label: _(msg`Kitty`), 143 - name: 'kitty', 144 - }, 145 - ]} 146 - value={colorScheme} 147 - onChange={onChangeScheme} 148 - /> 149 - 150 129 {colorMode !== 'light' && ( 151 130 <Animated.View 152 131 entering={native(FadeInUp)} ··· 169 148 /> 170 149 </Animated.View> 171 150 )} 151 + 152 + <SettingsList.Group> 153 + <SettingsList.ItemIcon icon={PizzaIcon} /> 154 + <SettingsList.ItemText> 155 + <Trans>Color Theme</Trans> 156 + </SettingsList.ItemText> 157 + <View style={[a.w_full, a.gap_md]}> 158 + <Text style={[a.flex_1, t.atoms.text_contrast_medium]}> 159 + <Trans>Choose which color scheme to use:</Trans> 160 + </Text> 161 + <Toggle.Group 162 + label={_(msg`Color Theme`)} 163 + type="radio" 164 + values={[colorScheme]} 165 + onChange={([value]) => 166 + onChangeScheme(value as typeof colorScheme) 167 + }> 168 + <View style={[a.gap_sm, a.flex_1]}> 169 + {colorSchemes.map(({name, label}) => ( 170 + <Toggle.Item key={name} name={name} label={label}> 171 + <Toggle.Radio /> 172 + <Toggle.LabelText> 173 + <Trans>{label}</Trans> 174 + </Toggle.LabelText> 175 + </Toggle.Item> 176 + ))} 177 + </View> 178 + </Toggle.Group> 179 + </View> 180 + </SettingsList.Group> 172 181 173 182 <Animated.View layout={native(LinearTransition)}> 174 183 <SettingsList.Divider />