Separate light / dark mode themes #7089
Replies: 2 comments
-
i had the same issue i solved it by using the "setColorMode" from "useColorMode" in order to change it reactively. |
Beta Was this translation helpful? Give feedback.
0 replies
-
@yardenxr thanks for reminding me of this issue. I solved this by creating my own Chakra provider, it works great: import {
CSSReset,
EnvironmentProvider,
GlobalStyle,
ThemeProvider,
ToastProvider,
useColorMode,
} from "@chakra-ui/react";
import React from "react";
import { darkTheme, lightTheme } from "~/theme";
export const ChakraProviderWrapper = ({
children,
}: {
children: React.ReactNode;
}) => {
const mode = useColorMode();
const theme = mode.colorMode === "dark" ? darkTheme : lightTheme;
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<CSSReset />
<EnvironmentProvider>
{children}
<ToastProvider />
</EnvironmentProvider>
</ThemeProvider>
);
}; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The docs suggest the
useColorModeValue
hook as the solution to changing colors based on the user's color mode. This doesn't seem like a great solution to me, I would rather have separate themes for light and dark. However, it doesn't seem like there is an easy way to switch themes based on the color mode. I tried this:Where ChakraProviderWrapper looks like this:
But the
useColorMode
hook doesn't seem to trigger a re-render when I change my color mode.Am I doing something wrong here? Or is there some other supported way of doing this?
Beta Was this translation helpful? Give feedback.
All reactions