diff options
| -rw-r--r-- | src/App.native.tsx | 2 | ||||
| -rw-r--r-- | src/App.web.tsx | 2 | ||||
| -rw-r--r-- | src/lib/ThemeContext.tsx | 7 | ||||
| -rw-r--r-- | src/state/models/ui/shell.ts | 12 | ||||
| -rw-r--r-- | src/view/shell/Drawer.tsx | 29 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 42 |
6 files changed, 59 insertions, 35 deletions
diff --git a/src/App.native.tsx b/src/App.native.tsx index 66722dc15..afab82368 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -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}> diff --git a/src/App.web.tsx b/src/App.web.tsx index 429328276..7570db44e 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -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}> diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx index ef17c1e7a..251e04e50 100644 --- a/src/lib/ThemeContext.tsx +++ b/src/lib/ThemeContext.tsx @@ -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], ) diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 9b9a176be..187342ec3 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -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) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index d595bc524..ea2153789 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -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' diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index d6663ce3d..084e95607 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -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', |