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;
}

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;
}

Applying styles the editor interface

Color Theme

Modal and editor layout

Other styles