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.background#4F8A82
  • activityBar.border#4F8A82
  • activityBar.foreground#EAF2F0
  • activityBar.inactiveForeground#A8CBC3
  • activityBarBadge.background#4F8A82
  • activityBarBadge.foreground#EAF2F0
  • badge.background#4F8A82
  • badge.foreground#EAF2F0
  • button.background#4F8A82
  • button.foreground#EAF2F0
  • button.hoverBackground#3E6F68
  • button.secondaryBackground#CFE0DC
  • button.secondaryForeground#2E3D3B
  • contrastBorder#CFE0DC
  • dropdown.background#FFFFFF
  • dropdown.border#CFE0DC
  • editor.background#EAF2F0
  • editor.findMatchBackground#4F8A8260
  • editor.findMatchHighlightBackground#4F8A8235
  • editor.foreground#2E3D3B
  • editor.inactiveSelectionBackground#7FA8C925
  • editor.lineHighlightBackground#E0EBE8
  • editor.selectionBackground#7FA8C950
  • editor.selectionHighlightBackground#7FA8C930
  • editor.wordHighlightBackground#6E93AE30
  • editorBracketMatch.background#7FA8C940
  • editorBracketMatch.border#4F8A82
  • editorCursor.foreground#4F8A82
  • editorGroup.border#CFE0DC
  • editorGroupHeader.tabsBackground#E0EBE8
  • editorGutter.addedBackground#5C8F73
  • editorGutter.deletedBackground#C17A6E
  • editorGutter.modifiedBackground#6E93AE
  • editorHoverWidget.background#E0EBE8
  • editorHoverWidget.border#CFE0DC
  • editorIndentGuide.activeBackground1#4F8A8270
  • editorIndentGuide.background1#CFE0DC
  • editorLineNumber.activeForeground#4F8A82
  • editorLineNumber.foreground#A9BFBB
  • editorRuler.foreground#CFE0DC
  • editorSuggestWidget.background#E0EBE8
  • editorSuggestWidget.border#CFE0DC
  • editorSuggestWidget.selectedBackground#7FA8C940
  • editorWhitespace.foreground#CFE0DC
  • editorWidget.background#E0EBE8
  • editorWidget.border#CFE0DC
  • extensionButton.prominentBackground#4F8A82
  • extensionButton.prominentHoverBackground#3E6F68
  • focusBorder#4F8A8280
  • foreground#2E3D3B
  • input.background#FFFFFF
  • input.border#CFE0DC
  • input.foreground#2E3D3B
  • input.placeholderForeground#A9BFBB
  • list.activeSelectionBackground#7FA8C970
  • list.activeSelectionForeground#2E3D3B
  • list.highlightForeground#4F8A82
  • list.hoverBackground#D5E3DF
  • list.inactiveSelectionBackground#D5E3DF
  • notificationCenterHeader.background#E0EBE8
  • notifications.background#E0EBE8
  • notifications.border#CFE0DC
  • notifications.foreground#2E3D3B
  • panel.background#E0EBE8
  • panel.border#CFE0DC
  • panelTitle.activeForeground#2E3D3B
  • panelTitle.inactiveForeground#5C716E
  • peekView.border#4F8A82
  • peekViewEditor.background#EAF2F0
  • peekViewResult.background#E0EBE8
  • progressBar.background#4F8A82
  • scrollbarSlider.activeBackground#4F8A8280
  • scrollbarSlider.background#CFE0DC70
  • scrollbarSlider.hoverBackground#CFE0DCA0
  • sideBar.background#E0EBE8
  • sideBar.border#CFE0DC
  • sideBar.foreground#5C716E
  • sideBarSectionHeader.background#D5E3DF
  • sideBarSectionHeader.foreground#2E3D3B
  • sideBarTitle.foreground#2E3D3B
  • statusBar.background#4F8A82
  • statusBar.debuggingBackground#C17A6E
  • statusBar.foreground#EAF2F0
  • statusBar.noFolderBackground#4F8A82
  • statusBarItem.hoverBackground#3E6F68
  • tab.activeBackground#EAF2F0
  • tab.activeBorderTop#4F8A82
  • tab.activeForeground#2E3D3B
  • tab.border#CFE0DC
  • tab.inactiveBackground#D5E3DF
  • tab.inactiveForeground#5C716E
  • terminal.ansiBlack#2E3D3B
  • terminal.ansiBlue#6E93AE
  • terminal.ansiBrightBlack#A9BFBB
  • terminal.ansiBrightBlue#8FB0C8
  • terminal.ansiBrightCyan#6FA69E
  • terminal.ansiBrightGreen#79AC8E
  • terminal.ansiBrightMagenta#A897B8
  • terminal.ansiBrightRed#D89A8E
  • terminal.ansiBrightWhite#EAF2F0
  • terminal.ansiBrightYellow#D1B378
  • terminal.ansiCyan#4F8A82
  • terminal.ansiGreen#5C8F73
  • terminal.ansiMagenta#8E7C9E
  • terminal.ansiRed#C17A6E
  • terminal.ansiWhite#5C716E
  • terminal.ansiYellow#B99A5C
  • terminal.background#EAF2F0
  • terminal.foreground#2E3D3B
  • titleBar.activeBackground#3E6F68
  • titleBar.activeForeground#EAF2F0
  • titleBar.inactiveBackground#3E6F68
  • titleBar.inactiveForeground#B7D6CF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2E3D3B
comment, punctuation.definition.comment#8FA6A2italic
keyword, keyword.control, storage.type, storage.modifier#4F8A82bold
string, string.quoted#B98A5E
constant.numeric, constant.language, constant.character#6E93AE
entity.name.function, support.function, meta.function-call#C17A6E
variable, variable.parameter#2E3D3B
entity.name.type, entity.name.class, support.class, support.type#8E7C9Ebold
entity.name.tag#4F8A82
entity.other.attribute-name#B99A5C
keyword.operator, punctuation#6C817D
variable.other.property, meta.object-literal.key#5C8F86
markup.heading#4F8A82bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#EAF2F0