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#1C1014
  • activityBar.foreground#A7436C
  • activityBar.inactiveForeground#BB8FA7
  • activityBarBadge.background#AB1654
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D43879
  • badge.foreground#FFFFFF
  • button.background#B26C89
  • button.foreground#FFFFFF
  • button.hoverBackground#A0617E
  • commandCenter.activeBackground#2D2327
  • commandCenter.activeBorder#705E66
  • commandCenter.activeForeground#EABBD4
  • commandCenter.background#291F23
  • commandCenter.border#7A6D73
  • commandCenter.foreground#C892B4
  • commandCenter.inactiveBorder#7A6D73
  • commandCenter.inactiveForeground#B496A6
  • dropdown.background#333131
  • dropdown.border#7A6D73
  • dropdown.foreground#F1B4CD
  • editor.background#302A2D
  • editor.findMatchBackground#24000C70
  • editor.findMatchHighlightBackground#24000C50
  • editor.foreground#C698B6
  • editor.lineHighlightBackground#2E2328
  • editor.selectionBackground#24000C40
  • editor.wordHighlightBackground#24000C50
  • editorBracketHighlight.foreground1#78B4CA
  • editorBracketHighlight.foreground2#78B4CA
  • editorBracketHighlight.foreground3#78B4CA
  • editorBracketHighlight.foreground4#78B4CA
  • editorBracketHighlight.foreground5#78B4CA
  • editorBracketHighlight.foreground6#78B4CA
  • editorBracketMatch.background#33001430
  • editorBracketMatch.border#8B6474
  • editorCursor.foreground#A85979
  • editorGroupHeader.tabsBackground#291F22
  • editorGutter.addedBackground#4A9D1F
  • editorGutter.deletedBackground#D74B56
  • editorGutter.modifiedBackground#C18B56
  • editorIndentGuide.activeBackground#1F1319
  • editorIndentGuide.background#24151B
  • editorLineNumber.activeForeground#B47590
  • editorLineNumber.foreground#A0798A
  • editorRuler.foreground#99868E
  • editorWidget.background#302A2D
  • editorWidget.border#7A6D73
  • focusBorder#94707E
  • gitDecoration.deletedResourceForeground#D74B56
  • gitDecoration.ignoredResourceForeground#918089C0
  • gitDecoration.modifiedResourceForeground#F14FC6
  • gitDecoration.untrackedResourceForeground#C256F4
  • icon.foreground#F7BBDB
  • input.background#333131
  • input.border#7A6D73
  • input.foreground#F1B4CD
  • input.placeholderForeground#A08490
  • inputOption.activeBorder#593644
  • list.activeSelectionBackground#2F2528
  • list.activeSelectionForeground#F1B4CD
  • list.highlightForeground#99365D
  • list.hoverBackground#2E2226
  • list.inactiveSelectionBackground#2E2628
  • menubar.selectionBackground#1A060E
  • menubar.selectionForeground#F7BBDB
  • minimap.selectionHighlight#1A000A60
  • panel.background#2D2327
  • panel.border#5E4A54
  • panelTitle.activeBorder#F56BA3
  • panelTitle.activeForeground#F56BA3
  • panelTitle.inactiveForeground#C894A9
  • peekView.border#593644
  • peekViewEditor.background#302A2D
  • peekViewResult.background#2D2327
  • peekViewTitle.background#2A1F24
  • progressBar.background#1A000A
  • quickInput.background#302A2D
  • quickInput.foreground#F1B4CD
  • quickInputList.focusBackground#2B1C22
  • quickInputList.focusForeground#F1B4CD
  • scrollbarSlider.activeBackground#1A000A80
  • scrollbarSlider.background#1A000A60
  • scrollbarSlider.hoverBackground#1A000A80
  • selection.background#1A000A60
  • sideBar.background#291F22
  • sideBar.foreground#CC9AB7
  • sideBarSectionHeader.background#23151A
  • sideBarSectionHeader.foreground#E94F90
  • sideBarTitle.foreground#E94F90
  • statusBar.background#1E1015
  • statusBar.debuggingBackground#230D14
  • statusBar.focusBorder#593644
  • statusBar.foreground#DE4DA9
  • statusBar.noFolderBackground#1E1015
  • statusBarItem.activeBackground#1A060E
  • statusBarItem.focusBorder#593644
  • statusBarItem.hoverBackground#1C0911
  • statusBarItem.hoverForeground#D74291
  • statusBarItem.remoteBackground#B26C89
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#A0617E
  • statusBarItem.remoteHoverForeground#FFFFFF
  • tab.activeBackground#FF9CCA0E
  • tab.activeBorder#E751B2
  • tab.activeBorderTop#746B6F00
  • tab.activeForeground#E751B2
  • tab.border#746B6F00
  • tab.inactiveBackground#2B2226
  • tab.inactiveForeground#C8A4B0
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#00BFFF
  • terminal.ansiBrightBlack#ECECEC
  • terminal.ansiBrightBlue#56D5FF
  • terminal.ansiBrightCyan#5DFFFF
  • terminal.ansiBrightGreen#57FF57
  • terminal.ansiBrightMagenta#F788FF
  • terminal.ansiBrightRed#FF6AB5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEDB4E
  • terminal.ansiCyan#00EFEF
  • terminal.ansiGreen#00DD00
  • terminal.ansiMagenta#F574FF
  • terminal.ansiRed#FF56AB
  • terminal.ansiWhite#F8F8F8
  • terminal.ansiYellow#F5C400
  • terminal.background#361924
  • terminal.foreground#FFE0EB
  • terminal.selectionBackground#28679980
  • terminalStickyScroll.background#1A000A
  • terminalStickyScrollHover.background#1A000A
  • textLink.activeForeground#B25E85
  • textLink.foreground#A45676
  • titleBar.activeBackground#230D16
  • titleBar.activeForeground#F7BBDB
  • titleBar.hoverBackground#1C0911
  • titleBar.inactiveBackground#1E1015
  • titleBar.inactiveForeground#D0ACC2
  • toolbar.activeBackground#1A000B50
  • toolbar.hoverBackground#1A000B30
  • windowControlsOverlay.background#230D16

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#ECCDDAitalic
string, string.quoted#F268BB
constant.numeric#F2719C
keyword, storage.type, storage.modifier#42A6EC
keyword.control#F26795
entity.name.function, support.function#9D4EF2
entity.name.class, entity.name.type, support.class#EE69EE
variable, variable.other#CFB8C2
variable.parameter#D4BFC9
constant, constant.language#F273C3
keyword.operator#DDC1D1
meta.brace#72C9EA
punctuation, punctuation.definition.string, punctuation.separator, punctuation.terminator#759BEA
entity.name.tag#F25589
entity.other.attribute-name#EC7BEC
support.type.property-name, variable.other.property#DCC4D1
support.type, entity.name.type#EC7BEC
meta.decorator, punctuation.decorator#5DCDF2
string.regexp#43BFEF
markup.heading#F26795bold
markup.boldbold
markup.italicitalic
markup.inline.raw#51CCF2