fix incorrect color mode (#2596)

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,8 +14,11 @@ 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' ?
+    typeof cookies === 'string' && get(NAMES.COLOR_MODE, cookies) ?
       cookieStorageManagerSSR(typeof document !== 'undefined' ? document.cookie : cookies) :
       localStorageManager;