Theme

import { useReactGrab } from 'react-grab';

function App() {
  const reactGrab = useReactGrab({
    theme: {
      hue: 200, // Blue theme
      crosshair: {
        enabled: false // Hide crosshair
      }
    }
  });

  return <div>{/* Your app */}</div>;
}

import { Plugin } from 'react-grab';

const myPlugin: Plugin = {
  name: 'my-plugin',
  theme: {
    hue: 120, // Green theme
    toolbar: {
      enabled: false // Hide toolbar
    },
    grabbedBoxes: {
      enabled: true // Show success flash
    }
  }
};

function ThemeSwitcher() {
  const reactGrab = useReactGrab();
  
  const setDarkTheme = () => {
    reactGrab.setOptions({
      theme: {
        hue: 220,
        enabled: true
      }
    });
  };
  
  const setLightTheme = () => {
    reactGrab.setOptions({
      theme: {
        hue: 180,
        enabled: true
      }
    });
  };
  
  return (
    <div>
      <button onClick={setDarkTheme}>Dark</button>
      <button onClick={setLightTheme}>Light</button>
    </div>
  );
}

export interface Theme {
  enabled?: boolean;
  hue?: number;
  selectionBox?: {
    enabled?: boolean;
  };
  dragBox?: {
    enabled?: boolean;
  };
  grabbedBoxes?: {
    enabled?: boolean;
  };
  elementLabel?: {
    enabled?: boolean;
  };
  crosshair?: {
    enabled?: boolean;
  };
  toolbar?: {
    enabled?: boolean;
  };
}