Style settings

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.