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#D6B1BD
  • activityBar.foreground#B6557A
  • activityBar.inactiveForeground#A07587
  • activityBarBadge.background#B31654
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D83778
  • badge.foreground#FFFFFF
  • button.background#BA6A88
  • button.foreground#FFFFFF
  • button.hoverBackground#AA5F7D
  • commandCenter.activeBackground#F3DFE8
  • commandCenter.activeBorder#DAB2C2
  • commandCenter.activeForeground#634953
  • commandCenter.background#EDD6DF
  • commandCenter.border#E3C8D3
  • commandCenter.foreground#906478
  • commandCenter.inactiveBorder#E3C8D3
  • commandCenter.inactiveForeground#A88593
  • dropdown.background#FEFCFC
  • dropdown.border#E3C8D3
  • dropdown.foreground#593F47
  • editor.background#FAEEF3
  • editor.findMatchBackground#E36B9270
  • editor.findMatchHighlightBackground#E36B9250
  • editor.foreground#936B7D
  • editor.lineHighlightBackground#F5E1EA
  • editor.selectionBackground#E36B9240
  • editor.wordHighlightBackground#E36B9250
  • editorBracketHighlight.foreground1#639CB8
  • editorBracketHighlight.foreground2#639CB8
  • editorBracketHighlight.foreground3#639CB8
  • editorBracketHighlight.foreground4#639CB8
  • editorBracketHighlight.foreground5#639CB8
  • editorBracketHighlight.foreground6#639CB8
  • editorBracketMatch.background#FF5F9F30
  • editorBracketMatch.border#F2ACC9
  • editorCursor.foreground#B56784
  • editorGroupHeader.tabsBackground#EDD6DE
  • editorGutter.addedBackground#358D00
  • editorGutter.deletedBackground#C92331
  • editorGutter.modifiedBackground#B77036
  • editorIndentGuide.activeBackground#DCBACA
  • editorIndentGuide.background#E4C1CF
  • editorLineNumber.activeForeground#A86E83
  • editorLineNumber.foreground#BE90A1
  • editorRuler.foreground#E3C8D3
  • editorWidget.background#FAEEF3
  • editorWidget.border#E3C8D3
  • focusBorder#FBBCD5
  • gitDecoration.deletedResourceForeground#C92331
  • gitDecoration.ignoredResourceForeground#906E7AC0
  • gitDecoration.modifiedResourceForeground#DF22AA
  • gitDecoration.untrackedResourceForeground#AE29DE
  • icon.foreground#513A43
  • input.background#FEFCFC
  • input.border#E3C8D3
  • input.foreground#593F47
  • input.placeholderForeground#BE9BA7
  • inputOption.activeBorder#C57191
  • list.activeSelectionBackground#F7E4EB
  • list.activeSelectionForeground#593F47
  • list.highlightForeground#DC6191
  • list.hoverBackground#F6DFE7
  • list.inactiveSelectionBackground#F6E5EB
  • menubar.selectionBackground#CC92A8
  • menubar.selectionForeground#513A43
  • minimap.selectionHighlight#C5719160
  • panel.background#F3DFE8
  • panel.border#CA99AF
  • panelTitle.activeBorder#E24180
  • panelTitle.activeForeground#E24180
  • panelTitle.inactiveForeground#906572
  • peekView.border#C57191
  • peekViewEditor.background#FAEEF3
  • peekViewResult.background#F3DFE8
  • peekViewTitle.background#EFD7E1
  • progressBar.background#C57191
  • quickInput.background#FAEEF3
  • quickInput.foreground#593F47
  • quickInputList.focusBackground#F1D3DF
  • quickInputList.focusForeground#593F47
  • scrollbarSlider.activeBackground#C5719180
  • scrollbarSlider.background#C5719160
  • scrollbarSlider.hoverBackground#C5719180
  • selection.background#C5719160
  • sideBar.background#EDD6DE
  • sideBar.foreground#8D6474
  • sideBarSectionHeader.background#E1C1CB
  • sideBarSectionHeader.foreground#64283E
  • sideBarTitle.foreground#64283E
  • statusBar.background#DAB2BF
  • statusBar.debuggingBackground#E1AEBF
  • statusBar.focusBorder#C57191
  • statusBar.foreground#742F54
  • statusBar.noFolderBackground#DAB2BF
  • statusBarItem.activeBackground#CC92A8
  • statusBarItem.focusBorder#C57191
  • statusBarItem.hoverBackground#D69FB5
  • statusBarItem.hoverForeground#7D2F53
  • statusBarItem.remoteBackground#BA6A88
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#AA5F7D
  • statusBarItem.remoteHoverForeground#FFFFFF
  • tab.activeBackground#FF80BD0E
  • tab.activeBorder#D72695
  • tab.activeBorderTop#DEC9D100
  • tab.activeForeground#D72695
  • tab.border#DEC9D100
  • tab.inactiveBackground#F0DEE6
  • tab.inactiveForeground#916F77
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#00BFFF
  • terminal.ansiBrightBlack#ECECEC
  • terminal.ansiBrightBlue#72DCFF
  • terminal.ansiBrightCyan#78FFFF
  • terminal.ansiBrightGreen#73FF73
  • terminal.ansiBrightMagenta#F89CFF
  • terminal.ansiBrightRed#FF83C1
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEE16B
  • terminal.ansiCyan#00EFEF
  • terminal.ansiGreen#00DD00
  • terminal.ansiMagenta#F78BFF
  • terminal.ansiRed#FF72B9
  • terminal.ansiWhite#F8F8F8
  • terminal.ansiYellow#F5C400
  • terminal.background#77364B
  • terminal.foreground#FFDFEB
  • terminal.selectionBackground#509BE080
  • terminalStickyScroll.background#8F4159
  • terminalStickyScrollHover.background#A1526D
  • textLink.activeForeground#AA5F7D
  • textLink.foreground#BA6A88
  • titleBar.activeBackground#E1AEC4
  • titleBar.activeForeground#513A43
  • titleBar.hoverBackground#D69FB5
  • titleBar.inactiveBackground#DAB2BF
  • titleBar.inactiveForeground#866672
  • toolbar.activeBackground#C9145C50
  • toolbar.hoverBackground#C9145C30
  • windowControlsOverlay.background#E1AEC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C6A5B1italic
string, string.quoted#E15DAB
constant.numeric#E76892
keyword, storage.type, storage.modifier#3B84C0
keyword.control#F26493
entity.name.function, support.function#9A45DC
entity.name.class, entity.name.type, support.class#CD56C7
variable, variable.other#6A5359
variable.parameter#7B6369
constant, constant.language#E569B6
keyword.operator#997985
meta.brace#639CB8
punctuation, punctuation.definition.string, punctuation.separator, punctuation.terminator#6577B8
entity.name.tag#E74E80
entity.other.attribute-name#C662C0
support.type.property-name, variable.other.property#967882
support.type, entity.name.type#C662C0
meta.decorator, punctuation.decorator#5FBDE0
string.regexp#3E9EC8
markup.heading#F26493bold
markup.boldbold
markup.italicitalic
markup.inline.raw#4FB4D8