https://github.com/uiwjs/react-use-colorscheme

useColorScheme() provides access to the devices color scheme.
https://github.com/uiwjs/react-use-colorscheme

colorscheme hooks react reactjs

Last synced: 3 months ago
JSON representation

useColorScheme() provides access to the devices color scheme.

• Host: GitHub
• URL: https://github.com/uiwjs/react-use-colorscheme
• Owner: uiwjs
• License: mit
• Created: 2023-08-12T03:07:02.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-25T05:26:27.000Z (over 1 year ago)
• Last Synced: 2024-10-17T12:39:57.706Z (8 months ago)
• Topics: colorscheme, hooks, react, reactjs
• Language: TypeScript
• Homepage: https://uiwjs.github.io/react-use-colorscheme/
• Size: 3.33 MB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
React useColorScheme() Hook

===

[![Build & Deploy](https://github.com/uiwjs/react-use-colorscheme/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-use-colorscheme/actions/workflows/ci.yml)

[![Coverage Status](https://uiwjs.github.io/react-use-colorscheme/badges.svg)](https://uiwjs.github.io/react-use-colorscheme/coverage/lcov-report/)

[![NPM Version](https://img.shields.io/npm/v/@uiw/react-use-colorscheme.svg)](https://www.npmjs.com/package/@uiw/react-use-colorscheme)

[![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)

`useColorScheme()` is a tiny, zero-dependency, SSR hook for responding to devices color scheme changes.

## Quick Start

```bash

npm install @uiw/react-use-colorscheme

```

## Using

```jsx mdx:preview

import React from "react";

import { useColorScheme } from '@uiw/react-use-colorscheme';

export default function App() {

  const colorScheme = useColorScheme();

  return (

    


      
useColorScheme

      
{colorScheme === 'dark' ? '🌒 dark' : '🌞 light'}

      
Test by setting light and dark themes in your OS

      

    

  );

}

```


## Related

- [useOnline](https://github.com/uiwjs/react-use-online) `useOnline` is a tiny, zero-dependency hook for responding to online/offline changes.

## Contributors

As always, thanks to our amazing contributors!



  



Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

Licensed under the MIT License.