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#f0ebe5
  • activityBar.foreground#5a5060
  • activityBar.inactiveForeground#a098a0
  • activityBarBadge.background#c08090
  • activityBarBadge.foreground#f8f5f0
  • badge.background#c08090
  • badge.foreground#f8f5f0
  • breadcrumb.activeSelectionForeground#3a3545
  • breadcrumb.focusForeground#4a4555
  • breadcrumb.foreground#9a9098
  • breadcrumbPicker.background#f4f0ea
  • button.background#c08090
  • button.foreground#f8f5f0
  • button.hoverBackground#d090a0
  • dropdown.background#ffffff
  • dropdown.border#e0d8d0
  • dropdown.foreground#4a4555
  • editor.background#f8f5f0
  • editor.findMatchBackground#e0c8a0aa
  • editor.findMatchHighlightBackground#e0c8a055
  • editor.foreground#4a4555
  • editor.lineHighlightBackground#f0ebe5
  • editor.selectionBackground#d8c8e0aa
  • editor.selectionHighlightBackground#d8c8e055
  • editor.wordHighlightBackground#d8c8e044
  • editor.wordHighlightStrongBackground#d8c8e066
  • editorBracketMatch.background#d8c8e044
  • editorBracketMatch.border#a08090
  • editorCursor.background#f8f5f0
  • editorCursor.foreground#b06080
  • editorError.foreground#c06060
  • editorGroup.border#e8e0d8
  • editorGroupHeader.tabsBackground#f0ebe5
  • editorGutter.background#f8f5f0
  • editorIndentGuide.activeBackground#d0c0b8
  • editorIndentGuide.background#e8e0d8
  • editorInfo.foreground#5080a0
  • editorLineNumber.activeForeground#7a6070
  • editorLineNumber.foreground#b0a098
  • editorWarning.foreground#b08040
  • editorWhitespace.foreground#e0d8d0
  • gitDecoration.addedResourceForeground#609070
  • gitDecoration.conflictingResourceForeground#a06080
  • gitDecoration.deletedResourceForeground#c06060
  • gitDecoration.ignoredResourceForeground#b0a098
  • gitDecoration.modifiedResourceForeground#b08040
  • gitDecoration.untrackedResourceForeground#508090
  • input.background#ffffff
  • input.border#e0d8d0
  • input.foreground#4a4555
  • input.placeholderForeground#a098a0
  • inputOption.activeBorder#c08090
  • list.activeSelectionBackground#e0d0e0
  • list.activeSelectionForeground#3a3545
  • list.focusBackground#e0d0e0
  • list.highlightForeground#b06080
  • list.hoverBackground#f0ebe5
  • list.inactiveSelectionBackground#e8e0e0
  • minimap.background#f8f5f0
  • minimap.findMatchHighlight#e0c8a055
  • minimap.selectionHighlight#d8c8e055
  • panel.background#f4f0ea
  • panel.border#e8e0d8
  • panelTitle.activeBorder#c08090
  • panelTitle.activeForeground#4a4555
  • panelTitle.inactiveForeground#9a9098
  • peekView.border#a08090
  • peekViewEditor.background#f4f0ea
  • peekViewEditorGutter.background#f8f5f0
  • peekViewResult.background#f0ebe5
  • peekViewTitle.background#f4f0ea
  • progressBar.background#c08090
  • scrollbar.shadow#d0c8c0
  • scrollbarSlider.activeBackground#c8c0b8aa
  • scrollbarSlider.background#c8c0b855
  • scrollbarSlider.hoverBackground#c8c0b888
  • sideBar.background#f4f0ea
  • sideBar.border#e8e0d8
  • sideBar.foreground#6a6070
  • sideBarSectionHeader.background#f0ebe5
  • sideBarSectionHeader.foreground#4a4555
  • sideBarTitle.foreground#4a4555
  • statusBar.background#f0ebe5
  • statusBar.border#e8e0d8
  • statusBar.debuggingBackground#d0a0b0
  • statusBar.debuggingForeground#3a3545
  • statusBar.foreground#6a6070
  • statusBar.noFolderBackground#f8f5f0
  • tab.activeBackground#f8f5f0
  • tab.activeBorder#c08090
  • tab.activeBorderTop#00000000
  • tab.activeForeground#3a3545
  • tab.border#e8e0d8
  • tab.hoverBackground#f4f0ea
  • tab.inactiveBackground#f0ebe5
  • tab.inactiveForeground#9a9098
  • terminal.ansiBlack#4a4555
  • terminal.ansiBlue#5080a0
  • terminal.ansiBrightBlack#7a7080
  • terminal.ansiBrightBlue#6090b0
  • terminal.ansiBrightCyan#6090a0
  • terminal.ansiBrightGreen#70a080
  • terminal.ansiBrightMagenta#b07090
  • terminal.ansiBrightRed#d08080
  • terminal.ansiBrightWhite#f8f5f0
  • terminal.ansiBrightYellow#c09050
  • terminal.ansiCyan#508090
  • terminal.ansiGreen#609070
  • terminal.ansiMagenta#a06080
  • terminal.ansiRed#c06060
  • terminal.ansiWhite#f0ebe5
  • terminal.ansiYellow#b08040
  • terminal.background#f8f5f0
  • terminal.foreground#4a4555
  • terminalCursor.background#f8f5f0
  • terminalCursor.foreground#b06080
  • titleBar.activeBackground#f0ebe5
  • titleBar.activeForeground#4a4555
  • titleBar.inactiveBackground#f4f0ea
  • titleBar.inactiveForeground#9a9098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a098a0italic
string, string.quoted, string.template#609070—
constant.character.escape#508090—
constant.numeric#b07050—
constant.language#b07050—
constant.other#b07050—
keyword, storage.type, storage.modifier#a06080—
keyword.control#a06080—
keyword.operator#508090—
entity.name.function, meta.function-call, support.function#5080a0—
entity.name.class, entity.name.type.class, support.class#b08040—
entity.name.type, support.type#b08040—
variable, variable.other#4a4555—
variable.parameter#b07050italic
variable.other.property, variable.other.object.property#c06060—
meta.object-literal.key#c06060—
entity.name.tag#c06060—
entity.other.attribute-name#b08040italic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b08040—
support.type.property-name.css#5080a0—
support.constant.property-value.css#b07050—
punctuation#6a6070—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array#6a6070—
markup.heading, entity.name.section.markdown#c06060bold
markup.bold#b08040bold
markup.italic#a06080italic
markup.underline.link#5080a0—
markup.inline.raw, markup.fenced_code#609070—
support.type.property-name.json#c06060—
entity.name.tag.yaml#c06060—
string.regexp#508090—
invalid, invalid.illegal#f8f5f0—
invalid.deprecated#f8f5f0—