Package Exports

@colorsystem/react-hooks
@colorsystem/react-hooks/dist/index.js
@colorsystem/react-hooks/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@colorsystem/react-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
  );
};