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#6B3F69
  • activityBar.background#6B3F69
  • activityBar.foreground#FFF5F4
  • activityBar.inactiveForeground#D3BBD0
  • activityBarBadge.background#DDC3C3
  • activityBarBadge.foreground#6B3F69
  • badge.background#6B3F69
  • badge.foreground#FFFFFF
  • button.background#6B3F69
  • button.foreground#FFFFFF
  • button.hoverBackground#7C4B79
  • descriptionForeground#80677C
  • dropdown.background#EDE0E3
  • dropdown.border#D7C4D1
  • dropdown.foreground#493447
  • editor.background#F7F0EF
  • editor.findMatchBackground#E8D7B4
  • editor.findMatchHighlightBackground#E8D7B477
  • editor.foreground#493447
  • editor.inactiveSelectionBackground#DEC9DE99
  • editor.lineHighlightBackground#EFE4EC
  • editor.selectionBackground#DEC9DE
  • editorBracketMatch.background#DEC9DE
  • editorBracketMatch.border#6B3F69
  • editorCursor.foreground#6B3F69
  • editorError.foreground#AE425C
  • editorGroupHeader.tabsBackground#E5D5DC
  • editorHoverWidget.background#EDE0E3
  • editorHoverWidget.border#D7C4D1
  • editorHoverWidget.foreground#493447
  • editorIndentGuide.activeBackground1#80677C
  • editorIndentGuide.background1#D7C4D166
  • editorInfo.foreground#426A7B
  • editorLineNumber.activeForeground#6B3F69
  • editorLineNumber.foreground#80677C
  • editorSuggestWidget.background#EDE0E3
  • editorSuggestWidget.border#D7C4D1
  • editorSuggestWidget.foreground#493447
  • editorSuggestWidget.selectedBackground#DEC9DE
  • editorWarning.foreground#8B6235
  • editorWhitespace.foreground#D7C4D1
  • editorWidget.background#EDE0E3
  • editorWidget.border#D7C4D1
  • editorWidget.foreground#493447
  • errorForeground#AE425C
  • focusBorder#6B3F69
  • foreground#493447
  • gitDecoration.addedResourceForeground#4E6C59
  • gitDecoration.deletedResourceForeground#AE425C
  • gitDecoration.modifiedResourceForeground#426A7B
  • input.background#EDE0E3
  • input.border#D7C4D1
  • input.foreground#493447
  • input.placeholderForeground#80677C
  • list.activeSelectionBackground#DEC9DE
  • list.activeSelectionForeground#493447
  • list.highlightForeground#6B3F69
  • list.hoverBackground#D7C4D144
  • list.inactiveSelectionBackground#DEC9DE99
  • list.inactiveSelectionForeground#493447
  • notifications.background#EDE0E3
  • notifications.border#D7C4D1
  • notifications.foreground#493447
  • panel.background#EDE0E3
  • panel.border#D7C4D1
  • panel.foreground#493447
  • quickInput.background#EDE0E3
  • quickInput.foreground#493447
  • scrollbarSlider.background#D7C4D188
  • scrollbarSlider.hoverBackground#D7C4D1BB
  • selection.background#DEC9DE
  • sideBar.background#EDE0E3
  • sideBar.border#D7C4D1
  • sideBar.foreground#493447
  • statusBar.background#EDE0E3
  • statusBar.debuggingBackground#6B3F69
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#493447
  • statusBar.noFolderBackground#EDE0E3
  • statusBar.noFolderForeground#493447
  • tab.activeBackground#F7F0EF
  • tab.activeBorderTop#6B3F69
  • tab.activeForeground#493447
  • tab.border#D7C4D1
  • tab.inactiveBackground#E5D5DC
  • tab.inactiveForeground#80677C
  • terminal.ansiBlack#273046
  • terminal.ansiBlue#426A7B
  • terminal.ansiBrightBlack#80677C
  • terminal.ansiBrightBlue#426A7B
  • terminal.ansiBrightCyan#426A7B
  • terminal.ansiBrightGreen#6B3F69
  • terminal.ansiBrightMagenta#8A516C
  • terminal.ansiBrightRed#AE425C
  • terminal.ansiBrightWhite#493447
  • terminal.ansiBrightYellow#8B6235
  • terminal.ansiCyan#426A7B
  • terminal.ansiGreen#4E6C59
  • terminal.ansiMagenta#8A516C
  • terminal.ansiRed#AE425C
  • terminal.ansiWhite#D7C4D1
  • terminal.ansiYellow#8B6235
  • terminal.background#F7F0EF
  • terminal.foreground#493447
  • textLink.activeForeground#6B3F69
  • textLink.foreground#6B3F69
  • titleBar.activeBackground#E5D5DC
  • titleBar.activeForeground#493447
  • titleBar.inactiveBackground#F7F0EF
  • titleBar.inactiveForeground#80677C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#80677C
keyword, storage#754373
string#4E6C59
constant.numeric, constant.language#8B6235
entity.name.type, support.type, support.class#8A516C
entity.name.function, support.function#426A7B
variable#493447
entity.name.tag#6B3F69
entity.other.attribute-name#8B6235
markup.heading#6B3F69
invalid#AE425C