react-theme-manager

A simple and clean theme manager for react based on react context api.

Screen Recording

Features

• :rainbow: Auto transition css
• :cyclone: Auto css variable injection
• :kaaba: Auto saved for last theme
• :rocket: High performance

Install

Using npm:

$ npm install @tilemoon/react-theme-manager

Using yarn:

$ yarn add @tilemoon/react-theme-manager

Usage

first create your own ThemeConfig

import { ThemeConfig } from '@tilemoon/react-theme-manager'

interface ThemeColors {
  fontColor: string,
  backgroundColor: string,
}

export interface MyThemeConfig extends ThemeConfig<ThemeColors> {
  name: string
}

// colors will auto inject into css like `--font-color: black;`
const ThemeLight: MyThemeConfig = {
  name: 'light',
  colors: {
    fontColor: 'black',
    backgroundColor: 'white',
  },
}
export const themes = {
  light: ThemeLight,
} as const

then wrap your App by ThemeManagerProvider like this

import { ThemeManagerProvider } from '@tilemoon/react-theme-manager'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeManagerProvider onThemeInit={localTheme => {
      return themes[localTheme] ?? themes.light
    }}>
      <App />
    </ThemeManagerProvider>
  </React.StrictMode>
)

use useTheme to access current Theme, you need to pass your own ThemeConfig for strict type derivation.

function App() {
  const { theme, setTheme } = useTheme<MyThemeConfig>()

  return (
    <div className="App">
      <button
        onClick={() => setTheme((theme) => theme.name == 'light' ? themes.dark : themes.light)}>
        theme is {theme.name}
      </button>
    </div>
  )
}

use color in css

html {
  /* all variables is generated by the colors writed in ThemeConfig */
  color: var(--font-color);
  background-color: var(--background-color)
}

use function v to translate color in to css variable

import { v } from '@tilemoon/react-theme-manager'

  <button
    style={{
      color: v(theme.colors.fontColor),
      backgroundColor: v(theme.colors.backgroundColor),
    }}
    onClick={() => setTheme((theme) => theme.name == 'light' ? themes.dark : themes.light)}>
    theme is {theme.name}
  </button>

API

ThemeManagerProvider Props

<ThemeManagerProvider
  onThemeInit={localTheme => {
    // localTheme is theme string name last saved to localStorage
    return YOUR_THEME_CONFIG ?? DEFAULT_THEME
  }}
>
</ThemeManagerProvider>

useTheme

const Component = () => {
  const { theme, setTheme } = useTheme<YOUR_OWN_THEME_CONFIG>()

  // use current theme data
}

Dev

install

yarn && yarn --cwd ./example-site

link package

first run yarn link in root dir and you will get response like this:

success Registered "@tilemoon/react-theme-manager".
info You can now run `yarn link "@tilemoon/react-theme-manager"` in the projects where you want to use this package and it will be used instead

then run yarn link @tilemoon/react-theme-manager in subdir example-site

run dev

finally just run yarn dev in root dir, now every changes in root dir or in example site will hot reload both.

LICENSE