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

Question

This is my theme file. For now it only toggles between light and dark mode. I was wondering if I can pass in different colors or do I need to create a hook myself to do that?

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

If you intend to customise the default theme object to match your design requirements, you need to extend the theme.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

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

that comes from the get-started page of chakra and I hope it answers "how to change the background color to any color"

Answer 2

You can set the background and text colour using the semantic tokens: "chakra-body-text" and "chakra-body-bg", with their respective _light and _dark keys.

You can see this in action (and toggle the theme) here: https://codesandbox.io/s/chakra-ui-theme-bg-ty5qt0

I couldn't find this specific issue documented, but here are related links:

• 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>
);