---
title: Style Overrides
---

import PropertySignature from '@components/PropertySignature.astro'

You can add a `styleOverrides` object to the [engine configuration](/reference/configuration/) to customize the appearance of the rendered code blocks without having to write custom CSS.

The root level of this object contains [core style settings](#core-style-settings) like colors, fonts, paddings and more. Plugins can contribute their [plugin style settings](#plugin-style-settings) by adding a nested object with the plugin's name as key. For example, if the `frames` plugin is enabled, you can override its `shadowColor` by setting `styleOverrides.frames.shadowColor` to a color value.

If any of the settings are not given, default values will be used or derived from the theme.

:::tip
If your site uses CSS variables for styling, you can also use these overrides to replace styles with CSS variable references, e.g. `var(--your-css-var)`.
:::

## Core style settings

### borderColor

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['titleBar.border'] || lighten(theme.colors['editor.background'], theme.type === 'dark' ? 0.5 : -0.15) || 'transparent'``
</PropertySignature>

Border color of code blocks.

### borderRadius

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'0.3rem'``
</PropertySignature>

Border radius of code blocks.

### borderWidth

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1.5px'``
</PropertySignature>

Border width of code blocks.

### codeBackground

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['editor.background']``
</PropertySignature>

Background color of code blocks.

### codeFontFamily

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"``
</PropertySignature>

Font family of code content.

### codeFontSize

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'0.85rem'``
</PropertySignature>

Font size of code content.

### codeFontWeight

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'400'``
</PropertySignature>

Font weight of code content.

### codeForeground

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['editor.foreground']``
</PropertySignature>

Foreground color of code, unless overwritten by syntax highlighting.

### codeLineHeight

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1.65'``
</PropertySignature>

Font line height of code content.

### codePaddingBlock

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1rem'``
</PropertySignature>

Block-level padding (= top and bottom padding in horizontal writing mode) around the code content inside code blocks.

### codePaddingInline

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1.35rem'``
</PropertySignature>

Inline-level padding (= left and right padding in horizontal writing mode) around the code content inside code blocks.

### codeSelectionBackground

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['editor.selectionBackground']``
</PropertySignature>

Background color of selected code, unless selection color customization is disabled by the option `useThemedSelectionColors`.

### focusBorder

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['focusBorder']``
</PropertySignature>

Color of the focus border around focused elements.

### scrollbarThumbColor

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['scrollbarSlider.background']``
</PropertySignature>

Color of the scrollbar thumb, unless scrollbar color customization is disabled by the option `useThemedScrollbars`.

### scrollbarThumbHoverColor

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['scrollbarSlider.hoverBackground']``
</PropertySignature>

Color of the scrollbar thumb when hovered, unless scrollbar color customization is disabled by the option `useThemedScrollbars`.

### uiFontFamily

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``"ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"``
</PropertySignature>

Font family of UI elements.

### uiFontSize

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'0.9rem'``
</PropertySignature>

Font size of UI elements.

### uiFontWeight

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'400'``
</PropertySignature>

Font weight of UI elements.

### uiLineHeight

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1.65'``
</PropertySignature>

Font line height of UI elements.

### uiPaddingBlock

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'0.25rem'``
</PropertySignature>

Block-level padding (= top and bottom padding in horizontal writing mode) of UI elements like tabs, buttons etc.

### uiPaddingInline

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``'1rem'``
</PropertySignature>

Inline-level padding (= left and right padding in horizontal writing mode) of UI elements like tabs, buttons etc.

### uiSelectionBackground

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['menu.selectionBackground']``
</PropertySignature>

Background color of selected UI elements, unless selection color customization is disabled by the option `useThemedSelectionColors`.

### uiSelectionForeground

<PropertySignature>
- Type: [UnresolvedStyleValue](/reference/plugin-api/#unresolvedstylevalue)
- Default: ``({ theme }) => theme.colors['menu.selectionForeground']``
</PropertySignature>

Foreground color of selected UI elements, unless selection color customization is disabled by the option `useThemedSelectionColors`.

## Plugin style settings

### frames

<PropertySignature>
- Type: [FramesStyleSettings](/key-features/frames/#available-style-overrides)
- Default: ``{}``
</PropertySignature>

Allows you to override [frames style settings](/key-features/frames/#available-style-overrides) to customize the appearance of the frames rendered around code blocks.

### textMarkers

<PropertySignature>
- Type: [TextMarkersStyleSettings](/key-features/text-markers/#available-style-overrides)
- Default: ``{}``
</PropertySignature>

Allows you to override [text markers style settings](/key-features/text-markers/#available-style-overrides) to customize the appearance of the text markers used to highlight parts inside code blocks.

### collapsibleSections

<PropertySignature>
- Type: [CollapsibleSectionsStyleSettings](/plugins/collapsible-sections/#available-style-overrides)
- Default: ``{}``
</PropertySignature>

Allows you to override [collapsible sections style settings](/plugins/collapsible-sections/#available-style-overrides) to customize the appearance of collapsed and expanded sections inside code blocks.

:::note
As `plugin-collapsible-sections` is not a default plugin, you must [install the plugin](/plugins/collapsible-sections/#installation) first before being able to override its style settings.
:::
