react-dark-theme

A dark theme toggle button with CSS variables

Install

npm install --save react-dark-theme

Usage

react-dark-theme uses CSS variables because they are really fast. React doesn't need to re-render your entire application when the style changes.

You can use it if you support modern browsers. In doubt? Check caniuse.com to make sure.

react-dark-theme is a button. Use it as you would any button, and provide it two themes.

Usage with CSS

import React from 'react'
 
import DarkTheme from 'react-dark-theme'
 
const lightTheme = {
  background: 'white',
  text: 'black',
}
 
const darkTheme = {
  background: 'black',
  text: 'white',
}
 
class Example extends React.Component {
  render() {
    return (
      <div>
        <DarkTheme light={lightTheme} dark={darkTheme} />
        Rest of your application
      </div>
    )
  }
}

In your CSS, refer to the names by var(--yourName)

body {
  background-color: var(--background);
  color: var(--text);
}

Usage with CSS-in-JS

Similar to usage in CSS, but you can also create a object that you can refer to your variables in:

import React from 'react'
 
import DarkTheme, { createTheme } from 'react-dark-theme'
 
const lightTheme = {
  background: 'white',
  text: 'black',
}
 
const darkTheme = {
  background: 'black',
  text: 'white',
}
 
const myTheme = createTheme(darkTheme, lightTheme)
 
class Example extends React.Component {
  render() {
    return (
      <div style={{ backgroundColor: myTheme.background, color: myTheme.text }}>
        <DarkTheme light={lightTheme} dark={darkTheme} />
        Rest of your application
      </div>
    )
  }
}

This technique works with any CSS-in-JS library, and should in theory be much faster than those libraries' "native" way to handle themes.

My page looks weird while it is loading

If you are unable to load the <DarkTheme ... /> component early in your life cycle you might see a few frames where your React components are rendered but the CSS variables are not set. The easiest fix for this is to allow <DarkTheme ... /> to load earlier.

If this isn't an option, you can use applyTheme(theme). Simply invoke this as soon as you define your theme.

 
import { applyTheme } from 'react-dark-theme'
 
const darkTheme = {
  background: #BEEFED,
}
 
const normalTheme = {
  background: #DECADE,
}
 
applyTheme(normalTheme)

Make sure to apply your light theme if defaultDark is false on your DarkTheme component, and apply your dark theme if defaultDark is true.

Props

DarkTheme:

Property	Type	Default	Description
dark	Object	null	required { key: value }-map of variables and their values. Keys must correspond with lightTheme
light	Object	null	required { key: value }-map of variables and their values. Keys must correspond with darkTheme
defaultDark	boolean	false	Whether or not dark theme should be default. False means light theme is default.
className	string	undefined	Optional className passed directly to react-toggle switch.

createTheme:

Parameter	Type	Default	Description
dark	Object	null	required { key: value }-map of variables and their values. Keys must correspond with lightTheme
light	Object	null	required { key: value }-map of variables and their values. Keys must correspond with darkTheme

applyTheme:

Parameter	Type	Default	Description
theme	Object	null	required { key: value }-map of variables and their values.

How does it work

This library uses react-css-vars. Look at it's section about how it works. If you want something else than a simple toggle button for your theme (or more than a light and a dark theme) I suggest using react-css-vars directly.

License

MIT © karl-run