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#2a0f0f
  • activityBar.activeBorder#8b0000
  • activityBar.background#1a0505
  • activityBar.border#330a0a
  • activityBar.foreground#dc143c
  • activityBar.inactiveForeground#8b0000
  • activityBarBadge.background#8b0000
  • activityBarBadge.foreground#ffffff
  • badge.background#8b0000
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#dc143c
  • breadcrumb.background#1a0505
  • breadcrumb.foreground#8b0000
  • breadcrumbPicker.background#2a0f0f
  • button.background#8b0000
  • button.foreground#ffffff
  • button.hoverBackground#a01010
  • debugToolBar.background#2a0f0f
  • diffEditor.insertedTextBackground#8b000020
  • diffEditor.removedTextBackground#ff666630
  • dropdown.background#2a0f0f
  • dropdown.border#330a0a
  • dropdown.foreground#dc143c
  • editor.background#0d0202
  • editor.findMatchBackground#8b000040
  • editor.findMatchHighlightBackground#8b000020
  • editor.foreground#dc143c
  • editor.lineHighlightBackground#1a0505
  • editor.selectionBackground#8b000030
  • editor.selectionHighlightBackground#8b000020
  • editorBracketMatch.background#8b000020
  • editorBracketMatch.border#8b0000
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff6666
  • editorGroup.border#330a0a
  • editorGroupHeader.tabsBackground#1a0505
  • editorGutter.addedBackground#8b0000
  • editorGutter.deletedBackground#ff6666
  • editorGutter.modifiedBackground#ff8888
  • editorHoverWidget.background#2a0f0f
  • editorHoverWidget.border#330a0a
  • editorIndentGuide.activeBackground#8b0000
  • editorIndentGuide.background#330a0a
  • editorInfo.foreground#ff8888
  • editorLineNumber.activeForeground#dc143c
  • editorLineNumber.foreground#8b0000
  • editorOverviewRuler.addedForeground#8b0000
  • editorOverviewRuler.deletedForeground#ff6666
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.infoForeground#ff8888
  • editorOverviewRuler.modifiedForeground#ff8888
  • editorOverviewRuler.warningForeground#ff8888
  • editorRuler.foreground#330a0a
  • editorSuggestWidget.background#2a0f0f
  • editorSuggestWidget.border#330a0a
  • editorSuggestWidget.foreground#dc143c
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#330a0a
  • editorWarning.foreground#ff8888
  • editorWhitespace.foreground#330a0a
  • editorWidget.background#2a0f0f
  • editorWidget.border#330a0a
  • errorForeground#ff6666
  • extensionButton.prominentBackground#8b0000
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#a01010
  • focusBorder#8b0000
  • foreground#dc143c
  • gitDecoration.addedResourceForeground#8b0000
  • gitDecoration.conflictingResourceForeground#ff8888
  • gitDecoration.deletedResourceForeground#ff6666
  • gitDecoration.ignoredResourceForeground#4d1515
  • gitDecoration.modifiedResourceForeground#ff8888
  • gitDecoration.stageDeletedResourceForeground#ff6666
  • gitDecoration.stageModifiedResourceForeground#ff8888
  • gitDecoration.submoduleResourceForeground#8b0000
  • gitDecoration.untrackedResourceForeground#a01010
  • input.background#2a0f0f
  • input.border#330a0a
  • input.foreground#dc143c
  • input.placeholderForeground#8b0000
  • inputOption.activeBorder#8b0000
  • inputValidation.errorBackground#ff666620
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#ff888820
  • inputValidation.infoBorder#ff8888
  • inputValidation.warningBackground#ff888820
  • inputValidation.warningBorder#ff8888
  • list.activeSelectionBackground#330a0a
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#8b000020
  • list.focusBackground#2a0f0f
  • list.focusForeground#dc143c
  • list.highlightForeground#ffffff
  • list.hoverBackground#2a0f0f
  • list.hoverForeground#dc143c
  • list.inactiveSelectionBackground#2a0f0f
  • list.inactiveSelectionForeground#dc143c
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#8b0000
  • minimap.selectionHighlight#8b000030
  • minimap.warningHighlight#ff8888
  • notificationCenterHeader.background#2a0f0f
  • notificationCenterHeader.foreground#dc143c
  • notifications.background#2a0f0f
  • notifications.border#330a0a
  • notifications.foreground#dc143c
  • notificationsErrorIcon.foreground#ff6666
  • notificationsInfoIcon.foreground#ff8888
  • notificationsWarningIcon.foreground#ff8888
  • panel.background#1a0505
  • panel.border#330a0a
  • panelTitle.activeBorder#8b0000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#8b0000
  • peekView.border#8b0000
  • peekViewEditor.background#1a0505
  • peekViewEditor.matchHighlightBackground#8b000040
  • peekViewResult.background#2a0f0f
  • peekViewResult.fileForeground#dc143c
  • peekViewResult.lineForeground#8b0000
  • peekViewResult.matchHighlightBackground#8b000040
  • peekViewResult.selectionBackground#330a0a
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2a0f0f
  • peekViewTitleDescription.foreground#8b0000
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#8b0000
  • scrollbar.shadow#0d020280
  • scrollbarSlider.activeBackground#8b0000aa
  • scrollbarSlider.background#8b000060
  • scrollbarSlider.hoverBackground#8b000080
  • selection.background#8b000040
  • settings.checkboxBackground#2a0f0f
  • settings.checkboxBorder#330a0a
  • settings.checkboxForeground#dc143c
  • settings.dropdownBackground#2a0f0f
  • settings.dropdownBorder#330a0a
  • settings.dropdownForeground#dc143c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#8b0000
  • settings.numberInputBackground#2a0f0f
  • settings.numberInputBorder#330a0a
  • settings.numberInputForeground#dc143c
  • settings.textInputBackground#2a0f0f
  • settings.textInputBorder#330a0a
  • settings.textInputForeground#dc143c
  • sideBar.background#1a0505
  • sideBar.border#330a0a
  • sideBar.foreground#dc143c
  • sideBarSectionHeader.background#2a0f0f
  • sideBarSectionHeader.border#330a0a
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1a0505
  • statusBar.border#330a0a
  • statusBar.debuggingBackground#ff6666
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#dc143c
  • statusBar.noFolderBackground#1a0505
  • statusBar.noFolderForeground#dc143c
  • statusBarItem.activeBackground#8b000020
  • statusBarItem.hoverBackground#8b000020
  • statusBarItem.prominentBackground#ff6666
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#ff7777
  • tab.activeBackground#2a0f0f
  • tab.activeBorder#8b0000
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#ff8888
  • tab.border#330a0a
  • tab.hoverBackground#2a0f0f
  • tab.hoverForeground#dc143c
  • tab.inactiveBackground#1a0505
  • tab.inactiveForeground#8b0000
  • tab.inactiveModifiedBorder#8b0000
  • tab.unfocusedActiveBackground#1a0505
  • tab.unfocusedActiveBorder#4d1515
  • tab.unfocusedActiveForeground#dc143c
  • tab.unfocusedActiveModifiedBorder#8b0000
  • tab.unfocusedHoverBackground#1a0505
  • tab.unfocusedHoverForeground#8b0000
  • tab.unfocusedInactiveBackground#1a0505
  • tab.unfocusedInactiveForeground#4d1515
  • tab.unfocusedInactiveModifiedBorder#4d1515
  • terminal.ansiBlack#0d0202
  • terminal.ansiBlue#8b0000
  • terminal.ansiBrightBlack#330a0a
  • terminal.ansiBrightBlue#a01010
  • terminal.ansiBrightCyan#dc143c
  • terminal.ansiBrightGreen#8b0000
  • terminal.ansiBrightMagenta#ff6666
  • terminal.ansiBrightRed#ff7777
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ff8888
  • terminal.ansiCyan#a01010
  • terminal.ansiGreen#8b0000
  • terminal.ansiMagenta#ff6666
  • terminal.ansiRed#ff6666
  • terminal.ansiWhite#dc143c
  • terminal.ansiYellow#ff8888
  • terminal.background#0d0202
  • terminal.foreground#dc143c
  • terminal.selectionBackground#8b000030
  • textBlockQuote.background#2a0f0f
  • textBlockQuote.border#8b0000
  • textCodeBlock.background#2a0f0f
  • textLink.activeForeground#a01010
  • textLink.foreground#8b0000
  • textPreformat.foreground#ff8888
  • titleBar.activeBackground#1a0505
  • titleBar.activeForeground#dc143c
  • titleBar.border#330a0a
  • titleBar.inactiveBackground#0d0202
  • titleBar.inactiveForeground#8b0000
  • tree.indentGuidesStroke#330a0a
  • widget.shadow#0d020280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4d1515italic
