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.

Basic#

Now, 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 ()
            ^
LIVE DEMO

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.

Advanced#

When 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 ()
            ^
LIVE DEMO

Config mode#

By 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:

Multiple theme mode
// 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>  )}
Edit this page