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.activeBackground#0a0000
  • activityBar.activeBorder#DC143C
  • activityBar.background#000000
  • activityBar.border#1a0a0a
  • activityBar.foreground#DC143C
  • activityBar.inactiveForeground#5a3a3a
  • activityBarBadge.background#8B0000
  • activityBarBadge.foreground#ffffff
  • badge.background#C41E3A
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#DC143C
  • breadcrumb.focusForeground#8B0000
  • breadcrumb.foreground#7a6a6a
  • button.background#8B0000
  • button.foreground#ffffff
  • button.hoverBackground#DC143C
  • button.secondaryBackground#2a1a1a
  • button.secondaryForeground#e8d8d8
  • button.secondaryHoverBackground#3a2a2a
  • debugExceptionWidget.background#1a0000
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#0a0000
  • debugToolBar.border#8B0000
  • diffEditor.border#1a0a0a
  • diffEditor.insertedTextBackground#8B000030
  • diffEditor.removedTextBackground#00000030
  • dropdown.background#0a0000
  • dropdown.border#8B0000
  • dropdown.foreground#e8d8d8
  • editor.background#0a0505
  • editor.findMatchBackground#8B008B80
  • editor.findMatchHighlightBackground#8B008B50
  • editor.foreground#e8d8d8
  • editor.inactiveSelectionBackground#8B000050
  • editor.lineHighlightBackground#1a0a0a
  • editor.selectionBackground#8B000080
  • editor.selectionHighlightBackground#DC143C40
  • editor.wordHighlightBackground#6A0DAD30
  • editor.wordHighlightStrongBackground#6A0DAD50
  • editorBracketMatch.background#8B000050
  • editorBracketMatch.border#B22222
  • editorCursor.foreground#DC143C
  • editorError.background#00000080
  • editorError.border#4B0082
  • editorError.foreground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#1a0a0a
  • editorHint.foreground#6A0DAD
  • editorIndentGuide.activeBackground1#8B0000
  • editorIndentGuide.background1#2a1a1a
  • editorInfo.foreground#8B0000
  • editorLineNumber.activeForeground#DC143C
  • editorLineNumber.foreground#5a3a3a
  • editorSuggestWidget.background#0a0000
  • editorSuggestWidget.border#8B0000
  • editorSuggestWidget.foreground#e8d8d8
  • editorSuggestWidget.highlightForeground#DC143C
  • editorSuggestWidget.selectedBackground#8B000060
  • editorWarning.foreground#DC143C
  • editorWhitespace.foreground#2a1a1a
  • editorWidget.background#0a0000
  • editorWidget.border#8B0000
  • editorWidget.foreground#e8d8d8
  • focusBorder#DC143C
  • gitDecoration.conflictingResourceForeground#DC143C
  • gitDecoration.deletedResourceForeground#000000
  • gitDecoration.ignoredResourceForeground#5a3a3a
  • gitDecoration.modifiedResourceForeground#8B0000
  • gitDecoration.untrackedResourceForeground#B22222
  • input.background#0a0000
  • input.border#8B0000
  • input.foreground#e8d8d8
  • input.placeholderForeground#5a3a3a
  • inputOption.activeBorder#DC143C
  • inputValidation.errorBackground#1a0000
  • inputValidation.errorBorder#000000
  • inputValidation.warningBackground#1a0505
  • inputValidation.warningBorder#8B0000
  • list.activeSelectionBackground#8B000080
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#8B000080
  • list.focusForeground#ffffff
  • list.highlightForeground#DC143C
  • list.hoverBackground#1a0a0a
  • list.hoverForeground#e8d8d8
  • list.inactiveSelectionBackground#2a1a1a
  • list.inactiveSelectionForeground#e8d8d8
  • list.warningForeground#DC143C
  • merge.border#DC143C
  • merge.currentContentBackground#8B000030
  • merge.currentHeaderBackground#8B000070
  • merge.incomingContentBackground#4B008230
  • merge.incomingHeaderBackground#4B008270
  • minimap.errorHighlight#000000
  • minimap.findMatchHighlight#8B008B80
  • minimap.selectionHighlight#8B000080
  • minimap.warningHighlight#DC143C
  • minimapGutter.addedBackground#8B0000
  • minimapGutter.deletedBackground#000000
  • minimapGutter.modifiedBackground#B22222
  • notificationCenter.border#1a0a0a
  • notificationCenterHeader.background#0a0000
  • notificationLink.foreground#B22222
  • notifications.background#0a0000
  • notifications.border#8B0000
  • notifications.foreground#e8d8d8
  • panel.background#050000
  • panel.border#1a0a0a
  • panelTitle.activeBorder#8B0000
  • panelTitle.activeForeground#e8d8d8
  • panelTitle.inactiveForeground#7a6a6a
  • peekView.border#8B0000
  • peekViewEditor.background#0a0000
  • peekViewEditor.matchHighlightBackground#8B000050
  • peekViewResult.background#050000
  • peekViewResult.matchHighlightBackground#8B000050
  • peekViewResult.selectionBackground#8B000080
  • peekViewTitle.background#0a0000
  • peekViewTitleDescription.foreground#7a6a6a
  • peekViewTitleLabel.foreground#B22222
  • progressBar.background#8B0000
  • scrollbarSlider.activeBackground#DC143CA0
  • scrollbarSlider.background#8B000060
  • scrollbarSlider.hoverBackground#8B000080
  • sideBar.background#050000
  • sideBar.border#1a0a0a
  • sideBar.foreground#d0c0c0
  • sideBarSectionHeader.background#0a0505
  • sideBarSectionHeader.border#1a0a0a
  • sideBarSectionHeader.foreground#8B0000
  • sideBarTitle.foreground#B22222
  • statusBar.background#8B0000
  • statusBar.border#1a0a0a
  • statusBar.debuggingBackground#4B0082
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#1a0a0a
  • statusBarItem.errorBackground#000000
  • statusBarItem.errorForeground#DC143C
  • statusBarItem.prominentBackground#DC143C
  • statusBarItem.prominentHoverBackground#B22222
  • statusBarItem.warningBackground#660000
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#0a0000
  • tab.activeBorder#000000
  • tab.activeBorderTop#DC143C
  • tab.activeForeground#e8d8d8
  • tab.border#0a0000
  • tab.hoverBackground#0a0000
  • tab.hoverBorder#8B0000
  • tab.hoverForeground#e8d8d8
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#7a6a6a
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#4B0082
  • terminal.ansiBrightBlack#3a2a2a
  • terminal.ansiBrightBlue#9370DB
  • terminal.ansiBrightCyan#D8BFD8
  • terminal.ansiBrightGreen#DC143C
  • terminal.ansiBrightMagenta#DDA0DD
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ff8888
  • terminal.ansiCyan#6A0DAD
  • terminal.ansiGreen#8B0000
  • terminal.ansiMagenta#8B008B
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#d8d8d8
  • terminal.ansiYellow#B22222
  • terminal.background#050000
  • terminal.foreground#e8d8d8
  • terminalCursor.foreground#DC143C
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#8B0000
  • titleBar.border#1a0a0a
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#5a3a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a3a3aitalic
keyword, storage.type, storage.modifier#8B0000bold
keyword.control, keyword.operator#DC143Cbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#000000
string, string.quoted#DC143C
string.template, string.quoted.template#B22222
constant.character.escape#8B008Bbold
string.regexp#4B0082
constant.numeric, constant.language#d8d8d8bold
constant.language.boolean#6A0DADbold
variable, variable.other#DC143C
variable.parameter#B22222italic
variable.other.property, support.variable.property#8B0000
entity.name.function, support.function#1C1C1Cbold
meta.function-call#2a2a2a
entity.name.type, entity.name.class, support.class#6A0DAD
entity.other.inherited-class#8B008Bitalic
entity.name.tag#8B0000bold
entity.other.attribute-name#B22222italic
entity.name.tag.css, entity.other.attribute-name.class.css#DC143C
support.type.property-name.css#8B0000
support.constant.property-value.css#B22222
support.type, support.class#6A0DAD
support.constant#C0C0C0
support.type.property-name.json#8B0000
keyword.operator#DC143C
punctuation#a09090
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#807070
meta.brace, punctuation.section#FF6347
invalid#ffffff
invalid.deprecated#5a3a3astrikethrough
markup.heading#DC143Cbold
markup.bold#8B0000bold
markup.italic#B22222italic
markup.inline.raw#6A0DAD
markup.underline.link#8B0000underline
markup.list#B22222
markup.inserted#DC143C
markup.deleted#000000
markup.changed#8B0000
variable.language.this#660000italic
entity.name.type.ts, entity.name.type.tsx#4B0082
meta.decorator, punctuation.decorator#8B0000bold
variable.language.special.self.python#000000italic
entity.name.function.decorator.python#6A0DAD
keyword.control.conditional, keyword.control.loop#DC143Cbold
entity.name.exception, support.class.exception#000000bold
storage.type.annotation, punctuation.definition.annotation#B22222italic
entity.name.namespace#6A0DAD
entity.name.tag#C41E3A