Theme plugin: JSON keys reference

This topic explains the keys used in the JSON file to encode the light theme in JetBrains Fleet. It describes the main sections, default key values, and provides some examples.

Key	Value	Type	Description
`theme.kind`	`Light`	`string`	The default theme applied when a field from this JSON configuration is not specified.
`theme.name`	`Fleet Light - Edited`	`string`	The name of the custom theme.
`theme.version`	`8`	`string`	The version number of the theme.

colors

Specifies colors for UI elements like buttons, headers, and backgrounds.

Fallback rules: if a theme does not have a color key, it falls back to the corresponding key in the default Light or Dark theme, as defined by the theme.kind key in meta.

ai

The ai section defines colors used for working with the AI Assistant. Keys in this section cover the following functionality:

Attachment and snippet styling.
Error and warning indicators.
Icons.
Threads and agent states.
Hover styling.

On the following screenshot, some of these elements are displayed in blue.

Key	Value	Type
`ai.attachment.background.default`	`Violet_140`	`string`
`ai.error.background`	`Red_150`	`string`
`ai.error.border`	`Red_120`	`string`
`ai.icon.background`	`Violet 30`	`string`
`ai.icon.background.secondary`	`Violet 70`	`string`
`ai.snippet.border`	`Neutral_140`	`string`
`ai.snippet.editor.background`	`White`	`string`
`ai.snippet.header.background`	`Neutral_160`	`string`
`ai.thread.agent.error.background`	`Red_70`	`string`
`ai.thread.agent.finished.background`	`Blue_60`	`string`
`ai.thread.agent.running.background`	`Green_70`	`string`
`ai.thread.background.default`	`Neutral_140`	`string`
`ai.thread.background.hovered`	`Neutral_150`	`string`
`ai.user.icon.background`	`Blue 40`	`string`
`ai.user.icon.background.secondary`	`Blue 90`	`string`
`ai.user.icon.text`	`Blue 20`	`string`
`ai.warning.background`	`Yellow_150`	`string`
`ai.warning.border`	`Yellow_120`	`string`

background

The background section defines the background colors of the code editor interface.

background.primary: controls the color of the window beneath various panels, including the header of the code editor. On the following screenshot, these elements have the blue color (defined by the myColor key in the palette section).
background.secondary manages the colors of elements inside menus, such as the settings menu. On the following screenshot, this element has the pink color.
It is also used in other places, such as the footer of the quick-fix popup (⌥ ⏎) and in interlines. It is applied when there is a need to visually separate some information from the primary background.

fleet background section json theme plugin

Key	Value	Type
`background.primary`	`Neutral_150`	`string`
`background.secondary`	`Gray 110`	`string`

banner

Banners are visual components used to display important messages or statuses.

Types of banners

There are two types of banners:

Floating banner (banner.*): shown in the top-middle part of the screen. It is used for transient messages, such as:
- When smart mode is starting.
- When an AI feature suggests logging in.
Inline banner (banner.inline.*): displayed inside the islands layout. It is used in places like AI Assistant.

Key	Value	Type
`banner.background.ai`	`Violet_150`	`string`
`banner.background.dangerous`	`Red_150`	`string`
`banner.background.info`	`Blue_150`	`string`
`banner.background.positive`	`Green_150`	`string`
`banner.background.warning`	`Yellow_150`	`string`
`banner.border.ai`	`Violet_120`	`string`
`banner.border.dangerous`	`Red_120`	`string`
`banner.border.info`	`Blue_120`	`string`
`banner.border.positive`	`Green_120`	`string`
`banner.border.warning`	`Yellow_120`	`string`
`banner.inline.background`	`DarkTint_10`	`string`
`banner.inline.border`	`Transparent`	`string`
`banner.inline.text`	`Neutral_10`	`string`
`banner.secondary.background.error`	`#C72C4926`	`string`
`banner.text`	`Neutral_10`	`string`

border

Borders and separators are visual elements used to define boundaries or highlight focus within the user interface. They provide separation between components and improve visual organization.

Usage context

Borders are applied in the following contexts:

border: a generic border or separator that can be applied anywhere, such as in lists. It is used for elements that do not have a unique key for their border or separator. For example, the border appears as green in the screenshot.
border.focused: used for the border of focused elements that do not have their own unique key for focus styling. For example:
- A focused border of code in the interline.
- Other generic components without dedicated focus border keys.

Key	Value	Type
`border.focused`	`Blue_100`	`string`

button

The button section defines colors for buttons.

The keys provided define detailed styling for different types of buttons in JetBrains Fleet, including their states (default, hovered, pressed, disabled) and visual components (background, border, text, separator).

Button types

Buttons are categorized by their purpose and function, each with unique styling. Button categories include:

dangerous: indicate actions with potentially irreversible consequences (for example, delete).
positive: represent confirmatory actions or success operations.
primary: used for important or urgent actions. Typically, there is only one primary button in a menu to maintain visual clarity.
secondary: used for actions that are not as critical as those assigned to the primary button.
warning: highlight cautionary or important actions.
ai: used for AI-specific operations.

Styling components

Each button type has specific keys for different styling components and states:

background: defines the background color for default, hovered, pressed, and disabled states.
border: configures the border color for various states, including focused borders.
focus: highlights the button outline when it is in focus.
separator: defines the visual style for separators used within buttons. Separators visually divide button components.
Separators are currently used only in split buttons. A split button consists of two parts:
- Left part that performs the default action assigned to the button.
- Right part that opens a menu with additional options.
text: determines the color of the button text, including states like default, disabled, and hint text.

Button states

Each button type responds visually to different user interactions:

default: the normal state of the button, without the user interaction.
hovered: when the mouse pointer is over the button.
pressed: when the button is clicked or pressed.
disabled: when the button is unavailable for interaction.

Key	Value	Type
`button.ai.background.default`	`Violet_90`	`string`
`button.ai.background.disabled`	`DarkTint_7`	`string`
`button.ai.background.hovered`	`Violet_80`	`string`
`button.ai.background.pressed`	`Violet_70`	`string`
`button.ai.border.default`	`Violet_90`	`string`
`button.ai.border.disabled`	`DarkTint_10`	`string`
`button.ai.border.hovered`	`Violet_80`	`string`
`button.ai.border.pressed`	`Violet_70`	`string`
`button.ai.focusBorder`	`White`	`string`
`button.ai.focusOutline`	`Violet_90`	`string`
`button.ai.separator.default`	`LightTint_30`	`string`
`button.ai.separator.disabled`	`Neutral_130`	`string`
`button.ai.split.focusOutline`	`Violet_120`	`string`
`button.ai.text.default`	`White`	`string`
`button.ai.text.disabled`	`Neutral_110`	`string`
`button.ai.text.hint`	`White`	`string`
`button.ai.text.hovered`	`White`	`string`
`button.ai.text.pressed`	`White`	`string`
`button.dangerous.background.default`	`Red_90`	`string`
`button.dangerous.background.disabled`	`DarkTint_7`	`string`
`button.dangerous.background.hovered`	`Red_80`	`string`
`button.dangerous.background.pressed`	`Red_70`	`string`
`button.dangerous.border.default`	`Red_90`	`string`
`button.dangerous.border.disabled`	`DarkTint_10`	`string`
`button.dangerous.border.hovered`	`Red_80`	`string`
`button.dangerous.border.pressed`	`Red_70`	`string`
`button.dangerous.focusBorder`	`White`	`string`
`button.dangerous.focusOutline`	`Red_90`	`string`
`button.dangerous.separator.default`	`LightTint_30`	`string`
`button.dangerous.separator.disabled`	`Neutral_130`	`string`
`button.dangerous.split.focusOutline`	`Red_120`	`string`
`button.dangerous.text.default`	`White`	`string`
`button.dangerous.text.disabled`	`Neutral_110`	`string`
`button.dangerous.text.hint`	`White`	`string`
`button.dangerous.text.hovered`	`White`	`string`
`button.dangerous.text.pressed`	`White`	`string`
`button.positive.background.default`	`Green_90`	`string`
`button.positive.background.disabled`	`DarkTint_7`	`string`
`button.positive.background.hovered`	`Green_80`	`string`
`button.positive.background.pressed`	`Green_70`	`string`
`button.positive.border.default`	`Green_90`	`string`
`button.positive.border.disabled`	`DarkTint_10`	`string`
`button.positive.border.hovered`	`Green_80`	`string`
`button.positive.border.pressed`	`Green_70`	`string`
`button.positive.focusBorder`	`White`	`string`
`button.positive.focusOutline`	`Green_90`	`string`
`button.positive.separator.default`	`LightTint_30`	`string`
`button.positive.separator.disabled`	`Neutral_130`	`string`
`button.positive.split.focusOutline`	`Green_120`	`string`
`button.positive.text.default`	`White`	`string`
`button.positive.text.disabled`	`Neutral_110`	`string`
`button.positive.text.hint`	`White`	`string`
`button.positive.text.hovered`	`White`	`string`
`button.positive.text.pressed`	`White`	`string`
`button.primary.background.default`	`Blue_90`	`string`
`button.primary.background.disabled`	`DarkTint_7`	`string`
`button.primary.background.hovered`	`Blue_80`	`string`
`button.primary.background.pressed`	`Blue_70`	`string`
`button.primary.border.default`	`Blue_90`	`string`
`button.primary.border.disabled`	`DarkTint_10`	`string`
`button.primary.border.hovered`	`Blue_80`	`string`
`button.primary.border.pressed`	`Blue_70`	`string`
`button.primary.focusBorder`	`White`	`string`
`button.primary.focusOutline`	`Blue_90`	`string`
`button.primary.separator.default`	`LightTint_30`	`string`
`button.primary.separator.disabled`	`Neutral_130`	`string`
`button.primary.split.focusOutline`	`Blue_120`	`string`
`button.primary.text.default`	`White`	`string`
`button.primary.text.disabled`	`Neutral_110`	`string`
`button.primary.text.hint`	`White`	`string`
`button.primary.text.hovered`	`White`	`string`
`button.primary.text.pressed`	`White`	`string`
`button.secondary.background.default`	`#FFFFFFBF`	`string`
`button.secondary.background.disabled`	`DarkTint_7`	`string`
`button.secondary.background.hovered`	`DarkTint_5`	`string`
`button.secondary.background.pressed`	`DarkTint_10`	`string`
`button.secondary.border.default`	`DarkTint_20`	`string`
`button.secondary.border.disabled`	`DarkTint_10`	`string`
`button.secondary.border.hovered`	`DarkTint_20`	`string`
`button.secondary.border.pressed`	`DarkTint_20`	`string`
`button.secondary.focusBorder`	`Blue_100`	`string`
`button.secondary.focusOutline`	`Blue_130`	`string`
`button.secondary.separator.default`	`DarkTint_20`	`string`
`button.secondary.separator.disabled`	`Neutral_130`	`string`
`button.secondary.split.focusOutline`	`Blue_130`	`string`
`button.secondary.text.default`	`Neutral_10`	`string`
`button.secondary.text.disabled`	`Neutral_110`	`string`
`button.secondary.text.hint`	`DarkTint_60`	`string`
`button.secondary.text.hovered`	`Neutral_10`	`string`
`button.secondary.text.pressed`	`Neutral_10`	`string`
`button.warning.background.default`	`Yellow_90`	`string`
`button.warning.background.disabled`	`DarkTint_7`	`string`
`button.warning.background.hovered`	`Yellow_80`	`string`
`button.warning.background.pressed`	`Yellow_70`	`string`
`button.warning.border.default`	`Yellow_90`	`string`
`button.warning.border.disabled`	`DarkTint_10`	`string`
`button.warning.border.hovered`	`Yellow_80`	`string`
`button.warning.border.pressed`	`Yellow_70`	`string`
`button.warning.focusBorder`	`White`	`string`
`button.warning.focusOutline`	`Yellow_90`	`string`
`button.warning.separator.default`	`LightTint_30`	`string`
`button.warning.separator.disabled`	`Neutral_130`	`string`
`button.warning.split.focusOutline`	`Yellow_120`	`string`
`button.warning.text.default`	`White`	`string`
`button.warning.text.disabled`	`Neutral_110`	`string`
`button.warning.text.hint`	`White`	`string`
`button.warning.text.hovered`	`White`	`string`
`button.warning.text.pressed`	`White`	`string`

