Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thebstar/react-switch-theme
Switch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks.
https://github.com/thebstar/react-switch-theme
dark-theme darkmode javascript react react-hooks switch-theme theme
Last synced: 11 days ago
JSON representation
Switch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks.
- Host: GitHub
- URL: https://github.com/thebstar/react-switch-theme
- Owner: theBstar
- License: mit
- Created: 2019-10-05T16:48:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:11:21.000Z (about 2 years ago)
- Last Synced: 2024-12-02T09:54:55.430Z (about 1 month ago)
- Topics: dark-theme, darkmode, javascript, react, react-hooks, switch-theme, theme
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-switch-theme
- Size: 427 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-switch-theme
Switch between your themes, (i.e. dark/light or so) with just one click. Uses react hooks.
[react-switch-theme on npm](https://www.npmjs.com/package/react-switch-theme "Go to NPM page")
## Live demo: [codesandbox](https://codesandbox.io/embed/vigorous-wave-4kvk6?fontsize=14&hidenavigation=1&theme=dark "Go to code sand box example")
# Install:
```javascript
npm i react-switch-theme
```
## Updated usage:
This does not break anything, old usage is still valid.
1. Import ThemeProvider and Theme. Theme is the Context which will be used with useContext to get theme and setTheme.
```Javascript
import { ThemeProvider, Theme } from "react-switch-theme";
```
2. Wrap your app with ThemeProvider. This takes just one children, It accepts three props.
```Javascript
const colors = {
light: {
background: "#fff",
color: "#000"
},
dark: {
background: "#000",
color: "#fff"
}
};
const activeMode = "light";
const offlineStorageKey = "react-random-key";
// wrap your app
```
3. Now in app you can access theme by using:
```Javascript
const [theme, toogleTheme] = useContext(Theme);
```
theme is current theme: string, toogleTheme is a function which changes your current theme.
4. Access your css var from css-in-js or css:
```css
// You did the hardwork now just use your vars.
background: var(--background);
color: var(--color);
```
### Old Usage:
#### Demo: [CodeSandbox](https://codesandbox.io/embed/elastic-noether-c048l)
1. Import ( default import ):
```javascript
import useReactSwitchTheme from 'react-switch-theme';
```
2. Pass one option to the hook
```javascript
const options = {
colors: {
// Object of two color objects. light and dark or whatever you call them.
light: {
// These properties will be converted to css vars
// These can be named anything
// You can access them in css, css-in-js or in other way by using 'var(--propName)'
background: '#fff',
color: '#000',
},
dark: {
// Property name must be same for both objects
background: '#000',
color: '#fff',
},
},
// This is the current active theme
// It must be one of the key of colors object
activeMode: 'light',
// An unique key for your app to store themeMode in localStorage
// It should be same for every load.
// So, choosen theme stays even after a refresh
offlineStorageKey: 'replace it with you app name or some hash'
}
```
3. Use it in your app:
```javascript
const [currentMode, setDiffMode] = useReactSwitchTheme(options)
// currentMode is a string with the currentTheme as value
// light or dark here.
// setDiffMode is function which will toggle between two themes on call.
```
4. Your css:
```css
// You did the hardwork now just use your vars.
background: var(--background);
color: var(--color);
```