chakra-ui-flashless icon indicating copy to clipboard operation
chakra-ui-flashless copied to clipboard

Implement color mode toggle

Open LauraBeatris opened this issue 5 years ago • 1 comments

Description

Implement context provider to toggle color mode. The color mode is initialize based on the system preference and this PR does not implement the functionally to also persist the color mode value via local storage, although it can be implemented later.

I've also created separate files to structure helpers and constants, to be able to reuse them in other modules.

Implementation Styles

Execute ToggleModeProvider passing the theme and customVariables as properties

 <ColorModeToggle theme={theme} customVariables={colorModeVariables}>
   {...}
 </ColorModeToggle>

Toggle color mode by accessing the toggleColorMode function provided in the context value

 const { colorMode, toggleColorMode } = useColorMode()

It's also possible to access the current color mode state value

Tasks

  • [ ] Implement ColorModeToggle provider to toggle color mode and redefine CSS variables
  • [ ] Update docs with ColorModeToggle instructions

LauraBeatris avatar Feb 28 '21 20:02 LauraBeatris

Awesome, thanks for this PR @LauraBeatris! I like the motivation for this and I'll take some time to review it and leave some feedback later.

trevorblades avatar Mar 13 '21 22:03 trevorblades