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:

Result

Loading...

Live Editor

// import { useMode } from '@fower/react' function App() { const { mode, setMode } = useMode() function toggleMode() { setMode(mode === 'dark' ? 'light' : 'dark') } return ( <Box h-300 roundedLG bgGray800--dark bgOrange100 p4 toCenter> <Box column toCenter gap3 gray800 white--dark textCenter> <Box as="button" onClick={toggleMode} p3 cursorPointer outlineNone roundedFull orange200 bgBlack black--dark bgOrange200--dark > Toggle {mode} </Box> <Box as="h1">Hello, I am the Title</Box> <Box as="h2">I am the Subtitle</Box> </Box> </Box> ) }

// import { useMode } from '@fower/react'

function App() {
  const { mode, setMode } = useMode()
  function toggleMode() {
    setMode(mode === 'dark' ? 'light' : 'dark')
  }
  return (
    <Box h-300 roundedLG bgGray800--dark bgOrange100 p4 toCenter>
      <Box column toCenter gap3 gray800 white--dark textCenter>
        <Box
          as="button"
          onClick={toggleMode}
          p3
          cursorPointer
          outlineNone
          roundedFull
          orange200
          bgBlack
          black--dark
          bgOrange200--dark
        >
          Toggle {mode}
        </Box>
        <Box as="h1">Hello, I am the Title</Box>
        <Box as="h2">I am the Subtitle</Box>
      </Box>
    </Box>
  )
}

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:

Result

Loading...

Live Editor

// import { useMode } from '@fower/react' function App() { const { mode, setMode } = useMode() function toggleMode() { setMode(mode === 'dark' ? 'light' : 'dark') } return ( <Box h-400 roundedLG bgGray800--dark bgOrange100 p4> <Box column toCenter gap3 gray800 orange200--dark textCenter> <Box as="button" onClick={toggleMode} p3 cursorPointer outlineNone roundedFull rounded-0--dark white bgBlack black--dark bgOrange200--dark > Toggle {mode} </Box> <Box as="h1">Not only Color Mode</Box> <Box square-200 fontBold toCenter border borderGray800 borderOrange200--dark roundedFull--dark > Rounded by mode </Box> </Box> </Box> ) }

// import { useMode } from '@fower/react'
function App() {
  const { mode, setMode } = useMode()
  function toggleMode() {
    setMode(mode === 'dark' ? 'light' : 'dark')
  }
  return (
    <Box h-400 roundedLG bgGray800--dark bgOrange100 p4>
      <Box column toCenter gap3 gray800 orange200--dark textCenter>
        <Box
          as="button"
          onClick={toggleMode}
          p3
          cursorPointer
          outlineNone
          roundedFull
          rounded-0--dark
          white
          bgBlack
          black--dark
          bgOrange200--dark
        >
          Toggle {mode}
        </Box>
        <Box as="h1">Not only Color Mode</Box>
        <Box
          square-200
          fontBold
          toCenter
          border
          borderGray800
          borderOrange200--dark
          roundedFull--dark
        >
          Rounded by mode
        </Box>
      </Box>
    </Box>
  )
}

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

DefaultRedBlueLarge text

// import { useMode } from '@fower/react'
function App() {
  const { mode, setMode } = useMode()

  return (
    <Box h-400 roundedLG p4 column toCenter gap3>
      <Box text2XL red400--red blue400--blue text6XL--large>
        Multiple theme mode
      </Box>
      <Box toCenter gap2>
        <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>
  )
}