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#1f1418
  • activityBar.foreground#e74c6c
  • activityBar.inactiveForeground#7a4757
  • activityBarBadge.background#e74c6c
  • activityBarBadge.foreground#2a1a1f
  • badge.background#e74c6c
  • badge.foreground#2a1a1f
  • button.background#e74c6c
  • button.foreground#2a1a1f
  • button.hoverBackground#d13a59
  • debugToolBar.background#1f1418
  • debugToolBar.border#4d2f3a
  • editor.background#2a1a1f
  • editor.findMatchBackground#a13e5a
  • editor.findMatchHighlightBackground#a13e5a55
  • editor.foreground#f5c5d5
  • editor.inactiveSelectionBackground#372027
  • editor.lineHighlightBackground#281c21
  • editor.selectionBackground#4a2a35
  • editor.wordHighlightBackground#4a2a3555
  • editor.wordHighlightStrongBackground#4a2a3599
  • editorBracketMatch.background#4a2a35
  • editorBracketMatch.border#e74c6c
  • editorCursor.foreground#f5c5d5
  • editorError.foreground#ff6b9d
  • editorGroupHeader.tabsBackground#1f1418
  • editorHint.foreground#ffa8bc
  • editorIndentGuide.activeBackground#4d2f3a
  • editorIndentGuide.background#372027
  • editorInfo.foreground#e74c6c
  • editorLineNumber.activeForeground#e74c6c
  • editorLineNumber.foreground#4d2f3a
  • editorSuggestWidget.background#1f1418
  • editorSuggestWidget.border#4d2f3a
  • editorSuggestWidget.selectedBackground#4a2a35
  • editorWarning.foreground#ffb3c6
  • editorWhitespace.foreground#4d2f3a
  • editorWidget.background#1f1418
  • editorWidget.border#4d2f3a
  • extensionButton.prominentBackground#e74c6c
  • extensionButton.prominentForeground#2a1a1f
  • extensionButton.prominentHoverBackground#d13a59
  • gitDecoration.conflictingResourceForeground#ff8da1
  • gitDecoration.deletedResourceForeground#ff6b9d
  • gitDecoration.ignoredResourceForeground#7a4757
  • gitDecoration.modifiedResourceForeground#ffb3c6
  • gitDecoration.untrackedResourceForeground#ffa8bc
  • input.background#2a1a1f
  • input.border#4d2f3a
  • input.foreground#f5c5d5
  • inputOption.activeBackground#4a2a35
  • inputOption.activeForeground#f5c5d5
  • list.activeSelectionBackground#4a2a35
  • list.activeSelectionForeground#f5c5d5
  • list.hoverBackground#372027
  • list.hoverForeground#f5c5d5
  • list.inactiveSelectionBackground#372027
  • notificationCenter.border#4d2f3a
  • notifications.background#1f1418
  • notifications.border#4d2f3a
  • notificationToast.border#4d2f3a
  • panel.background#1f1418
  • panel.border#2a1a1f
  • panelTitle.activeBorder#e74c6c
  • panelTitle.activeForeground#f5c5d5
  • panelTitle.inactiveForeground#7a4757
  • peekViewEditor.background#1f1418
  • peekViewResult.background#1f1418
  • peekViewTitle.background#2a1a1f
  • pickerGroup.border#4d2f3a
  • pickerGroup.foreground#e74c6c
  • scrollbarSlider.activeBackground#7a4757
  • scrollbarSlider.background#4d2f3a80
  • scrollbarSlider.hoverBackground#4d2f3a
  • sideBar.background#1f1418
  • sideBar.foreground#d99fad
  • sideBarSectionHeader.background#2a1a1f
  • sideBarSectionHeader.foreground#e74c6c
  • sideBarTitle.foreground#f5c5d5
  • statusBar.background#1f1418
  • statusBar.debuggingBackground#ff6b9d
  • statusBar.debuggingForeground#2a1a1f
  • statusBar.foreground#d99fad
  • statusBar.noFolderBackground#1f1418
  • tab.activeBackground#2a1a1f
  • tab.activeForeground#f5c5d5
  • tab.border#1f1418
  • tab.inactiveBackground#1f1418
  • tab.inactiveForeground#7a4757
  • terminal.ansiBlack#523a44
  • terminal.ansiBlue#e74c6c
  • terminal.ansiBrightBlack#7a4757
  • terminal.ansiBrightBlue#e74c6c
  • terminal.ansiBrightCyan#ffa8bc
  • terminal.ansiBrightGreen#ff9eb3
  • terminal.ansiBrightMagenta#ff8da1
  • terminal.ansiBrightRed#ff6b9d
  • terminal.ansiBrightWhite#f5c5d5
  • terminal.ansiBrightYellow#ffb3c6
  • terminal.ansiCyan#ffa8bc
  • terminal.ansiGreen#ff9eb3
  • terminal.ansiMagenta#ff8da1
  • terminal.ansiRed#ff6b9d
  • terminal.ansiWhite#f5c5d5
  • terminal.ansiYellow#ffb3c6
  • terminal.background#2a1a1f
  • terminal.foreground#f5c5d5
  • titleBar.activeBackground#1f1418
  • titleBar.activeForeground#f5c5d5
  • titleBar.inactiveBackground#1f1418
  • titleBar.inactiveForeground#7a4757

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a4757italic
keyword, storage.type, storage.modifier#ff8da1
keyword.control, keyword.operator#ff8da1
string, string.quoted#ff9eb3
constant.numeric, constant.language#ffb3c6
constant.character.escape#ff8da1
entity.name.function, support.function#e74c6c
entity.name.class, entity.name.type, support.class#ffb3c6
variable, variable.other#f5c5d5
variable.parameter#d99fad
entity.name.tag#ff6b9d
entity.other.attribute-name#ff8da1
support.type.property-name#e74c6c
markup.heading#e74c6cbold
markup.bold#ffb3c6bold
markup.italic#ff8da1italic
markup.underlineunderline
markup.inline.raw#ff9eb3
punctuation.definition.tag#7a4757
meta.function-call#e74c6c
invalid#ff6b9d