https://github.com/marcus-rise/react-theme

react theme toggle hook
https://github.com/marcus-rise/react-theme

hook react theme

Last synced: 25 days ago
JSON representation

react theme toggle hook

• Host: GitHub
• URL: https://github.com/marcus-rise/react-theme
• Owner: Marcus-Rise
• Created: 2022-07-18T16:40:11.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-12-26T10:42:23.000Z (about 2 years ago)
• Last Synced: 2024-11-17T12:16:52.882Z (about 2 months ago)
• Topics: hook, react, theme
• Language: TypeScript
• Homepage: https://react-theme.marcus-rise.dev
• Size: 677 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React theme

Handle system color scheme and user preferences.

https://react-theme.marcus-rise.dev

## Install

using `npm`

```bash

npm install @marcus-rise/react-theme

```

or using `yarn`

```bash

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`.

```tsx

import {ThemeProvider, useTheme} from "@marcus-rise/react-theme";

const ThemeToggle = () => {

  const {isDarkTheme, preferences, toggleTheme} = useTheme();

  return (

    <>

      toggle

      


      preferences: {preferences ?? "system default"}

      


      isDarkTheme: {isDarkTheme ? "yes" : "no"}

    >

  );

};

const App = () => (

  

    

  

);

export {App};

```

## API

### Context provider `ThemeProvider`

To set custom localStorage key set `preferencesStorageKey` property for user preferences

```tsx

```

To save user preferences in cookies, provide `cookiesKey` prop as a cookie key string

```tsx

```

### Hook `useTheme`

- `isDarkTheme` is a`boolean` what color scheme is selected, basing on user preferences and system

  settings

- `preferences` is a `string` form `enum`

```ts

enum ThemePreference {

  DARK = "dark",

  LIGHT = "light",

}

```

- `toggleTheme` toggle theme from system default to light, from light to dark and from dark to

  system default

- `setTheme` set theme (dark or light)

- `resetThemeToSystem` set theme to system default