Skip to main content
Coding Theme

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.activeBackground#2d1128
  • activityBar.activeBorder#c4608a
  • activityBar.background#0f0812
  • activityBar.border#4a1535
  • activityBar.foreground#c4608a
  • activityBarBadge.background#8b2252
  • activityBarBadge.foreground#f5d0e0
  • badge.background#8b2252
  • badge.foreground#f5d0e0
  • breadcrumb.activeSelectionForeground#f0c0d4
  • breadcrumb.focusForeground#e0a0c0
  • breadcrumb.foreground#9a7080
  • button.background#8b2252
  • button.foreground#f5d0e0
  • button.hoverBackground#a02860
  • dropdown.background#1a0d1e
  • dropdown.border#4a1535
  • editor.background#160d18
  • editor.findMatchBackground#8b225244
  • editor.findMatchBorder#8b225288
  • editor.findMatchHighlightBackground#8b225222
  • editor.findMatchHighlightBorder#8b225244
  • editor.foreground#c9bfcc
  • editor.lineHighlightBackground#1e1020
  • editor.selectionBackground#6b1a3d55
  • editorCursor.foreground#c4608a
  • editorGroup.border#4a1535
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#120b15
  • editorHoverWidget.border#c4608a
  • editorLineNumber.activeForeground#7a5c70
  • editorLineNumber.foreground#3d3040
  • editorSuggestWidget.border#c4608a
  • editorWidget.border#c4608a
  • focusBorder#c4608a
  • input.background#1a0d1e
  • input.border#4a1535
  • inputOption.activeBackground#2d1128
  • inputOption.activeBorder#c4608a
  • list.activeSelectionBackground#2d1128
  • list.activeSelectionForeground#f0c0d4
  • list.focusOutline#c4608a
  • list.highlightForeground#e0608a
  • list.hoverBackground#1e1020
  • list.inactiveSelectionBackground#1e1020
  • notificationCenter.border#4a1535
  • panel.background#120b15
  • panel.border#4a1535
  • peekView.border#c4608a
  • peekViewEditor.matchHighlightBorder#8b225266
  • progressBar.background#8b2252
  • scrollbarSlider.activeBackground#8b225277
  • scrollbarSlider.background#8b225233
  • scrollbarSlider.hoverBackground#8b225255
  • selection.background#8b225266
  • sideBar.background#120b15
  • sideBar.border#4a1535
  • sideBar.foreground#a899ad
  • sideBarSectionHeader.background#160d18
  • statusBar.background#2d1128
  • statusBar.border#c4608a
  • statusBar.foreground#f0c0d4
  • tab.activeBackground#1e1020
  • tab.activeBorder#c4608a
  • tab.activeForeground#f0c0d4
  • tab.border#00000000
  • tab.inactiveBackground#160d18
  • tab.inactiveForeground#6a5060
  • terminal.ansiBrightMagenta#d080b0
  • terminal.ansiBrightRed#e05080
  • terminal.ansiMagenta#b06090
  • terminal.ansiRed#c4406a
  • terminal.background#120b15
  • terminal.border#4a1535
  • terminal.foreground#c9bfcc
  • textLink.activeForeground#f090b0
  • textLink.foreground#e0608a
  • titleBar.activeBackground#0f0812
  • titleBar.activeForeground#c4608a
  • titleBar.border#4a1535

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, storage, storage.type, storage.modifier#c060a0
keyword.operator#8a6080
string, string.quoted, string.template, string.value#c4607a
comment, punctuation.definition.comment#6a3858italic
constant.numeric, constant.language, constant.character, keyword.other.unit#c8706a
entity.name.function, support.function, support.constant.handlebars#e070a0
entity.name.type, entity.name.class, support.type, support.class, meta.return-type#c060a0
variable, variable.other, meta.definition.variable.name, support.variable, meta.object-literal.key#c9bfcc
variable.language.this, variable.language.self#d080b0
entity.name.tag, meta.tag#c4607a
entity.other.attribute-name#b060a0
punctuation, punctuation.definition.tag#7a5070
markup.heading#e0608a
markup.boldbold
markup.italicitalic
invalid#e03060
Bloody Pink by Crazy Lady - VS Code Theme