Packages

@twind/core › DarkColor

Ƭ DarkColor<Theme>: (section: string, key: string, context: Context<Theme>, color: ColorValue) => ColorValue | Falsey

Type parameters

Name	Type
`Theme`	extends `BaseTheme`

Type declaration

▸ (section, key, context, color): ColorValue | Falsey

Allows to return a dark color for the given light color.

{
  // 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50
  darkColor: autoDarkColor
  // custom resolvers
  darkColor: (section, key, { theme }) => theme(`${section}.${key}-dark`) as ColorValue
  darkColor: (section, key, { theme }) => theme(`dark.${section}.${key}`) as ColorValue
  darkColor: (section, key, { theme }) => theme(`${section}.dark.${key}`) as ColorValue
  darkColor: (section, key, context, lightColor) => generateDarkColor(lightColor),
}

Or use the light color to generate a dark color

{
  darkColor: (section, key, context, color) => generateDark(color)
}

Parameters

Name	Type	Description
`section`	`string`	the theme section
`key`	`string`	the theme key within section — maybe an arbitrary value `[...]`
`context`	`Context`<`Theme`>	the context
`color`	`ColorValue`	the current color

Returns

ColorValue | Falsey

the dark color to use

Defined in

packages/core/src/types.ts:339