Skip to content

Marcus-Rise/react-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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