Auto dark mode

Fower provides a dark mode out of the box, without even writing a line of "dark mode" related code.

This cool feature we call Auto Dark Dode.

Here is a live demo: https://fower-nextjs-example.vercel.app

Setup#

autoDarkMode is disabled by default, you can use setConfig to enable it.

import { setConfig } from '@fower/core'
setConfig({  mode: {    autoDarkMode: {      enabled: true,    },  },})

How it work?#

It uses the Fower color palette to automatically generate the dark mode style code. when you toggle your mode, color is generated by the below color mappings:

{  "white": "black",  "black": "white",  "50": "900",  "100": "800",  "200": "700",  "300": "600",  "400": "500",  "500": "400",  "600": "300",  "700": "200",  "800": "100",  "900": "50"}

For example, when toggle mode

  • red50 will become red800
  • bgRed100 will become bgRed800
  • borderGreen300 will become borderGreen600

Customize Color mappings#

You can customize Color mappings by setConfig, it will deepmerge to preset color mappings.

import { setConfig } from '@fower/core'
setConfig({  mode: {    autoDarkMode: {      enabled: true,      mappings: {        red100: 'green600',        red300: '#fc0',      },    },  },})

When you set red100: 'green600', the auto dark mode mapping result will be:

  • red100 will become green600
  • bgRed100 will become bgGreen600
  • borderRed100 will become borderGreen600

Disable auto dark mode for some colors#

You can disable auto dark mode for some colors by setting a false value:

import { setConfig } from '@fower/core'
setConfig({  mode: {    autoDarkMode: {      enabled: true,      mappings: {        red100: false,        red300: false,      },    },  },})
Edit this page