checkbox

The checkbox section defines the colors for checkboxes.

The provided keys define the visual styling for checkboxes, including their states (on, off, disabled, hovered) and specific visual elements (icon, text, background, border, focus outlines).

Checkbox states

Checkboxes are styled to reflect their current state:

off: this represents an unchecked checkbox with neutral and transparent colors for the background and border.
on: when a checkbox is selected.
disabled: when the checkbox is unavailable for interaction.
hovered: when the mouse pointer is over the checkbox.

Styling components

Each checkbox consists of several visual components with specific styling for different states:

icon: the check icon inside the checkbox.
text: the label text color.
background: the checkbox background.
focusBorder: borders of checkboxes.
focusOutline: when the checkbox is in focus.

fleet checkbox section json theme plugin

Key	Value	Type
`checkbox.icon.default`	`White`	`string`
`checkbox.icon.disabled`	`Neutral_130`	`string`
`checkbox.off.background.default`	`Transparent`	`string`
`checkbox.off.background.disabled`	`Transparent`	`string`
`checkbox.off.background.hovered`	`Transparent`	`string`
`checkbox.off.border.default`	`Neutral_120`	`string`
`checkbox.off.border.disabled`	`Neutral_130`	`string`
`checkbox.off.border.hovered`	`Neutral_110`	`string`
`checkbox.off.focusBorder`	`Blue_100`	`string`
`checkbox.off.focusOutline`	`Blue_130`	`string`
`checkbox.on.background.default`	`Blue_90`	`string`
`checkbox.on.background.disabled`	`Transparent`	`string`
`checkbox.on.background.hovered`	`Blue_80`	`string`
`checkbox.on.border.default`	`Transparent`	`string`
`checkbox.on.border.disabled`	`Neutral_130`	`string`
`checkbox.on.border.hovered`	`Transparent`	`string`
`checkbox.on.focusBorder`	`White`	`string`
`checkbox.on.focusOutline`	`Blue_90`	`string`
`checkbox.text.default`	`Neutral_10`	`string`
`checkbox.text.disabled`	`Neutral_110`	`string`

combobox

Comboboxes combine text input and dropdown functionality. They support multiple visual and functional states. For example, consider the SSH connect page (refer to the screenshot in this section).

Visual states

The combobox supports several visual states:

default: the normal state of the component.
hovered: when the mouse pointer is over the component.
focused: when the component is focused for input.
disabled: when the component is unavailable for interaction.
error: indicates invalid input with specific styling.

fleet combobox section json theme plugin

Key	Value	Type
`combobox.arrowButton.background.default`	`DarkTint_5`	`string`
`combobox.arrowButton.background.disabled`	`Transparent`	`string`
`combobox.background.default`	`White`	`string`
`combobox.background.disabled`	`DarkTint_7`	`string`
`combobox.background.error`	`White`	`string`
`combobox.background.hovered`	`White`	`string`
`combobox.border.default`	`DarkTint_20`	`string`
`combobox.border.disabled`	`DarkTint_10`	`string`
`combobox.border.error`	`Red_100`	`string`
`combobox.border.hovered`	`DarkTint_30`	`string`
`combobox.focusBorder.default`	`Blue_100`	`string`
`combobox.focusBorder.error`	`Red_100`	`string`
`combobox.focusOutline.default`	`Blue_130`	`string`
`combobox.focusOutline.error`	`Red_130`	`string`
`combobox.text.default`	`Neutral_10`	`string`
`combobox.text.disabled`	`Neutral_110`	`string`
`combobox.text.error`	`Neutral_10`	`string`
`combobox.text.hovered`	`Neutral_10`	`string`

completion

The completion list is a UI component that displays a list of suggestions for the current context.

Styling Elements

The completion list includes the following visual elements:

text: the color of the text.
background: the color of the text highlight.

fleet completion section json theme plugin

Key	Value	Type
`completion.match.background`	`Transparent`	`string`
`completion.match.text`	`Blue_70`	`string`

dragAndDrop

The drag-and-drop feature enables the movement of items between components of the code editor. For example, you can drag a tab to position it below another tab or beside it.

Visual styling

The drag and drop has the following styling options:

background: defines the main color of the draggable item.
border.default: specifies the color used to visually indicate the area where the item is being dragged.
border.highlight: defines an additional color used to highlight the area where the item is being dragged. On the following screenshot, it appears as a gradient of border.default.

Key	Value	Type
`dragAndDrop.background`	`BlueTint_15`	`string`
`dragAndDrop.border.default`	`BlueTint_25`	`string`
`dragAndDrop.border.highlight`	`Blue_100`	`string`

dropdown

A dropdown is a user interface (UI) element that displays a list of options or actions when activated.

The dropdown includes the following components:

background: the dropdown background.
border: the border of the dropdown.
text: the text displayed within the dropdown.
focus: the color applied to the dropdown when it gains focus (for example, when a user interacts with it using the mouse or keyboard).
error: the color is used for the dropdown when it has an erroneous value.

The dropdown component supports several visual states:

default: the normal state when a user does not interact with the dropdown.
hovered: highlighted when the mouse pointer is over the dropdown.
disabled: visually muted to show that the dropdown is not interactive.
error: the color is used for the dropdown when it has an erroneous value.
focused: highlights the dropdown to indicate it has focus, often used for navigation or selection.

fleet dropdown section json theme plugin

Key	Value	Type
`dropdown.background.default`	`Transparent`	`string`
`dropdown.background.disabled`	`DarkTint_7`	`string`
`dropdown.background.error`	`Transparent`	`string`
`dropdown.background.hovered`	`Transparent`	`string`
`dropdown.border.default`	`DarkTint_20`	`string`
`dropdown.border.disabled`	`DarkTint_10`	`string`
`dropdown.border.error`	`Red_100`	`string`
`dropdown.border.hovered`	`DarkTint_30`	`string`
`dropdown.focusBorder.default`	`Blue_100`	`string`
`dropdown.focusBorder.error`	`Red_100`	`string`
`dropdown.focusOutline.default`	`Blue_130`	`string`
`dropdown.focusOutline.error`	`Red_130`	`string`
`dropdown.text.default`	`Neutral_10`	`string`
`dropdown.text.disabled`	`Neutral_110`	`string`
`dropdown.text.error`	`Neutral_10`	`string`
`dropdown.text.hovered`	`Neutral_10`	`string`

editor

The editor.* keys configure colors for various editor elements, including line numbers, the caret, code foldings, and Git information about changed lines in the gutter.

The following screenshot demonstrates different color modifications for the editor.* keys. The modified keys are listed below:

"editor.caret.background": "Pink": changes the caret's background color to Pink.
"editor.currentLine.background.default": "Pink": colors the background of the currently selected line in Pink.
"editor.foldedMark.background": "#FFFE24" and "editor.foldedMark.text": "Green 70": adjusts the colors for code folding marks. Refer to the import section on the screenshot.
"editor.gitDiff.background.modified": "#abff32": highlights modified lines in the gutter, showing code insight information about changes tracked by Git.
"editor.lineNumber.current": "#FFFE24" and "editor.lineNumber.default": "Yellow 20": colors line numbers in the gutter.

Key	Value	Type
`editor.caret.background`	`Neutral_10`	`string`
`editor.caret.border`	`Neutral_10`	`string`
`editor.currentLine.background.default`	`DarkTint_10`	`string`
`editor.currentLine.background.focused`	`BlueTint_10`	`string`
`editor.currentLine.scrollbarMark`	`Neutral_10`	`string`
`editor.foldIndicator.background.hovered`	`DarkTint_7`	`string`
`editor.foldIndicator.icon.default`	`Neutral_80`	`string`
`editor.foldIndicator.icon.hovered`	`Neutral_80`	`string`
`editor.foldedMark.background`	`DarkTint_10`	`string`
`editor.foldedMark.text`	`Neutral_90`	`string`
`editor.gitDiff.background.added`	`Green_110`	`string`
`editor.gitDiff.background.blame`	`Yellow_110`	`string`
`editor.gitDiff.background.conflict`	`Yellow_110`	`string`
`editor.gitDiff.background.deleted`	`Red_110`	`string`
`editor.gitDiff.background.modified`	`Blue_110`	`string`
`editor.gitDiff.text.added`	`Green_90`	`string`
`editor.gitDiff.text.conflict`	`Yellow_90`	`string`
`editor.gitDiff.text.deleted`	`Red_90`	`string`
`editor.gitDiff.text.modified`	`Blue_90`	`string`
`editor.interline.background`	`Neutral_160`	`string`
`editor.interline.match.background`	`Yellow_140`	`string`
`editor.interline.match.background.secondary`	`#FFFE24`	`string`
`editor.interline.match.text.secondary`	`Black`	`string`
`editor.interline.preview.background`	`White`	`string`
`editor.interline.preview.border`	`Neutral_150`	`string`
`editor.interline.separator`	`DarkTint_20`	`string`
`editor.interline.text.default`	`Neutral_110`	`string`
`editor.interline.text.hovered`	`Blue_70`	`string`
`editor.lineNumber.current`	`Neutral_10`	`string`
`editor.lineNumber.default`	`Neutral_110`	`string`
`editor.postline.background.error`	`#FFC4CF`	`string`
`editor.postline.background.info`	`#BCE3D5`	`string`
`editor.postline.background.unused`	`#E2C9F0`	`string`
`editor.postline.background.warning`	`#FCE4B3`	`string`
`editor.postline.background.weakWarning`	`#F0ECE5`	`string`
`editor.renamePostline.background`	`White`	`string`
`editor.renamePostline.border`	`Blue 40`	`string`
`editor.renamePostline.description.text`	`Gray 10`	`string`
`editor.renamePostline.usages.text`	`Yellow 10`	`string`
`editor.selectableFoldedMark.background.default`	`Transparent`	`string`
`editor.selectableFoldedMark.background.focused`	`#A3D1FF`	`string`
`editor.selectableFoldedMark.border.default`	`Gray 60`	`string`
`editor.selectableFoldedMark.border.focused`	`Blue 50`	`string`
`editor.selectableFoldedMark.text.default`	`Gray 50`	`string`
`editor.selectableFoldedMark.text.focused`	`#18181880`	`string`
`editor.text`	`Neutral_10`	`string`
`editor.whitespaceIndicator`	`DarkTint_30`	`string`

ghostButton

Ghost buttons are UI components intended for secondary or tertiary actions. They are commonly used in toolbars or areas with multiple buttons.

In JetBrains Fleet, ghost buttons are used in the following scenarios:

Buttons for panels, tools, Git support, workspace, and similar functions in the toolbar.
Filtering options in the Search/Replace tool.

The following screenshot illustrates various color modifications for the ghostButton.* keys. The modified keys are detailed below:

"ghostButton.off.background.default": "#be73f0": specifies the background color of all ghost buttons in the top toolbar, such as Panel, Tools, Collaboration, Workspace, Current branch, and others.
"ghostButton.off.focusBorder": "#fdff32": defines the color of the border around ghost buttons.
"ghostButton.on.background.default": "#abff32": sets the background color of ghost buttons when there is no user interaction.
"ghostButton.on.background.hovered": "#f277b7": specifies the background color of ghost buttons when hovered over with a mouse.

fleet ghostbutton section json theme plugin

Key	Value	Type
`ghostButton.off.background.default`	`Transparent`	`string`
`ghostButton.off.background.disabled`	`Transparent`	`string`
`ghostButton.off.background.hovered`	`DarkTint_7`	`string`
`ghostButton.off.background.pressed`	`DarkTint_10`	`string`
`ghostButton.off.border.default`	`Transparent`	`string`
`ghostButton.off.border.disabled`	`Transparent`	`string`
`ghostButton.off.border.hovered`	`Transparent`	`string`
`ghostButton.off.border.pressed`	`Transparent`	`string`
`ghostButton.off.focusBorder`	`Blue_100`	`string`
`ghostButton.off.focusOutline`	`Transparent`	`string`
`ghostButton.off.text.default`	`Neutral_10`	`string`
`ghostButton.off.text.disabled`	`Neutral_110`	`string`
`ghostButton.off.text.hovered`	`Neutral_10`	`string`
`ghostButton.off.text.pressed`	`Neutral_10`	`string`
`ghostButton.on.background.default`	`BlueTint_15`	`string`
`ghostButton.on.background.disabled`	`DarkTint_10`	`string`
`ghostButton.on.background.hovered`	`BlueTint_20`	`string`
`ghostButton.on.background.pressed`	`BlueTint_30`	`string`
`ghostButton.on.border.default`	`Transparent`	`string`
`ghostButton.on.border.disabled`	`Transparent`	`string`
`ghostButton.on.border.hovered`	`Transparent`	`string`
`ghostButton.on.border.pressed`	`Transparent`	`string`
`ghostButton.on.focusBorder`	`Blue_100`	`string`
`ghostButton.on.focusOutline`	`Transparent`	`string`
`ghostButton.on.text.default`	`Blue_100`	`string`
`ghostButton.on.text.disabled`	`Neutral_110`	`string`
`ghostButton.on.text.hovered`	`Blue_100`	`string`
`ghostButton.on.text.pressed`	`Blue_100`	`string`

gitBranchTag

Git branch tags are UI elements used in the Git view to display branch information. They visually represent local and remote branches, highlighting differences and aiding in version control workflows.

Key	Value	Type
`gitBranchTag.local.background`	`Transparent`	`string`
`gitBranchTag.local.border`	`Blue_100`	`string`
`gitBranchTag.local.text`	`Blue_100`	`string`
`gitBranchTag.remote.background`	`Transparent`	`string`
`gitBranchTag.remote.border`	`Purple_100`	`string`
`gitBranchTag.remote.text`	`Purple_100`	`string`

highlight

The highlight key defines the visual style for separators when users interact with them to resize windows.

Key	Value	Type
`highlight.resize.border.center.hovered`	`BlueTint_60`	`string`
`highlight.resize.border.center.pressed`	`BlueTint_25`	`string`
`highlight.resize.border.edge.hovered`	`Transparent`	`string`
`highlight.resize.border.edge.pressed`	`Transparent`	`string`

icon

The icon.* keys define colors for different icons: Gradle, number of notifications, and so on.

Key	Value	Type
`icon.background.blue`	`Blue_100`	`string`
`icon.background.cyan`	`#13A4CD`	`string`
`icon.background.green`	`Green_100`	`string`
`icon.background.red`	`Red_100`	`string`
`icon.background.yellow`	`YellowBright_10`	`string`

inputField

An input field refers to a text input component, a UI element that allows users to input, edit, and interact with text.

Key	Value	Type
`inputField.ai.focusBorder.default`	`Violet_100`	`string`
`inputField.ai.focusOutline.default`	`Violet_130`	`string`
`inputField.background.default`	`White`	`string`
`inputField.background.disabled`	`DarkTint_7`	`string`
`inputField.background.error`	`White`	`string`
`inputField.background.hovered`	`White`	`string`
`inputField.border.default`	`DarkTint_20`	`string`
`inputField.border.disabled`	`DarkTint_10`	`string`
`inputField.border.error`	`Red_100`	`string`
`inputField.border.hovered`	`DarkTint_30`	`string`
`inputField.caret.default`	`Neutral_10`	`string`
`inputField.caret.error`	`Neutral_10`	`string`
`inputField.focusBorder.default`	`Blue_100`	`string`
`inputField.focusBorder.error`	`Red_100`	`string`
`inputField.focusOutline.default`	`Blue_130`	`string`
`inputField.focusOutline.error`	`Red_130`	`string`
`inputField.hint.default`	`Neutral_90`	`string`
`inputField.hint.disabled`	`Neutral_110`	`string`
`inputField.hint.error`	`Neutral_90`	`string`
`inputField.hint.hovered`	`Neutral_90`	`string`
`inputField.selectionBackground.default`	`Blue_130`	`string`
`inputField.selectionBackground.error`	`Blue_130`	`string`
`inputField.text.default`	`Neutral_10`	`string`
`inputField.text.disabled`	`Neutral_110`	`string`
`inputField.text.error`	`Neutral_10`	`string`
`inputField.text.hovered`	`Neutral_10`	`string`

island

The island.background key controls the background of the editor and tool panels.

Key	Value	Type
`island.background`	`White`	`string`

layout

The layout key highlights errors in the layout.

Key	Value	Type
`layout.error`	`#8000FF`	`string`

link

The link key defines the visual style for hyperlinks, including their text, focus outline, and underline styling. It also includes specific styling for AI-related links.

Key	Value	Type
`link.ai.focusOutline`	`Violet_100`	`string`
`link.ai.text.default`	`Violet_80`	`string`
`link.ai.text.disabled`	`Neutral_110`	`string`
`link.ai.underline`	`Violet_80`	`string`
`link.focusOutline`	`Blue_100`	`string`
`link.text.default`	`Blue_70`	`string`
`link.text.disabled`	`Neutral_110`	`string`
`link.underline`	`Blue_70`	`string`

listItem

A list item is a visual element in a user interface that represents an entry in a list. It consists of different states and properties that define its appearance and behavior depending on user interactions. On the following screenshot, list items are items in the context menu and filenames in the File tab.

Key	Value	Type
`listItem.background.default`	`Transparent`	`string`
`listItem.background.dnd`	`Blue 70`	`string`
`listItem.background.focused`	`BlueTint_20`	`string`
`listItem.background.hovered`	`DarkTint_5`	`string`
`listItem.background.selected`	`DarkTint_15`	`string`
`listItem.border.default`	`Transparent`	`string`
`listItem.border.focused`	`Transparent`	`string`
`listItem.border.hovered`	`Transparent`	`string`
`listItem.border.selected`	`Transparent`	`string`
`listItem.focusBorder`	`Blue_100`	`string`
`listItem.text.default`	`Neutral_10`	`string`
`listItem.text.focused`	`Neutral_10`	`string`
`listItem.text.hovered`	`Neutral_10`	`string`
`listItem.text.secondary`	`DarkTint_60`	`string`
`listItem.text.selected`	`Neutral_10`	`string`

notification

Notifications are messages that inform you about events or actions. They can appear in different forms: as standard notifications in a notification center, floating notifications that appear temporarily, or notification bubbles with a configurable delay (10 seconds by default).

Use the following keys to configure the appearance of notifications. Notifications include settings for background colors, text colors, separators, and the More button.

fleet notification field section json theme plugin

Key	Value	Type
`notification.background.default`	`White`	`string`
`notification.background.unread`	`Blue 100`	`string`
`notification.moreButton.background.default`	`White`	`string`
`notification.moreButton.background.hovered`	`Neutral_160`	`string`
`notification.moreButton.background.pressed`	`Neutral_150`	`string`
`notification.moreButton.border.default`	`Neutral_140`	`string`
`notification.moreButton.border.hovered`	`Neutral_140`	`string`
`notification.moreButton.border.pressed`	`Neutral_140`	`string`
`notification.moreButton.text.default`	`Neutral_10`	`string`
`notification.moreButton.text.hovered`	`Neutral_10`	`string`
`notification.moreButton.text.pressed`	`Neutral_10`	`string`
`notification.separator`	`DarkTint_20`	`string`
`notification.text.primary`	`Neutral_10`	`string`
`notification.text.secondary`	`Neutral_90`	`string`

parameterInfo

The parameter information popup displays the names of parameters in method and function calls. It helps you understand the required arguments while you write or review code.

To call the popup, press ⌘ I when the caret is within the parentheses of a function or a method.

fleet parameter info section json theme plugin

Key	Value	Type
`parameterInfo.match.text`	`Blue_70`	`string`

pillButton

Pill buttons are a variant of standard buttons with fully rounded corners. These buttons are used in the Run & Debug window.

Use the following keys to configure the appearance of pill buttons, including background, border, and text states.

Key	Value	Type
`pillButton.background.default`	`White`	`string`
`pillButton.background.disabled`	`White`	`string`
`pillButton.background.hovered`	`Gray 110`	`string`
`pillButton.background.pressed`	`Gray 100`	`string`
`pillButton.border.default`	`Gray 80`	`string`
`pillButton.border.disabled`	`Gray 80`	`string`
`pillButton.border.hovered`	`Gray 80`	`string`
`pillButton.border.pressed`	`Gray 80`	`string`
`pillButton.focusBorder`	`Blue_100`	`string`
`pillButton.focusOutline`	`Blue_130`	`string`
`pillButton.text.default`	`Gray 50`	`string`
`pillButton.text.disabled`	`Gray 50`	`string`
`pillButton.text.hovered`	`Gray 50`	`string`
`pillButton.text.pressed`	`Gray 50`	`string`

popup

Popups provide contextual information and actions within the editor. They might display quick documentation, usages, quick-fixes, code completion suggestions, or other relevant information.

Use the following keys to configure the appearance of popups, including background, text, borders, separators, and close icon states.

Key	Value	Type
`popup.background`	`White`	`string`
`popup.border`	`Neutral_140`	`string`
`popup.closeIcon.default`	`DarkTint_30`	`string`
`popup.closeIcon.hovered`	`DarkTint_60`	`string`
`popup.closeIcon.pressed`	`DarkTint_70`	`string`
`popup.editor.background`	`White`	`string`
`popup.editor.border`	`Neutral_150`	`string`
`popup.goto.background`	`Neutral_160`	`string`
`popup.listItem.footer.background.default`	`Neutral_160`	`string`
`popup.separator`	`Neutral_140`	`string`
`popup.text`	`Neutral_10`	`string`

problemsWidget

The Problems widget displays issues that JetBrains Fleet detects in your project. The widget, located in the top-right corner of the editor, shows the number of problems categorized by severity (errors, warnings, and weak warnings) detected in the current file.

You can click the widget to open a list of problems for the file. Also, you can expand individual problem cards to see more details.

fleet problems widget section json theme plugin

Key	Value	Type
`problemsWidget.card.expanded.error.background`	`Red_150`	`string`
`problemsWidget.card.expanded.error.border`	`Red_120`	`string`
`problemsWidget.card.expanded.warning.background`	`Yellow_150`	`string`
`problemsWidget.card.expanded.warning.border`	`Yellow_120`	`string`
`problemsWidget.card.expanded.weakWarning.background`	`Neutral_150`	`string`
`problemsWidget.card.expanded.weakWarning.border`	`Neutral_120`	`string`
`problemsWidget.card.text.primary`	`Neutral_10`	`string`
`problemsWidget.card.text.secondary`	`Neutral_90`	`string`
`problemsWidget.tag.error.background.default`	`Red_90`	`string`
`problemsWidget.tag.error.background.hovered`	`Red_80`	`string`
`problemsWidget.tag.error.background.pressed`	`Red_70`	`string`
`problemsWidget.tag.error.text.default`	`White`	`string`
`problemsWidget.tag.error.text.hovered`	`White`	`string`
`problemsWidget.tag.error.text.pressed`	`White`	`string`
`problemsWidget.tag.success.background`	`Green_140`	`string`
`problemsWidget.tag.success.foreground`	`Green_100`	`string`
`problemsWidget.tag.warning.background.default`	`Yellow_90`	`string`
`problemsWidget.tag.warning.background.hovered`	`Yellow_80`	`string`
`problemsWidget.tag.warning.background.pressed`	`Yellow_70`	`string`
`problemsWidget.tag.warning.text.default`	`White`	`string`
`problemsWidget.tag.warning.text.hovered`	`White`	`string`
`problemsWidget.tag.warning.text.pressed`	`White`	`string`
`problemsWidget.tag.weakWarning.background.default`	`DarkTint_15`	`string`
`problemsWidget.tag.weakWarning.background.hovered`	`DarkTint_20`	`string`
`problemsWidget.tag.weakWarning.background.pressed`	`DarkTint_30`	`string`
`problemsWidget.tag.weakWarning.text.default`	`Neutral_10`	`string`
`problemsWidget.tag.weakWarning.text.hovered`	`Neutral_10`	`string`
`problemsWidget.tag.weakWarning.text.pressed`	`Neutral_10`	`string`

progressBar

A progress bar is a visual indicator that shows the progression of an ongoing operation. It can display either a determinate or indeterminate state. Determinate progress bars indicate the known percentage of work completed, while indeterminate progress bars convey ongoing activity when the exact progress cannot be determined.

Progress bar types

The progress bar supports two types:

Determinate progress bar: displays the progress as a known percentage and animates smoothly between progress updates.
Indeterminate progress bar: used when the progress cannot be determined and displays an animated gradient effect to indicate ongoing activity.

fleet progress bar section json theme plugin

Key	Value	Type
`progressBar.determinate.background`	`BlueTint_20`	`string`
`progressBar.determinate.foreground`	`Blue_90`	`string`
`progressBar.indeterminate.foreground`	`Blue_90`	`string`
`progressBar.indeterminate.foregroundAccent`	`#9DBFE4`	`string`

progressInline

The inline progress indicator is especially useful when you need to show progress without blocking or significantly altering the UI layout, as it overlays the existing content with a subtle animation. To see an example of inline progress animation, disable and then enable the Smart Mode.

Key	Value	Type
`progressInline.foreground`	`BlueTint_20`	`string`

progressSpinner

Color of the progress spinner. For example, during the analysis of your code in the editor.

Key	Value	Type
`progressSpinner.foreground`	`Neutral_10`	`string`

remote

The remote.userColor.* keys define user colors during a collaborative development session. User colors are randomly selected but follow a predictable pattern.

The user color implementation has the following characteristics:

Random but deterministic: meaning that the selection appears random but follows a consistent and predictable pattern. The user's ID hash code is used as a seed for randomization.
Predefined color set: uses a fixed set of 10 theme-defined colors, identified by the keys: remote.userColor.background.one through remote.userColor.background.ten
Colors are selected from these theme keys.
Usage context: used primarily in user icons or avatars. The colors serve as a background for circular user avatars and are paired with white text showing user initials. Additionally, the colors are used to highlight panels that the user is interacting with.

Color selection

Colors are assigned to users in the following way:

Each user gets a consistent color based on their user ID.
The same user always gets the same color across sessions.
Colors are theme-aware and come from the application's theme system.

fleet remote field section json theme plugin

Key	Value	Type
`remote.userColor.background.eight`	`#7A5CFF`	`string`
`remote.userColor.background.five`	`#3EB289`	`string`
`remote.userColor.background.four`	`#82B52A`	`string`
`remote.userColor.background.nine`	`#B35DEF`	`string`
`remote.userColor.background.one`	`Red 40`	`string`
`remote.userColor.background.seven`	`#4A5FFF`	`string`
`remote.userColor.background.six`	`Blue 50`	`string`
`remote.userColor.background.ten`	`#E05AD7`	`string`
`remote.userColor.background.three`	`Yellow 40`	`string`
`remote.userColor.background.two`	`#F57749`	`string`

remoteWorkspaceStatusLabel

The remoteWorkspaceStatusLabel identifies the type of remote connection. Supported types include SSH, Remote Development, Docker, and WSL (Windows Subsystem for Linux). Each type is visually distinguished with its own specific icon and color scheme to ensure clarity and ease of identification.

fleet remote workspace section json theme plugin

Key	Value	Type
`remoteWorkspaceStatusLabel.background.docker`	`BlueTint_40`	`string`
`remoteWorkspaceStatusLabel.background.space`	`VioletTint_40`	`string`
`remoteWorkspaceStatusLabel.background.ssh`	`GreenTint_40`	`string`
`remoteWorkspaceStatusLabel.background.wsl`	`YellowTint_40`	`string`
`remoteWorkspaceStatusLabel.text.docker`	`Black`	`string`
`remoteWorkspaceStatusLabel.text.space`	`Black`	`string`
`remoteWorkspaceStatusLabel.text.ssh`	`Black`	`string`
`remoteWorkspaceStatusLabel.text.wsl`	`Black`	`string`

scrollbar

The scrollbar provides a visual indicator of the current scroll position within a scrollable area. It allows users to navigate through content efficiently. The appearance of the scrollbar can be customized to match the application's theme, including the thumb and track components.

Key	Value	Type
`scrollbar.thumb.default`	`DarkTint_20`	`string`
`scrollbar.thumb.hovered`	`DarkTint_20`	`string`
`scrollbar.thumb.pressed`	`DarkTint_30`	`string`
`scrollbar.track.default`	`Transparent`	`string`
`scrollbar.track.hovered`	`DarkTint_10`	`string`
`scrollbar.track.pressed`	`DarkTint_10`	`string`

search

The search keys define the colors for found matches when you perform a search in the Tools window. The *.counter.* key configures the color of the counter that displays the number of found matches.

Key	Value	Type
`search.counter.background`	`#0000001A`	`string`
`search.match.background`	`Yellow 40`	`string`
`search.match.text`	`Gray 10`	`string`

separator

The separator keys define the colors of various separators in JetBrains Fleet, such as sticky lines, breadcrumbs, settings, and more.

Key	Value	Type
`separator.default`	`Neutral_130`	`string`
`separator.hovered`	`Blue_100`	`string`

settings

The settings keys control the color of the indicator in the settings that shows when a setting has been modified.

Key	Value	Type
`settings.background.highligted`	`Yellow_150`	`string`
`settings.modified.indicator`	`Yellow_110`	`string`

shadow

The shadow keys control the color of the shadow gradient for various menus and popups, such as search in the Tools window, quick documentation popups, quick-fix popups, and more.

Key	Value	Type
`shadow.background.large`	`#2D2D2D1F`	`string`
`shadow.background.medium`	`#2D2D2D1F`	`string`
`shadow.background.small`	`#2D2D2D1F`	`string`
`shadow.border`	`#2D2D2D33`	`string`

shortcut

The shortcut keys define the colors for shortcuts in some UI components (for example, AI Assistant).

Key	Value	Type
`shortcut.background`	`DarkTint_10`	`string`
`shortcut.text`	`Neutral_10`	`string`

smartMode

The smartMode keys control the color of the Smart Mode icon.

Key	Value	Type
`smartMode.background.enabled`	`Blue_100`	`string`
`smartMode.background.error`	`Red_100`	`string`
`smartMode.border.loading`	`Neutral_130`	`string`

statusBar

The statusBar keys control the color of the status bar at the bottom of the code editor.

Key	Value	Type
`statusBar.text.default`	`Neutral_90`	`string`
`statusBar.text.hovered`	`Neutral_80`	`string`
`statusBar.text.pressed`	`Neutral_80`	`string`

survey

The survey keys configure the appearance of various surveys. These surveys are typically displayed as popup notifications to gather user feedback.

Survey type and timing

Surveys appear basing on specific usage conditions:

After a certain period of IDE usage
Upon reaching specific usage milestones
Following major feature interactions
After version updates

Key	Value	Type
`survey.button.background.default`	`#FFFFFFBF`	`string`
`survey.button.background.hovered`	`Blue_90`	`string`
`survey.button.border.default`	`DarkTint_20`	`string`
`survey.button.border.hovered`	`DarkTint_20`	`string`
`survey.button.focusBorder`	`Blue_100`	`string`
`survey.button.focusOutline`	`Blue_130`	`string`
`survey.button.text.default`	`Neutral_10`	`string`
`survey.button.text.hovered`	`White`	`string`

tab

The tab keys configure the visual appearance of tabs, defining their background, border, text, close icon, and hint colors across various interaction states.

Key	Value	Type
`tab.background.default`	`Transparent`	`string`
`tab.background.dragAndDrop`	`Blue_140`	`string`
`tab.background.hovered`	`DarkTint_7`	`string`
`tab.background.selected`	`DarkTint_10`	`string`
`tab.border.default`	`Transparent`	`string`
`tab.border.dragAndDrop`	`White`	`string`
`tab.border.hovered`	`Transparent`	`string`
`tab.border.selected`	`Transparent`	`string`
`tab.closeIcon.default`	`DarkTint_30`	`string`
`tab.closeIcon.hovered`	`DarkTint_60`	`string`
`tab.closeIcon.pressed`	`DarkTint_70`	`string`
`tab.focusOutline.dragAndDrop`	`Blue_100`	`string`
`tab.hint.default`	`Neutral_110`	`string`
`tab.hint.hovered`	`Neutral_90`	`string`
`tab.hint.selected`	`Neutral_90`	`string`
`tab.text.default`	`DarkTint_60`	`string`
`tab.text.hovered`	`DarkTint_60`	`string`
`tab.text.selected`	`Neutral_10`	`string`

terminal

The terminal keys configure the visual appearance of text in the terminal.

Key	Value	Type
`terminal.ansiColors.background.ansiBlack`	`Black`	`string`
`terminal.ansiColors.background.ansiBlue`	`#508ED9`	`string`
`terminal.ansiColors.background.ansiBrightBlack`	`#B7B7B7`	`string`
`terminal.ansiColors.background.ansiBrightBlue`	`#54A1FF`	`string`
`terminal.ansiColors.background.ansiBrightCyan`	`#35E6E6`	`string`
`terminal.ansiColors.background.ansiBrightGreen`	`#3DD456`	`string`
`terminal.ansiColors.background.ansiBrightMagenta`	`#B63DDB`	`string`
`terminal.ansiColors.background.ansiBrightRed`	`#F06C5D`	`string`
`terminal.ansiColors.background.ansiBrightWhite`	`White`	`string`
`terminal.ansiColors.background.ansiBrightYellow`	`#DBC051`	`string`
`terminal.ansiColors.background.ansiCyan`	`#84FAFA`	`string`
`terminal.ansiColors.background.ansiGreen`	`#7BBA85`	`string`
`terminal.ansiColors.background.ansiMagenta`	`#DB75FA`	`string`
`terminal.ansiColors.background.ansiRed`	`#CE0505`	`string`
`terminal.ansiColors.background.ansiWhite`	`#E5E5E5`	`string`
`terminal.ansiColors.background.ansiYellow`	`#FAE387`	`string`
`terminal.ansiColors.foreground.ansiBlack`	`Black`	`string`
`terminal.ansiColors.foreground.ansiBlue`	`Blue_70`	`string`
`terminal.ansiColors.foreground.ansiBrightBlack`	`#B7B7B7`	`string`
`terminal.ansiColors.foreground.ansiBrightBlue`	`#0073FF`	`string`
`terminal.ansiColors.foreground.ansiBrightCyan`	`#24E0FF`	`string`
`terminal.ansiColors.foreground.ansiBrightGreen`	`#33F253`	`string`
`terminal.ansiColors.foreground.ansiBrightMagenta`	`#CC26FF`	`string`
`terminal.ansiColors.foreground.ansiBrightRed`	`#FCA4A7`	`string`
`terminal.ansiColors.foreground.ansiBrightWhite`	`White`	`string`
`terminal.ansiColors.foreground.ansiBrightYellow`	`#FFD83B`	`string`
`terminal.ansiColors.foreground.ansiCyan`	`#0A8282`	`string`
`terminal.ansiColors.foreground.ansiGreen`	`#4DBB5F`	`string`
`terminal.ansiColors.foreground.ansiMagenta`	`#CC37FA`	`string`
`terminal.ansiColors.foreground.ansiRed`	`Red_80`	`string`
`terminal.ansiColors.foreground.ansiWhite`	`#E5E5E5`	`string`
`terminal.ansiColors.foreground.ansiYellow`	`#B0993C`	`string`

text

The text keys configure the visual appearance of text elements in the IDE. These keys define the colors for various text styles.

Key	Value	Type
`text.ai`	`Violet_80`	`string`
`text.bright`	`Neutral_10`	`string`
`text.dangerous`	`Red_80`	`string`
`text.disabled`	`Neutral_110`	`string`
`text.primary`	`Neutral_10`	`string`
`text.secondary`	`Neutral_90`	`string`
`text.tertiary`	`Neutral_110`	`string`

tileButton

The tileButton keys configure the colors for tile buttons displayed on the Welcome screen.

Key	Value	Type
`tileButton.off.background.default`	`#FFFFFFBF`	`string`
`tileButton.off.background.disabled`	`DarkTint_7`	`string`
`tileButton.off.background.hovered`	`DarkTint_3`	`string`
`tileButton.off.background.pressed`	`DarkTint_5`	`string`
`tileButton.off.border.default`	`DarkTint_15`	`string`
`tileButton.off.border.disabled`	`DarkTint_10`	`string`
`tileButton.off.border.hovered`	`DarkTint_15`	`string`
`tileButton.off.border.pressed`	`DarkTint_15`	`string`
`tileButton.off.focusBorder`	`Blue_100`	`string`
`tileButton.off.focusOutline`	`Blue_130`	`string`
`tileButton.off.text.default`	`Neutral_10`	`string`
`tileButton.off.text.disabled`	`Neutral_110`	`string`
`tileButton.off.text.hovered`	`Neutral_10`	`string`
`tileButton.off.text.pressed`	`Neutral_10`	`string`
`tileButton.off.text.shortcut.default`	`DarkTint_60`	`string`
`tileButton.off.text.shortcut.disabled`	`Neutral_110`	`string`
`tileButton.on.background.default`	`BlueTint_5`	`string`
`tileButton.on.background.disabled`	`DarkTint_7`	`string`
`tileButton.on.background.hovered`	`BlueTint_10`	`string`
`tileButton.on.background.pressed`	`BlueTint_15`	`string`
`tileButton.on.border.default`	`Blue_100`	`string`
`tileButton.on.border.disabled`	`DarkTint_10`	`string`
`tileButton.on.border.hovered`	`Blue_100`	`string`
`tileButton.on.border.pressed`	`Blue_100`	`string`
`tileButton.on.focusBorder`	`White`	`string`
`tileButton.on.focusOutline`	`Blue_90`	`string`
`tileButton.on.text.default`	`Neutral_10`	`string`
`tileButton.on.text.disabled`	`Neutral_110`	`string`
`tileButton.on.text.hovered`	`Neutral_10`	`string`
`tileButton.on.text.pressed`	`Neutral_10`	`string`
`tileButton.on.text.shortcut.default`	`DarkTint_60`	`string`
`tileButton.on.text.shortcut.disabled`	`Neutral_110`	`string`

toast

The toast popup appears in the editor and displays a shortcut that the user has used.

To enable the toast popup, open the settings by pressing ⌘ ,. Then navigate to Application | Appearance and select the Show key combinations when using shortcuts option.

fleet toast widget section json theme plugin

Key	Value	Type
`toast.background`	`DarkTint_60`	`string`
`toast.border`	`Transparent`	`string`
`toast.text`	`White`	`string`

toggleButton

A toggle button is a UI component that allows users to switch between two states, typically "on" and "off." It is commonly used to enable or disable features, settings, or actions within an application. The toggle button provides visual feedback to indicate its current state. In JetBrains Fleet, examples of toggle buttons can be found in the Tools search window.

Key	Value	Type
`toggleButton.off.background.default`	`Transparent`	`string`
`toggleButton.off.background.disabled`	`Transparent`	`string`
`toggleButton.off.background.hovered`	`DarkTint_5`	`string`
`toggleButton.off.background.pressed`	`DarkTint_10`	`string`
`toggleButton.off.border.default`	`DarkTint_20`	`string`
`toggleButton.off.border.disabled`	`DarkTint_10`	`string`
`toggleButton.off.border.hovered`	`DarkTint_20`	`string`
`toggleButton.off.border.pressed`	`DarkTint_20`	`string`
`toggleButton.off.focusBorder`	`Blue_100`	`string`
`toggleButton.off.focusOutline`	`Blue_130`	`string`
`toggleButton.off.text.default`	`Neutral_10`	`string`
`toggleButton.off.text.disabled`	`Neutral_110`	`string`
`toggleButton.off.text.hint`	`DarkTint_60`	`string`
`toggleButton.off.text.hovered`	`Neutral_10`	`string`
`toggleButton.off.text.pressed`	`Neutral_10`	`string`
`toggleButton.on.background.default`	`Blue_90`	`string`
`toggleButton.on.background.disabled`	`DarkTint_7`	`string`
`toggleButton.on.background.hovered`	`Blue_80`	`string`
`toggleButton.on.background.pressed`	`Blue_70`	`string`
`toggleButton.on.border.default`	`Transparent`	`string`
`toggleButton.on.border.disabled`	`Transparent`	`string`
`toggleButton.on.border.hovered`	`Transparent`	`string`
`toggleButton.on.border.pressed`	`Transparent`	`string`
`toggleButton.on.focusBorder`	`White`	`string`
`toggleButton.on.focusOutline`	`Blue_90`	`string`
`toggleButton.on.text.default`	`White`	`string`
`toggleButton.on.text.disabled`	`Neutral_110`	`string`
`toggleButton.on.text.hint`	`White`	`string`
`toggleButton.on.text.hovered`	`White`	`string`
`toggleButton.on.text.pressed`	`White`	`string`

A tooltip is a UI component that displays brief contextual information when users hover over or focus on an element. Tooltips provide clarity and additional guidance without cluttering the interface.

To see an example of a tooltip, hover your mouse over the tab of an open file.

fleet tooltip field section json theme plugin

Key	Value	Type
`tooltip.background`	`Neutral_30`	`string`
`tooltip.border`	`Transparent`	`string`
`tooltip.error.background`	`Red_90`	`string`
`tooltip.error.border`	`Transparent`	`string`
`tooltip.error.text`	`White`	`string`
`tooltip.text.primary`	`White`	`string`
`tooltip.text.secondary`	`Neutral_110`	`string`
`tooltip.text.tertiary`	`Neutral_70`	`string`

tree

The tree keys configure the appearance of tree structures in the IDE, such as the nested folder structures displayed in the Files tool.

Key	Value	Type
`tree.compactFolder.selector.default`	`Neutral_10`	`string`
`tree.compactFolder.selector.focused`	`Neutral_10`	`string`
`tree.compactFolder.separator`	`Neutral_70`	`string`
`tree.focusBorder`	`Blue_100`	`string`

vim

The vim keys configure the appearance of tags and indicators for different Vim modes in the code editor. The current Vim mode is displayed in a tag at the lower-right corner of the code editor, providing users with a visual representation of the active mode.

Key	Value	Type
`vim.mode.cmdLine.background`	`Yellow_140`	`string`
`vim.mode.cmdLine.border`	`Yellow_130`	`string`
`vim.mode.cmdLine.text`	`Neutral_10`	`string`
`vim.mode.insert.background`	`Green_140`	`string`
`vim.mode.insert.border`	`Green_130`	`string`
`vim.mode.insert.text`	`Neutral_10`	`string`
`vim.mode.normal.background`	`Neutral_140`	`string`
`vim.mode.normal.border`	`Neutral_130`	`string`
`vim.mode.normal.text`	`Neutral_10`	`string`
`vim.mode.replace.background`	`Red_140`	`string`
`vim.mode.replace.border`	`Red_130`	`string`
`vim.mode.replace.text`	`Neutral_10`	`string`
`vim.mode.select.background`	`Purple_140`	`string`
`vim.mode.select.border`	`Purple_130`	`string`
`vim.mode.select.text`	`Neutral_10`	`string`
`vim.mode.visual.background`	`Blue_140`	`string`
`vim.mode.visual.border`	`Blue_130`	`string`
`vim.mode.visual.text`	`Neutral_10`	`string`
`vim.recordingTag.background`	`Red_140`	`string`
`vim.recordingTag.border`	`Red_130`	`string`
`vim.recordingTag.text`	`Neutral_10`	`string`

textAttributes

Defines text attributes used for syntax highlighting in the editor. This block is optional.

The following fallback rules are applied to this block:

If the textAttributes block is missing, the text attributes from the default Light or Dark theme are used (depending on the theme.kind key in meta).
If the textAttributes block is present, text attributes will not fall back to the parent theme. If an attribute is not found, it tries to fall back on another attribute in the same theme by dropping the last segment. If there is no fallback, the default text color is used.

Fallback example: "problem.warning.weak"-> "problem.warning"-> "problem"-> using default text color

ai

The ai.generated key defines a background color for the code generated by AI Assistant.

Key	Value
`ai.generated`	`{"backgroundColor": "Violet_130"}`

attribute

The attribute.css key defines a color of the attribute name in C++.

Key	Value
`attribute.cpp`	`{"foregroundColor": "#8C4F7F"}`

attributeName

The attributeName keys specify colors for attribute names in HTML and CSS.

Key	Value
`attributeName.css`	`{"foregroundColor": "Violet"}`
`attributeName.html`	`{"foregroundColor": "Violet"}`

attributeValue

The attributeValue.html key specifies the color for attribute values in HTML.

Key	Value
`attributeValue.html`	`{"foregroundColor": "Green"}`

comment

The comment.* keys define the visual styles applied to comments in code.

comment.buildConstraint.go: specifies the color for build constraint comments in Go code.
comment.doc: sets the color for standard documentation comments.
comment.doc.tag: defines the color for tags within documentation comments.
comment.doc.value: determines the color for values associated with tags in documentation comments.
comment.todo: assigns the color for TODO comments, making them easily identifiable.

fleet textattributes comment section json theme plugin

Key	Value
`comment.buildConstraint.go`	`{"foregroundColor": "Gray 10"}`
`comment.doc`	`{"foregroundColor": "Gray 40"}`
`comment.doc.tag`	`{"foregroundColor": "Teal"}`
`comment.doc.value`	`{"foregroundColor": "Gray 10"}`
`comment.todo`	`{"foregroundColor": "#BD4A2D"}`

debug

The debug key defines the visual style applied to the background of the current line in the editor during debugging.

Key	Value
`debug.currentFrame`	`{"backgroundColor": "RedTint_15"}`

diff

The diff.* keys define the visual styles applied to changes in code during comparison operations in the Empty Diff view. For more information about Empty Diff, refer to Compare files and text sources.

Key	Value
`diff.added`	`{"backgroundColor": "#DFF5EB"}`
`diff.added.empty`	`{"backgroundColor": "#21AB7C"}`
`diff.added.resolved`	`{ "border": {"color": "#A9D6C6"}, "backgroundColor": "Transparent" }`
`diff.added.withBorder`	`{ "border": {"color": "#A9D6C6"}, "backgroundColor": "#DFF5EB" }`
`diff.added.word`	`{"backgroundColor": "#ABD9C7"}`
`diff.conflict.resolved`	`{ "border": {"color": "#EBD1A9"}, "backgroundColor": "Transparent" }`
`diff.conflict.withBorder`	`{ "border": {"color": "#EBD1A9"}, "backgroundColor": "#FCF4E3" }`
`diff.deleted`	`{"backgroundColor": "#FCEAEE"}`
`diff.deleted.empty`	`{"backgroundColor": "Red 40"}`
`diff.deleted.resolved`	`{ "border": {"color": "Red 70"}, "backgroundColor": "Transparent" }`
`diff.deleted.withBorder`	`{ "border": {"color": "Red 70"}, "backgroundColor": "#FCEAEE" }`
`diff.deleted.word`	`{"backgroundColor": "#FACFD7"}`
`diff.modified`	`{"backgroundColor": "#E1EDFA"}`
`diff.modified.original`	`{"backgroundColor": "DarkTint_7"}`
`diff.modified.resolved`	`{ "border": {"color": "Blue 70"}, "backgroundColor": "Transparent" }`
`diff.modified.withBorder`	`{ "border": {"color": "Blue 70"}, "backgroundColor": "#E1EDFA" }`
`diff.modified.word`	`{"backgroundColor": "Blue 70"}`

editor

The editor.* keys define the visual styles applied to text and related elements within the code editor, such as brackets, parentheses, search results, and selections.

Key	Value
`editor.brace.match`	`{"backgroundColor": "#A0D8D5"}`
`editor.indentGuide`	`{ "foregroundColor": "DarkTint_15", "textDecoration": {"style": "DASHED"} }`
`editor.indentGuide.current`	`{ "foregroundColor": "DarkTint_30", "textDecoration": {"style": "DASHED"} }`
`editor.indentGuide.declaration`	`{"foregroundColor": "DarkTint_10"}`
`editor.indentGuide.declaration.current`	`{"foregroundColor": "DarkTint_30"}`
`editor.rename.current`	`{"border": {"color": "Blue 50"}}`
`editor.rename.entries`	`{"backgroundColor": "Green 80"}`
`editor.search.results`	`{ "backgroundColor": "Yellow 40", "scrollbarMarkColor": "#ED8013" }`
`editor.selection`	`{"backgroundColor": "Neutral_130"}`
`editor.selection.focused`	`{"backgroundColor": "Blue_130"}`
`editor.text.composable`	`{"textDecoration": {"color": "Gray 10"}}`
`editor.text.scheme`	`{"foregroundColor": "Gray 10"}`

entityReference

The entityReference key defines the visual styles for HTML entities.

Key	Value
`entityReference.html`	`{"foregroundColor": "Brown"}`

error

The error.hovered key defines the visual style applied to error indicators when they are hovered over.

Key	Value
`error.hovered`	`{"backgroundColor": "Red 70"}`

generic

The generic.php key defines the visual style applied to generic elements in PHP code, such as generic type annotations or constructs.

Key	Value
`generic.php`	`{"foregroundColor": "Pink"}`

hex

The hex.css key defines the visual style applied to hexadecimal color values in CSS code.

fleet textattributes hex section json theme plugin

Key	Value
`hex.css`	`{"foregroundColor": "Pink"}`

identifier

The identifier section defines the visual styles applied to various types of identifiers in code, such as variables, functions, types, and constants.

Key	Value
`identifier.alias.yaml`	`{"foregroundColor": "Orange"}`
`identifier.anchor.yaml`	`{"foregroundColor": "Blue"}`
`identifier.constant`	`{"foregroundColor": "Pink"}`
`identifier.constant.predefined`	`{"foregroundColor": "Teal"}`
`identifier.css`	`{"foregroundColor": "Violet"}`
`identifier.dependency.add.amper`	`{"foregroundColor": "Blue"}`
`identifier.dependency.annotator.amper`	`{"foregroundColor": "Blue"}`
`identifier.dependency.scope.amper`	`{"foregroundColor": "Orange"}`
`identifier.field`	`{"foregroundColor": "Pink"}`
`identifier.field.static`	`{ "foregroundColor": "Pink", "fontStyle": "ITALIC" }`
`identifier.function.call`	`{"foregroundColor": "Violet"}`
`identifier.function.call.composable`	`{"foregroundColor": "Lime"}`
`identifier.function.call.package`	`{"foregroundColor": "Violet"}`
`identifier.function.css`	`{"foregroundColor": "Violet"}`
`identifier.function.declaration`	`{ "foregroundColor": "Gray 10", "fontWeight": "SEMI_BOLD" }`
`identifier.function.declaration.js`	`{ "foregroundColor": "Violet", "fontWeight": "SEMI_BOLD" }`
`identifier.interface`	`{"foregroundColor": "#2B59C2"}`
`identifier.method.static`	`{ "foregroundColor": "Violet", "fontStyle": "ITALIC" }`
`identifier.methodReceiver.go`	`{"foregroundColor": "Gray 10"}`
`identifier.namedArgument`	`{"foregroundColor": "Brown"}`
`identifier.other`	`{"foregroundColor": "Blue"}`
`identifier.package.go`	`{"foregroundColor": "Brown"}`
`identifier.parameter`	`{"foregroundColor": "Gray 10"}`
`identifier.parameter.js`	`{"foregroundColor": "Lime"}`
`identifier.this`	`{"foregroundColor": "#8C4F7F"}`
`identifier.this.mutable`	`{ "foregroundColor": "#8C4F7F", "textDecoration": {"color": "#8C4F7F"} }`
`identifier.type`	`{"foregroundColor": "Blue"}`
`identifier.type.class`	`{"foregroundColor": "Blue"}`
`identifier.type.enum`	`{"foregroundColor": "Blue"}`
`identifier.type.struct`	`{"foregroundColor": "Blue"}`
`identifier.type.valueType`	`{"foregroundColor": "Brown"}`
`identifier.typeDeclaration.go`	`{"foregroundColor": "Gray 10"}`
`identifier.typeParameter`	`{"foregroundColor": "Brown"}`
`identifier.typeReference.go`	`{"foregroundColor": "Blue"}`
`identifier.underCaret`	`{ "backgroundColor": "DarkTint_10", "scrollbarMarkColor": "#B793ED" }`
`identifier.variable`	`{"foregroundColor": "Gray 10"}`
`identifier.variable.css`	`{"foregroundColor": "Blue"}`
`identifier.variable.mutable`	`{"textDecoration": {"color": "Gray 60"}}`
`identifier.variable.php`	`{"foregroundColor": "Brown"}`
`identifier.variable.shadowing.go`	`{"foregroundColor": "Lime"}`

interpolation

The interpolation.css key defines the visual style applied to interpolated values in CSS code. Interpolation refers to the process of embedding dynamic content, such as variables or expressions, within CSS constructs.

Key	Value
`interpolation.css`	`{"foregroundColor": "Gray 10"}`

jsCodeDelimiter

The jsCodeDelimiter.css key defines the visual style applied to JavaScript code delimiters embedded within CSS.

Key	Value
`jsCodeDelimiter.css`	`{"foregroundColor": "Green"}`

jsCodeInjection

The jsCodeInjection.css key defines the visual style applied to instances where JavaScript code is injected into CSS-like syntax.

Key	Value
`jsCodeInjection.css`	`{"foregroundColor": "Gray 10"}`

key

The key keys define the visual appearance of keys in JSON and YAML files.

fleet textattributes key section json theme plugin

Key	Value
`key.json`	`{"foregroundColor": "Violet"}`
`key.yaml`	`{"foregroundColor": "Teal"}`

keyword

The keyword keys define the visual appearance of specific keywords in CSS and related contexts.

Key	Value
`keyword.css`	`{"foregroundColor": "Lime"}`
`keyword.extend.css`	`{"foregroundColor": "Lime"}`
`keyword.global.css`	`{"foregroundColor": "Lime"}`
`keyword.important.css`	`{"foregroundColor": "Violet"}`
`keyword.typeModifier`	`{"foregroundColor": "Teal"}`

link

The link keys define the visual appearance and behavior of links in the editor.

Key	Value
`link.always.visible`	`{"textDecoration": {}}`
`link.hovered`	`{ "foregroundColor": "Blue_70", "textDecoration": {"color": "Blue_70"} }`

markup

The markup keys define the visual appearance of elements commonly used in markup languages, such as headings, bold or italic text, code blocks, and hyperlinks.

Key	Value
`markup.bold`	`{"fontWeight": "BOLD"}`
`markup.code.block`	`{"foregroundColor": "#78492A"}`
`markup.heading`	`{ "foregroundColor": "Violet", "fontWeight": "BOLD" }`
`markup.href`	`{ "foregroundColor": "#78492A", "textDecoration": {}, "fontStyle": "ITALIC" }`
`markup.italic`	`{"fontStyle": "ITALIC"}`

metadata

The metadata key defines the visual style applied to metadata elements in code or configuration files.

Key	Value
`metadata.structTag.arbitraryText.go`	`{"foregroundColor": "Gray 40"}`
`metadata.structTag.key.go`	`{"foregroundColor": "Gray 10"}`
`metadata.structTag.value.go`	`{"foregroundColor": "Green"}`

mixin

The mixin.css key defines the visual style applied to mixins in CSS or CSS preprocessors like SCSS or Less.

Key	Value
`mixin.css`	`{"foregroundColor": "Violet"}`

number

The number keys define the visual appearance of numeric values and units in CSS code.

Key	Value
`number.css`	`{"foregroundColor": "Pink"}`
`number.unit.css`	`{"foregroundColor": "Pink"}`

problem

The problem styles define the visual appearance of various types of problems, warnings, and informational markers in the code editor.

Key	Value
`problem.deprecated`	`{"textDecoration": { "color": "Gray 10", "type": "LINE_THROUGH" }}`
`problem.error`	`{ "textDecoration": { "color": "Red_90", "thickness": 2 }, "scrollbarMarkColor": "Red_100" }`
`problem.error.badCharacter`	`{ "textDecoration": { "color": "Red_90", "thickness": 2 }, "scrollbarMarkColor": "Red_100" }`
`problem.info`	`{"textDecoration": {"color": "#A366C4"}}`
`problem.unknown`	`{}`
`problem.unused`	`{"foregroundColor": "Gray 40"}`
`problem.warning`	`{ "textDecoration": { "color": "Yellow_120", "thickness": 2 }, "scrollbarMarkColor": "YellowBright_10" }`
`problem.warning.weak`	`{ "textDecoration": { "color": "Neutral_130", "thickness": 2 }, "scrollbarMarkColor": "Neutral_130" }`

property

The property keys define the visual appearance of properties in PHP code.

Key	Value
`property.php`	`{"foregroundColor": "Pink"}`
`property.static.php`	`{ "foregroundColor": "Pink", "fontStyle": "ITALIC" }`

propertyName

The propertyName.css key defines the visual style applied to property names in CSS.

Key	Value
`propertyName.css`	`{"foregroundColor": "Teal"}`

propertyValue

The propertyValue.css key defines the visual style applied to property values in CSS.

Key	Value
`propertyValue.css`	`{"foregroundColor": "Gray 10"}`

punctuation

The punctuation keys define the visual appearance of punctuation elements in code.

Key	Value
`punctuation.css`	`{"foregroundColor": "Gray 10"}`
`punctuation.operator`	`{"foregroundColor": "Gray 10"}`
`punctuation.operator.merge.yaml`	`{"foregroundColor": "Pink"}`

refactoring

The refactoring.modified.code key defines the visual style applied to code that has been modified during a refactoring operation. For example, the Unhandled error quick-fix was applied to the Go code in the following screenshot. The modified part is highlighted.

Key	Value
`refactoring.modified.code`	`{"backgroundColor": "Green 80"}`

schema

The schema.yaml key defines the visual style applied to schema elements in YAML files.

Key	Value
`schema.yaml`	`{"foregroundColor": "Brown"}`

selector

The selector keys define the visual appearance of various types of selectors in CSS.

Key	Value
`selector.class.css`	`{"foregroundColor": "Violet"}`
`selector.css`	`{"foregroundColor": "Violet"}`
`selector.id.css`	`{"foregroundColor": "Violet"}`
`selector.pseudo.css`	`{"foregroundColor": "Violet"}`
`selector.tag.css`	`{"foregroundColor": "Violet"}`

snippet

The snippet keys define the visual appearance of snippets in Markdown files.

Key	Value
`snippet.selected`	`{"border": {"color": "Blue 50"}}`

string

The string keys define the visual appearance of string literals and related constructs across various contexts.

Key	Value
`string.binary`	`{"foregroundColor": "Lime"}`
`string.css`	`{"foregroundColor": "Green"}`
`string.escape`	`{"foregroundColor": "Pink"}`
`string.escape.alternative`	`{"foregroundColor": "Violet"}`
`string.escape.unicode`	`{"foregroundColor": "Pink"}`
`string.formatItem`	`{"foregroundColor": "Brown"}`
`string.regexp`	`{"foregroundColor": "Violet"}`

tag

The tag.html key defines the visual style applied to HTML tags.

fleet textattributes tag html section json theme plugin

Key	Value
`tag.html`	`{"foregroundColor": "#81858F"}`

tagName

The tagName keys define the visual appearance of tag names in HTML code.

Key	Value
`tagName.custom.html`	`{"foregroundColor": "Brown"}`
`tagName.html`	`{"foregroundColor": "Blue"}`

target

The target.match keys define the visual appearance of matched text or words in various contexts, such as search results or highlights.

Key	Value
`target.match`	`{"backgroundColor": "Yellow_150"}`
`target.match.word`	`{ "backgroundColor": "Yellow_130", "foregroundColor": "Black" }`

url

The url.css key defines the visual style applied to URLs within CSS code.

fleet textattributes url section json theme plugin

Key	Value
`url.css`	`{ "foregroundColor": "Blue", "textDecoration": {"color": "#97ADE1"} }`

value

The value.yaml key defines the visual style applied to values in YAML files.

Key	Value
`value.yaml`	`{"foregroundColor": "Violet"}`

palette

Defines named colors that can be used in the theme. This block is optional.

Key	Value
`Black`	`#000000`
`Blue`	`#1749BD`
`Blue 10`	`#1565C8`
`Blue 100`	`#EDF4FC`
`Blue 110`	`#F4F8FD`
`Blue 110-80`	`#F4F8FDCC`
`Blue 20`	`#0C6DDD`
`Blue 30`	`#0273EB`
`Blue 30-10`	`#0273EB1A`
`Blue 40`	`#1A85F6`
`Blue 50`	`#3691F9`
`Blue 60`	`#6DAAF7`
`Blue 70`	`#A2C8F7`
`Blue 80`	`#BFD9F8`
`Blue 90`	`#D8E8FA`
`BlueTint_10`	`#0870E41A`
`BlueTint_15`	`#0870E426`
`BlueTint_20`	`#0870E433`
`BlueTint_25`	`#0870E440`
`BlueTint_30`	`#0870E44D`
`BlueTint_40`	`#0870E466`
`BlueTint_5`	`#0870E40D`
`BlueTint_50`	`#0870E480`
`BlueTint_60`	`#0870E499`
`Blue_10`	`#06090F`
`Blue_100`	`#2A7DEB`
`Blue_110`	`#4B8DEC`
`Blue_120`	`#71A3EF`
`Blue_130`	`#A8C6F4`
`Blue_140`	`#D6E3F9`
`Blue_150`	`#E9EFFC`
`Blue_160`	`#F7F8FE`
`Blue_20`	`#111926`
`Blue_30`	`#18263C`
`Blue_40`	`#1E3455`
`Blue_50`	`#224271`
`Blue_60`	`#225090`
`Blue_70`	`#1D61BA`
`Blue_80`	`#1868CB`
`Blue_90`	`#0870E4`
`Brown`	`#664229`
`DarkTint_10`	`#18191B1A`
`DarkTint_15`	`#18191B26`
`DarkTint_20`	`#18191B33`
`DarkTint_3`	`#18191B08`
`DarkTint_30`	`#18191B4D`
`DarkTint_5`	`#18191B0D`
`DarkTint_60`	`#18191B99`
`DarkTint_7`	`#18191B12`
`DarkTint_70`	`#18191BB2`
`Gray 10`	`#181818`
`Gray 100`	`#EAEAEA`
`Gray 110`	`#F2F2F2`
`Gray 20`	`#383838`
`Gray 30`	`#484848`
`Gray 30-10`	`#4848481A`
`Gray 40`	`#767676`
`Gray 50`	`#898989`
`Gray 60`	`#A0A0A0`
`Gray 70`	`#C2C2C2`
`Gray 80`	`#D8D8D8`
`Gray 90`	`#E2E2E2`
`Green`	`#086E14`
`Green 10`	`#13664E`
`Green 20`	`#07805F`
`Green 30`	`#028764`
`Green 40`	`#3EA17F`
`Green 50`	`#4CA988`
`Green 60`	`#61B696`
`Green 70`	`#91D2B8`
`Green 80`	`#C7ECDC`
`Green 90`	`#ECF5F1`
`GreenTint_10`	`#14835E1A`
`GreenTint_20`	`#14835E33`
`GreenTint_40`	`#14835E66`
`GreenTint_50`	`#14835E80`
`Green_10`	`#060A08`
`Green_100`	`#169068`
`Green_110`	`#409D78`
`Green_120`	`#69B090`
`Green_130`	`#A3CEB8`
`Green_140`	`#D2E7DB`
`Green_150`	`#E6F2EA`
`Green_160`	`#F5FAF5`
`Green_20`	`#111B16`
`Green_30`	`#182921`
`Green_40`	`#1F392D`
`Green_50`	`#234939`
`Green_60`	`#255A44`
`Green_70`	`#216F52`
`Green_80`	`#1E7857`
`Green_90`	`#14835E`
`LightTint_10`	`#E0E1E41A`
`LightTint_12`	`#E0E1E41F`
`LightTint_15`	`#E0E1E426`
`LightTint_20`	`#E0E1E433`
`LightTint_30`	`#E0E1E44D`
`LightTint_5`	`#E0E1E40D`
`LightTint_70`	`#E0E1E4B2`
`LightTint_8`	`#E0E1E414`
`LightTint_80`	`#E0E1E4CC`
`Lime`	`#616605`
`Neutral_10`	`#090909`
`Neutral_100`	`#7A7F86`
`Neutral_110`	`#898E94`
`Neutral_120`	`#9EA3A8`
`Neutral_130`	`#C3C5C9`
`Neutral_140`	`#E0E1E4`
`Neutral_150`	`#EEEFF0`
`Neutral_160`	`#F8F8F9`
`Neutral_20`	`#18191B`
`Neutral_30`	`#252629`
`Neutral_40`	`#323438`
`Neutral_50`	`#3E4147`
`Neutral_60`	`#4C5157`
`Neutral_70`	`#5D636B`
`Neutral_80`	`#646B71`
`Neutral_90`	`#6E747B`
`Orange`	`#BF4A02`
`Pink`	`#A31D8D`
`Plum`	`#944A9E`
`Purple 10`	`#A336E9`
`Purple 20`	`#A842EB`
`Purple 30`	`#C98DF5`
`Purple 40`	`#E8CCFB`
`Purple 50`	`#FBF6FE`
`Purple 50-80`	`#FBF6FECC`
`Purple_10`	`#0B080D`
`Purple_100`	`#A660D4`
`Purple_110`	`#B174D9`
`Purple_120`	`#C08FE0`
`Purple_130`	`#D8B9EC`
`Purple_140`	`#EDDCF5`
`Purple_150`	`#F6EAF9`
`Purple_160`	`#FDF6FD`
`Purple_20`	`#1E1524`
`Purple_30`	`#2F2139`
`Purple_40`	`#412B50`
`Purple_50`	`#55346A`
`Purple_60`	`#6A3D88`
`Purple_70`	`#8646AE`
`Purple_80`	`#9049BE`
`Purple_90`	`#9D4FCF`
`Red 10`	`#C03248`
`Red 20`	`#CE364D`
`Red 30`	`#D93953`
`Red 40`	`#EA4B67`
`Red 50`	`#EE8A9B`
`Red 60`	`#EE8A9B`
`Red 70`	`#F3B4BF`
`Red 80`	`#FCF1F3`
`Red 90`	`#FCF1F3`
`RedTint_10`	`#D732511A`
`RedTint_15`	`#D7325126`
`RedTint_20`	`#D7325133`
`RedTint_30`	`#D732514D`
`RedTint_50`	`#D7325180`
`Red_10`	`#100607`
`Red_100`	`#E1465E`
`Red_110`	`#EC5D6F`
`Red_120`	`#F87C88`
`Red_130`	`#FFB0B5`
`Red_140`	`#FFD8DA`
`Red_150`	`#FFE9EA`
`Red_160`	`#FFF8F8`
`Red_20`	`#291214`
`Red_30`	`#401A1E`
`Red_40`	`#592228`
`Red_50`	`#742831`
`Red_60`	`#922C3B`
`Red_70`	`#B82D46`
`Red_80`	`#C72C49`
`Red_90`	`#D73251`
`Teal`	`#14646E`
`Teal Dark`	`#47676B`
`Transparent`	`#FFFFFF00`
`Violet`	`#5511BF`
`Violet 10`	`#4D40D8`
`Violet 20`	`#5A4CE5`
`Violet 30`	`#6658F3`
`Violet 40`	`#6D60F4`
`Violet 50`	`#A39BF9`
`Violet 60`	`#C3BEFB`
`Violet 70`	`#E3E1FE`
`VioletTint_40`	`#685AFB66`
`Violet_10`	`#080810`
`Violet_100`	`#726CF9`
`Violet_110`	`#7F80F9`
`Violet_120`	`#9599F9`
`Violet_130`	`#BDC0FA`
`Violet_140`	`#DEDFFC`
`Violet_150`	`#EEEDFD`
`Violet_160`	`#F9F7FE`
`Violet_20`	`#17172B`
`Violet_30`	`#222342`
`Violet_40`	`#2E2E61`
`Violet_50`	`#3A3982`
`Violet_60`	`#4843A8`
`Violet_70`	`#594CDD`
`Violet_80`	`#604EF3`
`Violet_90`	`#685AFB`
`White`	`#FFFFFF`
`Yellow 10`	`#9A651E`
`Yellow 20`	`#D08A1E`
`Yellow 30`	`#E1971B`
`Yellow 40`	`#F8AB17`
`Yellow 50`	`#FECF87`
`Yellow 60`	`#FEDFB0`
`Yellow 70`	`#FEF7EB`
`YellowBright_10`	`#E59408`
`YellowTint_20`	`#9F680C33`
`YellowTint_40`	`#9F680C66`
`YellowTint_50`	`#9F680C80`
`Yellow_10`	`#0C0805`
`Yellow_100`	`#B07203`
`Yellow_110`	`#BD8128`
`Yellow_120`	`#CD984D`
`Yellow_130`	`#E5BF8C`
`Yellow_140`	`#F5DEC2`
`Yellow_150`	`#FCEDDC`
`Yellow_160`	`#FFF8EF`
`Yellow_20`	`#20180C`
`Yellow_30`	`#302412`
`Yellow_40`	`#433016`
`Yellow_50`	`#573D18`
`Yellow_60`	`#6C4B18`
`Yellow_70`	`#865A15`
`Yellow_80`	`#916012`
`Yellow_90`	`#9F680C`

Last modified: 20 February 2025

Theme plugin: JSON keys reference

meta

theme

colors

ai

background

banner

Types of banners

border

Usage context

button

Button types

Styling components

Button states

checkbox

Checkbox states

Styling components

combobox

Visual states

completion

Styling Elements

dragAndDrop

Visual styling

dropdown

Main components

Visual states

editor

ghostButton

gitBranchTag

highlight

icon

inputField

island

layout

link

listItem

notification

parameterInfo

pillButton

popup

problemsWidget

progressBar

Progress bar types

progressInline

progressSpinner

remote

Color selection

remoteWorkspaceStatusLabel

scrollbar

search

separator

settings

shadow

shortcut

smartMode

statusBar

survey

Survey type and timing

tab

terminal

text

tileButton

toast

toggleButton

tooltip

tree

vim

textAttributes

ai

attribute

attributeName

attributeValue

comment

debug

diff

editor

entityReference

error

generic

hex