Feat: Use system default color mode, but allow user override
parent
404b2f043c
commit
da0ed7e002
|
@ -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}>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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],
|
||||
)
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue