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.

  • _comment=== HOUSE TARGARYEN: Fire and Blood ===
  • _comment2=== Palette: Deep volcanic black, dragon fire orange, dragonscale red, ember glow ===
  • activityBar.background#0A0404
  • activityBar.border#1A0E0A
  • activityBar.foreground#FF4500
  • activityBar.inactiveForeground#5A2020
  • activityBarBadge.background#8B0000
  • activityBarBadge.foreground#FF8C00
  • badge.background#8B0000
  • badge.foreground#FF4500
  • button.background#8B0000
  • button.foreground#FF8C00
  • button.hoverBackground#A80000
  • button.secondaryBackground#1A0E0A
  • button.secondaryForeground#C07060
  • descriptionForeground#6A4030
  • diffEditor.insertedTextBackground#5FD70022
  • diffEditor.removedTextBackground#8B000033
  • editor.background#110808
  • editor.findMatchBackground#FF450055
  • editor.findMatchHighlightBackground#FF450033
  • editor.foreground#F0C8B8
  • editor.hoverHighlightBackground#FF450022
  • editor.lineHighlightBackground#1A0E0A
  • editor.lineHighlightBorder#2A1510
  • editor.selectionBackground#8B000050
  • editor.selectionHighlightBackground#8B000030
  • editor.wordHighlightBackground#FF450022
  • editor.wordHighlightStrongBackground#FF450044
  • editorBracketHighlight.foreground1#FF4500
  • editorBracketHighlight.foreground2#FF8C00
  • editorBracketHighlight.foreground3#5FD700
  • editorBracketHighlight.foreground4#CC0099
  • editorBracketHighlight.foreground5#FFA500
  • editorBracketHighlight.foreground6#4D99B0
  • editorBracketHighlight.unexpectedBracket.foreground#FF0000
  • editorBracketMatch.background#FF450033
  • editorBracketMatch.border#FF4500AA
  • editorCodeLens.foreground#6A4030
  • editorCursor.background#000000
  • editorCursor.foreground#FF4500
  • editorGroupHeader.tabsBackground#0A0404
  • editorGutter.addedBackground#5FD700
  • editorGutter.background#110808
  • editorGutter.deletedBackground#8B0000
  • editorGutter.modifiedBackground#FF8C00
  • editorIndentGuide.activeBackground#FF450055
  • editorIndentGuide.background#2A1510
  • editorInlayHint.background#1A0E0A
  • editorInlayHint.foreground#6A4030
  • editorLineNumber.activeForeground#FF4500
  • editorLineNumber.foreground#3A2018
  • editorLink.activeForeground#FF6347
  • editorRuler.foreground#2A1510
  • editorSuggestWidget.background#110808
  • editorSuggestWidget.highlightForeground#FF4500
  • editorSuggestWidget.selectedBackground#8B000066
  • editorWhitespace.foreground#2A1510
  • editorWidget.background#110808
  • editorWidget.border#3A2018
  • editorWidget.foreground#F0C8B8
  • errorForeground#FF0000
  • focusBorder#8B000088
  • gitDecoration.addedResourceForeground#5FD700
  • gitDecoration.conflictingResourceForeground#FF8C00
  • gitDecoration.deletedResourceForeground#FF4500
  • gitDecoration.ignoredResourceForeground#3A2018
  • gitDecoration.modifiedResourceForeground#FF8C00
  • gitDecoration.untrackedResourceForeground#5FD700
  • icon.foreground#FF4500
  • input.background#0D0606
  • input.border#3A2018
  • input.foreground#F0C8B8
  • input.placeholderForeground#5A2020
  • inputOption.activeBackground#8B000066
  • inputOption.activeBorder#FF4500
  • list.activeSelectionBackground#8B000055
  • list.activeSelectionForeground#FF4500
  • list.errorForeground#FF0000
  • list.focusBackground#8B000044
  • list.focusForeground#FF4500
  • list.highlightForeground#FF4500
  • list.hoverBackground#1A0E0A
  • list.hoverForeground#F0C8B8
  • list.inactiveSelectionBackground#1A0E0A
  • list.inactiveSelectionForeground#C07060
  • list.warningForeground#FF8C00
  • menu.background#110808
  • menu.foreground#F0C8B8
  • menu.selectionBackground#8B000066
  • menu.selectionForeground#FF4500
  • menu.separatorBackground#2A1510
  • minimap.background#0A0404
  • notificationCenterHeader.background#0A0404
  • notificationCenterHeader.foreground#FF4500
  • notifications.background#110808
  • notifications.border#1A0E0A
  • notifications.foreground#F0C8B8
  • panel.background#0A0404
  • panel.border#1A0E0A
  • panelTitle.activeBorder#FF4500
  • panelTitle.activeForeground#FF4500
  • panelTitle.inactiveForeground#5A2020
  • progressBar.background#8B0000
  • quickInput.background#110808
  • quickInputList.focusBackground#8B000066
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#8B000088
  • scrollbarSlider.background#3A201855
  • scrollbarSlider.hoverBackground#FF450044
  • selection.background#8B000055
  • settings.headerForeground#FF4500
  • settings.modifiedItemIndicator#FF8C00
  • sideBar.background#0D0606
  • sideBar.border#1A0E0A
  • sideBar.foreground#C07060
  • sideBarSectionHeader.background#0A0404
  • sideBarSectionHeader.border#8B000033
  • sideBarSectionHeader.foreground#FF4500
  • sideBarTitle.foreground#FF4500
  • statusBar.background#8B0000
  • statusBar.border#FF450044
  • statusBar.debuggingBackground#FF4500
  • statusBar.debuggingForeground#0A0404
  • statusBar.foreground#FF4500
  • statusBarItem.activeBackground#8B000066
  • statusBarItem.hoverBackground#8B000033
  • statusBarItem.remoteBackground#8B0000
  • statusBarItem.remoteForeground#FF4500
  • tab.activeBackground#110808
  • tab.activeBorder#8B0000
  • tab.activeBorderTop#FF4500
  • tab.activeForeground#FF4500
  • tab.border#1A0E0A
  • tab.hoverBackground#1A0E0A
  • tab.hoverForeground#C07060
  • tab.inactiveBackground#0A0404
  • tab.inactiveForeground#5A2020
  • terminal.ansiBlack#0A0404
  • terminal.ansiBlue#1A3A6B
  • terminal.ansiBrightBlack#5A2020
  • terminal.ansiBrightBlue#4D7FCC
  • terminal.ansiBrightCyan#4D99B0
  • terminal.ansiBrightGreen#5FD700
  • terminal.ansiBrightMagenta#CC0099
  • terminal.ansiBrightRed#FF4500
  • terminal.ansiBrightWhite#F0C8B8
  • terminal.ansiBrightYellow#FF8C00
  • terminal.ansiCyan#1A4A5A
  • terminal.ansiGreen#3D6B00
  • terminal.ansiMagenta#6B0050
  • terminal.ansiRed#8B0000
  • terminal.ansiWhite#C07060
  • terminal.ansiYellow#B8640C
  • terminal.background#0A0404
  • terminal.border#1A0E0A
  • terminal.foreground#F0C8B8
  • terminal.selectionBackground#8B000044
  • terminalCursor.foreground#FF4500
  • titleBar.activeBackground#0A0404
  • titleBar.activeForeground#FF4500
  • titleBar.border#1A0E0A
  • titleBar.inactiveBackground#080303
  • titleBar.inactiveForeground#5A2020
  • window.activeBorder#8B0000
  • window.inactiveBorder#1A0E0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F0C8B8—
