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

Question

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

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

Answer 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;

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

Answer 2

您可以使用语义标记设置背景和文本颜色：“chakra-body-text”和“chakra-body-bg”，以及它们各自的_light和_dark键。

您可以在此处查看实际效果（并切换主题）： https://codesandbox.io/s/chakra-ui-theme-bg-ty5qt0

我找不到这个特定问题的记录，但这里有相关链接：

• https://chakra-ui.com/docs/styled-system/color-mode
• https://chakra-ui.com/docs/styled-system/semantic-tokens
• https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/semantic-tokens.ts

import * as React from "react";
import * as ReactDOMClient from "react-dom/client";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import App from "./App";

const theme = extendTheme({
  semanticTokens: {
    colors: {
      "chakra-body-text": {
        _light: "purple.800",
        _dark: "pink.100",
      },
      "chakra-body-bg": {
        _light: "pink.100",
        _dark: "purple.800",
      },
    },
  },
});

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>
);