reactjs - changing the dark mode color in chakra ui
问题描述
I am using the "dark mode" feature provided by the Chakra UI library. However, I can't figure out how to change the "dark mode" colors. In the documentation, I see that Chakra UI is based on something called "styled-system", so I tried to pass a new theme
to themeProvider
like this:
const theme = {
...defaultTheme,
modes: {
dark: {
background: '#000',
},
},
};
<ThemeProvider theme={theme}></ThemeProvider>
However, that didn't work. I also tried to wrap the modes
object with a colors
object, but that didn't work either. How can I customize the "dark mode" colors?
解决方案
在最新版本的 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', '#141214')(props),
},
}),
},
};
const theme = extendTheme({
components,
styles,
});
export default theme;
然后我们theme
传入ChakraProvider
推荐阅读
- c# - 跳过csv中的第一个拆分字符
- pyspark - 根据 PySpark 中另一个数据框的列值的值更新列中的值
- javascript - 正则表达式中的匹配列表符号(角度 2)
- angular - 使用 Kendo PDF 导出网格
- r - 如何创建一个函数来获取第二个数据帧的日期时间子集?
- c# - Dialogflow V2 api 的无效示例
- rx-java2 - 根据 Observable 条件过滤 RxJava/ReactiveX Observable
- arraylist - 向 ArrayList 添加值时出现问题
- html - ALAA-123456 的正则表达式是什么
- ios - 使用 Xcode 10 将 cordova 应用程序上传到 Apple 商店