---
title: "Style settings"
description: "Every style setting of the plugin, with its defaults for dark and light themes."
url: "https://ewels.github.io/starlight-codeblocks/reference/style-settings/"
markdown: "https://ewels.github.io/starlight-codeblocks/reference/style-settings.md"
section: "Reference"
site: "starlight-codeblocks documentation"
context: "This page is from the documentation of starlight-codeblocks. A Starlight plugin that adds focus, line states, annotations, API auto-linking and 22 more features to the code blocks of a site."
index: "https://ewels.github.io/starlight-codeblocks/llms.txt"
---

# Style settings

> Every style setting of the plugin, with its defaults for dark and light themes.

Every colour and size of the plugin is an Expressive Code style setting. The settings are in groups: `codeblocks` has the settings that every feature shares, and each other group belongs to one feature. The [configuration](https://ewels.github.io/starlight-codeblocks/configuration/) page shows how to change a setting with `styleOverrides`.

Most colour defaults come from the colours of the Expressive Code theme, such as `terminal.ansiBlue`, or from another setting. The table says how. A change to `codeblocks.accent` also changes the markers, the focus ring and the link underlines. A default with two values has one for dark themes and one for light themes. A default with one value applies to both.

The colour defaults meet the contrast targets on the [accessibility](https://ewels.github.io/starlight-codeblocks/reference/accessibility/) page. If you change a colour, check its contrast against the code background of each theme.

## `codeblocks`

Shared settings, which every feature uses.

| Setting | Default | Description |
|---|---|---|
| `accent` | The `terminal.ansiBlue` colour of the theme, with 4.5:1 contrast on the code background. | Markers, numbered buttons and active states. Needs 3:1 contrast on the code background. |
| `accentHover` | `accent` mixed 45% towards `codeForeground`: lighter in dark themes, darker in light themes. | Step borders under the mouse cursor. |
| `accentForeground` | The code background, with 4.5:1 contrast on `accent`. | Text on an `accent` background. |
| `mutedForeground` | `codeForeground` mixed 30% towards the code background, with 4.5:1 contrast on it, on `popoverBackground`, on a 10% tint of `codeForeground` and on the frame tab bar. | Secondary text, such as output and marker labels. Needs 4.5:1 contrast on the code background. |
| `focusRing` | The value of `codeblocks.accent`. | The outline of a control that has keyboard focus. |
| `popoverBackground` | The code background mixed 12% towards `accent` in dark themes, and lightened in light themes. | The background of annotation notes and hover cards. |
| `popoverForeground` | `codeForeground`, with 4.5:1 contrast on `popoverBackground`. | The text of annotation notes and hover cards. |
| `popoverBorder` | `popoverBackground` mixed 30% towards `accent`. | The border of annotation notes and hover cards. |
| `popoverShadow` | `0 8px 28px rgb(10 14 24 / 0.45)` dark, `0 8px 28px rgb(12 20 36 / 0.18)` light | The shadow of annotation notes and hover cards. |
| `popoverRadius` | `6px` | The corner radius of annotation notes and hover cards. |
| `popoverMaxWidth` | `340px` | The width of annotation notes. Hover cards are 20px wider. Both stay 12px inside the window. |
| `popoverFontSize` | `0.8125rem` | The text size of annotation notes and hover cards. |

## `codeblocksFocus`

Settings of [Focus](https://ewels.github.io/starlight-codeblocks/features/focus/).

| Setting | Default | Description |
|---|---|---|
| `blur` | `1.1px` | The blur radius of lines outside the focus. |
| `opacity` | `0.48` | The opacity of lines outside the focus. |
| `transitionDuration` | `250ms` | The time that the lines take to become clear. |

## `codeblocksLineStates`

Settings of [Line states](https://ewels.github.io/starlight-codeblocks/features/line-states/).

| Setting | Default | Description |
|---|---|---|
| `barWidth` | `3px` | The width of the bar on the left edge of a line. |
| `labelFontSize` | `0.75rem` | The text size of messages. |
| `labelRadius` | `3px` | The corner radius of messages. |
| `error` | The `editorError.foreground` colour of the theme, with 3:1 contrast on the code background. | The colour of the error state. The other error settings come from it. |
| `warning` | The `editorWarning.foreground` colour of the theme, with 3:1 contrast on the code background. | The colour of the warning state. The other warning settings come from it. |
| `info` | The `editorInfo.foreground` colour of the theme, with 3:1 contrast on the code background. | The colour of the info state. The other info settings come from it. |
| `success` | The `terminal.ansiGreen` colour of the theme, with 3:1 contrast on the code background. | The colour of the success state. The other success settings come from it. |
| `<state>Background` | The state colour at 15% opacity. | The tint of a line with the state. There is one for each state, such as `errorBackground`. |
| `<state>LabelBackground` | The state colour at 20% opacity. | The background of a message. |
| `<state>LabelForeground` | The state colour mixed with the code colour, with 5:1 contrast on the message background. | The text of a message. |
| `<marker>LabelBackground` | Expressive Code's `textMarkers.<marker>BorderColor` at 20% opacity. | The background of a message after `[!code ++]`, `[!code --]` or `[!code highlight]`. There is one for each of `ins`, `del` and `mark`, such as `insLabelBackground`. |
| `<marker>LabelForeground` | The marker colour mixed with the code colour, with 5:1 contrast on the message background. | The text of a message after `[!code ++]`, `[!code --]` or `[!code highlight]`. |

## `codeblocksWordDiff`

Settings of [Word-level diff](https://ewels.github.io/starlight-codeblocks/features/word-level-diff/).

| Setting | Default | Description |
|---|---|---|
| `ins` | The `terminal.ansiGreen` colour of the theme. | The colour that the tint and the bar of added words come from. |
| `del` | The `terminal.ansiRed` colour of the theme. | The colour that the tint and the bar of removed words come from. |
| `insBackground` | `ins` at 25% opacity on dark themes, 40% on light themes. | The tint of added words. |
| `delBackground` | `del` at 25% opacity on dark themes, 40% on light themes. | The tint of removed words. |

## `codeblocksWhitespace`

Settings of [Visible whitespace](https://ewels.github.io/starlight-codeblocks/features/visible-whitespace/).

| Setting | Default | Description |
|---|---|---|
| `foreground` | `codeForeground` at 32% opacity in dark themes and 38% in light themes. | The colour of the glyphs. |

## `codeblocksBrackets`

Settings of [Colourised brackets](https://ewels.github.io/starlight-codeblocks/features/colourised-brackets/).

| Setting | Default | Description |
|---|---|---|
| `colour1` | The `editorBracketHighlight.foreground1` colour of the theme, or VS Code's default (`#ffd700` dark, `#0431fa` light`) if the theme has none, with 4.5:1 contrast on the code background. | Brackets at the first depth, and at every third depth after it. |
| `colour2` | The `editorBracketHighlight.foreground2` colour of the theme, or VS Code's default (`#da70d6` dark, `#319331` light`) if the theme has none, with 4.5:1 contrast on the code background. | Brackets at the second depth, and at every third depth after it. |
| `colour3` | The `editorBracketHighlight.foreground3` colour of the theme, or VS Code's default (`#179fff` dark, `#7b3814` light`) if the theme has none, with 4.5:1 contrast on the code background. | Brackets at the third depth, and at every third depth after it. |

## `codeblocksShellCopy`

Settings of [Smart shell copy](https://ewels.github.io/starlight-codeblocks/features/smart-shell-copy/).

| Setting | Default | Description |
|---|---|---|
| `promptForeground` | The `terminal.ansiCyan` colour of the theme, with 4.5:1 contrast on the code background. | The colour of prompts. |
| `outputForeground` | The value of `codeblocks.mutedForeground`. | The colour of output lines. |

## `codeblocksCodeLinks`

Settings of [Code links](https://ewels.github.io/starlight-codeblocks/features/code-links/).

| Setting | Default | Description |
|---|---|---|
| `underline` | The value of `codeblocks.accent`. | The underline of a link. Needs 3:1 contrast on the code background. |
| `hoverBackground` | `codeblocks.accent` at 10% opacity in dark themes and 12% in light themes. | The background of a link on hover and focus. |

## `codeblocksApiLinks`

Settings of [API auto-linking](https://ewels.github.io/starlight-codeblocks/features/api-auto-linking/).

| Setting | Default | Description |
|---|---|---|
| `underline` | `codeForeground` mixed 45% towards the code background, with 3:1 contrast on it. | The dotted underline of a link. Needs 3:1 contrast on the code background. |
| `hoverUnderline` | The value of `codeblocks.accent`. | The solid underline of a link on hover and focus. |
| `hoverBackground` | `codeblocks.accent` at 10% opacity in dark themes and 12% in light themes. | The background of a link on hover and focus. |

## `codeblocksMentions`

Settings of [Code mentions](https://ewels.github.io/starlight-codeblocks/features/code-mentions/).

| Setting | Default | Description |
|---|---|---|
| `bar` | The value of `codeblocks.accent`. | The bar on the left edge of a highlighted line. |
| `background` | `bar` at 10% opacity in dark themes and 12% in light themes. | The tint of a highlighted line. Needs 4.5:1 contrast for every syntax colour. |
| `fadeOpacity` | `0.42` | The opacity of the other lines while lines are highlighted. |

## `codeblocksPermalinks`

Settings of [Line permalinks](https://ewels.github.io/starlight-codeblocks/features/line-permalinks/).

| Setting | Default | Description |
|---|---|---|
| `foreground` | The gutter colour of the theme, with 4.5:1 contrast on the code background. | The colour of the line numbers. |
| `target` | The `terminal.ansiYellow` colour of the theme, with 3:1 contrast on the code background. | The bar on the left edge of a highlighted line. |
| `targetBackground` | `target` at 6% opacity in dark themes and 12% in light themes. | The tint of a highlighted line. |

## `codeblocksHiddenLines`

Settings of [Hidden lines](https://ewels.github.io/starlight-codeblocks/features/hidden-lines/).

| Setting | Default | Description |
|---|---|---|
| `badgeBackground` | `codeblocks.mutedForeground` at 10% opacity on the code background. | The background of the text on a marker. |
| `rule` | `codeblocks.mutedForeground` at 35% opacity. | The dashed rule of a marker. |
| `ruleHover` | The value of `codeblocks.mutedForeground`. | The dashed rule of a marker under the mouse cursor. |
| `ruleOpen` | `codeblocks.mutedForeground` at 22% opacity. | The dashed rule of a marker while its lines show. |
| `openBackground` | `codeForeground` at 4% opacity. | The tint of a hidden line that shows. |
| `openOpacity` | `0.75` | The opacity of the code of a hidden line that shows. |

## `codeblocksRunnable`

Settings of [Run code](https://ewels.github.io/starlight-codeblocks/features/run-code/).

| Setting | Default | Description |
|---|---|---|
| `outputForeground` | The `terminal.ansiGreen` colour of the theme, with 4.5:1 contrast on the code background. | Standard output. Needs 4.5:1 contrast on the code background. |
| `errorForeground` | The `terminal.ansiRed` colour of the theme, with 4.5:1 contrast on the code background. | Standard error and run errors. Needs 4.5:1 contrast on the code background. |
| `buttonBorder` | `codeForeground` mixed 50% towards the code background, with 3:1 contrast on it. | The border of the button under the block. Needs 3:1 contrast on the code background. |

## `codeblocksFileIcons`

Settings of [File icons](https://ewels.github.io/starlight-codeblocks/features/file-icons/).

| Setting | Default | Description |
|---|---|---|
| `size` | `0.85em` | The width and height of a file icon in the `plain` style. |
| `darkVariantDisplay` | `block` in dark themes, `none` in light themes. | The `display` of an icon that the set has a light variant of. |
| `lightVariantDisplay` | `none` in dark themes, `block` in light themes. | The `display` of the light variant of an icon. |
| `foreground` | `currentColor` | The colour of a file icon in the `plain` style. By default, the colour of the title. |
| `tileSize` | `1.1em` | The width and height of the square in the `tile` style. |
| `tileRadius` | `22%` | The corner radius of the square in the `tile` style. |
| `tileBackground` | The value of `codeblocks.accent`. | The colour of the square in the `tile` style. |
| `tileForeground` | `accentForeground`. | The colour of the icon on the square in the `tile` style. |

## `codeblocksWalkthrough`

Settings of [Code walkthrough](https://ewels.github.io/starlight-codeblocks/features/code-walkthrough/).

| Setting | Default | Description |
|---|---|---|
| `stepBorder` | `codeForeground` mixed 50% towards the code background, with 3:1 contrast on it. | The border of a step that is not done yet. |
| `doneForeground` | `codeblocks.accent` mixed 50% towards `codeForeground`, with 4.5:1 contrast on the code background. | The number of a step that is done. |
| `line` | The code background mixed 15% towards `codeForeground`. | The line between two steps that are not done yet. |
| `duration` | `480ms` | The time that the animation between two steps takes, in `ms` or `s`. |
| `newLineBackground` | The `terminal.ansiGreen` colour of the theme at 30% opacity. | The tint that flashes on a line that is new in a step, then fades out. |
| `newLineDuration` | `1000ms` | The time that the tint of a new line takes to fade out. |
| `themeIndex` | The index of the theme in the Expressive Code `themes` list. | The index of the theme, which the animation reads to pick token colours. Do not change it. |

## `codeblocksCallouts`

Settings of [Inline callouts](https://ewels.github.io/starlight-codeblocks/features/inline-callouts/).

| Setting | Default | Description |
|---|---|---|
| `background` | The value of `codeblocks.popoverBackground`. | The background of a bubble. |
| `foreground` | The value of `codeblocks.popoverForeground`. | The text of a bubble. |
| `border` | The value of `codeblocks.popoverBorder`. | The border and the arrow of a bubble. |
| `fontSize` | `0.925em` | The text size of a bubble. |
| `radius` | `5px` | The corner radius of a bubble. |

## `codeblocksAnnotations`

Settings of [Annotations](https://ewels.github.io/starlight-codeblocks/features/annotations/).

| Setting | Default | Description |
|---|---|---|
| `markerBackground` | The value of `codeblocks.accent`. | The background of a numbered marker. |
| `markerForeground` | The value of `codeblocks.accentForeground`. | The number on a marker. |
| `markerHoverBackground` | `markerBackground` mixed 45% towards `codeForeground`. | The background of a marker under the mouse cursor, with keyboard focus or with its note open. |
| `markerSize` | `1.55em` | The width and height of a marker. |
| `lineBackground` | `codeblocks.accent` at 10% opacity in dark themes and 12% in light themes. | The tint of the line of an open annotation. Needs 4.5:1 contrast for every syntax colour. |
| `outlineAccent` | The `terminal.ansiMagenta` colour of the theme, with 4.5:1 contrast on the code background. | With `style: 'outline'`: the border of a marker, the bar of a lit line and the background of an active marker. |
| `outlineNumberForeground` | `outlineAccent` mixed 30% towards `codeForeground`, with 4.5:1 contrast on the code background and on `outlineLineBackground`. | With `style: 'outline'`: the numbers. Needs 4.5:1 contrast on the code background. |
| `outlineActiveForeground` | The code background, with 4.5:1 contrast on `outlineAccent`. | With `style: 'outline'`: the number of an active marker, on an `outlineAccent` background. |
| `outlineLineBackground` | `outlineAccent` at 10% opacity, on the code background. | With `style: 'outline'`: the tint of a lit line. Needs 4.5:1 contrast for every syntax colour. |

## `codeblocksFootnotes`

Settings of [Footnotes](https://ewels.github.io/starlight-codeblocks/features/footnotes/).

| Setting | Default | Description |
|---|---|---|
| `accent` | The value of `codeblocks.accent`. | The background of a badge and the bar of a selected line. |
| `numberForeground` | `accent` mixed 30% towards `codeForeground`, with 4.5:1 contrast on the code background and on `lineBackground`. | List numbers. Needs 4.5:1 contrast on the code background. |
| `activeForeground` | The code background, with 4.5:1 contrast on `accent`. | The number on a badge, on an `accent` background. |
| `activeBackground` | `accent` mixed 45% towards `codeForeground`. | The background of a badge under the mouse cursor, with keyboard focus or on a selected line. |
| `lineBackground` | `accent` at 10% opacity in dark themes and 12% in light themes, on the code background. | The tint of a selected line. Needs 4.5:1 contrast for every syntax colour. |
| `outlineAccent` | The `terminal.ansiMagenta` colour of the theme, with 4.5:1 contrast on the code background. | With `style: 'outline'`: the border of a badge, the bar of a lit line and the background of an active badge. |
| `outlineNumberForeground` | `outlineAccent` mixed 30% towards `codeForeground`, with 4.5:1 contrast on the code background and on `outlineLineBackground`. | With `style: 'outline'`: the numbers. Needs 4.5:1 contrast on the code background. |
| `outlineActiveForeground` | The code background, with 4.5:1 contrast on `outlineAccent`. | With `style: 'outline'`: the number of an active badge, on an `outlineAccent` background. |
| `outlineLineBackground` | `outlineAccent` at 10% opacity, on the code background. | With `style: 'outline'`: the tint of a lit line. Needs 4.5:1 contrast for every syntax colour. |
| `stickyShadow` | `0 -8px 16px rgb(10 14 24 / 0.35)` dark, `0 -6px 14px rgb(12 20 36 / 0.1)` light | The shadow above a sticky list of footnotes. |