https://github.com/johannesklauss/react-use-system-color-mode
A SSR compatible React hook to detect the systems color mode.
https://github.com/johannesklauss/react-use-system-color-mode
Last synced: 3 months ago
JSON representation
A SSR compatible React hook to detect the systems color mode.
- Host: GitHub
- URL: https://github.com/johannesklauss/react-use-system-color-mode
- Owner: JohannesKlauss
- License: mit
- Created: 2021-10-22T07:57:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-22T08:25:49.000Z (almost 3 years ago)
- Last Synced: 2025-01-18T14:24:20.123Z (4 months ago)
- Language: TypeScript
- Size: 1.09 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
useSystemColorMode()
npm i react-use-system-color-mode
A React hook for retrieving the system color mode. It is SSR compatible, built with TypeScript and listens to live changes
of the system preference.
## Quick Start
[Check out the example on **CodeSandbox**](https://codesandbox.io/s/condescending-jennings-59h6r?file=/src/styles.css)
```jsx harmony
import { useSystemColorMode } from 'react-use-system-color-mode'
const Example = () => {
const colorMode = useSystemColorMode();
return (
Your color Mode is {colorMode}
);
};
```
## API
### useSystemColorMode()
Returns the current color mode of the users OS. Returns `dark` or `light`. On the server it always returns `dark`.
#### Returns `'dark' | 'light'`
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Johannes Klauss - [@JohannesKlauss](https://github.com/JohannesKlauss) - [email protected]
Project Link: [https://github.com/JohannesKlauss/react-use-system-color-mode](https://github.com/JohannesKlauss/react-use-system-color-mode)
## Prior Art
Basis of this package is the [react-use-color-mode](https://github.com/JasonHeylon/react-use-color-mode)
which is not maintained anymore.