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.activeBorder#D3AED2
  • activityBar.background#4A304C
  • activityBar.foreground#E3C4E0
  • activityBar.inactiveForeground#AD91AB
  • activityBarBadge.background#DDC3C3
  • activityBarBadge.foreground#6B3F69
  • badge.background#D3AED2
  • badge.foreground#281F2A
  • button.background#C6A1C5
  • button.foreground#281F2A
  • button.hoverBackground#D3AED2
  • descriptionForeground#B29BAE
  • dropdown.background#342737
  • dropdown.border#523E54
  • dropdown.foreground#EFE1E7
  • editor.background#281F2A
  • editor.findMatchBackground#675338
  • editor.findMatchHighlightBackground#67533877
  • editor.foreground#EFE1E7
  • editor.inactiveSelectionBackground#59415D99
  • editor.lineHighlightBackground#332737
  • editor.selectionBackground#59415D
  • editorBracketMatch.background#59415D
  • editorBracketMatch.border#D3AED2
  • editorCursor.foreground#D3AED2
  • editorError.foreground#ED9CAE
  • editorGroupHeader.tabsBackground#3D2D40
  • editorHoverWidget.background#342737
  • editorHoverWidget.border#523E54
  • editorHoverWidget.foreground#EFE1E7
  • editorIndentGuide.activeBackground1#B29BAE
  • editorIndentGuide.background1#523E5466
  • editorInfo.foreground#ACC9D8
  • editorLineNumber.activeForeground#D3AED2
  • editorLineNumber.foreground#B29BAE
  • editorSuggestWidget.background#342737
  • editorSuggestWidget.border#523E54
  • editorSuggestWidget.foreground#EFE1E7
  • editorSuggestWidget.selectedBackground#59415D
  • editorWarning.foreground#DFC293
  • editorWhitespace.foreground#523E54
  • editorWidget.background#342737
  • editorWidget.border#523E54
  • editorWidget.foreground#EFE1E7
  • errorForeground#ED9CAE
  • focusBorder#D3AED2
  • foreground#EFE1E7
  • gitDecoration.addedResourceForeground#B1C9B4
  • gitDecoration.deletedResourceForeground#ED9CAE
  • gitDecoration.modifiedResourceForeground#ACC9D8
  • input.background#342737
  • input.border#523E54
  • input.foreground#EFE1E7
  • input.placeholderForeground#B29BAE
  • list.activeSelectionBackground#59415D
  • list.activeSelectionForeground#EFE1E7
  • list.highlightForeground#D3AED2
  • list.hoverBackground#523E5444
  • list.inactiveSelectionBackground#59415D99
  • list.inactiveSelectionForeground#EFE1E7
  • notifications.background#342737
  • notifications.border#523E54
  • notifications.foreground#EFE1E7
  • panel.background#342737
  • panel.border#523E54
  • panel.foreground#EFE1E7
  • quickInput.background#342737
  • quickInput.foreground#EFE1E7
  • scrollbarSlider.background#523E5488
  • scrollbarSlider.hoverBackground#523E54BB
  • selection.background#59415D
  • sideBar.background#342737
  • sideBar.border#523E54
  • sideBar.foreground#EFE1E7
  • statusBar.background#342737
  • statusBar.debuggingBackground#D3AED2
  • statusBar.debuggingForeground#281F2A
  • statusBar.foreground#EFE1E7
  • statusBar.noFolderBackground#342737
  • statusBar.noFolderForeground#EFE1E7
  • tab.activeBackground#281F2A
  • tab.activeBorderTop#D3AED2
  • tab.activeForeground#EFE1E7
  • tab.border#523E54
  • tab.inactiveBackground#3D2D40
  • tab.inactiveForeground#B29BAE
  • terminal.ansiBlack#151C2A
  • terminal.ansiBlue#ACC9D8
  • terminal.ansiBrightBlack#B29BAE
  • terminal.ansiBrightBlue#ACC9D8
  • terminal.ansiBrightCyan#ACC9D8
  • terminal.ansiBrightGreen#D3AED2
  • terminal.ansiBrightMagenta#DDC3C3
  • terminal.ansiBrightRed#ED9CAE
  • terminal.ansiBrightWhite#EFE1E7
  • terminal.ansiBrightYellow#DFC293
  • terminal.ansiCyan#ACC9D8
  • terminal.ansiGreen#B1C9B4
  • terminal.ansiMagenta#DDC3C3
  • terminal.ansiRed#ED9CAE
  • terminal.ansiWhite#CDD6EA
  • terminal.ansiYellow#DFC293
  • terminal.background#281F2A
  • terminal.foreground#EFE1E7
  • textLink.activeForeground#D3AED2
  • textLink.foreground#D3AED2
  • titleBar.activeBackground#3D2D40
  • titleBar.activeForeground#EFE1E7
  • titleBar.inactiveBackground#281F2A
  • titleBar.inactiveForeground#B29BAE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B29BAE
keyword, storage#D3AED2
string#B1C9B4
constant.numeric, constant.language#DFC293
entity.name.type, support.type, support.class#DDC3C3
entity.name.function, support.function#ACC9D8
variable#EFE1E7
entity.name.tag#D3AED2
entity.other.attribute-name#DFC293
markup.heading#D3AED2
invalid#ED9CAE