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#e8f2ee
  • activityBar.foreground#3a4750
  • activityBar.inactiveForeground#a3b5b0
  • activityBarBadge.background#00bcc8
  • activityBarBadge.foreground#ffffff
  • badge.background#d0ff00
  • badge.foreground#3a4750
  • button.background#00bcc8
  • button.foreground#ffffff
  • button.hoverBackground#00a6b0
  • dropdown.background#ffffff
  • dropdown.border#cfe0db
  • editor.background#f3f7f5
  • editor.findMatchBackground#d0ff00aa
  • editor.findMatchHighlightBackground#d0ff0066
  • editor.foreground#3a4750
  • editor.lineHighlightBackground#e6f2ef
  • editor.selectionBackground#a8e6df
  • editor.selectionHighlightBackground#a8e6df88
  • editorCursor.foreground#00919c
  • editorGroup.border#dfe9e6
  • editorGroupHeader.tabsBackground#e8f2ee
  • editorIndentGuide.activeBackground#c3d6d1
  • editorIndentGuide.background#dfe9e6
  • editorLineNumber.activeForeground#00919c
  • editorLineNumber.foreground#b8c8c4
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.highlightForeground#00919c
  • editorSuggestWidget.selectedBackground#d4ece6
  • editorWhitespace.foreground#d2e0dc
  • editorWidget.background#ffffff
  • focusBorder#00bcc8
  • gitDecoration.addedResourceForeground#8fc93a
  • gitDecoration.deletedResourceForeground#e8736b
  • gitDecoration.modifiedResourceForeground#e3b341
  • gitDecoration.untrackedResourceForeground#00919c
  • input.background#ffffff
  • input.border#cfe0db
  • input.foreground#3a4750
  • inputOption.activeBorder#00bcc8
  • list.activeSelectionBackground#d4ece6
  • list.activeSelectionForeground#1d4a48
  • list.hoverBackground#ecf5f2
  • list.inactiveSelectionBackground#ecf5f2
  • panel.background#e8f2ee
  • panel.border#dfe9e6
  • panelTitle.activeBorder#00bcc8
  • panelTitle.activeForeground#3a4750
  • panelTitle.inactiveForeground#a3b5b0
  • peekViewEditor.background#f3f7f5
  • peekViewResult.background#e8f2ee
  • scrollbarSlider.activeBackground#a3b5b0
  • scrollbarSlider.background#c3d6d166
  • scrollbarSlider.hoverBackground#c3d6d1aa
  • sideBar.background#e8f2ee
  • sideBar.foreground#5b6b66
  • sideBarSectionHeader.background#f3f7f5
  • sideBarTitle.foreground#3a4750
  • statusBar.background#bdeee6
  • statusBar.debuggingBackground#d0ff00
  • statusBar.debuggingForeground#3a4750
  • statusBar.foreground#1d4a48
  • statusBar.noFolderBackground#e8f2ee
  • tab.activeBackground#f3f7f5
  • tab.activeBorderTop#00bcc8
  • tab.activeForeground#3a4750
  • tab.border#dfe9e6
  • tab.inactiveBackground#e8f2ee
  • tab.inactiveForeground#a3b5b0
  • terminal.ansiBlue#00919c
  • terminal.ansiCyan#3dd6c8
  • terminal.ansiGreen#8fc93a
  • terminal.ansiMagenta#e387c4
  • terminal.ansiRed#e8736b
  • terminal.ansiYellow#e3b341
  • terminal.background#f3f7f5
  • terminal.foreground#3a4750
  • titleBar.activeBackground#e8f2ee
  • titleBar.activeForeground#3a4750
  • titleBar.inactiveBackground#e8f2ee
  • titleBar.inactiveForeground#a3b5b0
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9fb0abitalic
string, string.quoted#6fa022
constant.numeric, constant.language, constant.character#d98b3f
keyword, storage.type, storage.modifier#00919citalic
entity.name.function, support.function#1d8b94
entity.name.class, entity.name.type, support.class#6fa022bold
variable, variable.parameter#3a4750
variable.other.property, variable.other.object.property#5b6b66
entity.other.attribute-name, entity.name.tag#cf5fa0
punctuation, meta.brace#7c8d88
markup.bold#d98b3fbold
markup.italic#00919citalic
markup.heading#00919cbold