Provides theme context and hooks. Supports theme switching via CSS custom properties.
Last updated 3 years ago by jedmao .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-theme-context 
SYNC missed versions from official npm registry.


Travis Build Status codecov npm version

Provides theme context and hooks. Supports theme switching via CSS custom properties.


The following example uses TypeScript.

  • You only want to create a single theme context and reuse it throughout your application.
  • You can create as many themes as you want, so long as they implement the same interface.


At its simplest, a theme can store colors:

export default interface Theme {
  errorColor: string
  anotherColor: string

Here's an example of a theme using this color:

import Theme from 'models/Theme'

const colors = {
  scarlet: '#ff2400',
  white: 'white',

const myTheme: Theme = {
  errorColor: colors.scarlet,
  anotherColor: colors.white,

export default myTheme

You might also want to base a color off of another:

class MyTheme implements Theme {
  public errorColor = colors.scarlet
  public get anotherColor() {
    return darken(this.errorColor, 0.2)

export default new MyTheme()


Here's a contrived example of setting up an app with a couple of inline themes and creating a button to switch to the 2nd one.


import ThemeContext from 'react-theme-context'

const defaultTheme = { primaryColor: 'red' }

export default new ThemeContext(defaultTheme)


import React, { FC } from 'react'

import themeContext from './themeContext'

const App: FC = () => {
  const [theme, setTheme] = themeContext.use()
  return (
    <div style={`background: ${themeContext.prop('primaryColor')}`}>
        onClick={() => {
          setTheme({ primaryColor: 'blue' })

export default App


import React from 'react'
import ReactDOM from 'react-dom'

import themeContext from './themeContext'
import App from './App'

const renderApp = () =>
      <App />


ThemeContext API


See: React Docs | Context Provider

#prop(property: keyof Theme): string

Converts property into CSS custom property syntax. In TypeScript, it also prevents you from using a theme property that is not defined.


// 'var(--primary-color)'

#useLayoutEffect(options = {})

Returns: [T, Dispatch<SetStateAction<T>>]

Sets theme properties as CSS custom properties on the provided options.element or the root documentElement by default. If the theme is updated, these props are updated too. This enables live theme switching!

You can also add class names to the same element via options.classNames, which is a string[].

See: React Hooks API Reference | useLayoutEffect


Returns: the result of React.useContext

Available Scripts

In the project directory, you can run:

npm test

Launches the [Jest][] test runner in the interactive watch mode.

For a coverage report, run npm test -- --coverage.

npm run lint

Runs ESLint.

npm run commit

Runs commitizen, prompting you to fill out any required commit fields at commit time.

npm run build

Builds the library for npm into the dist folder.

Current Tags

  • 2.0.1                                ...           latest (3 years ago)

5 Versions

  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Total 148
Today 0
This Week 5
This Month 5
Last Day 0
Last Week 0
Last Month 6
Dependencies (2)
Dependents (1)

Copyright 2014 - 2021 © |