Implement color mode toggle
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
ColorModeToggleprovider to toggle color mode and redefine CSS variables - [ ] Update docs with
ColorModeToggleinstructions
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.