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

npm version

Screen Recording

Screen Recording


  • ? Auto transition css
  • ? Auto css variable injection
  • ? Auto saved for last theme
  • ? High performance


Using npm:

$ npm install @tilemoon/react-theme-manager

Using yarn:

$ yarn add @tilemoon/react-theme-manager


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(
    <ThemeManagerProvider defaultTheme={themes.light}>
      <App />

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">
        onClick={() => setTheme((theme) => == 'light' ? themes.dark : themes.light)}>
        theme is {}

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'

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


ThemeManagerProvider Props

  defaultTheme={/* put the default theme here */}


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

  // use current theme data



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.



View Github