Skip to content
Expressive Code

Style Overrides

You can add a styleOverrides object to the engine 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 like colors, fonts, paddings and more. Plugins can contribute their 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.

Core style settings

Section titled “Core style settings”

borderColor

Section titled “borderColor”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['titleBar.border'] || lighten(theme.colors['editor.background'], theme.type === 'dark' ? 0.5 : -0.15) || 'transparent'

Border color of code blocks.

borderRadius

Section titled “borderRadius”
Type: UnresolvedStyleValue Default: '0.3rem'

Border radius of code blocks.

borderWidth

Section titled “borderWidth”
Type: UnresolvedStyleValue Default: '1.5px'

Border width of code blocks.

codeBackground

Section titled “codeBackground”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['editor.background']

Background color of code blocks.

codeFontFamily

Section titled “codeFontFamily”
Type: UnresolvedStyleValue Default: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"

Font family of code content.

codeFontSize

Section titled “codeFontSize”
Type: UnresolvedStyleValue Default: '0.85rem'

Font size of code content.

codeFontWeight

Section titled “codeFontWeight”
Type: UnresolvedStyleValue Default: '400'

Font weight of code content.

codeForeground

Section titled “codeForeground”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['editor.foreground']

Foreground color of code, unless overwritten by syntax highlighting.

codeLineHeight

Section titled “codeLineHeight”
Type: UnresolvedStyleValue Default: '1.65'

Font line height of code content.

codePaddingBlock

Section titled “codePaddingBlock”
Type: UnresolvedStyleValue Default: '1rem'

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

codePaddingInline

Section titled “codePaddingInline”
Type: UnresolvedStyleValue Default: '1.35rem'

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

codeSelectionBackground

Section titled “codeSelectionBackground”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['editor.selectionBackground']

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

focusBorder

Section titled “focusBorder”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['focusBorder']

Color of the focus border around focused elements.

scrollbarThumbColor

Section titled “scrollbarThumbColor”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['scrollbarSlider.background']

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

scrollbarThumbHoverColor

Section titled “scrollbarThumbHoverColor”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['scrollbarSlider.hoverBackground']

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

uiFontFamily

Section titled “uiFontFamily”
Type: 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'"

Font family of UI elements.

uiFontSize

Section titled “uiFontSize”
Type: UnresolvedStyleValue Default: '0.9rem'

Font size of UI elements.

uiFontWeight

Section titled “uiFontWeight”
Type: UnresolvedStyleValue Default: '400'

Font weight of UI elements.

uiLineHeight

Section titled “uiLineHeight”
Type: UnresolvedStyleValue Default: '1.65'

Font line height of UI elements.

uiPaddingBlock

Section titled “uiPaddingBlock”
Type: UnresolvedStyleValue Default: '0.25rem'

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

uiPaddingInline

Section titled “uiPaddingInline”
Type: UnresolvedStyleValue Default: '1rem'

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

uiSelectionBackground

Section titled “uiSelectionBackground”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['menu.selectionBackground']

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

uiSelectionForeground

Section titled “uiSelectionForeground”
Type: UnresolvedStyleValue Default: ({ theme }) => theme.colors['menu.selectionForeground']

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

Plugin style settings

Section titled “Plugin style settings”

frames

Section titled “frames”
Type: FramesStyleSettings Default: {}

Allows you to override frames style settings to customize the appearance of the frames rendered around code blocks.

textMarkers

Section titled “textMarkers”
Type: TextMarkersStyleSettings Default: {}

Allows you to override text markers style settings to customize the appearance of the text markers used to highlight parts inside code blocks.

collapsibleSections

Section titled “collapsibleSections”
Type: CollapsibleSectionsStyleSettings Default: {}

Allows you to override collapsible sections style settings to customize the appearance of collapsed and expanded sections inside code blocks.