@colorsystem/react-hooks

React Hook for ColorSystem.io

Usage

---

npm i @colorsystem/react-hooks

Example Usage

import useColorSystem from "@colorsystem/react-hooks";

const Component = () => {
  const { colorSystem, toggleMode, setMode } = useColorSystem("HE9IHE11");

  return (
    <main
      style={{
        color: colorSystem?.text.primary.hex,
        backgroundColor: colorSystem?.bg.canvas.hex,
      }}
    >
      {/* Toggle Dark / Light Mode */}
      <button onClick={toggleMode}>Toggle Mode</button>

      {/* Set Specific Color Theme */}
      <button onClick={() => setMode("dark")}>Switch to Dark Mode</button>
      <button onClick={() => setMode("light")}>Switch to Light Mode</button>

      <h1>ColorSystem.io</h1>
      <p style={{ color: colorSystem?.text.secondary.hex }}>
        Secondary text example
      </p>
    </main>
  );
};

Multiple Themes

import useColorSystem from "@colorsystem/react-hooks";
import { useState } from "react";

const Component = () => {
  const [colorSystemId, setColorSystemId] = useState("HE9IHE11");
  const { colorSystem, toggleMode } = useColorSystem(colorSystemId);

  return (
    <main
      style={{
        color: colorSystem?.text.primary.hex,
        backgroundColor: colorSystem?.bg.canvas.hex,
      }}
    >
      {/* Toggle Dark / Light Mode */}
      <button onClick={toggleMode}>Toggle Mode</button>

      {/* Change Theme of site by setting different ColorSystem IDs  */}
      <select
        value={colorSystemId}
        onChange={(e) => setColorSystemId(e.target.value)}
      >
        <option value="HE9IHE11">Default</option>
        <option value="D16KG3H7">Blue</option>
        <option value="0IDA2IML">Green</option>
      </select>

      <h1>ColorSystem.io</h1>
      <p style={{ color: colorSystem?.text.secondary.hex }}>
        Secondary text example
      </p>
    </main>
  );
};

Dynamic Toggle Button Text

import useColorSystem from "@colorsystem/react-hooks";

const Component = () => {
  const { colorSystem, toggleMode, isDarkMode } = useColorSystem("HE9IHE11");

  return (
    <main
      style={{
        color: colorSystem?.text.primary.hex,
        backgroundColor: colorSystem?.bg.canvas.hex,
      }}
    >
      {/* Toggle Dark / Light Mode with dynamic text */}
      <button onClick={toggleMode}>
        Switch to {isDarkMode ? "Light" : "Dark"} Mode
      </button>

      <h1>ColorSystem.io</h1>
      <p style={{ color: colorSystem?.text.secondary.hex }}>
        Secondary text example
      </p>
    </main>
  );
};