When you use the NativebaseProvider at the root of your app, you can automatically use color mode in your apps.
By default, most components are dark mode compatible. To handle color mode manually in your application, use the useColorMode or useColorModeValue hooks.
useColorMode is a React hook that gives you access to the current color mode, and a function to toggle the color mode.
Calling toggleColorMode anywhere in your app tree toggles the color mode.
useColorModeValue is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode.
function ColorModeExample() {
const {
colorMode,
toggleColorMode
} = useColorMode();
return <>
<Heading>I'm a Heading</Heading>
<Button colorScheme={colorMode === 'light' ? 'blue' : 'red'} onPress={() => {
toggleColorMode();
}}>
Change mode
</Button>
<HStack space={2} mt={3}>
<Avatar name="Ankur" borderWidth={2} source={{
uri: 'https://pbs.twimg.com/profile_images/1309797238651060226/18cm6VhQ_400x400.jpg'
}} />
<Avatar name="Rohit" borderWidth={2} source={{
uri: 'https://pbs.twimg.com/profile_images/1352844693151731713/HKO7cnlW_400x400.jpg'
}} />
</HStack>
</>;
}
const LocalWrapper = ({
children
}) => {
const bg = useColorModeValue('gray.200', 'gray.800');
return <Center flex={1} bg={bg}>
{children}
</Center>;
};
function Example() {
return <NativeBaseProvider>
<LocalWrapper>
<ColorModeExample />
</LocalWrapper>
</NativeBaseProvider>;
}
You can set default color mode. By default, the color mode will be light. To support this, extend the default theme with a config
import { NativeBaseProvider, extendTheme, Text } from 'native-base';
const config = {
useSystemColorMode: false,
initialColorMode: 'dark',
};
const customTheme = extendTheme({ config });
function App() {
return (
<NativeBaseProvider theme={customTheme}>
</NativeBaseProvider>
);
}
Persisting the color mode
You can persist the color mode in you app by defining you color mode manager of type StorageManager and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed.
import React from 'react';
import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@color-mode');
return val === 'dark' ? 'dark' : 'light';
} catch (e) {
return 'light';
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@color-mode', value);
} catch (e) {
console.log(e);
}
},
};
export default function () {
return (
<NativeBaseProvider colorModeManager={colorModeManager}>
</NativeBaseProvider>
);
}