whey.party
ill attach the video later
+42
-33
src/screens/Settings/AppearanceSettings.tsx
+42
-33
src/screens/Settings/AppearanceSettings.tsx
···
1
import {useCallback} from 'react'
2
import Animated, {
3
FadeInUp,
4
FadeOutUp,
···
17
import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
18
import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'
19
import * as SegmentedControl from '#/components/forms/SegmentedControl'
20
import {type Props as SVGIconProps} from '#/components/icons/common'
21
import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
22
import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
···
32
export function AppearanceSettingsScreen({}: Props) {
33
const {_} = useLingui()
34
const {fonts} = useAlf()
35
36
const {colorMode, colorScheme, darkTheme} = useThemePrefs()
37
const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs()
···
79
[fonts],
80
)
81
82
return (
83
<LayoutAnimationConfig skipExiting skipEntering>
84
<Layout.Screen testID="preferencesThreadsScreen">
···
114
onChange={onChangeAppearance}
115
/>
116
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
{colorMode !== 'light' && (
151
<Animated.View
152
entering={native(FadeInUp)}
···
170
</Animated.View>
171
)}
172
173
<Animated.View layout={native(LinearTransition)}>
174
<SettingsList.Divider />
175
···
1
import {useCallback} from 'react'
2
+
import {View} from 'react-native'
3
import Animated, {
4
FadeInUp,
5
FadeOutUp,
···
18
import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
19
import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'
20
import * as SegmentedControl from '#/components/forms/SegmentedControl'
21
+
import * as Toggle from '#/components/forms/Toggle'
22
import {type Props as SVGIconProps} from '#/components/icons/common'
23
import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
24
import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
···
34
export function AppearanceSettingsScreen({}: Props) {
35
const {_} = useLingui()
36
const {fonts} = useAlf()
37
+
const t = useTheme()
38
39
const {colorMode, colorScheme, darkTheme} = useThemePrefs()
40
const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs()
···
82
[fonts],
83
)
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
+
94
return (
95
<LayoutAnimationConfig skipExiting skipEntering>
96
<Layout.Screen testID="preferencesThreadsScreen">
···
126
onChange={onChangeAppearance}
127
/>
128
129
{colorMode !== 'light' && (
130
<Animated.View
131
entering={native(FadeInUp)}
···
149
</Animated.View>
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>
181
+
182
<Animated.View layout={native(LinearTransition)}>
183
<SettingsList.Divider />
184