# @chakra-ui/color-mode

> React component and hooks for handling light and dark mode.

Latest version **2.2.0** (published 2023-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chakra-ui/color-mode
pnpm add @chakra-ui/color-mode
yarn add @chakra-ui/color-mode
bun add @chakra-ui/color-mode
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2023-07-18 |
| First published | 2020-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 111 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40651 |
| Author | Segun Adebayo |
| Maintainers | segunadebayo, _codebender828 |
| Keywords | react, theming, ui, light mode, use dark mode, dark mode, color mode, hook, color scheme, media query, chakra ui |

## Links

- npm: https://www.npmjs.com/package/@chakra-ui/color-mode
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://github.com/chakra-ui/chakra-ui#readme
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/color-mode

## Dependencies (1)

- [@chakra-ui/react-use-safe-layout-effect](https://npm.io/package/@chakra-ui/react-use-safe-layout-effect.md) 2.1.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2023-07-18
- 0.0.0-dev-20230718132637 (dev) — 2023-07-18
- 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16
- 2.0.0-next.4 (next) — 2022-05-09
- 0.0.0-pr-202212011232 (pr) — 2022-02-20
- 1.0.0-next.0 (canary) — 2020-06-20
- 0.0.0-dev-20230718130742 — 2023-07-18
- 0.0.0-dev-20230718124717 — 2023-07-18
- 0.0.0-dev-20230718122336 — 2023-07-18
- 2.1.12 — 2023-01-12
- 0.0.0-dev-20230112154520 — 2023-01-12
- 0.0.0-dev-20230112152756 — 2023-01-12
- 0.0.0-dev-20230112145104 — 2023-01-12
- 0.0.0-dev-20230112143332 — 2023-01-12
- 0.0.0-dev-20230112141201 — 2023-01-12
- … 348 more at https://npm.io/package/@chakra-ui/color-mode/versions

## README

# Color Mode

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

## Installation

```sh
yarn add @chakra-ui/color-mode

# or

npm i @chakra-ui/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-ui/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>
  )
}
```

---
_Source: https://npm.io/package/@chakra-ui/color-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._