After migration to chakra v1 useColorMode hook does not seem to work properly in production

Ref: https://github.com/NeonLaw/codebase/issues/776

useColorMode hook does not seem to work properly i.e on the initial render the border colour which is applied using it does not work i.e the desired border-color is not being applied to the Sections as shown below in the screenshot

same is true for the other elements

Once the theme is switched via the Theme Switcher the useColorMode hook seems to work as expected.

To Reproduce

visit: https://neonlaw.com

Note: Locally the useColorMode hook seems to work fine.

[mattiasw]

I don’t use this functionality yet but I may do in the future so I want to add my two cents. The “fix” they did seems to have been to remove the Content Security Policy which is a terrible solution to this issue. Not being able to have a strict CSP will be a deal-breaker for many people (me included). I actually found this thread because of some inline styling that my CSP blocked which meant I had no styling anymore. I don’t have time right now to dig into that and formulate an issue, but it definitely looks like a problem (maybe with Emotion though). Chakra is such an awesome project and I know you work hard and can’t solve everything. I just wanted to point out that inline styles and scripts should not be added lightly and especially not without having a workaround (if they really have to be inline I guess a hash has to be used, I don’t think a nonce will work with statically generated pages).

[afzaal-ameer]

This should be reopened. There seems to be no workaround if one wants strict CSP.