localStorage issues

I am working on a desktop webapp that relies on Chakra for the UI rendering. I am having issues using ColorModeProvider. Specifically using <DarkMode>. It appears that on macOS (Safari WKWebView) the page is not able to access localStorage and it just crashes.

It would be nice to have a switch option to use/not use the localStorage feature provided by the use-dark-mode library and just let my application handle the user preference.

[dedo1911]

I just got around the issue with a solution like this:

import React from 'react'
import { CSSReset, ColorModeContext } from '@chakra-ui/core'

const ColorModeProvider = props => {
  const colorMode = {
    colorMode: props.value || 'light',
    toggleColorMode: _ => {}
  }

  return <ColorModeContext.Provider value={colorMode}>
    <CSSReset />
    {props.children}
  </ColorModeContext.Provider>
}

export default ColorModeProvider

What I did is basically defining my own ColorModeProvider that doesn’t use anything but a colorMode property. You should implement your custom toggleColorMode or set colorMode with your rules.

[with-heart]

Color mode now works correctly with localStorage in 1.0! https://next.chakra-ui.com/docs/color-mode