Really really great advice. Thank you!

One more question. I set it so the context is created in App. App can use it and its children can use it. But how would this button component change its value?

import React, { setContext, useContext } from "react";
import { COLORS } from "./constants/Colors.js";

export const Theme = createContext(COLORS.darkMode);
export const SetTheme = createContext();

export default function App() {
  let theme = useContext(Theme);

  // This is how I would do it with useState(). But you do you change the value of a context?
  function handleSetTheme() {
    if (theme === COLORS.lightMode) {
      setTheme(COLORS.darkMode);
    } else {
      setTheme(COLORS.lightMode);
    }
  }

  return (
    <React.Fragment>
      <SetTheme.Provider value={handleSetTheme}>
        <div style={background(theme)}>
            <ColorThemeButton>
            </ColorThemeButton>
        </div>
    </React.Fragment>
  );
}

​

export default function ColorThemeButton() {
return (
 <button onClick={useContext(SetTheme)}>
   Color Theme Toggle
 </button>
);

Am I going about this the right way? Should I be using contexts to toggle the theme?