This is the archived documentation for Doka Image Editor v7.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
Applying styles the editor interface
Styling can be done by setting CSS Custom Properties on either the doka-image-editor
element or the .doka-image-editor
class.
In the examples below we will use the .doka-image-editor
class selector. If we use the Custom Element version of Doka Image Editor we can use the element selector doka-image-editor
instead (ommitting the dot).
You can quickly control the editor theme by adjusting the Doka Image Editor Custom Properties.
Color Theme
To change the overall color of Doka we can adjust the --color-background
and --color-foreground
RGB values. Doka will automatically generate different shades of colors to render the UI. Same goes for the --color-focus
variable.
Note that the values for these properties need to be supplied in RGB format, 255, 255, 255
, without the rgb()
function.
.doka-image-editor {
--color-background: 255, 255, 255;
--color-foreground: 0, 0, 0;
}
To change to dark mode we can switch the color values.
.doka-image-editor {
--color-background: 0, 0, 0;
--color-foreground: 255, 255, 255;
}
To automatically switch to dark mode based on the users system preferences we can use the prefers-color-scheme
media query.
.doka-image-editor {
--color-background: 255, 255, 255;
--color-foreground: 0, 0, 0;
}
@media (prefers-color-scheme: dark) {
.doka-image-editor {
--color-background: 0, 0, 0;
--color-foreground: 255, 255, 255;
}
}
We can change the focus ring color to red using the --color-focus
CSS variable.
.doka-image-editor {
--color-focus: 255, 0, 0;
}
To adjust the color of the image preview outline and it's crop guides we can use the --color-preview-outline
property.
.doka-image-editor {
--color-preview-outline: 255, 0, 0;
}
In older versions of Doka Image Editor this property was called --preview-border-color
Setting primary and secondary colors can be done with the --color-primary
and --color-secondary
properties, these properties take any CSS color value. The --color-primary-text
value is used for text rendered on elements that have --color-primary
as their background color.
.doka-image-editor {
--color-primary: #2990ff;
--color-primary-dark: #1a80ec;
--color-primary-text: #fff;
--color-secondary: #03a9f4;
--color-secondary-dark: #046bbf;
}
Modal and editor layout
Property | Description |
---|---|
--editor-max-width |
Will limit the max width of the editor modal. Defaults to none
|
--editor-max-height |
Will limit the max height of the editor modal. Defaults to none
|
--editor-modal-border-radius |
Controls the border radius of the editor modal, only applied when editor is centered in view. By default no border radius is applied. |
--editor-modal-overlay-opacity |
Controls the opacity of the overlay behind the editor panel. The default opacity is .95
|
--editor-modal-shadow |
Controls the shadow rendered below the editor panel. Defaults to a light shadow. |
--editor-modal-outline |
Controls the outline rendered along the edges of the editor panel. Is rendered with a pseudo-element on the editor panel. Defaults to an inset box-shadow with very low opacity. |
We can adjust the --editor-max-width
and --editor-max-height
properties to limit the size of the editor when using the modal view. The editor will automatically be centered in the viewport.
.doka-image-editor {
--editor-max-width: 50em;
--editor-max-height: 40em;
}
To add some additional padding to the top and/or bottom of the editor we can use --editor-inset-top
and --editor-inset-bottom
.doka-image-editor {
--editor-inset-top: 20px;
}
Other styles
We can adjust button styles with the --border-radius-round
and --border-radius
properties. Using the --button-cursor
property we can toggle between using a pointer
(hand) or a default
(arrow) cursor on button elements.
.doka-image-editor {
--border-radius-round: 9999em;
--border-radius: 0.75em;
--button-cursor: pointer;
}
Adjust the font family with the --font-family
property. The default family is based on the default system font stack. The --font-size
property sets the font size for the root element of the editor, all other font sizes are scaled relatively to this font size.
.doka-image-editor {
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
--font-size: 16px;
}