Dark Mode:

The react hooks way

Here I will show how to use reacts new useContext and useReducer hooks by adding a dark mode toggle to a react app

To start out we will need three things:

For the themes i prefer to combine them into a single themes object

import { dark } from './themes/dark'
import { light } from './themes/light'
export const themes = {
  dark,
  light,
}

And for the themes i like to define general names for colors to use

export const light = {
  colors: {
    lightText: '',
    darkText: '',
    lightBackground: '',
    darkBackground: '',
    primary: '',
    secondary: '',
  },
}