https://github.com/redredgroup/react-browser-theme-detect
You can import the current browser theme from the react.
https://github.com/redredgroup/react-browser-theme-detect
Last synced: 8 months ago
JSON representation
You can import the current browser theme from the react.
- Host: GitHub
- URL: https://github.com/redredgroup/react-browser-theme-detect
- Owner: REDREDGROUP
- Created: 2022-12-08T16:13:52.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T16:22:36.000Z (over 3 years ago)
- Last Synced: 2025-03-26T01:27:15.161Z (about 1 year ago)
- Language: TypeScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🪄 React Browser Theme Detect
[](https://www.npmjs.com/package/react-browser-theme-detect)
# Usage
Add the dependency:
## NPM
```bash
npm install @redredgroup/react-browser-theme-detect
```
## Yarn
```bash
yarn add @redredgroup/react-browser-theme-detect
```
# Example
Import the package:
```js
import { isTheme, isThemeLight, isThemeDark } from "@redredgroup/react-browser-theme-detect";
```
Returns the String value for dark mode or light mode:
```js
const themeString = isTheme();
// Returns "light" or "dark"
```
When the Boolean value for dark mode detection is required,
```js
const isDark = isThemeDark();
// If it is in dark mode, return true or false
```
```js
const isLight = isThemeLight();
// If it is in dark mode, return true or false
```
## 💡 Browser support
This package only works in browsers that natively support `@media (prefers-color-scheme)`, so it just returns `"light"` in unsupported browsers. [Current browser support](https://caniuse.com/#feat=prefers-color-scheme)