`chakra-ui-color-mode` cookie not being set in Safari, causing page flash on load and issues with `useColorModeValue`

Description

chakra-ui-color-mode not being set in Safari, causing page flash on load

Link to Reproduction

https://codesandbox.io/s/jolly-ramanujan-uz3t95?file=/src/index.tsx

Steps to reproduce

1. Follow steps to add Chakra to an existing React project (Next is what I used)
2. Build and start the app
3. Refresh page from origin
4. Observe page flash and check local storage for chakra-ui-color-mode cookie, which will not be set

Chakra UI Version

1.8.5

Browser

Safari Version 15.2 (17612.3.6.1.6)

Operating System

• macOS
• Windows
• Linux

Additional Information

The cookie is properly set in Chrome, so this issue only takes place in Safari.

The issue also impacts the proper color rendering for components at the page level vs within a component file; the former will use the wrong color value unless the cookie is set.

I tried reproducing making a fully reproducible one in codesandbox, but it looks like the next one is fragile and breaks once you create a single error; after 6 attempts, I gave up and just made one locally. Here’s the repo and below is a screenshot of the example I created within it.

[kaityhallman]

I’m also seeing this issue in chrome. The local storage value is not being set.

[akroll1]

I also had this issue and it bothered me, and I don’t think this is a safari issue. In my debugging I couldn’t get the initialColorMode prop to work in the ColorModeScript, which was pretty confusing for awhile. I put a config in a custom theme I created and it is respecting that.

I think another thing to watch out for that the script seems to get cached there, I would clear out the local storage flag for this and open a new tab… Maybe not, I forget all the steps I took lol but I know the initialColorMode prop is not working in ^2.