React useColorScheme() Hook

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.