Untitled

import React, { useContext, useState } from 'react';
import { ThemeContext } from './App';

export default function Header() {
  const theme = useContext(ThemeContext);
  const [showPicker, setShowPicker] = useState(false);

  function handleChangeColor(color) {
    theme.primaryColor = color;
    setShowPicker(false);
  }

  return (
    <header style={{ backgroundColor: theme.primaryColor }}>
      <h1>My App</h1>
      <button onClick={() => setShowPicker(true)}>Change color</button>
      {showPicker && (
        <ColorPicker initialColor={theme.primaryColor} onChange={handleChangeColor} />
      )}
    </header>
  );
}