カラーテーマ

Chakra UIでは上記リンク内のようなカラーの定義があり、
カスタマイズとして上書き、もしくは新たな色の定義を行う。

// theme.js
export default {
  colors: {
    transparent: 'transparent',
    black: '#000',
    white: '#fff',
    gray: {
      50: '#f7fafc',
      // ...
      900: '#171923',
    },
    // ...
  },
}

Haru 2022/08/29に更新

カラーテーマのカスタマイズ

新たな色としてblueGrayのように、色自体を追加してもよいし、brand カラーのように意味を持たせたカラーを定義しても良い。

// theme.js
export default {
  colors: {
    brand: {
      100: "#f7fafc",
      // ...
      900: "#1a202c",
    },
  },
}

Textでの使用例

<Text color='brand.300'>Click me</Text>

ButtonでのcolorSchemeでの使用例

<Button colorScheme='brand'>Click me</Button>

colorSchemeはコンポーネントごとに定義をしている。
たとえばButtonだと下記のように、backgroundColorが500、hover時が600など。

数値の色の強さによって一律設定されている
※ 一部アクセシビリティを考慮して、個別に色の強さを変えている

// Buttonのvariantがsolidの定義
const {
    bg = `${color}.500`,
    color = "white",
    hoverBg = `${color}.600`,
    activeBg = `${color}.700`,
  }

実際のソースコード。

Haru 2022/08/29に更新

汎用的なカラーテーマの定義方法

下記のように機能的な意味合いの色を定義していくことも可能

// theme.js
export default {
  colors: {
    fontColor: {
      main: "#000",
      sub: "#2D2D2D",
      link: "#BEE3F8",
    },
    border: {
      normal: "#F7FAFC",
    },
  },
}

Textでの使用例

<Text color='fontColor.main'>Click me</Text>

カラーと機能的なカラーの定義を分けて、下記のようにしておくと汎用的

// theme.js
const baseColors = {
  transparent: 'transparent',
  black: '#000',
  white: '#fff',
  gray: {
    50: '#f7fafc',
    // ...
    900: '#171923',
  },
  // ...
}

export default {
  colors: {
    ...baseColors,
    fontColor: {
      main: baseColors.black,
      sub: baseColors.gray[700],
      link: baseColors.blue[500],
    },
    border: {
      normal: baseColors.blue[100],
    },
  },
}

Haru 2022/08/29に更新

カラーモード対応(light, dark..)

Chakra UIではデフォルトでカラーモード対応している。

基本はコンポーネントに対してのcolorModeでの処理になる

function StyleColorMode() {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue('red.500', 'red.200')
  const color = useColorModeValue('white', 'gray.800')

  return (
    <>
      <Box mb={4} bg={bg} color={color}>
        This box's style will change based on the color mode.
      </Box>
      <Button size='sm' onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </>
  )
}

Haru 2022/08/29に更新

fontColor.main などでカラーモードに対応したい場合

コンポーネントごとではなく、一律グローバルでのカラーモード対応をしたい場合

カラーの定義自体、下記リンクのようにCSS Variablesでの定義になっている。

:root {
  --chakra-colors-fontColor-main: #000;
}

そのためカラーモードに対応して、--chakra-colors-fontColor-main の定義を上書きすれば可能。

公式のグローバルなカラーモード対応

これは将来的に削除される可能性のある機能。
この仕組みを利用するか、削除されても困らないようにここだけCSS上で設定しても良い。

Providerなどと同じレイヤーで設定してあげると、全体に定義可能

<Box
  sx={{
    '--chakra-colors-fontColor-main': colorMode === 'light' ? 'colors.gray.100' : 'colors.white',
  }}
>
  // ...
</Box>

上述のthemingでの設定をデフォルトとすればよいので、
例えばdark対応時のみこの設定が適用されるようにすればよい。

if (colorMode = 'dark') {
  return <Box
    sx={{
      '--chakra-colors-fontColor-main':  'colors.white',
    }}
  >
    {children}
  </Box>
}