Color Mode

React component that adds support for light mode and dark mode using localStorage and matchMedia.

Installation

yarn add @chakra-xui/color-mode

# or

npm i @chakra-xui/color-mode

Import component

To enable this behavior within your apps, wrap your application in a ColorModeProvider below the ThemeProvider

`jsx live=false import * as React from "react" import { ColorModeProvider } from "@chakra-xui/color-mode" import theme from "./theme"

function App({ children }) { return ( <ThemeProvider theme={theme}> <ColorModeProvider>{children}</ColorModeProvider> </ThemeProvider> ) }

Then you can use the hook `useColorMode` within your application.

```jsx
function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}

Change Log

1.0.2

Patch Changes

• Updated dependencies [e73878ee]:
  • @chakra-xui/utils@1.0.2
  • @chakra-xui/hooks@1.0.2

1.0.1

Patch Changes

• Updated dependencies [5c482483, 204ff7e3]:
  • @chakra-xui/utils@1.0.1
  • @chakra-xui/hooks@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @chakra-xui/color-mode

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @chakra-xui/color-mode

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @chakra-xui/color-mode

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @chakra-xui/color-mode

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Features

• added cookieStorageManager. still WIP (9a9c305)
• added storageManager prop to ColorModeProvider. this is WIP (2e9b538)
• cleaned up some storageManager code. set color mode cookie to expire after a year (d7ca15e)
• updated cookieStorageManager and next-js example to use cookieStorageManager (e7df198)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Bug Fixes

• added ColorModeOptions type to theme config (648d41f)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @chakra-xui/color-mode

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (b423cd8)
• ts issue with sx prop (d3b1340)
• color-mode: sync value prop with state for controlled modes (00881d4)

Reverts

• color mode script till we figure out a better soln (26f821f)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (b423cd8)
• ts issue with sx prop (d3b1340)
• color-mode: sync value prop with state for controlled modes (00881d4)

Reverts

• color mode script till we figure out a better soln (26f821f)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)
• case sensitivity issues in packages (b423cd8)
• color-mode: sync value prop with state for controlled modes (00881d4)