@marcus-rise/react-theme

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 settings
• preferences is a string form enum

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