Cropper Themes
Introduction#
The theme is the set of predefined styles for the following default components: Cropper, CircleStencil, RectangleStencil, BoundingBox, SimpleHandler and SimpleLine.
They define global rules for such classes as react-advanced-cropper, react-rectangle-stencil and etc.
When you import the styles, you load both service styles that required to correct displaying of components and the simplest default theme.
import 'react-advanced-cropper/dist/style.css';It's the deliberate decision to reduce the count of operations needed to start work with this library. However, because this library uses the BEM methodology the defined styles can be easily redefined later (for example, by importing another theme later).
Customizing a theme#
If you use SCSS preprocessor you can easily customize the theme by redefining available variables and importing the scss theme file.
For example:
$base-color: cornflowerblue;@import '~react-advanced-cropper/dist/themes/classic.scss';Themes#
Default Theme#
If you loaded styles as written earlier it will be enabled by default. This theme can be familiar to you by other examples in this documentation.
Corners Theme#
The theme inspired by some of Android croppers.
import 'react-advanced-cropper/dist/themes/corners.css';SCSS variables
| Name | Default Value |
|---|---|
| $base-color | white |
| $accent-color | currentColor |
| $line-color | $base-color |
| $grid-color | $line-color |
| $handler-color | $accent-color |
| $big-handler-color | $handler-color |
| $small-handler-color | $handler-color |
| $big-handler-size | 16px |
| $small-handler-size | 4px |
| $big-handler-width | 2px |
Classic Theme#
It's the default theme with batteries included.
import 'react-advanced-cropper/dist/themes/classic.css';SCSS variables
| Name | Default Value |
|---|---|
| $base-color | white |
| $accent-color | currentColor |
| $line-color | $base-color |
| $grid-color | $line-color |
| $handler-color | $accent-color |
| $handler-size | 8px |
Compact Theme#
The compact theme that offers the stencil appearance that doesn't distract from the cropped area.
import 'react-advanced-cropper/dist/themes/compact.css';SCSS variables
| Name | Default Value |
|---|---|
| $base-color | white |
| $accent-color | currentColor |
| $line-color | $base-color |
| $grid-color | $line-color |
| $handler-color | $accent-color |
| $big-handler-color | $handler-color |
| $small-handler-color | $handler-color |
| $big-handler-size | 16px |
| $small-handler-size | 4px |
| $big-handler-width | 2px |
Bubble Theme#
The bright and light theme.
import 'react-advanced-cropper/dist/themes/bubble.css';SCSS variables
| Name | Default Value |
|---|---|
| $base-color | white |
| $accent-color | currentColor |
| $line-color | $base-color |
| $grid-color | $line-color |
| $handler-color | $accent-color |
| $handler-size | 14px |
| $hover-handler-size | 25px |