App.jsx

import React, { useState, useCallback } from 'react';
import DarkModeToggleSwitch from './DarkModeToggleSwitch';
import ThemeContext, { DARK_THEME, LIGHT_THEME, DarkMode } from './theme';

export default function App () {
  const [ dark, setDark ] = useState(DarkMode.getSetting);
  const theme = dark ? DARK_THEME : LIGHT_THEME;

  const toggleDarkMode = useCallback(function () {
    setDark(prevState => {
      const newState = !prevState;
      DarkMode.updateSetting(newState);
      return newState;
    });
  }, []);

  return <>
    <div>
      <DarkModeToggleSwitch on={dark} toggle={toggleDarkMode}/>
    </div>

    <ThemeContext.Provider value={theme}>
      {/* Render rest of app (consume the theme context) */}
    </ThemeContext.Provider>
  </>
}