Feat: Use system default color mode, but allow user override

zio/stable
Jaz 2023-05-16 21:36:43 -07:00
parent 404b2f043c
commit da0ed7e002
6 changed files with 59 additions and 35 deletions

View File

@ -51,7 +51,7 @@ const App = observer(() => {
return null
}
return (
<ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
<ThemeProvider theme={rootStore.shell.colorMode}>
<RootSiblingParent>
<analytics.Provider>
<RootStoreProvider value={rootStore}>

View File

@ -30,7 +30,7 @@ const App = observer(() => {
}
return (
<ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
<ThemeProvider theme={rootStore.shell.colorMode}>
<RootSiblingParent>
<analytics.Provider>
<RootStoreProvider value={rootStore}>

View File

@ -89,10 +89,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
theme,
children,
}) => {
const colorScheme = useColorScheme()
const colorSchemeFromRN = useColorScheme()
// if theme is 'system', use the device's configured color scheme
let colorScheme = theme === 'system' ? colorSchemeFromRN : theme
const value = useMemo(
() => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme),
() => (colorScheme === 'dark' ? darkTheme : defaultTheme),
[colorScheme, theme],
)

View File

@ -189,7 +189,7 @@ export interface ComposerOpts {
}
export class ShellUiModel {
darkMode = false
colorMode = 'system'
minimalShellMode = false
isDrawerOpen = false
isDrawerSwipeDisabled = false
@ -210,20 +210,20 @@ export class ShellUiModel {
serialize(): unknown {
return {
darkMode: this.darkMode,
colorMode: this.colorMode,
}
}
hydrate(v: unknown) {
if (isObj(v)) {
if (hasProp(v, 'darkMode') && typeof v.darkMode === 'boolean') {
this.darkMode = v.darkMode
if (hasProp(v, 'colorMode') && typeof v.colorMode === 'string') {
this.colorMode = v.colorMode
}
}
}
setDarkMode(v: boolean) {
this.darkMode = v
setColorMode(mode: string) {
this.colorMode = mode
}
setMinimalShellMode(v: boolean) {

View File

@ -53,6 +53,19 @@ export const DrawerContent = observer(() => {
const {notifications} = store.me
const colorModes = ['light', 'dark', 'system']
const modeAccessibilityText = {
light: 'Sets display to light mode',
dark: 'Sets display to dark mode',
system: 'Sets display to system default',
}
const nextColorMode = () => {
return colorModes[
(colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
]
}
// events
// =
@ -112,9 +125,9 @@ export const DrawerContent = observer(() => {
Linking.openURL(FEEDBACK_FORM_URL)
}, [track])
const onDarkmodePress = React.useCallback(() => {
track('Menu:ItemClicked', {url: '#darkmode'})
store.shell.setDarkMode(!store.shell.darkMode)
const onColorModePress = React.useCallback(() => {
track('Menu:ItemClicked', {url: '#cycleColorMode'})
store.shell.setColorMode(nextColorMode())
}, [track, store])
// rendering
@ -280,13 +293,9 @@ export const DrawerContent = observer(() => {
{!isWeb && (
<TouchableOpacity
accessibilityRole="button"
accessibilityLabel="Toggle dark mode"
accessibilityHint={
theme.colorScheme === 'dark'
? 'Sets display to light mode'
: 'Sets display to dark mode'
}
onPress={onDarkmodePress}
accessibilityLabel="Cycle color mode"
accessibilityHint={modeAccessibilityText[store.shell.colorMode]}
onPress={onColorModePress}
style={[
styles.footerBtn,
theme.colorScheme === 'light'

View File

@ -17,10 +17,26 @@ import {formatCount} from 'view/com/util/numeric/format'
export const DesktopRightNav = observer(function DesktopRightNav() {
const store = useStores()
const pal = usePalette('default')
const mode = useColorSchemeStyle('Light', 'Dark')
const colorModes = ['light', 'dark', 'system']
const modeAccessibilityText = {
light: 'Sets display to light mode',
dark: 'Sets display to dark mode',
system: 'Sets display to system default',
}
const modeHelpText = {
light: 'Light Theme',
dark: 'Dark Theme',
system: 'System Default Theme',
}
const onDarkmodePress = React.useCallback(() => {
store.shell.setDarkMode(!store.shell.darkMode)
const nextColorMode = () => {
return colorModes[
(colorModes.indexOf(store.shell.colorMode) + 1) % colorModes.length
]
}
const onModePress = React.useCallback(() => {
store.shell.setColorMode(nextColorMode())
}, [store])
return (
@ -61,20 +77,16 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
<InviteCodes />
<View>
<TouchableOpacity
style={[styles.darkModeToggle]}
onPress={onDarkmodePress}
style={[styles.cycleColorModeToggle]}
onPress={onModePress}
accessibilityRole="button"
accessibilityLabel="Toggle dark mode"
accessibilityHint={
mode === 'Dark'
? 'Sets display to light mode'
: 'Sets display to dark mode'
}>
<View style={[pal.viewLight, styles.darkModeToggleIcon]}>
accessibilityLabel="Cycle color mode"
accessibilityHint={modeAccessibilityText[nextColorMode()]}>
<View style={[pal.viewLight, styles.cycleColorModeToggleIcon]}>
<MoonIcon size={18} style={pal.textLight} />
</View>
<Text type="sm" style={pal.textLight}>
{mode} mode
{modeHelpText[store.shell.colorMode]}
</Text>
</TouchableOpacity>
</View>
@ -148,13 +160,13 @@ const styles = StyleSheet.create({
marginRight: 6,
},
darkModeToggle: {
cycleColorModeToggle: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
marginHorizontal: 12,
},
darkModeToggleIcon: {
cycleColorModeToggleIcon: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',