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#1a0000
  • activityBar.activeBorder#DC143C
  • activityBar.background#000000
  • activityBar.border#4a2020
  • activityBar.foreground#FF0000
  • activityBar.inactiveForeground#8a4a4a
  • activityBarBadge.background#8B0000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#8B0000
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF0000
  • breadcrumb.focusForeground#DC143C
  • breadcrumb.foreground#9a7a7a
  • button.background#DC143C
  • button.foreground#FFFFFF
  • button.hoverBackground#FF0000
  • button.secondaryBackground#4a2020
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#6a3020
  • debugExceptionWidget.background#2a0000
  • debugExceptionWidget.border#FF0000
  • debugToolBar.background#1a0000
  • debugToolBar.border#DC143C
  • diffEditor.border#4a2020
  • diffEditor.insertedLineBackground#DC143C20
  • diffEditor.insertedTextBackground#DC143C30
  • diffEditor.removedLineBackground#00008020
  • diffEditor.removedTextBackground#00008030
  • dropdown.background#1a0000
  • dropdown.border#DC143C
  • dropdown.foreground#FFFFFF
  • editor.background#1a0000
  • editor.findMatchBackground#FFFFFF80
  • editor.findMatchHighlightBackground#FFFFFF50
  • editor.foreground#FFE4E1
  • editor.inactiveSelectionBackground#8B000050
  • editor.lineHighlightBackground#2a0000
  • editor.selectionBackground#8B000080
  • editor.selectionHighlightBackground#DC143C40
  • editor.wordHighlightBackground#FF000030
  • editor.wordHighlightStrongBackground#FF000050
  • editorBracketMatch.background#DC143C50
  • editorBracketMatch.border#FF0000
  • editorCursor.foreground#FF0000
  • editorError.background#8B000080
  • editorError.border#FF0000
  • editorError.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#4a2020
  • editorHint.foreground#FF6347
  • editorIndentGuide.activeBackground1#DC143C
  • editorIndentGuide.background1#4a2020
  • editorInfo.foreground#DC143C
  • editorLineNumber.activeForeground#FF6347
  • editorLineNumber.foreground#8a4a4a
  • editorSuggestWidget.background#1a0000
  • editorSuggestWidget.border#DC143C
  • editorSuggestWidget.foreground#FFE4E1
  • editorSuggestWidget.highlightForeground#FF0000
  • editorSuggestWidget.selectedBackground#DC143C60
  • editorWarning.foreground#FFE4E1
  • editorWhitespace.foreground#4a2020
  • editorWidget.background#1a0000
  • editorWidget.border#DC143C
  • editorWidget.foreground#FFE4E1
  • focusBorder#FF0000
  • gitDecoration.addedResourceForeground#FF0000
  • gitDecoration.conflictingResourceForeground#FF0000
  • gitDecoration.deletedResourceForeground#8B0000
  • gitDecoration.ignoredResourceForeground#8a4a4a
  • gitDecoration.modifiedResourceForeground#DC143C
  • gitDecoration.untrackedResourceForeground#FF6347
  • input.background#1a0000
  • input.border#DC143C
  • input.foreground#FFFFFF
  • input.placeholderForeground#8a4a4a
  • inputOption.activeBorder#FF6347
  • inputValidation.errorBackground#2a0000
  • inputValidation.errorBorder#FF0000
  • inputValidation.warningBackground#2a1000
  • inputValidation.warningBorder#FF4500
  • list.activeSelectionBackground#DC143C80
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#ff8888
  • list.focusBackground#DC143C80
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FF6347
  • list.hoverBackground#1a0000
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#4a2020
  • list.inactiveSelectionForeground#FFFFFF
  • list.warningForeground#FFE4E1
  • merge.border#FF0000
  • merge.currentContentBackground#DC143C30
  • merge.currentHeaderBackground#DC143C70
  • merge.incomingContentBackground#00008030
  • merge.incomingHeaderBackground#00008070
  • minimap.errorHighlight#FF0000
  • minimap.findMatchHighlight#FFFFFF80
  • minimap.selectionHighlight#DC143C80
  • minimap.warningHighlight#FF6347
  • minimapGutter.addedBackground#DC143C
  • minimapGutter.deletedBackground#8B0000
  • minimapGutter.modifiedBackground#FF6347
  • notificationCenter.border#4a2020
  • notificationCenterHeader.background#1a0000
  • notificationLink.foreground#FF6347
  • notifications.background#1a0000
  • notifications.border#DC143C
  • notifications.foreground#FFFFFF
  • panel.background#0a0000
  • panel.border#4a2020
  • panelTitle.activeBorder#DC143C
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#9a7a7a
  • peekView.border#DC143C
  • peekViewEditor.background#1a0000
  • peekViewEditor.matchHighlightBackground#DC143C50
  • peekViewResult.background#0a0000
  • peekViewResult.matchHighlightBackground#DC143C50
  • peekViewResult.selectionBackground#DC143C80
  • peekViewTitle.background#1a0000
  • peekViewTitleDescription.foreground#9a7a7a
  • peekViewTitleLabel.foreground#FF6347
  • progressBar.background#8B0000
  • scrollbarSlider.activeBackground#FF0000A0
  • scrollbarSlider.background#DC143C60
  • scrollbarSlider.hoverBackground#DC143C80
  • sideBar.background#0a0000
  • sideBar.border#4a2020
  • sideBar.foreground#f0d0d0
  • sideBarSectionHeader.background#1a0000
  • sideBarSectionHeader.border#4a2020
  • sideBarSectionHeader.foreground#DC143C
  • sideBarTitle.foreground#FF6347
  • statusBar.background#8B0000
  • statusBar.border#4a2020
  • statusBar.debuggingBackground#000080
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#4a2020
  • statusBarItem.errorBackground#000000
  • statusBarItem.errorForeground#FF0000
  • statusBarItem.prominentBackground#DC143C
  • statusBarItem.prominentHoverBackground#FF0000
  • statusBarItem.warningBackground#FF6347
  • statusBarItem.warningForeground#FFFFFF
  • tab.activeBackground#1a0000
  • tab.activeBorder#000000
  • tab.activeBorderTop#FF0000
  • tab.activeForeground#FFFFFF
  • tab.border#1a0000
  • tab.hoverBackground#1a0000
  • tab.hoverBorder#DC143C
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#0a0000
  • tab.inactiveForeground#9a7a7a
  • terminal.ansiBlack#1a0000
  • terminal.ansiBlue#000080
  • terminal.ansiBrightBlack#6a3020
  • terminal.ansiBrightBlue#4169E1
  • terminal.ansiBrightCyan#FF6347
  • terminal.ansiBrightGreen#FF4500
  • terminal.ansiBrightMagenta#DC143C
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFA500
  • terminal.ansiCyan#B22222
  • terminal.ansiGreen#DC143C
  • terminal.ansiMagenta#8B0000
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#FFE4E1
  • terminal.ansiYellow#FF6347
  • terminal.background#0a0000
  • terminal.border#4a2020
  • terminal.foreground#FFE4E1
  • terminal.selectionBackground#DC143C50
  • terminalCursor.background#0a0000
  • terminalCursor.foreground#FF0000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#DC143C
  • titleBar.border#4a2020
  • titleBar.inactiveBackground#050000
  • titleBar.inactiveForeground#8a4a4a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a4a4aitalic
keyword, storage.type, storage.modifier#8B0000bold
keyword.control, keyword.operator#DC143Cbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FF0000bold
string, string.quoted#FFFFFF
string.template, string.quoted.template#FFE4E1
constant.character.escape#FF0000bold
string.regexp#FF6347
constant.numeric, constant.language#FFFFFFbold
constant.language.boolean#FF4500bold
variable, variable.other#DC143Cbold
variable.parameter#FF6347italic
variable.other.property, support.variable.property#B22222
entity.name.function, support.function#FF0000bold
meta.function-call#DC143C
entity.name.type, entity.name.class, support.class#000080
entity.other.inherited-class#4169E1italic
entity.name.tag#DC143Cbold
entity.other.attribute-name#FF6347italic
entity.name.tag.css, entity.other.attribute-name.class.css#FF0000
support.type.property-name.css#DC143C
support.constant.property-value.css#FFFFFF
support.type, support.class#B22222
support.constant#696969
support.type.property-name.json#DC143C
keyword.operator#FF0000
punctuation#c0a0a0
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#a08080
meta.brace, punctuation.section#B22222
invalid#FFFFFF
invalid.deprecated#8a4a4astrikethrough
markup.heading#FF0000bold
markup.bold#DC143Cbold
markup.italic#FF6347italic
markup.inline.raw#FFFFFF
markup.underline.link#DC143Cunderline
markup.list#FF6347
markup.inserted#FF0000
markup.deleted#696969
markup.changed#DC143C
variable.language.this#8B0000italic
entity.name.type.ts, entity.name.type.tsx#000080
meta.decorator, punctuation.decorator#DC143Cbold
keyword.control.conditional, keyword.control.loop#FF0000bold
entity.name.exception, support.class.exception#660000bold