CROPRO Demos: Customize CROPRO UI

Customize CROPRO UI

You can make CROPRO UI fit your design theme by customizing its UI colors.

The demo below uses Tailwind CSS classes (also used throughout this site) to make CROPRO UI blend into the page.

Click on the image to launch the demo and look at the code below.

Open in CodeSandbox

Code

We are just setting styles.settings class names for the CropArea to the appropriate Tailwind CSS classes:

cropArea.styles.settings.toolbarStyleColorsClassName = 'bg-white';
cropArea.styles.settings.toolbarButtonStyleColorsClassName =
  'bg-gradient-to-t from-white to-white hover:from-white hover:via-pink-100 hover:to-white fill-current text-pink-300';
cropArea.styles.settings.toolbarActiveButtonStyleColorsClassName =
  'bg-gradient-to-t from-white to-pink-50 fill-current text-pink-400';
cropArea.styles.settings.toolbarStraightenerColorsClassName = 'text-pink-300 fill-current';
cropArea.styles.settings.toolbarBackgroundColor = 'white';
cropArea.styles.settings.canvasBackgroundColor = 'white';

Obviously, you can use your own CSS classes or just set specific colors via the xxxYyyColor properties. See UI customization documentation for details.

Check out this demo in CodeSandbox for a complete example.

« Previous demoNext demo »