comment, punctuation.definition.comment#4A2828italic
keyword, keyword.control, storage.type, storage.modifier#FF4500bold
keyword.operator#CC6633—
string, string.quoted, string.template#FF8C00—
constant.character.escape#5FD700—
punctuation.definition.template-expression#FFA500—
constant.numeric#FFA500—
constant, constant.language#F0D0C0bold
constant.language.boolean, constant.language.null#FF6347italic
entity.name.function, support.function#FF6347—
variable.parameter#C07060italic
storage.type.function.arrow#FF4500—
entity.name.class, entity.name.type.class, support.class#FF4500bold
entity.name.type, support.type, storage.type.primitive#E03311—
entity.name.type.interface, entity.name.type.enum#CC0099italic
variable, variable.other, variable.other.readwrite#CC5544—
variable.other.property, support.variable.property#B08070—
support.type.property-name#FF6347—
variable.language.this, variable.language.self#FF4500italic
keyword.control.import, keyword.control.export, keyword.control.from#FF4500bold
punctuation.separator, punctuation.terminator#6A4030—
punctuation.definition.block, meta.brace#8A5540—
meta.decorator, entity.name.function.decorator#CC0099italic
entity.name.tag#FF4500—
entity.other.attribute-name#CC6633italic
support.class.component, entity.name.tag.tsx#FF4500bold
entity.name.tag.css, entity.other.attribute-name.class.css#FF4500—
support.type.property-name.css#B08070—
meta.property-value.css#FF8C00—
support.type.property-name.json#FF6347—
markup.heading#FF4500bold
markup.bold#F0D0C0bold
markup.underline.link#4D99B0—
invalid, invalid.illegal#FF0000bold underline