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
Game of Thrones - The Seven Kingdoms by Abhiroux - VS Code Theme