如何解决在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。