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#23141a
  • activityBar.border#3e2431
  • activityBar.foreground#ff799f
  • activityBarBadge.background#ff799f
  • activityBarBadge.foreground#2c1b20
  • dropdown.background#26161c
  • dropdown.border#3e2431
  • dropdown.foreground#f0e7e9
  • editor.background#2c1b20
  • editor.foreground#f0e7e9
  • editor.lineHighlightBackground#36232b
  • editor.selectionBackground#3e243150
  • editor.selectionHighlightBackground#3e243150
  • editorBracketMatch.background#3e243150
  • editorBracketMatch.border#ff799f
  • editorCursor.foreground#ff799f
  • editorGroupHeader.border#3e2431
  • editorGroupHeader.noTabsBackground#23141a
  • editorGroupHeader.tabsBackground#26161c
  • editorHoverWidget.background#26161c
  • editorHoverWidget.border#3e2431
  • editorLineNumber.activeForeground#ff799f
  • editorLineNumber.foreground#a07787
  • editorSuggestWidget.background#26161c
  • editorSuggestWidget.foreground#f0e7e9
  • editorSuggestWidget.highlightForeground#ff799f
  • editorSuggestWidget.selectedBackground#3e243150
  • editorWidget.background#26161c
  • editorWidget.border#3e2431
  • menu.background#26161c
  • menu.foreground#f0e7e9
  • menu.selectionBackground#3e243180
  • menu.selectionForeground#f0e7e9
  • menu.separatorBackground#3e243150
  • minimap.background#2c1b20
  • panel.background#23141a
  • panel.border#3e2431
  • panelTitle.activeBorder#ff799f
  • panelTitle.activeForeground#f0e7e9
  • panelTitle.inactiveForeground#a07787
  • pickerGroup.border#3e243150
  • pickerGroup.foreground#ff799f
  • quickInput.background#26161c
  • quickInput.foreground#f0e7e9
  • quickInputList.focusBackground#3e243150
  • quickInputTitle.background#23141a
  • scrollbarSlider.activeBackground#3e2431ff
  • scrollbarSlider.background#3e243180
  • scrollbarSlider.hoverBackground#3e2431aa
  • sideBar.background#26161c
  • sideBar.border#3e2431
  • sideBar.foreground#f0e7e9
  • sideBarSectionHeader.background#23141a
  • sideBarTitle.foreground#ff799f
  • statusBar.background#23141a
  • statusBar.debuggingBackground#3e2431
  • statusBar.debuggingForeground#f0e7e9
  • statusBar.foreground#f0e7e9
  • statusBar.noFolderBackground#26161c
  • tab.activeBackground#36232b
  • tab.activeBorder#ff799f
  • tab.activeForeground#f0e7e9
  • tab.border#3e2431
  • tab.hoverBackground#3a2430
  • tab.hoverForeground#f0e7e9
  • tab.inactiveBackground#26161c
  • tab.inactiveForeground#a07787
  • terminal.ansiBlack#26161c
  • terminal.ansiBlue#8fd8ff
  • terminal.ansiBrightBlack#a07787
  • terminal.ansiBrightBlue#b0e0ff
  • terminal.ansiBrightCyan#c0d0ff
  • terminal.ansiBrightGreen#b0e0a0
  • terminal.ansiBrightMagenta#ffc0d0
  • terminal.ansiBrightRed#ff9ab8
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe699
  • terminal.ansiCyan#a0c0ff
  • terminal.ansiGreen#a0d6a0
  • terminal.ansiMagenta#ff799f
  • terminal.ansiRed#ff6990
  • terminal.ansiWhite#f0e7e9
  • terminal.ansiYellow#ffd580
  • terminal.background#2c1b20
  • terminal.foreground#f0e7e9
  • terminalCursor.foreground#ff799f
  • titleBar.activeBackground#23141a
  • titleBar.activeForeground#ff799f
  • titleBar.inactiveBackground#26161c
  • titleBar.inactiveForeground#a07787

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a07787italic
keyword, storage.type, storage.modifier, keyword.control#ff5c8abold
variable#f0c2c9
string#ffa8c3
function, entity.name.function, meta.function-call, variable.function#ffd580
class, support.class, support.type, entity.name.type#ff9ac0
constant.numeric, constant.language#ffdf80
operator, punctuation#f0e7e9
tag, entity.name.tag#ff799f
entity.other.attribute-name, support.type.property-name, attribute-name#ffb6c1
meta.brace#f0e7e9
markup.bold, markup.italic, markup.underline, markup.quote#f0c2c9bold
invalid, invalid.illegal#ff5c8a
text#f0e7e9