From efaadfa49e2037519489c735b3b6d0fbafac8f9a Mon Sep 17 00:00:00 2001 From: isstuev Date: Wed, 26 Feb 2025 16:10:56 +0100 Subject: [PATCH] fix incorrect color mode --- lib/contexts/chakra.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/contexts/chakra.tsx b/lib/contexts/chakra.tsx index 151d893dce..3ace6cd278 100644 --- a/lib/contexts/chakra.tsx +++ b/lib/contexts/chakra.tsx @@ -6,6 +6,7 @@ import { import type { ChakraProviderProps } from '@chakra-ui/react'; import React from 'react'; +import { get, NAMES } from 'lib/cookies'; import theme from 'theme/theme'; interface Props extends ChakraProviderProps { @@ -13,10 +14,13 @@ interface Props extends ChakraProviderProps { } export function ChakraProvider({ cookies, children }: Props) { + // When a cookie header is present, cookieStorageManagerSSR looks for a "chakra-ui-color-mode" cookie. + // If it doesn’t find one, it doesn’t consider theme’s initialColorMode. Instead, it is defaulting to light mode + // So we need to use localStorageManager instead of cookieStorageManagerSSR to get the correct default color mode const colorModeManager = - typeof cookies === 'string' ? - cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) : - localStorageManager; + typeof cookies === 'string' && get(NAMES.COLOR_MODE, cookies) ? + cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) : + localStorageManager; return (