diff --git a/pages/_app.tsx b/pages/_app.tsx index 475700fbf5..49fe42e3aa 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,4 @@ -import { type ChakraProps } from '@chakra-ui/react'; +import { useColorMode, type ChakraProps } from '@chakra-ui/react'; import { GrowthBookProvider } from '@growthbook/growthbook-react'; import * as Sentry from '@sentry/react'; import { QueryClientProvider } from '@tanstack/react-query'; @@ -18,6 +18,7 @@ import { growthBook } from 'lib/growthbook/init'; import useLoadFeatures from 'lib/growthbook/useLoadFeatures'; import useNotifyOnNavigation from 'lib/hooks/useNotifyOnNavigation'; import { SocketProvider } from 'lib/socket/context'; +import theme from 'theme/theme'; import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary'; import AppErrorGlobalContainer from 'ui/shared/AppError/AppErrorGlobalContainer'; import GoogleAnalytics from 'ui/shared/GoogleAnalytics'; @@ -47,6 +48,10 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { useLoadFeatures(); useNotifyOnNavigation(); + const { setColorMode } = useColorMode(); + if (setColorMode) { + setColorMode(theme.config.initialColorMode); + } const queryClient = useQueryClientConfig(); diff --git a/pages/_document.tsx b/pages/_document.tsx index 153a67043b..2e879910dd 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -31,8 +31,6 @@ class MyDocument extends Document { } render() { - // eslint-disable-next-line no-console - console.log('theme.config.initialColorMode', theme.config.initialColorMode); return ( diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx index 62678c70d0..29099194dc 100644 --- a/ui/shared/layout/components/Container.tsx +++ b/ui/shared/layout/components/Container.tsx @@ -1,4 +1,4 @@ -import { Box, chakra, useColorModeValue } from '@chakra-ui/react'; +import { Box, chakra, useColorMode, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; interface Props { @@ -7,6 +7,8 @@ interface Props { } const Container = ({ children, className }: Props) => { + // eslint-disable-next-line no-console + console.log('Container', useColorMode().colorMode); const bgColor = useColorModeValue('white', 'black'); return (