Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#3dd6a5
  • activityBar.background#0b0d12
  • activityBar.foreground#c9d2e3
  • activityBar.inactiveForeground#4f5868
  • activityBarBadge.background#3dd6a5
  • activityBarBadge.foreground#0b0d12
  • badge.background#3dd6a5
  • badge.foreground#0b0d12
  • breadcrumb.background#0f1117
  • breadcrumb.focusForeground#d6dbe6
  • breadcrumb.foreground#7e8796
  • dropdown.background#121621
  • dropdown.border#2a3242
  • dropdown.foreground#d6dbe6
  • editor.background#0f1117
  • editor.findMatchBorder#3dd6a5
  • editor.foreground#d6dbe6
  • editor.inactiveSelectionBackground#2a6f5b33
  • editor.selectionBackground#2a6f5b66
  • editor.selectionHighlightBackground#2a6f5b33
  • editorCursor.foreground#3dd6a5
  • editorHoverWidget.background#121621
  • editorHoverWidget.border#2a3242
  • editorIndentGuide.activeBackground1#3dd6a599
  • editorIndentGuide.background1#232733
  • editorLineNumber.activeForeground#3dd6a5
  • editorLineNumber.foreground#596275
  • editorOverviewRuler.background#0b0d12
  • editorOverviewRuler.border#0b0d12
  • editorSuggestWidget.background#121621
  • editorSuggestWidget.foreground#d6dbe6
  • editorSuggestWidget.highlightForeground#3dd6a5
  • editorSuggestWidget.selectedBackground#1b2230
  • editorWhitespace.foreground#2a2f3a
  • editorWidget.background#121621
  • editorWidget.border#2a3242
  • editorWidget.foreground#d6dbe6
  • focusBorder#3dd6a599
  • gitDecoration.conflictingResourceForeground#bb9af7
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#6b7382
  • gitDecoration.modifiedResourceForeground#f2c97d
  • gitDecoration.submoduleResourceForeground#7aa2f7
  • gitDecoration.untrackedResourceForeground#3dd6a5
  • input.background#121621
  • input.border#2a3242
  • input.foreground#d6dbe6
  • input.placeholderForeground#6b7382
  • inputOption.activeBackground#2a6f5b33
  • inputOption.activeBorder#3dd6a5
  • list.activeSelectionBackground#1b2230
  • list.activeSelectionForeground#d6dbe6
  • list.filterMatchBackground#2a6f5b33
  • list.highlightForeground#3dd6a5
  • list.hoverBackground#151b26
  • list.hoverForeground#d6dbe6
  • list.inactiveSelectionBackground#151b26
  • list.inactiveSelectionForeground#aeb7c7
  • menu.background#121621
  • menu.foreground#d6dbe6
  • menu.selectionBackground#1b2230
  • menu.separatorBackground#2a3242
  • minimap.background#0b0d12
  • minimapSlider.activeBackground#2a6f5b66
  • minimapSlider.background#2a6f5b22
  • minimapSlider.hoverBackground#2a6f5b44
  • notificationCenterHeader.background#0b0d12
  • notificationCenterHeader.foreground#c9d2e3
  • notifications.background#0f1117
  • notifications.border#2a3242
  • notifications.foreground#d6dbe6
  • notificationsErrorIcon.foreground#f7768e
  • notificationsInfoIcon.foreground#7aa2f7
  • notificationsWarningIcon.foreground#f2c97d
  • panel.background#0b0d12
  • panel.border#171b24
  • panelTitle.activeForeground#3dd6a5
  • panelTitle.inactiveForeground#7e8796
  • peekView.border#2a3242
  • peekViewEditor.background#10151f
  • peekViewResult.background#0f1117
  • peekViewTitle.background#0b0d12
  • peekViewTitleLabel.foreground#3dd6a5
  • scrollbarSlider.activeBackground#2a6f5b66
  • scrollbarSlider.background#2a6f5b22
  • scrollbarSlider.hoverBackground#2a6f5b44
  • selection.background#2a6f5b55
  • sideBar.background#0b0d12
  • sideBar.border#171b24
  • sideBar.foreground#aeb7c7
  • sideBarSectionHeader.background#121621
  • sideBarSectionHeader.foreground#c9d2e3
  • sideBarTitle.foreground#3dd6a5
  • statusBar.background#0b0d12
  • statusBar.border#171b24
  • statusBar.debuggingBackground#10151f
  • statusBar.debuggingForeground#c9d2e3
  • statusBar.foreground#9aa4b2
  • tab.activeBackground#0f1117
  • tab.activeBorderTop#3dd6a5
  • tab.activeForeground#d6dbe6
  • tab.hoverBackground#151b26
  • tab.hoverForeground#d6dbe6
  • tab.inactiveBackground#0b0d12
  • tab.inactiveForeground#7e8796
  • terminal.ansiBlack#0b0d12
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#4f5868
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#3dd6a5
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2c97d
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#3dd6a5
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#d6dbe6
  • terminal.ansiYellow#f2c97d
  • terminal.background#0b0d12
  • terminal.foreground#d6dbe6
  • terminalCursor.background#0b0d12
  • terminalCursor.foreground#3dd6a5
  • titleBar.activeBackground#0b0d12
  • titleBar.activeForeground#d6dbe6
  • titleBar.border#171b24
  • titleBar.inactiveBackground#0b0d12
  • titleBar.inactiveForeground#7e8796
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7382italic
keyword, storage.type, storage.modifier#7aa2f7
keyword.operator, punctuation#a2b0c7
string, constant.other.symbol#a6e3a1
constant.numeric, constant.language, constant.character#f2c97d
entity.name.function, support.function, variable.function#7dcfff
entity.name.type, entity.name.class, support.type, support.class#f2c97d
variable, variable.other, variable.parameter#e0af68
variable.other.property, support.type.property-name#c9d2e3
entity.name.tag#f7768e
entity.other.attribute-name#3dd6a5
markup.heading#7aa2f7bold
markup.bold#f2c97dbold
markup.italic#bb9af7italic
markup.quote#7e8796italic
markup.deleted#f7768e
markup.inserted#3dd6a5
invalid, invalid.illegal#f7768e