Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Store color mode value in theme

See original GitHub issue

Currently we store the color mode value in a react context

This approach has a few problems that limit the extensibility with other packages

when other packages use another color mode context the state is duplicated in multiple places
if other UI packages want to know the current color mode they must have a peer dependency on @chakra-ui/color-mode
if there are multiple installs of chakra-ui the color mode context is duplicated and color mode will stop working

We could instead use the emotion ThemeContext to store the color mode value, this way chakra-ui color mode can easily be used by other UI packages without having to depend on chakra-ui

Obviously there would be no change on the current API as we can just change the useColorMode and useColorModeValue functions to get the value from theme instead of context

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:7 (6 by maintainers)

Top GitHub Comments

5reactions

arnaudjnncommented, Jul 10, 2020

Is it possible to use color mode like in theme-ui:

colors: {
    ...chakraTheme.colors,
    accent1: '#FAFAFA',
    accent2: '#EAEAEA',
    accent3: '#999',
    accent4: '#888',
    modes: {
      dark: {
        accent1: '#111',
        accent2: '#333',
        accent3: '#999',
        accent4: '#FAFAFA',
      },
    },
  },

4reactions

segunadebayocommented, Jul 15, 2020

I see where this is going @remorses. I think it makes sense to store the value in the theme and allow the user to provide their mechanism to control the color mode, we can use localStorage by default.