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

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

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

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

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

```css
.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`

```css
.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.

```css
.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.

```css
.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;
}
```