#Color modes
Color modes are used to create sets of configurable color modes (such as a dark mode).
By default, Bumbag comes with it's own dark mode variant of it's default theme.
You can also define your own modes.
#Setting modes
Bumbag provides you with a useColorMode
hook that you can use to retrieve the current color mode, and set a color mode.
When setting a color mode, this value will be stored in local storage, so when the user navigates back to your application the color mode will be used when the page loads.
#Defining modes
You can define your own color modes in two ways:
- via the global theme
- via the component theme
#Global theme
Defining your own mode is very similar to the variant concept, each theme attribute has the ability to plug in a modes
configuration.
#Component theme
const ModeButton = applyTheme(Button, {modes: {dark: {defaultProps: {backgroundColor: 'gray800',color: 'white'}},dope: {defaultProps: {backgroundColor: 'hotpink',color: 'black'}}}});function Example() {const { colorMode, setColorMode } = useColorMode();return (<Stack><Text>Current mode: {colorMode}</Text><Set><ModeButtononClick={() => setColorMode('default')}>Light</ModeButton><ModeButtononClick={() => setColorMode('dark')}>Dark</ModeButton><ModeButtononClick={() => setColorMode('dope')}>Dope</ModeButton></Set></Stack>)}
#Setting a default mode
You can set a default color mode on the <Provider>
.
import { Provider as BumbagProvider } from 'bumbag';const App = () => (<BumbagProvider colorMode="dark">...</BumbagProvider>);
#Configuration
#Disabling local storage
You can disable Bumbag storing the current color mode in local storage by setting enableLocalStorage: false
in the theme.
const theme = {modes: {enableLocalStorage: false}}const App = () => (<BumbagProvider theme={theme}>...</BumbagProvider>);
#Using system color modes
You can use the system color mode by default with the useSystemColorMode
attribute. If set to true
, this will set the color mode to the system's preferred color scheme.
const theme = {modes: {useSystemColorMode: true}}const App = () => (<BumbagProvider theme={theme}>...</BumbagProvider>);
#Custom local storage prefix
By default, the local storage prefix is set to "bb"
. However, you can change this with the localStoragePrefix
attribute.
const theme = {modes: {localStoragePrefix: 'myTheme'}}const App = () => (<BumbagProvider theme={theme}>...</BumbagProvider>);