1.0.2 • Published 1 year ago
@marcus-rise/react-theme v1.0.2
React theme
Handle system color scheme and user preferences.
https://react-theme.marcus-rise.dev
Install
using npm
npm install @marcus-rise/react-theme
or using yarn
yarn add @marcus-rise/react-theme
Usage
First of all, we need to initialize ThemeProvider
context, and after this we can get access with
hook useTheme
.
import {ThemeProvider, useTheme} from "@marcus-rise/react-theme";
const ThemeToggle = () => {
const {isDarkTheme, preferences, toggleTheme} = useTheme();
return (
<>
<button onClick={toggleTheme}>toggle</button>
<br/>
<span>preferences: {preferences ?? "system default"}</span>
<br/>
<span>isDarkTheme: {isDarkTheme ? "yes" : "no"}</span>
</>
);
};
const App = () => (
<ThemeProvider>
<ThemeToggle/>
</ThemeProvider>
);
export {App};
API
Context provider ThemeProvider
To set custom localStorage key set preferencesStorageKey
property for user preferences
<ThemeProvider preferencesStorageKey={"OPTIONAL_APP_THEME_STORAGE_KEY"}>
To save user preferences in cookies, provide cookiesKey
prop as a cookie key string
<ThemeProvider cookiesKey={"theme-preferences"}>
Hook useTheme
isDarkTheme
is aboolean
what color scheme is selected, basing on user preferences and system settingspreferences
is astring
formenum
enum ThemePreference {
DARK = "dark",
LIGHT = "light",
}
toggleTheme
toggle theme from system default to light, from light to dark and from dark to system defaultsetTheme
set theme (dark or light)resetThemeToSystem
set theme to system default
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
2 years ago
1.0.1-canary.1
1 year ago
1.0.0-canary.0
2 years ago
1.0.2-canary.0
1 year ago
1.0.2-canary.1
1 year ago
0.4.6
2 years ago
0.4.5
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.1
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago