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.
meta
The meta section defines the main properties of your theme, such as its name, version, and type. These properties help identify and manage multiple themes or their versions.
theme
The theme subsection specifies key attributes of the JSON configuration for a theme: its name, version, or fallback options.
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
The colors section defines colors for UI elements like buttons, headers, and backgrounds.
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.
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.
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.
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.
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.
Main components
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.
Visual states
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.
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.
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.
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.
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, where you can select devices or configurations in Kotlin Multiplatform projects.
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.
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.
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.
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.
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.
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
tooltip
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.
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.