constant, entity.name.constant, variable.other.constant, variable.language#ff6666
entity, entity.name#ff8888
variable.parameter.function#dc143c
entity.name.tag#8b0000
keyword#8b0000bold
storage, storage.type#8b0000bold
storage.modifier.package, storage.modifier.import, storage.type.java#dc143c
string, punctuation.definition.string, string punctuation.section.embedded source#b22222
support#ff6666
meta.property-name#ff8888
variable#dc143c
variable.other#dc143c
invalid.broken#ff6666bold italic underline
invalid.deprecated#ff6666bold italic underline
invalid.illegal#ff6666italic underline
invalid.unimplemented#ff6666bold italic underline
carriage-return#ff6666italic underline
message.error#ff6666
string source#dc143c
string variable#ff6666
source.regexp, string.regexp#b22222
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#b22222
string.regexp constant.character.escape#8b0000bold
support.constant#ff6666
support.variable#ff6666
meta.module-reference#ff6666
punctuation.definition.list.begin.markdown#ff8888
markup.heading, markup.heading entity.name#ff6666bold
markup.quote#8b0000
markup.italic#dc143citalic
markup.bold#dc143cbold
markup.raw#ff6666
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff6666
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#8b0000
markup.changed, punctuation.definition.changed#ff8888
markup.ignored, markup.untracked#2a0f0f
meta.diff.range#8b0000bold
meta.diff.header#ff6666
meta.separator#ff6666bold
meta.output#ff6666
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8b0000
brackethighlighter.unmatched#ff6666
constant.other.reference.link, string.other.link#b22222underline