Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

uiwjs/react-use-colorscheme

Open more actions menu

Repository files navigation

Using my app is also a way to support me:
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Menuist Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe

React useColorScheme() Hook

Buy me a coffee Follow On X Build & Deploy Coverage Status NPM Version react@^18

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

Quick Start

npm install @uiw/react-use-colorscheme

Using

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

export default function App() {
  const colorScheme = useColorScheme();
  return (
    <div>
      <h1 style={{ margin: 0 }}>useColorScheme</h1>
      <div>{colorScheme === 'dark' ? '🌒 dark' : '🌞 light'}</div>
      <p>Test by setting light and dark themes in your OS</p>
      <img style={{ maxWidth: 520 }} src="https://github.com/uiwjs/react-use-online/assets/1680273/38090578-258c-496d-afdb-0493677e12f9" />
    </div>
  );
}

Related

  • useOnline useOnline is a tiny, zero-dependency hook for responding to online/offline changes.

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

About

useColorScheme() provides access to the devices color scheme.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.