Skip to main content

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,
      },
    },
  },
})