Theme mode
Fower comes with built-in support for managing theme mode. We call it theme mode, not color mode.
Why we call it theme mode? Because it's not just about color, you will learn more about it by reading the bellow docs.
#
BasicNow, Let's build a dark
mode UI. How to write dark
mode style? It's very simple, just add the --dark
postfix to the Atomic props like bgGray800--dark
, white--dark
. The live demo:
SyntaxError: Unexpected token (1:8) 1 : return () ^
How to toggle theme mode? It's also very simple, just remove or add a .dark
CSS class to the HTML root element, You can see the live demo above.
#
AdvancedWhen change the theme mode, you can change any style for the app, not just the color style. For example, you can set roundedFull--dark
in dark mode:
SyntaxError: Unexpected token (1:8) 1 : return () ^
#
Config modeBy default, dark mode
is built-in support in Fower, you can use --dark
postfix with Atomic Props directly. You can customize theme mode by config theme 'modes' option:
import { setConfig } from '@fower/core'
setConfig({ mode: { currentMode: 'light', modeList: [ 'red', // red mode 'blue', // red mode 'large', // large text mode ], classPrefix: '', },})
Then you can you --red
, --blue
, --large
postfix with Atomic Props:
// import { useMode } from '@fower/react'function App() { const { mode, setMode } = useMode()
return ( <Box h-400 roundedLarge p4 column toCenter spaceY3> <Box text2XL red400--red blue400--blue text6XL--large> Multiple theme mode </Box> <Box toCenter spaceX2> <Box as="label" toCenter> <input type="radio" name="mode" defaultChecked={mode === 'light'} onClick={() => setMode('light')} /> Light </Box> <Box as="label" toCenter> <input type="radio" name="mode" onClick={() => setMode('red')} /> Red </Box> <Box as="label" toCenter> <input type="radio" name="mode" onClick={() => setMode('blue')} /> Blue </Box> <Box as="label" toCenter> <input type="radio" name="mode" onClick={() => setMode('large')} /> Large text </Box> </Box> </Box> )}