v8.89.6

Search

Adjust styles

In the examples below we will use the .pintura-editor class selector. If we use the Custom Element version of Pintura Image Editor we can use the element selector pintura-editor instead (ommitting the dot).

You can quickly control the editor theme by adjusting the Pintura Image Editor Custom Properties.

Color Theme

To change the overall color of Pintura Image Editor we can adjust the --color-background and --color-foreground RGB values. Pintura Image Editor 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.

.pintura-editor {
    --color-background: 255, 255, 255;
    --color-foreground: 0, 0, 0;
}

To change to dark mode we can switch the color values.

.pintura-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.

.pintura-editor {
    --color-background: 255, 255, 255;
    --color-foreground: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
    .pintura-editor {
        --color-background: 0, 0, 0;
        --color-foreground: 255, 255, 255;
    }
}

Switching between theme colors is animated, to control the transition duration we can use the --color-transition-duration property.

.pintura-editor {
    --color-transition-duration: 100ms;
}

To change the color of Pintura panel controls separate from the Pintura UI we can use the generic .pintura-editor-panel selector.

.pintura-editor-panel {
    --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.

.pintura-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.

.pintura-editor {
    --color-preview-outline: 255, 0, 0;
}

In older versions of Pintura 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.

.pintura-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. Only applied when editor is centered in view.
--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. Only applied when editor is centered in view.

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.

.pintura-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

.pintura-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.

.pintura-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.

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