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 (bold caramel) =====
  • //tabs===== Editor tabs =====
  • //terminal===== Terminal (coffee ANSI) =====
  • //titlebar===== Title bar =====
  • //widgets===== Widgets / suggest =====
  • activityBar.background#0F0904
  • activityBar.border#0A0603
  • activityBar.foreground#E0A85B
  • activityBar.inactiveForeground#7A6350
  • activityBarBadge.background#E0728F
  • activityBarBadge.foreground#2A1B10
  • badge.background#E0728F
  • badge.foreground#2A1B10
  • button.background#C57B33
  • button.foreground#2A1B10
  • button.hoverBackground#D68F45
  • button.secondaryBackground#322317
  • button.secondaryForeground#ECDCC4
  • descriptionForeground#B49A80
  • dropdown.background#110A05
  • dropdown.border#322317
  • dropdown.foreground#ECDCC4
  • editor.background#170E08
  • editor.findMatchBackground#B5652A
  • editor.findMatchHighlightBackground#C57B3355
  • editor.foreground#ECDCC4
  • editor.lineHighlightBackground#241812A0
  • editor.rangeHighlightBackground#2E1F1466
  • editor.selectionBackground#402C1B
  • editor.selectionHighlightBackground#2E1F1488
  • editor.wordHighlightBackground#402C1B55
  • editor.wordHighlightStrongBackground#4A321C55
  • editorBracketHighlight.foreground1#E0A85B
  • editorBracketHighlight.foreground2#E0728F
  • editorBracketHighlight.foreground3#C79BE0
  • editorBracketHighlight.foreground4#9BB86B
  • editorBracketHighlight.foreground5#7FC9B0
  • editorBracketHighlight.foreground6#D9A17A
  • editorBracketHighlight.unexpectedBracket.foreground#EF7B63
  • editorBracketMatch.background#402C1B55
  • editorBracketMatch.border#C57B33
  • editorBracketPairGuide.activeBackground1#E0A85B66
  • editorBracketPairGuide.background1#E0A85B33
  • editorCursor.foreground#E0A85B
  • editorError.foreground#EF7B63
  • editorGroup.border#0A0603
  • editorGroupHeader.tabsBackground#0F0904
  • editorGroupHeader.tabsBorder#0A0603
  • editorGutter.addedBackground#9BB86B
  • editorGutter.deletedBackground#EF7B63
  • editorGutter.modifiedBackground#E08A4E
  • editorHoverWidget.background#110A05
  • editorHoverWidget.border#322317
  • editorIndentGuide.activeBackground1#5F4428
  • editorIndentGuide.background1#2E2116
  • editorInfo.foreground#7FC9B0
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#8A7259
  • editorInlayHint.parameterForeground#9A8468
  • editorInlayHint.typeForeground#9A8468
  • editorLineNumber.activeForeground#E0A85B
  • editorLineNumber.foreground#6E5642
  • editorLink.activeForeground#E0A85B
  • editorRuler.foreground#2E2116
  • editorSuggestWidget.background#110A05
  • editorSuggestWidget.border#322317
  • editorSuggestWidget.highlightForeground#E0A85B
  • editorSuggestWidget.selectedBackground#2E1E12
  • editorWarning.foreground#E0A85B
  • editorWhitespace.foreground#322317
  • editorWidget.background#110A05
  • editorWidget.border#322317
  • errorForeground#EF7B63
  • focusBorder#C57B33
  • foreground#ECDCC4
  • gitDecoration.conflictingResourceForeground#E08A4E
  • gitDecoration.deletedResourceForeground#EF7B63
  • gitDecoration.ignoredResourceForeground#5A4636
  • gitDecoration.modifiedResourceForeground#E0A85B
  • gitDecoration.untrackedResourceForeground#9BB86B
  • icon.foreground#C9B79C
  • input.background#110A05
  • input.border#322317
  • input.foreground#ECDCC4
  • input.placeholderForeground#7A6350
  • list.activeSelectionBackground#2E1E12
  • list.activeSelectionForeground#F3E6D2
  • list.errorForeground#EF7B63
  • list.focusBackground#2E1E12
  • list.highlightForeground#E0A85B
  • list.hoverBackground#201510
  • list.inactiveSelectionBackground#201510
  • list.inactiveSelectionForeground#ECDCC4
  • list.warningForeground#E0A85B
  • minimap.findMatchHighlight#C57B33
  • minimapSlider.background#5F442844
  • panel.background#120A05
  • panel.border#0A0603
  • panelTitle.activeForeground#ECDCC4
  • panelTitle.inactiveForeground#7A6350
  • peekView.border#C57B33
  • peekViewEditor.background#120A05
  • peekViewResult.background#0F0904
  • peekViewTitle.background#1E130C
  • progressBar.background#C57B33
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#C57B3388
  • scrollbarSlider.background#5F442844
  • scrollbarSlider.hoverBackground#5F442888
  • selection.background#402C1B
  • sideBar.background#120A05
  • sideBar.border#0A0603
  • sideBar.foreground#C9B79C
  • sideBarSectionHeader.background#1E130C
  • sideBarSectionHeader.foreground#ECDCC4
  • sideBarTitle.foreground#E0A85B
  • statusBar.background#B5652A
  • statusBar.border#8A4A1C
  • statusBar.debuggingBackground#E0728F
  • statusBar.debuggingForeground#2A1B10
  • statusBar.foreground#FDF3E4
  • statusBar.noFolderBackground#8A4A1C
  • statusBarItem.remoteBackground#8A4A1C
  • statusBarItem.remoteForeground#FDF3E4
  • tab.activeBackground#170E08
  • tab.activeBorderTop#C57B33
  • tab.activeForeground#F3E6D2
  • tab.border#0A0603
  • tab.hoverBackground#201510
  • tab.inactiveBackground#110A05
  • tab.inactiveForeground#7A6350
  • terminal.ansiBlack#322317
  • terminal.ansiBlue#7FC9B0
  • terminal.ansiBrightBlack#7A6350
  • terminal.ansiBrightBlue#95D6C1
  • terminal.ansiBrightCyan#A5E0D0
  • terminal.ansiBrightGreen#B0CB7A
  • terminal.ansiBrightMagenta#D6B2EC
  • terminal.ansiBrightRed#EF8AA3
  • terminal.ansiBrightWhite#F3E6D2
  • terminal.ansiBrightYellow#EEBE77
  • terminal.ansiCyan#8FD4C0
  • terminal.ansiGreen#9BB86B
  • terminal.ansiMagenta#C79BE0
  • terminal.ansiRed#E0728F
  • terminal.ansiWhite#ECDCC4
  • terminal.ansiYellow#E0A85B
  • terminal.background#170E08
  • terminal.foreground#ECDCC4
  • terminal.selectionBackground#402C1B
  • titleBar.activeBackground#0F0904
  • titleBar.activeForeground#ECDCC4
  • titleBar.border#0A0603
  • titleBar.inactiveBackground#120A05
  • titleBar.inactiveForeground#7A6350
  • tree.indentGuidesStroke#322317
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A7259italic
string, string.quoted, punctuation.definition.string#9BB86B—
constant.character.escape, punctuation.definition.template-expression#E0A85B—
constant.numeric, constant.other.unit#E08A4E—
constant.language, support.constant#E0728F—
keyword, keyword.control, keyword.other#E0728Fbold
keyword.operator#D9A17A—
storage, storage.type, storage.modifier#C79BE0bold
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#C79BE0—
entity.name.function, support.function, meta.function-call entity.name.function#E0A85B—
variable, meta.definition.variable.name, variable.other.readwrite#ECDCC4—
variable.parameter#E4B98Citalic
variable.other.property, variable.other.object.property, support.variable.property#7FC9B0—
variable.language#E0728Fitalic
punctuation, meta.brace, punctuation.separator, punctuation.terminator#B49A80—
entity.name.tag, punctuation.definition.tag#E0728F—
entity.other.attribute-name#E0A85Bitalic
support.type.property-name.json, meta.object-literal.key, support.type.property-name#E0A85B—
meta.decorator, punctuation.decorator, entity.name.function.decorator#E08A4E—
string.regexp, constant.other.character-class.regexp#7FC9B0—
invalid, invalid.illegal#EF7B63—
markup.heading, entity.name.section.markdown#E0728Fbold
markup.bold#E08A4Ebold
markup.italic#C79BE0italic
markup.underline.link, string.other.link#E0A85B—
markup.inline.raw, markup.fenced_code, markup.quote#9BB86B—
markup.inserted#9BB86B—
markup.deleted#EF7B63—