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#2a0a0a
  • activityBar.activeBorder#FFD700
  • activityBar.background#0a0000
  • activityBar.border#3a1a1a
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#6a3a3a
  • activityBarBadge.background#FF4500
  • activityBarBadge.foreground#ffffff
  • badge.background#FF4500
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FF6347
  • breadcrumb.focusForeground#DC143C
  • breadcrumb.foreground#9a7a7a
  • button.background#DC143C
  • button.foreground#ffffff
  • button.hoverBackground#FF6347
  • button.secondaryBackground#3a1a1a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a2a2a
  • debugExceptionWidget.background#3a0000
  • debugExceptionWidget.border#8B0000
  • debugToolBar.background#2a0a0a
  • debugToolBar.border#DC143C
  • diffEditor.border#3a1a1a
  • diffEditor.insertedTextBackground#DC143C30
  • diffEditor.removedTextBackground#8B000030
  • dropdown.background#2a0a0a
  • dropdown.border#DC143C
  • dropdown.foreground#ffffff
  • editor.background#1a0505
  • editor.findMatchBackground#FFD70080
  • editor.findMatchHighlightBackground#FFD70050
  • editor.foreground#fff0e6
  • editor.inactiveSelectionBackground#DC143C50
  • editor.lineHighlightBackground#2a0a0a
  • editor.selectionBackground#DC143C80
  • editor.selectionHighlightBackground#FF634740
  • editor.wordHighlightBackground#FF450030
  • editor.wordHighlightStrongBackground#FF450050
  • editorBracketMatch.background#DC143C50
  • editorBracketMatch.border#FF6347
  • editorCursor.foreground#FF6347
  • editorError.background#8B000080
  • editorError.border#B22222
  • editorError.foreground#8B0000
  • editorGroupHeader.tabsBackground#0a0000
  • editorGroupHeader.tabsBorder#3a1a1a
  • editorHint.foreground#FFA500
  • editorIndentGuide.activeBackground1#DC143C
  • editorIndentGuide.background1#3a1a1a
  • editorInfo.foreground#FFD700
  • editorLineNumber.activeForeground#FF6347
  • editorLineNumber.foreground#6a3a3a
  • editorSuggestWidget.background#2a0a0a
  • editorSuggestWidget.border#DC143C
  • editorSuggestWidget.foreground#fff0e6
  • editorSuggestWidget.highlightForeground#FF6347
  • editorSuggestWidget.selectedBackground#DC143C60
  • editorWarning.foreground#FF8C00
  • editorWhitespace.foreground#3a1a1a
  • editorWidget.background#2a0a0a
  • editorWidget.border#DC143C
  • editorWidget.foreground#fff0e6
  • focusBorder#FF6347
  • gitDecoration.conflictingResourceForeground#FF4500
  • gitDecoration.deletedResourceForeground#8B0000
  • gitDecoration.ignoredResourceForeground#6a3a3a
  • gitDecoration.modifiedResourceForeground#DC143C
  • gitDecoration.untrackedResourceForeground#FF8C00
  • input.background#2a0a0a
  • input.border#DC143C
  • input.foreground#ffffff
  • input.placeholderForeground#6a3a3a
  • inputOption.activeBorder#FF6347
  • inputValidation.errorBackground#3a0000
  • inputValidation.errorBorder#8B0000
  • inputValidation.warningBackground#3a1a00
  • inputValidation.warningBorder#FF8C00
  • list.activeSelectionBackground#DC143C80
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#DC143C80
  • list.focusForeground#ffffff
  • list.highlightForeground#FF6347
  • list.hoverBackground#2a0a0a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3a1a1a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FF8C00
  • merge.border#FF6347
  • merge.currentContentBackground#DC143C30
  • merge.currentHeaderBackground#DC143C70
  • merge.incomingContentBackground#FF8C0030
  • merge.incomingHeaderBackground#FF8C0070
  • minimap.errorHighlight#8B0000
  • minimap.findMatchHighlight#FFD70080
  • minimap.selectionHighlight#DC143C80
  • minimap.warningHighlight#FF8C00
  • minimapGutter.addedBackground#DC143C
  • minimapGutter.deletedBackground#8B0000
  • minimapGutter.modifiedBackground#FF6347
  • notificationCenter.border#3a1a1a
  • notificationCenterHeader.background#2a0a0a
  • notificationLink.foreground#FFA500
  • notifications.background#2a0a0a
  • notifications.border#DC143C
  • notifications.foreground#ffffff
  • panel.background#1a0505
  • panel.border#3a1a1a
  • panelTitle.activeBorder#DC143C
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#9a7a7a
  • peekView.border#DC143C
  • peekViewEditor.background#2a0a0a
  • peekViewEditor.matchHighlightBackground#DC143C50
  • peekViewResult.background#1a0505
  • peekViewResult.matchHighlightBackground#DC143C50
  • peekViewResult.selectionBackground#DC143C80
  • peekViewTitle.background#2a0a0a
  • peekViewTitleDescription.foreground#9a7a7a
  • peekViewTitleLabel.foreground#FF6347
  • progressBar.background#DC143C
  • scrollbarSlider.activeBackground#FF6347A0
  • scrollbarSlider.background#DC143C60
  • scrollbarSlider.hoverBackground#DC143C80
  • sideBar.background#1a0505
  • sideBar.border#3a1a1a
  • sideBar.foreground#f5e0d0
  • sideBarSectionHeader.background#2a0a0a
  • sideBarSectionHeader.border#3a1a1a
  • sideBarSectionHeader.foreground#DC143C
  • sideBarTitle.foreground#FF6347
  • statusBar.background#DC143C
  • statusBar.border#3a1a1a
  • statusBar.debuggingBackground#FF4500
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#3a1a1a
  • statusBarItem.errorBackground#8B0000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#FF6347
  • statusBarItem.prominentHoverBackground#FF4500
  • statusBarItem.warningBackground#FF8C00
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#2a0a0a
  • tab.activeBorder#0a0000
  • tab.activeBorderTop#FF6347
  • tab.activeForeground#ffffff
  • tab.border#1a0505
  • tab.hoverBackground#2a0a0a
  • tab.hoverBorder#DC143C
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1a0505
  • tab.inactiveForeground#9a7a7a
  • terminal.ansiBlack#1a0a0a
  • terminal.ansiBlue#FF8C00
  • terminal.ansiBrightBlack#5a3a3a
  • terminal.ansiBrightBlue#FFA500
  • terminal.ansiBrightCyan#FF4500
  • terminal.ansiBrightGreen#FFEA00
  • terminal.ansiBrightMagenta#FF8C00
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#FF4500
  • terminal.ansiGreen#FFD700
  • terminal.ansiMagenta#FF6347
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#fff0e6
  • terminal.ansiYellow#FFA500
  • terminal.background#1a0505
  • terminal.foreground#fff0e6
  • terminalCursor.foreground#FF6347
  • titleBar.activeBackground#0a0000
  • titleBar.activeForeground#DC143C
  • titleBar.border#3a1a1a
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6a3a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a3a3aitalic
keyword, storage.type, storage.modifier#FF4500bold
keyword.control, keyword.operator#FF6347bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FFA500
string, string.quoted#FF8C00
string.template, string.quoted.template#FFA500
constant.character.escape#FFD700bold
string.regexp#FF6347
constant.numeric, constant.language#FFEA00bold
constant.language.boolean#FF4500bold
variable, variable.other#DC143Cbold
variable.parameter#FF6347italic
variable.other.property, support.variable.property#FF8C69
entity.name.function, support.function#FFD700bold
meta.function-call#FFA500
entity.name.type, entity.name.class, support.class#FF8C00
entity.other.inherited-class#FFA500italic
entity.name.tag#DC143Cbold
entity.other.attribute-name#FF6347italic
entity.name.tag.css, entity.other.attribute-name.class.css#DC143C
support.type.property-name.css#FF6347
support.constant.property-value.css#FF8C00
support.type, support.class#FFA500
support.constant#D3D3D3
support.type.property-name.json#DC143C
keyword.operator#FF6347
punctuation#d0b0a0
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#b09080
meta.brace, punctuation.section#FFD700
invalid#ffffff
invalid.deprecated#6a3a3astrikethrough
markup.heading#DC143Cbold
markup.bold#FF4500bold
markup.italic#FF8C00italic
markup.inline.raw#FFD700
markup.underline.link#FFA500underline
markup.list#FF6347
markup.inserted#DC143C
markup.deleted#8B0000
markup.changed#FF6347
variable.language.this#DC143Citalic
entity.name.type.ts, entity.name.type.tsx#FF8C00
meta.decorator, punctuation.decorator#FFD700bold
variable.language.special.self.python#DC143Citalic
entity.name.function.decorator.python#FFD700
keyword.control.conditional, keyword.control.loop#FF4500bold
entity.name.exception, support.class.exception#8B0000bold
storage.type.annotation, punctuation.definition.annotation#FFA500italic
entity.name.namespace#FF8C00
entity.name.tag#DC143C