forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge branch 'ericvolp12-inherit_system_theme' into main
+122
-90
+1
-1
src/App.native.tsx
+1
-1
src/App.native.tsx
+1
-1
src/App.web.tsx
+1
-1
src/App.web.tsx
+5
-2
src/lib/ThemeContext.tsx
+5
-2
src/lib/ThemeContext.tsx
···
89
89
theme,
90
90
children,
91
91
}) => {
92
-
const colorScheme = useColorScheme()
92
+
const colorSchemeFromRN = useColorScheme()
93
+
94
+
// if theme is 'system', use the device's configured color scheme
95
+
let colorScheme = theme === 'system' ? colorSchemeFromRN : theme
93
96
94
97
const value = useMemo(
95
-
() => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme),
98
+
() => (colorScheme === 'dark' ? darkTheme : defaultTheme),
96
99
[colorScheme, theme],
97
100
)
98
101
+6
-6
src/state/models/ui/shell.ts
+6
-6
src/state/models/ui/shell.ts
···
189
189
}
190
190
191
191
export class ShellUiModel {
192
-
darkMode = false
192
+
colorMode = 'system'
193
193
minimalShellMode = false
194
194
isDrawerOpen = false
195
195
isDrawerSwipeDisabled = false
···
210
210
211
211
serialize(): unknown {
212
212
return {
213
-
darkMode: this.darkMode,
213
+
colorMode: this.colorMode,
214
214
}
215
215
}
216
216
217
217
hydrate(v: unknown) {
218
218
if (isObj(v)) {
219
-
if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') {
220
-
this.darkMode = v.darkMode
219
+
if (hasProp(v, 'colorMode') && typeof v.colorMode === 'string') {
220
+
this.colorMode = v.colorMode
221
221
}
222
222
}
223
223
}
224
224
225
-
setDarkMode(v: boolean) {
226
-
this.darkMode = v
225
+
setColorMode(mode: string) {
226
+
this.colorMode = mode
227
227
}
228
228
229
229
setMinimalShellMode(v: boolean) {
+109
src/view/screens/Settings.tsx
+109
src/view/screens/Settings.tsx
···
1
1
import React from 'react'
2
2
import {
3
3
ActivityIndicator,
4
+
Pressable,
4
5
StyleSheet,
5
6
TextStyle,
6
7
TouchableOpacity,
···
288
289
</TouchableOpacity>
289
290
290
291
<View style={styles.spacer20} />
292
+
<Text type="xl-bold" style={[pal.text, styles.heading]}>
293
+
Appearance
294
+
</Text>
295
+
<View>
296
+
<View style={[styles.linkCard, pal.view, styles.selectableBtns]}>
297
+
<SelectableBtn
298
+
current={store.shell.colorMode}
299
+
value="system"
300
+
label="System"
301
+
left
302
+
onChange={(v: string) => store.shell.setColorMode(v)}
303
+
/>
304
+
<SelectableBtn
305
+
current={store.shell.colorMode}
306
+
value="light"
307
+
label="Light"
308
+
onChange={(v: string) => store.shell.setColorMode(v)}
309
+
/>
310
+
<SelectableBtn
311
+
current={store.shell.colorMode}
312
+
value="dark"
313
+
label="Dark"
314
+
right
315
+
onChange={(v: string) => store.shell.setColorMode(v)}
316
+
/>
317
+
</View>
318
+
</View>
319
+
<View style={styles.spacer20} />
291
320
292
321
<Text type="xl-bold" style={[pal.text, styles.heading]}>
293
322
Advanced
···
442
471
)
443
472
}
444
473
474
+
interface SelectableBtnProps {
475
+
current: string
476
+
value: string
477
+
label: string
478
+
left?: boolean
479
+
right?: boolean
480
+
onChange: (v: string) => void
481
+
}
482
+
483
+
function SelectableBtn({
484
+
current,
485
+
value,
486
+
label,
487
+
left,
488
+
right,
489
+
onChange,
490
+
}: SelectableBtnProps) {
491
+
const pal = usePalette('default')
492
+
const palPrimary = usePalette('inverted')
493
+
return (
494
+
<Pressable
495
+
style={[
496
+
styles.selectableBtn,
497
+
left && styles.selectableBtnLeft,
498
+
right && styles.selectableBtnRight,
499
+
pal.border,
500
+
current === value ? palPrimary.view : pal.view,
501
+
]}
502
+
onPress={() => onChange(value)}
503
+
accessibilityRole="button"
504
+
accessibilityLabel={value}
505
+
accessibilityHint={`Set color theme to ${value}`}>
506
+
<Text style={current === value ? palPrimary.text : pal.text}>
507
+
{label}
508
+
</Text>
509
+
</Pressable>
510
+
)
511
+
}
512
+
445
513
const styles = StyleSheet.create({
446
514
dimmed: {
447
515
opacity: 0.5,
···
492
560
buildInfo: {
493
561
paddingVertical: 8,
494
562
paddingHorizontal: 18,
563
+
},
564
+
565
+
colorModeText: {
566
+
marginLeft: 10,
567
+
marginBottom: 6,
568
+
},
569
+
570
+
selectableBtns: {
571
+
flexDirection: 'row',
572
+
},
573
+
selectableBtn: {
574
+
flex: isDesktopWeb ? undefined : 1,
575
+
width: isDesktopWeb ? 100 : undefined,
576
+
flexDirection: 'row',
577
+
justifyContent: 'center',
578
+
borderWidth: 1,
579
+
borderLeftWidth: 0,
580
+
paddingHorizontal: 10,
581
+
paddingVertical: 10,
582
+
},
583
+
selectableBtnLeft: {
584
+
borderTopLeftRadius: 8,
585
+
borderBottomLeftRadius: 8,
586
+
borderLeftWidth: 1,
587
+
},
588
+
selectableBtnRight: {
589
+
borderTopRightRadius: 8,
590
+
borderBottomRightRadius: 8,
591
+
},
592
+
593
+
btn: {
594
+
flexDirection: 'row',
595
+
alignItems: 'center',
596
+
justifyContent: 'center',
597
+
width: '100%',
598
+
borderRadius: 32,
599
+
padding: 14,
600
+
backgroundColor: colors.gray1,
601
+
},
602
+
toggleBtn: {
603
+
paddingHorizontal: 0,
495
604
},
496
605
})
-33
src/view/shell/Drawer.tsx
-33
src/view/shell/Drawer.tsx
···
27
27
CogIcon,
28
28
MagnifyingGlassIcon2,
29
29
MagnifyingGlassIcon2Solid,
30
-
MoonIcon,
31
30
UserIconSolid,
32
31
SatelliteDishIcon,
33
32
SatelliteDishIconSolid,
···
119
118
track('Menu:FeedbackClicked')
120
119
Linking.openURL(FEEDBACK_FORM_URL)
121
120
}, [track])
122
-
123
-
const onDarkmodePress = React.useCallback(() => {
124
-
track('Menu:ItemClicked', {url: '#darkmode'})
125
-
store.shell.setDarkMode(!store.shell.darkMode)
126
-
}, [track, store])
127
-
128
121
// rendering
129
122
// =
130
123
···
303
296
<View style={styles.smallSpacer} />
304
297
</ScrollView>
305
298
<View style={styles.footer}>
306
-
{!isWeb && (
307
-
<TouchableOpacity
308
-
accessibilityRole="button"
309
-
accessibilityLabel="Toggle dark mode"
310
-
accessibilityHint={
311
-
theme.colorScheme === 'dark'
312
-
? 'Sets display to light mode'
313
-
: 'Sets display to dark mode'
314
-
}
315
-
onPress={onDarkmodePress}
316
-
style={[
317
-
styles.footerBtn,
318
-
theme.colorScheme === 'light'
319
-
? pal.btn
320
-
: styles.footerBtnDarkMode,
321
-
]}>
322
-
<MoonIcon
323
-
size={22}
324
-
style={pal.text as StyleProp<ViewStyle>}
325
-
strokeWidth={2}
326
-
/>
327
-
</TouchableOpacity>
328
-
)}
329
299
<TouchableOpacity
330
300
accessibilityRole="link"
331
301
accessibilityLabel="Send feedback"
···
535
505
alignItems: 'center',
536
506
padding: 10,
537
507
borderRadius: 25,
538
-
},
539
-
footerBtnDarkMode: {
540
-
backgroundColor: colors.black,
541
508
},
542
509
footerBtnFeedback: {
543
510
paddingHorizontal: 24,