If you have tried the demo on the front page of markerjs.com you probably noticed that you can adjust CROPRO UI to adhere to the color scheme of your application. Here's how...
You adjust the UI styling via the
There are two types of styling-related properties available under the
- The easiest but fairly limited approach is to change
xxxYyyColor-style properties. These set the color of a particular element such as
- The other, more flexible, way is setting
xxxYyyClassName-style properties. This way you can set CSS class names of specific elements and gain more flexibility in what you can do.
Technically, you can combine both approaches but for predictable results, you should pick one or the other.
Front page demo styling
This site uses Tailwind CSS framework and we've used Tailwind CSS utility classes to style the front page demo to fit the style of the site.
Here's the relevant part of the demo code:
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';
Try to avoid setting layout-related styles
Technically, there's nothing preventing you from setting any CSS properties you like in the CSS classes you specify in the
xxxYyyColorsClassName properties. But as the name suggests try sticking to the color-related properties and avoid anything that can affect layout.
Any attempts to set layout-related styles will likely result in undesired side-effects.
- Check out the IStyleSettings interface for the list of all of the available UI customization properties.