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
#
SetupautoDarkMode
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 becomered800
bgRed100
will becomebgRed800
borderGreen300
will becomeborderGreen600
#
Customize Color mappingsYou 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 becomegreen600
bgRed100
will becomebgGreen600
borderRed100
will becomeborderGreen600
#
Disable auto dark mode for some colorsYou 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, }, }, },})