Welcome to Zw!
Attack in Gundam

Color Mode Support

Prepare:

Two sets of colors and static colors

Two sets of colors, before starting work, we should known what the result is.
When we design this color, we should known what relationshit between this color, such as in darkmode, deepest color is #000, when we design layer effect of hovering, we should mixing 3th deeps of opacity opposite color like white.

Eg: projectBackground: (#ffffff, #000000), projectColor: (#000000, #ffffff)
This means that when in light mode, the background is black and other content such as text is white, while in dark mode the opposite result.

Color depth change

The result of the color depth change allows us to get the correct effect in some hovering effects.

Eg: Button background color is blue, and hovering we can get correct color by background color directly. This way we don’t need to additionally set the color of the suspension effect. If the effect is achieved directly through opacity, the color of the text will also change accordingly.

So we need a way to get the result by passing the color and the opacity we want to change — hexWithOpacity.

API and Methods

Method to change color mode and get the color of components.
We can use ‘useColorModeValue’ to set a variable value , through which we can get the set color in different color modes. Although it looks like we are setting different colors in different color modes, in fact in this hooks we are getting the current color mode and returning the corresponding color result.
Use toggleColorMode to toggle the global color mode.
The useColorModeValue provided by chakra may cause additional performance overhead when fetching a large number of colors, because going back to the useColorMode hooks each time this hook is used may be more obvious when fetching a large number of colors.

export function useColorModeValue<TLight = unknown, TDark = unknown>(
  light: TLight,
  dark: TDark
) {
  const { colorMode } = useColorMode();
  return colorMode === "dark" ? dark : light;
}

// but in fact we can do this
// custom hooks
const getColor = (colorMode, lightColor, blackColor) => {
  return colorMode === "dark" ? dark : light;
};
const { colorMode } = useColoMode();
const basicColor = getColor(colorMode, "#000", "#fff");
const basicBgDP0 = getColor("#fff", "#000");
const basicBgDP1 = getColor("#eee", "#111");
const basicBgDP2 = getColor("#ddd", "#222");
const basicBgDP3 = getColor("#ccc", "#333");
// ...

return {
  staticColor: "#123456",
  basicColor,
  basicBgDP0,
  basicBgDP1,
  basicBgDP2,
  basicBgDP3,
};
// ...

Steps:

Set project initial color mode

Text

// _document.tsx
import {ColorModeScript} from '@chakra-ui/react'
// ...
    <body>
        <ColorModeScript initialColorMode={'light' | 'dark' | 'system'} />

    </body>

Get(‘set’) color value by ‘useColorModeValue’

// hooks/base/useColor.ts
import { useColor, useColorModeValue } from '@chakra-ui/react'

export function useColor() {
  const { toggleColorMode, colorMode } = useColorMode();
  const someBg = getColor(colorMode, '#0074e0', '#0074e0'); // light , black
  const someColor = getColor(colorMode, '#000000', '#ffffff'); // light , black

  return {
      switchTheme: toggleColorMode,
      someBg,
      someColor
  }
}

Use color value in different components and toggle color mode

use like:

const {someBg, someColor, toggleColorMode} = useColor()
// ...
<SomeComponents
    bg={someBg}
    color={someColor}
>
    <Button onClick={toggleColorMode}>switch color mode</Button>
</SomeComponents>

Other:

Hex with opacity

const hexWithOpacity: (hexValue: string, opacity?: number) => string

const { btnBlueBg } = useColor()
const hoverBg = hexWithOpacity(btnBlueBg, 0.8)

use condition

<Button
    bg={btnBlueBg}
    _hover={{
        bg:hexWithOpacity(btnBlueBg, 0.8)
        }}
>
    holy
</Button>

Referance

chakra-ui | color mode