React dark mode — is this bad practice?

1

Have a Provider here passing down a switch & the state:

import React, { useState, createContext } from 'react'
import { Switch, FormGroup } from '@material-ui/core'
import FormControlLabel from '@material-ui/core/FormControlLabel'

export const ThemeContext = createContext()

export const ThemeProvider = (props) => {
  const [checked, setChecked] = useState(false)

  const toggleChecked = () => {
    setChecked(prev => !prev)
  }

  const ThemeSwitch = (
    <FormGroup>
      <FormControlLabel
        control={
          <Switch 
            checked={checked}
            onChange={toggleChecked}
            color="primary"
          />
        }
        label="Night Theme"
      />
    </FormGroup>
  )

  return (
    <ThemeContext.Provider
      value={{
        checked,
        ThemeSwitch,
      }}
    >
      {props.children}
    </ThemeContext.Provider>
  )
}

And I’m calling it like so:

Screen Shot 2020-03-20 at 4.03.36 PM
Screen Shot 2020-03-20 at 4.03.36 PM850×590 39.5 KB

Is this a decent way to go about it? Calling it in every component that relies on a dark mode change? I’ve thought about maybe having a Wrapper with exported objects of the proper styles I want. I guess there are many ways here. Thanks guys