您可以使用 Chakra-UI 的 colorMode 将背景颜色更改为任何颜色还是仅适用于明暗模式？

【问题标题】：Can you use Chakra-UI's colorMode to change the background color to any color or is it only for light and dark mode?您可以使用 Chakra-UI 的 colorMode 将背景颜色更改为任何颜色还是仅适用于明暗模式？
【发布时间】：2022-08-23 11:22:33
【问题描述】：

这是我的主题文件。目前它只在明暗模式之间切换。我想知道我是否可以传递不同的颜色，还是我需要自己创建一个钩子来做到这一点？

import { extendTheme } from \'@chakra-ui/react\'

// 2. Add your color mode config
const config = {
  initialColorMode: \'#C53030\',
  useSystemColorMode: true,
}

// 3. extend the theme
const theme = extendTheme({ config })

export default theme

标签： javascript chakra-ui

【解决方案1】：

如果您打算自定义默认主题对象以匹配您的设计要求，则需要扩展主题。

Chakra UI 提供了一个 extendTheme 功能，可以将默认主题与您的自定义深度合并。

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  ) 
}

export default MyApp;

来自脉轮的入门页面，我希望它回答“如何将背景颜色更改为任何颜色”

【讨论】：