change color scheme settings into toggle group list #8

···

       
1
       
 
       
import {useCallback} from 'react'

     

       
0
       
 
       

     

       
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'

     

       
0
       
 
       

     

       
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()

     

       
0
       
 
       

     

       
35
       
 
       


     

       
36
       
 
       
  const {colorMode, colorScheme, darkTheme} = useThemePrefs()

     

       
37
       
 
       
  const {setColorMode, setColorScheme, setDarkTheme} = useSetThemePrefs()

     
···

       
79
       
 
       
    [fonts],

     

       
80
       
 
       
  )

     

       
81
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
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
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
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
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
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