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#D4C9D7
  • activityBar.foreground#B470AC
  • activityBar.inactiveForeground#9C9BB8
  • activityBarBadge.background#B11C76
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D748A9
  • badge.foreground#FFFFFF
  • button.background#B78BB8
  • button.foreground#FFFFFF
  • button.hoverBackground#A77DB0
  • commandCenter.activeBackground#F3E9F1
  • commandCenter.activeBorder#D9CADA
  • commandCenter.activeForeground#606174
  • commandCenter.background#ECE3EC
  • commandCenter.border#E2D9E5
  • commandCenter.foreground#8D84A9
  • commandCenter.inactiveBorder#E2D9E5
  • commandCenter.inactiveForeground#A5ABBF
  • dropdown.background#FEFDFD
  • dropdown.border#E2D9E5
  • dropdown.foreground#575363
  • editor.background#F9F3F8
  • editor.findMatchBackground#E28DBE70
  • editor.findMatchHighlightBackground#E28DBE50
  • editor.foreground#8F8DB0
  • editor.lineHighlightBackground#F5EAF2
  • editor.selectionBackground#E28DBE40
  • editor.wordHighlightBackground#E28DBE50
  • editorBracketHighlight.foreground1#60BAD4
  • editorBracketHighlight.foreground2#60BAD4
  • editorBracketHighlight.foreground3#60BAD4
  • editorBracketHighlight.foreground4#60BAD4
  • editorBracketHighlight.foreground5#60BAD4
  • editorBracketHighlight.foreground6#60BAD4
  • editorBracketMatch.background#FF7DC630
  • editorBracketMatch.border#F2C6DF
  • editorCursor.foreground#B387B6
  • editorGroupHeader.tabsBackground#ECE3EB
  • editorGutter.addedBackground#33B000
  • editorGutter.deletedBackground#C72E45
  • editorGutter.modifiedBackground#B5934C
  • editorIndentGuide.activeBackground#DBCFDF
  • editorIndentGuide.background#E3D4E2
  • editorLineNumber.activeForeground#A591B5
  • editorLineNumber.foreground#BCB2C7
  • editorRuler.foreground#E2D9E5
  • editorWidget.background#F9F3F8
  • editorWidget.border#E2D9E5
  • focusBorder#FAD0E6
  • gitDecoration.deletedResourceForeground#C72E45
  • gitDecoration.ignoredResourceForeground#8D91ACC0
  • gitDecoration.modifiedResourceForeground#DE2DCC
  • gitDecoration.untrackedResourceForeground#AB36EB
  • icon.foreground#4F4C5E
  • input.background#FEFDFD
  • input.border#E2D9E5
  • input.foreground#575363
  • input.placeholderForeground#BCB9CB
  • inputOption.activeBorder#C496BE
  • list.activeSelectionBackground#F7EDF3
  • list.activeSelectionForeground#575363
  • list.highlightForeground#DB80BE
  • list.hoverBackground#F6E9F1
  • list.inactiveSelectionBackground#F6EDF3
  • menubar.selectionBackground#CAB3CB
  • menubar.selectionForeground#4F4C5E
  • minimap.selectionHighlight#C496BE60
  • panel.background#F3E9F1
  • panel.border#C8B8CF
  • panelTitle.activeBorder#E155B3
  • panelTitle.activeForeground#E155B3
  • panelTitle.inactiveForeground#8D85A1
  • peekView.border#C496BE
  • peekViewEditor.background#F9F3F8
  • peekViewResult.background#F3E9F1
  • peekViewTitle.background#EEE3ED
  • progressBar.background#C496BE
  • quickInput.background#F9F3F8
  • quickInput.foreground#575363
  • quickInputList.focusBackground#F0E0EC
  • quickInputList.focusForeground#575363
  • scrollbarSlider.activeBackground#C496BE80
  • scrollbarSlider.background#C496BE60
  • scrollbarSlider.hoverBackground#C496BE80
  • selection.background#C496BE60
  • sideBar.background#ECE3EB
  • sideBar.foreground#8984A4
  • sideBarSectionHeader.background#E0D4E0
  • sideBarSectionHeader.foreground#613557
  • sideBarTitle.foreground#613557
  • statusBar.background#D9CAD9
  • statusBar.debuggingBackground#E0C7D9
  • statusBar.focusBorder#C496BE
  • statusBar.foreground#703E76
  • statusBar.noFolderBackground#D9CAD9
  • statusBarItem.activeBackground#CAB3CB
  • statusBarItem.focusBorder#C496BE
  • statusBarItem.hoverBackground#D4BCD3
  • statusBarItem.hoverForeground#7A3E74
  • statusBarItem.remoteBackground#B78BB8
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#A77DB0
  • statusBarItem.remoteHoverForeground#FFFFFF
  • tab.activeBackground#FFA7D70E
  • tab.activeBorder#D532C0
  • tab.activeBorderTop#DDD9E300
  • tab.activeForeground#D532C0
  • tab.border#DDD9E300
  • tab.inactiveBackground#EFE8F0
  • tab.inactiveForeground#8E92A8
  • 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#744769
  • terminal.foreground#FFE9F3
  • terminal.selectionBackground#4EB9EC80
  • terminalStickyScroll.background#8B557E
  • terminalStickyScrollHover.background#9E6C9A
  • textLink.activeForeground#A77DB0
  • textLink.foreground#B78BB8
  • titleBar.activeBackground#E0C7DC
  • titleBar.activeForeground#4F4C5E
  • titleBar.hoverBackground#D4BCD3
  • titleBar.inactiveBackground#D9CAD9
  • titleBar.inactiveForeground#8386A1
  • toolbar.activeBackground#C71A8250
  • toolbar.hoverBackground#C71A8230
  • windowControlsOverlay.background#E0C7DC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#C4C1D0italic
string, string.quoted#E07BCD
constant.numeric#E689BE
keyword, storage.type, storage.modifier#3AAAD9
keyword.control#F184BF
entity.name.function, support.function#975CEA
entity.name.class, entity.name.type, support.class#CB72DD
variable, variable.other#676E7E
variable.parameter#788294
constant, constant.language#E48AD3
keyword.operator#96A0B6
meta.brace#60BAD4
punctuation, punctuation.definition.string, punctuation.separator, punctuation.terminator#629DD4
entity.name.tag#E667B3
entity.other.attribute-name#C481D9
support.type.property-name, variable.other.property#929FB5
support.type, entity.name.type#C481D9
meta.decorator, punctuation.decorator#5CD1EC
string.regexp#3CBCDE
markup.heading#F184BFbold
markup.boldbold
markup.italicitalic
markup.inline.raw#4DCBE8