Styles

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 element selector without the ., if we don't use the Custom Element version of Doka Image Editor we have to use the CSS class selector .doka-image-editor instead (with prepended 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.

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

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 size

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

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