在chakra ui中更改暗模式的颜色

问题描述

我正在使用"dark mode" feature提供的Chakra UI library。但是，我不知道如何更改“暗模式”的颜色。在文档中，我看到Chakra UI基于名为“ styled-system”的东西，因此我试图像这样将新的theme传递给themeProvider：

const theme = {
  ...defaultTheme,modes: {
    dark: {
      background: '#000',},};

 <ThemeProvider theme={theme}></ThemeProvider>

但是，那没有用。我还尝试用modes对象包装colors对象，但这也不起作用。如何自定义“深色模式”颜色？

解决方法

正如医生所说（它确实有效），您还需要用另一个 ColorModeProvider 包装您的组件。

 <ThemeProvider theme={customTheme}>
      <ColorModeProvider><YourCompoent/></ColorModeProvider>
 </ThemeProvider>

然后在组件内部使用一个称为 useColorMode 的钩子（如果需要，可以嵌套）以获取当前的颜色模式并在它们之间切换。

const { colorMode,toggleColorMode } = useColorMode();

,

在最新版本的chakra ui中，我们可以用这种方式覆盖颜色

import { mode } from '@chakra-ui/theme-tools';
import { extendTheme } from '@chakra-ui/core';

const styles = {
  global: props => ({
    body: {
      color: mode('gray.800','whiteAlpha.900')(props),bg: mode('gray.100','#141214')(props),},}),};

const components = {
  Drawer: {
    // setup light/dark mode component defaults
    baseStyle: props => ({
      dialog: {
        bg: mode('white',};

const theme = extendTheme({
  components,styles,});

export default theme;

然后我们将theme传递到ChakraProvider