This custom hook is called useRandomColorScheme and it generates random color schemes for UI elements based on user preferences.

useRandomColorScheme.js

import { useState, useEffect } from "react";

const getRandomColor = () => {
  const getRandomNumber = () => Math.floor(Math.random() * 256);
  const toHex = (number) => number.toString(16).padStart(2, "0");
  return `#${toHex(getRandomNumber())}${toHex(getRandomNumber())}${toHex(
    getRandomNumber()
  )}`;
};

const getComplementaryColor = (color) => {
  const red = parseInt(color.slice(1, 3), 16);
  const green = parseInt(color.slice(3, 5), 16);
  const blue = parseInt(color.slice(5, 7), 16);
  const complementaryRed = 255 - red;
  const complementaryGreen = 255 - green;
  const complementaryBlue = 255 - blue;
  const toHex = (number) => number.toString(16).padStart(2, "0");

  return `#${toHex(complementaryRed)}${toHex(complementaryGreen)}${toHex(
    complementaryBlue
  )}`;
};

//==== Custom hook

const useRandomColorScheme = (userPreference) => {
  const [colorScheme, setColorScheme] = useState({});

  useEffect(() => {
    let primaryColor;

    if (userPreference === "warm") {
      primaryColor = `#${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}00${Math.floor(Math.random() * (128 - 0) + 0).toString(16)}`;
    } else if (userPreference === "cool") {
      primaryColor = `#00${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}${Math.floor(Math.random() * (256 - 128) + 128).toString(16)}`;
    } else if (userPreference === "neutral") {
      primaryColor = `#${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}${Math.floor(Math.random() * (256 - 0) + 0).toString(16)}`;
    } else {
      primaryColor = getRandomColor();
    }

    const secondaryColor = getComplementaryColor(primaryColor);
    setColorScheme({ primary: primaryColor, secondary: secondaryColor });

  }, [userPreference]);

  return colorScheme;
};

const Card = ({ title, content, userPreference }) => {
  const { primary, secondary } = useRandomColorScheme(userPreference);

  return (
    <div
      style={{
        backgroundColor: primary,
        color: secondary,
        padding: "20px",
        borderRadius: "10px",
        width: "300px",
        margin: "10px",
      }}
    >
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

// A component that renders a select element with options for user preferences
const PreferenceSelector = ({ value, onChange }) => {
  return (
    <select value={value} onChange={onChange}>
      <option value="warm">Warm</option>
      <option value="cool">Cool</option>
      <option value="neutral">Neutral</option>
      <option value="random">Random</option>
    </select>
  );
};
//=== Usage
const App = () => {
  const [userPreference, setUserPreference] = useState("random");
  const handleChange = (e) => setUserPreference(e.target.value);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
      <h1>Random Color Scheme Generator</h1>
      <p>Select your preference:</p>
      <PreferenceSelector value={userPreference} onChange={handleChange} />
      <p style={{ marginBottom: '50px' }}>See some examples:</p>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
        <Card
          title="Card One"
          content="This is the first card."
          userPreference={userPreference}
        />
        <Card
          title="Card Two"
          content="This is the second card."
          userPreference={userPreference}
        />
        <Card
          title="Card Three"
          content="This is the third card."
          userPreference={userPreference}
        />
      </div>
    </div>
  );
};

export default App;