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#CCB2D1
  • activityBar.foreground#A555A0
  • activityBar.inactiveForeground#8976AC
  • activityBarBadge.background#A2166D
  • activityBarBadge.foreground#FFFFFF
  • badge.background#CF379D
  • badge.foreground#FFFFFF
  • button.background#A96AAC
  • button.foreground#FFFFFF
  • button.hoverBackground#955FA4
  • commandCenter.activeBackground#F1DFEF
  • commandCenter.activeBorder#D1B3D4
  • commandCenter.activeForeground#504A6C
  • commandCenter.background#E9D6E9
  • commandCenter.border#DDC8E0
  • commandCenter.foreground#76649D
  • commandCenter.inactiveBorder#DDC8E0
  • commandCenter.inactiveForeground#9386B4
  • dropdown.background#FEFCFD
  • dropdown.border#DDC8E0
  • dropdown.foreground#483F5C
  • editor.background#F8EEF7
  • editor.findMatchBackground#DD6BB370
  • editor.findMatchHighlightBackground#DD6BB350
  • editor.foreground#7A6BA4
  • editor.lineHighlightBackground#F3E1F0
  • editor.selectionBackground#DD6BB340
  • editor.wordHighlightBackground#DD6BB350
  • editorBracketHighlight.foreground1#509CCD
  • editorBracketHighlight.foreground2#509CCD
  • editorBracketHighlight.foreground3#509CCD
  • editorBracketHighlight.foreground4#509CCD
  • editorBracketHighlight.foreground5#509CCD
  • editorBracketHighlight.foreground6#509CCD
  • editorBracketMatch.background#FF5FBD30
  • editorBracketMatch.border#EFADD9
  • editorCursor.foreground#A467AA
  • editorGroupHeader.tabsBackground#E9D6E8
  • editorGutter.addedBackground#2B8D00
  • editorGutter.deletedBackground#BC2340
  • editorGutter.modifiedBackground#A67046
  • editorIndentGuide.activeBackground#D4BADA
  • editorIndentGuide.background#DEC1DD
  • editorLineNumber.activeForeground#936EA9
  • editorLineNumber.foreground#AF90BE
  • editorRuler.foreground#DDC8E0
  • editorWidget.background#F8EEF7
  • editorWidget.border#DDC8E0
  • focusBorder#F9BCE2
  • gitDecoration.deletedResourceForeground#BC2340
  • gitDecoration.ignoredResourceForeground#766EA0C0
  • gitDecoration.modifiedResourceForeground#D722C3
  • gitDecoration.untrackedResourceForeground#9B29E8
  • icon.foreground#423A57
  • input.background#FEFCFD
  • input.border#DDC8E0
  • input.foreground#483F5C
  • input.placeholderForeground#AF9BC2
  • inputOption.activeBorder#B872B3
  • list.activeSelectionBackground#F5E5F1
  • list.activeSelectionForeground#483F5C
  • list.highlightForeground#D461B3
  • list.hoverBackground#F4DFEE
  • list.inactiveSelectionBackground#F4E6F1
  • menubar.selectionBackground#C092C3
  • menubar.selectionForeground#423A57
  • minimap.selectionHighlight#B872B360
  • panel.background#F1DFEF
  • panel.border#BD99C7
  • panelTitle.activeBorder#DB41A7
  • panelTitle.activeForeground#DB41A7
  • panelTitle.inactiveForeground#766596
  • peekView.border#B872B3
  • peekViewEditor.background#F8EEF7
  • peekViewResult.background#F1DFEF
  • peekViewTitle.background#EBD7EA
  • progressBar.background#B872B3
  • quickInput.background#F8EEF7
  • quickInput.foreground#483F5C
  • quickInputList.focusBackground#EDD3E9
  • quickInputList.focusForeground#483F5C
  • scrollbarSlider.activeBackground#B872B380
  • scrollbarSlider.background#B872B360
  • scrollbarSlider.hoverBackground#B872B380
  • selection.background#B872B360
  • sideBar.background#E9D6E8
  • sideBar.foreground#726498
  • sideBarSectionHeader.background#DAC1DB
  • sideBarSectionHeader.foreground#512851
  • sideBarTitle.foreground#512851
  • statusBar.background#D1B3D2
  • statusBar.debuggingBackground#DAAFD2
  • statusBar.focusBorder#B872B3
  • statusBar.foreground#5D2F6D
  • statusBar.noFolderBackground#D1B3D2
  • statusBarItem.activeBackground#C092C3
  • statusBarItem.focusBorder#B872B3
  • statusBarItem.hoverBackground#CC9FCB
  • statusBarItem.hoverForeground#652F6C
  • statusBarItem.remoteBackground#A96AAC
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#955FA4
  • statusBarItem.remoteHoverForeground#FFFFFF
  • tab.activeBackground#FF81D10E
  • tab.activeBorder#CD26B6
  • tab.activeBorderTop#D6C9DF00
  • tab.activeForeground#CD26B6
  • tab.border#D6C9DF00
  • tab.inactiveBackground#ECDEEE
  • tab.inactiveForeground#776F9C
  • 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#603662
  • terminal.foreground#FFDFF1
  • terminal.selectionBackground#419BE980
  • terminalStickyScroll.background#744175
  • terminalStickyScrollHover.background#8B538F
  • textLink.activeForeground#955FA4
  • textLink.foreground#A96AAC
  • titleBar.activeBackground#DAAFD6
  • titleBar.activeForeground#423A57
  • titleBar.hoverBackground#CC9FCB
  • titleBar.inactiveBackground#D1B3D2
  • titleBar.inactiveForeground#6C6696
  • toolbar.activeBackground#BC147950
  • toolbar.hoverBackground#BC147930
  • windowControlsOverlay.background#DAAFD6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#B9A5C8italic
string, string.quoted#DA5DC4—
constant.numeric#E168B3—
keyword, storage.type, storage.modifier#3085D3—
keyword.control#EE64B4—
entity.name.function, support.function#8246E7—
entity.name.class, entity.name.type, support.class#C156D8—
variable, variable.other#555475—
variable.parameter#63638A—
constant, constant.language#DF69CC—
keyword.operator#817AAA—
meta.brace#509CCD—
punctuation, punctuation.definition.string, punctuation.separator, punctuation.terminator#5278CD—
entity.name.tag#E14FA7—
entity.other.attribute-name#B962D3—
support.type.property-name, variable.other.property#7D79A8—
support.type, entity.name.type#B962D3—
meta.decorator, punctuation.decorator#4CBDE9—
string.regexp#329ED9—
markup.heading#EE64B4bold
markup.bold—bold
markup.italic—italic
markup.inline.raw#40B5E4—