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.

  • //===== Base =====
  • //activitybar===== Activity bar =====
  • //brackets===== Bracket pair colours (coffee, not rainbow) =====
  • //editor===== Editor =====
  • //git===== Git decorations =====
  • //gutter===== Gutter / diff =====
  • //inlayhints===== Inlay hints (type / parameter) =====
  • //inputs===== Inputs / dropdowns / buttons =====
  • //lists===== Lists / trees =====
  • //panel===== Panels =====
  • //scrollbar===== Scrollbar / minimap =====
  • //sidebar===== Side bar =====
  • //statusbar===== Status bar (latte) =====
  • //tabs===== Editor tabs =====
  • //terminal===== Terminal (coffee ANSI) =====
  • //titlebar===== Title bar =====
  • //widgets===== Widgets / suggest =====
  • activityBar.background#E9DEC6
  • activityBar.border#E1D3B8
  • activityBar.foreground#6A5240
  • activityBar.inactiveForeground#AC967A
  • activityBarBadge.background#A66A80
  • activityBarBadge.foreground#FBF5EA
  • badge.background#A66A80
  • badge.foreground#FBF5EA
  • button.background#9C7B5E
  • button.foreground#F8F1E4
  • button.hoverBackground#8A6A50
  • button.secondaryBackground#DFD0B2
  • button.secondaryForeground#504336
  • descriptionForeground#8A7A6A
  • dropdown.background#F8F2E6
  • dropdown.border#D8C6A6
  • dropdown.foreground#504336
  • editor.background#F5EEE1
  • editor.findMatchBackground#DEC79E
  • editor.findMatchHighlightBackground#E9DBB988
  • editor.foreground#504336
  • editor.lineHighlightBackground#EEE4CF80
  • editor.rangeHighlightBackground#ECE1CB66
  • editor.selectionBackground#E4D6BE
  • editor.selectionHighlightBackground#EBDFC988
  • editor.wordHighlightBackground#E7DBC155
  • editor.wordHighlightStrongBackground#DFD0B255
  • editorBracketHighlight.foreground1#A9805A
  • editorBracketHighlight.foreground2#A66A80
  • editorBracketHighlight.foreground3#8271A0
  • editorBracketHighlight.foreground4#66814A
  • editorBracketHighlight.foreground5#5E8378
  • editorBracketHighlight.foreground6#56778C
  • editorBracketHighlight.unexpectedBracket.foreground#B3564E
  • editorBracketMatch.background#DEC79E55
  • editorBracketMatch.border#B79A6E
  • editorBracketPairGuide.activeBackground1#A9805A66
  • editorBracketPairGuide.background1#A9805A33
  • editorCursor.foreground#8A6A50
  • editorError.foreground#B3564E
  • editorGroup.border#E1D3B8
  • editorGroupHeader.tabsBackground#EBE1CC
  • editorGroupHeader.tabsBorder#E1D3B8
  • editorGutter.addedBackground#66814A
  • editorGutter.deletedBackground#B3564E
  • editorGutter.modifiedBackground#A9805A
  • editorHoverWidget.background#F3EBDA
  • editorHoverWidget.border#D8C6A6
  • editorIndentGuide.activeBackground1#CDBB98
  • editorIndentGuide.background1#E6DAC1
  • editorInfo.foreground#56778C
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#8F7C68
  • editorInlayHint.parameterForeground#8A745E
  • editorInlayHint.typeForeground#8A745E
  • editorLineNumber.activeForeground#8A6A50
  • editorLineNumber.foreground#B7A688
  • editorLink.activeForeground#56778C
  • editorRuler.foreground#E6DAC1
  • editorSuggestWidget.background#F3EBDA
  • editorSuggestWidget.border#D8C6A6
  • editorSuggestWidget.highlightForeground#A0562D
  • editorSuggestWidget.selectedBackground#E4D6BE
  • editorWarning.foreground#B08A4E
  • editorWhitespace.foreground#DECFB4
  • editorWidget.background#F3EBDA
  • editorWidget.border#D8C6A6
  • errorForeground#B3564E
  • focusBorder#C2A882
  • foreground#504336
  • gitDecoration.conflictingResourceForeground#A0562D
  • gitDecoration.deletedResourceForeground#B3564E
  • gitDecoration.ignoredResourceForeground#B5A48C
  • gitDecoration.modifiedResourceForeground#A9805A
  • gitDecoration.untrackedResourceForeground#66814A
  • icon.foreground#7A6A58
  • input.background#F8F2E6
  • input.border#D8C6A6
  • input.foreground#504336
  • input.placeholderForeground#A8937E
  • list.activeSelectionBackground#E4D6BE
  • list.activeSelectionForeground#504336
  • list.errorForeground#B3564E
  • list.focusBackground#E4D6BE
  • list.highlightForeground#A0562D
  • list.hoverBackground#EEE3CE
  • list.inactiveSelectionBackground#EADEC6
  • list.inactiveSelectionForeground#504336
  • list.warningForeground#B08A4E
  • minimap.findMatchHighlight#B79A6E
  • minimapSlider.background#CDBB9844
  • panel.background#EEE5D2
  • panel.border#E1D3B8
  • panelTitle.activeForeground#504336
  • panelTitle.inactiveForeground#93806A
  • peekView.border#C2A882
  • peekViewEditor.background#F1E8D6
  • peekViewResult.background#EEE5D2
  • peekViewTitle.background#E8DCC5
  • progressBar.background#A66A80
  • scrollbar.shadow#3B2F2814
  • scrollbarSlider.activeBackground#B79A6E88
  • scrollbarSlider.background#CDBB9855
  • scrollbarSlider.hoverBackground#CDBB9888
  • selection.background#E4D6BE
  • sideBar.background#EEE5D2
  • sideBar.border#E1D3B8
  • sideBar.foreground#5F5040
  • sideBarSectionHeader.background#E8DCC5
  • sideBarSectionHeader.foreground#5F5040
  • sideBarTitle.foreground#7A6A58
  • statusBar.background#9C7B5E
  • statusBar.border#8A6A50
  • statusBar.debuggingBackground#A66A80
  • statusBar.debuggingForeground#FBF5EA
  • statusBar.foreground#F8F1E4
  • statusBar.noFolderBackground#8A6A50
  • statusBarItem.remoteBackground#8A6A50
  • statusBarItem.remoteForeground#F8F1E4
  • tab.activeBackground#F5EEE1
  • tab.activeBorderTop#A66A80
  • tab.activeForeground#504336
  • tab.border#E1D3B8
  • tab.hoverBackground#F1E7D3
  • tab.inactiveBackground#E9DEC8
  • tab.inactiveForeground#93806A
  • terminal.ansiBlack#504336
  • terminal.ansiBlue#56778C
  • terminal.ansiBrightBlack#93806A
  • terminal.ansiBrightBlue#6A88A0
  • terminal.ansiBrightCyan#719588
  • terminal.ansiBrightGreen#75904F
  • terminal.ansiBrightMagenta#9585B0
  • terminal.ansiBrightRed#B87E92
  • terminal.ansiBrightWhite#F5EEE1
  • terminal.ansiBrightYellow#B8946A
  • terminal.ansiCyan#5E8378
  • terminal.ansiGreen#66814A
  • terminal.ansiMagenta#8271A0
  • terminal.ansiRed#A66A80
  • terminal.ansiWhite#EEE5D2
  • terminal.ansiYellow#A9805A
  • terminal.background#F5EEE1
  • terminal.foreground#504336
  • terminal.selectionBackground#E4D6BE
  • titleBar.activeBackground#E9DEC6
  • titleBar.activeForeground#504336
  • titleBar.border#E1D3B8
  • titleBar.inactiveBackground#ECE2CD
  • titleBar.inactiveForeground#8A755E
  • tree.indentGuidesStroke#DECFB4
  • widget.shadow#3B2F2814

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AC9C8Aitalic
string, string.quoted, punctuation.definition.string#66814A—
constant.character.escape, punctuation.definition.template-expression#A9805A—
constant.numeric, constant.other.unit#A9805A—
constant.language, support.constant#A66A80—
keyword, keyword.control, keyword.other#A66A80—
keyword.operator#9A7C66—
storage, storage.type, storage.modifier#8271A0—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#8271A0—
entity.name.function, support.function, meta.function-call entity.name.function#56778C—
variable, meta.definition.variable.name, variable.other.readwrite#504336—
variable.parameter#8A745Eitalic
variable.other.property, variable.other.object.property, support.variable.property#5E8378—
variable.language#A66A80italic
punctuation, meta.brace, punctuation.separator, punctuation.terminator#8F7C68—
entity.name.tag, punctuation.definition.tag#A66A80—
entity.other.attribute-name#A9805Aitalic
support.type.property-name.json, meta.object-literal.key, support.type.property-name#56778C—
meta.decorator, punctuation.decorator, entity.name.function.decorator#9C6E45—
string.regexp, constant.other.character-class.regexp#5E8378—
invalid, invalid.illegal#B3564E—
markup.heading, entity.name.section.markdown#A66A80bold
markup.bold#9C6E45bold
markup.italic#8271A0italic
markup.underline.link, string.other.link#56778C—
markup.inline.raw, markup.fenced_code, markup.quote#66814A—
markup.inserted#66814A—
markup.deleted#B3564E—
Morning Brew by Artful Doidger - VS Code Theme