npmpackage.info

Gathering detailed insights and metrics for @chakra-ui/color-mode

Other packages similar to @chakra-ui/color-mode

@chakra-ui/c-color-mode

1.0.0-alpha.13

@hackr/chakra-ui-color-mode

1.0.0-rc.9

React component and hooks for handling light and dark mode.

@teste-ui/color-mode

2.1.2

React component and hooks for handling light and dark mode.

@zyk/color-mode

2.0.6

React component and hooks for handling light and dark mode.

@chakra-ui/color-mode

Chakra UI is a component system for building products with speed ⚡️

2.2.0

38,446

MIT

TypeScript

2.23 kB

79,608,839 4.3

Installations

npm install @chakra-ui/color-mode

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

18.16.1

NPM Version

9.5.1 Score

98.6

Supply Chain

84.3

Quality

78.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

5

Total

3,613

Closed

975

Merged

2,633

Issues

Open

10

Total

3,947

Closed

3,937

Releases

3,431

@chakra-ui/panda-preset@3.7.0

Published on 04 Feb 2025

@chakra-ui/react@3.7.0

Published on 04 Feb 2025

@chakra-ui/cli@3.7.0

Published on 04 Feb 2025

@chakra-ui/react@3.6.0

Published on 02 Feb 2025

@chakra-ui/panda-preset@3.6.0

Published on 02 Feb 2025

@chakra-ui/cli@3.6.0

Published on 02 Feb 2025

View all 3,431 releases

Contributors

679

View all 679 contributors

Languages

TypeScript

MDX

JavaScript

CSS

HTML

Shell

TypeScript (82.7%)

MDX (16.49%)

JavaScript (0.65%)

CSS (0.08%)

HTML (0.07%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

chakra-ui

Download Statistics

Total Downloads

79,608,839

Last Day

92,936

Last Week

92,936

Last Month

1,547,611

Last Year

27,988,761

GitHub Statistics

38,446 Stars

10,459 Commits

3,348 Forks

202 Watching

12 Branches

679 Contributors

Bundle Size

6.17 kB

Minified

2.23 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

2.2.0

Package Id

@chakra-ui/color-mode@2.2.0

Unpacked Size

110.99 kB

Size

14.43 kB

File Count

NPM Version

9.5.1

Node Version

18.16.1

Publised On

18 Jul 2023

Total Downloads

Cumulative downloads

Total Downloads

79,608,839

Last day

92,936

Compared to previous day

Last week

-70.1%

92,936

Compared to previous week

Last month

-7.8%

1,547,611

Compared to previous month

Last year

10.3%

27,988,761

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Color Mode

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

Installation

1yarn add @chakra-ui/color-mode
2
3# or
4
5npm i @chakra-ui/color-mode

Import component

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

1import * as React from "react"
2import { ColorModeProvider } from "@chakra-ui/color-mode"
3import theme from "./theme"
4
5function App({ children }) {
6  return (
7    <ThemeProvider theme={theme}>
8      <ColorModeProvider>{children}</ColorModeProvider>
9    </ThemeProvider>
10  )
11}

Then you can use the hook useColorMode within your application.

1function Example() {
2  const { colorMode, toggleColorMode } = useColorMode()
3  return (
4    <header>
5      <Button onClick={toggleColorMode}>
6        Toggle {colorMode === "light" ? "Dark" : "Light"}
7      </Button>
8    </header>
9  )
10}

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

4

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issue-stale.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/issue-stale.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

Score

4.3

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @chakra-ui/color-mode

@chakra-ui/color-mode

Installations

Developer Guide

Yes

CommonJS, ESM

18.16.1

9.5.1

Score

Pull Requests

5

3,613

975

2,633

Issues

10

3,947

3,937

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

6.17 kB

2.23 kB

Maintainers

Package Meta Information

Total Downloads

79,608,839

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Color Mode

Installation

Import component

10

10

10

10

4

1

0

0

0

0

0

0

4.3

/10