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#E8EBFA
  • activityBar.border#4F62721F
  • activityBar.foreground#2E3A48
  • activityBar.inactiveForeground#4F627299
  • activityBarBadge.background#B83060
  • activityBarBadge.foreground#FFFFFF
  • badge.background#B83060
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#2E3A48
  • breadcrumb.background#F4F5FF
  • breadcrumb.focusForeground#B83060
  • breadcrumb.foreground#6B7A8DCC
  • breadcrumbPicker.background#FFFFFF
  • button.background#B83060
  • button.foreground#FFFFFF
  • button.hoverBackground#D05786
  • button.secondaryBackground#4F627226
  • button.secondaryForeground#2E3A48
  • descriptionForeground#6B7A8D
  • editor.background#F4F5FF
  • editor.findMatchBackground#ECDA9073
  • editor.findMatchHighlightBackground#ECDA9038
  • editor.foreground#2E3A48
  • editor.inactiveSelectionBackground#4F62721F
  • editor.lineHighlightBackground#E8EBFACC
  • editor.rangeHighlightBackground#ECDA901A
  • editor.selectionBackground#9F7EBE33
  • editor.selectionHighlightBackground#9F7EBE1F
  • editor.wordHighlightBackground#63C5EA1F
  • editor.wordHighlightStrongBackground#63C5EA38
  • editorBracketMatch.background#9F7EBE26
  • editorBracketMatch.border#9F7EBE
  • editorCursor.foreground#D05786
  • editorError.foreground#C0392B
  • editorGroupHeader.tabsBackground#E8EBFA
  • editorGutter.addedBackground#0D7BA899
  • editorGutter.background#F4F5FF
  • editorGutter.deletedBackground#C0307099
  • editorGutter.modifiedBackground#9A750099
  • editorIndentGuide.activeBackground1#9F7EBE66
  • editorIndentGuide.background1#4F627226
  • editorInfo.foreground#0D7BA8
  • editorLineNumber.activeForeground#D05786
  • editorLineNumber.foreground#4F627280
  • editorRuler.foreground#4F627233
  • editorWarning.foreground#9A7500
  • editorWhitespace.foreground#4F62724D
  • focusBorder#9F7EBE80
  • foreground#2E3A48
  • gitDecoration.addedResourceForeground#0D7BA8
  • gitDecoration.conflictingResourceForeground#B83060
  • gitDecoration.deletedResourceForeground#C03070
  • gitDecoration.ignoredResourceForeground#6B7A8D99
  • gitDecoration.modifiedResourceForeground#9A7500
  • gitDecoration.untrackedResourceForeground#2A6898
  • icon.foreground#2E3A48
  • input.background#FFFFFF
  • input.border#4F62724D
  • input.foreground#2E3A48
  • input.placeholderForeground#6B7A8D99
  • inputOption.activeBackground#9F7EBE26
  • inputOption.activeBorder#9F7EBE
  • list.activeSelectionBackground#9F7EBE1F
  • list.activeSelectionForeground#2E3A48
  • list.focusBackground#9F7EBE1A
  • list.highlightForeground#B83060
  • list.hoverBackground#4F62720F
  • list.inactiveSelectionBackground#4F627214
  • minimap.findMatchHighlight#9A750080
  • minimap.selectionHighlight#9F7EBE4D
  • panel.background#E8EBFA
  • panel.border#4F627226
  • panelTitle.activeBorder#B83060
  • panelTitle.activeForeground#B83060
  • panelTitle.inactiveForeground#6B7A8D
  • peekView.border#9F7EBE
  • peekViewEditor.background#F4F5FFE6
  • peekViewEditor.matchHighlightBackground#9A75004D
  • peekViewResult.background#E8EBFA
  • peekViewResult.matchHighlightBackground#9A750040
  • peekViewTitle.background#E8EBFACC
  • peekViewTitleLabel.foreground#B83060
  • scrollbarSlider.activeBackground#9F7EBE66
  • scrollbarSlider.background#4F627226
  • scrollbarSlider.hoverBackground#4F62724D
  • selection.background#9F7EBE4D
  • sideBar.background#E8EBFA
  • sideBar.border#4F627226
  • sideBar.foreground#2E3A48
  • sideBarSectionHeader.background#404E5C0F
  • sideBarSectionHeader.border#4F627226
  • sideBarSectionHeader.foreground#2E3A48
  • sideBarTitle.foreground#9A7500
  • statusBar.background#404E5C
  • statusBar.border#4F627226
  • statusBar.debuggingBackground#B83060
  • statusBar.foreground#B7C3F3
  • statusBar.noFolderBackground#4F6272
  • statusBarItem.hoverBackground#4F627233
  • statusBarItem.remoteBackground#9F7EBE
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F4F5FF
  • tab.activeBorderTop#B83060
  • tab.activeForeground#2E3A48
  • tab.border#4F62721A
  • tab.hoverBackground#4F627214
  • tab.inactiveBackground#E8EBFA
  • tab.inactiveForeground#6B7A8DCC
  • terminal.ansiBlack#404E5C
  • terminal.ansiBlue#2A6898
  • terminal.ansiBrightBlack#4F6272
  • terminal.ansiBrightBlue#0D7BA8
  • terminal.ansiBrightCyan#0599B0
  • terminal.ansiBrightGreen#1E8E52
  • terminal.ansiBrightMagenta#6B4F9E
  • terminal.ansiBrightRed#B83060
  • terminal.ansiBrightWhite#2E3A48
  • terminal.ansiBrightYellow#9A7500
  • terminal.ansiCyan#0D7BA8
  • terminal.ansiGreen#25A562
  • terminal.ansiMagenta#6B4F9E
  • terminal.ansiRed#C03070
  • terminal.ansiWhite#2E3A48
  • terminal.ansiYellow#9A7500
  • terminal.background#E8EBFA
  • terminal.foreground#2E3A48
  • terminal.selectionBackground#9F7EBE33
  • terminalCursor.foreground#B83060
  • titleBar.activeBackground#E8EBFA
  • titleBar.activeForeground#2E3A48
  • titleBar.border#4F62721F
  • titleBar.inactiveBackground#E8EBFACC
  • titleBar.inactiveForeground#6B7A8DB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7A8DB3italic
keyword, keyword.control, storage.modifier#B83060
storage.type#B83060italic
string, string.quoted, string.template#2A6898
constant.numeric#C03070
constant.language#C03070italic
variable.other.constant, constant.other#C03070
entity.name.function, support.function#0D7BA8
variable.parameter#2A6898
entity.name.class, entity.name.type.class, support.class#9A7500
entity.name.type.interface, entity.name.type.alias, entity.name.type#9A7500italic
support.type.property-name, meta.object-literal.key#9A7500
punctuation, meta.brace, punctuation.separator#6B4F9E
keyword.operator#6B4F9E
entity.name.tag#B83060
entity.other.attribute-name#9A7500
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9A7500
support.type.property-name.css#0D7BA8
markup.heading#B83060bold
markup.inline.raw, markup.raw#0D7BA8
meta.decorator, entity.name.function.decorator#9A7500italic
variable.language.this, variable.language.self#B83060italic