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 LANNISTER: A Lannister Always Pays Their Debts ===
  • _comment2=== Palette: Deep burgundy-black, rich gold, crimson accents, warm amber ===
  • activityBar.background#0D0A05
  • activityBar.border#1C1608
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#5A4A20
  • activityBarBadge.background#8B0000
  • activityBarBadge.foreground#FFD700
  • badge.background#8B0000
  • badge.foreground#FFD700
  • button.background#8B0000
  • button.foreground#FFD700
  • button.hoverBackground#A80000
  • button.secondaryBackground#1C1608
  • button.secondaryForeground#C9A840
  • descriptionForeground#7A6530
  • diffEditor.insertedTextBackground#88BB0022
  • diffEditor.removedTextBackground#CC000033
  • editor.background#14100A
  • editor.findMatchBackground#FFD70055
  • editor.findMatchHighlightBackground#FFD70033
  • editor.foreground#F0E0C0
  • editor.hoverHighlightBackground#7B000033
  • editor.lineHighlightBackground#1C1608
  • editor.lineHighlightBorder#2A200E
  • editor.selectionBackground#B8960C40
  • editor.selectionHighlightBackground#B8960C25
  • editor.wordHighlightBackground#FFD70022
  • editor.wordHighlightStrongBackground#FFD70044
  • editorBracketHighlight.foreground1#FFD700
  • editorBracketHighlight.foreground2#CC0000
  • editorBracketHighlight.foreground3#88BB00
  • editorBracketHighlight.foreground4#FFEA80
  • editorBracketHighlight.foreground5#BB77BB
  • editorBracketHighlight.foreground6#E6B800
  • editorBracketHighlight.unexpectedBracket.foreground#FF0000
  • editorBracketMatch.background#FFD70033
  • editorBracketMatch.border#FFD700AA
  • editorCodeLens.foreground#7A6530
  • editorCursor.background#000000
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#0D0A05
  • editorGutter.addedBackground#88BB00
  • editorGutter.background#14100A
  • editorGutter.deletedBackground#CC0000
  • editorGutter.modifiedBackground#FFD700
  • editorIndentGuide.activeBackground#FFD70055
  • editorIndentGuide.background#2A200E
  • editorInlayHint.background#1C1608
  • editorInlayHint.foreground#7A6530
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#3A2E10
  • editorLink.activeForeground#FFD700
  • editorRuler.foreground#2A200E
  • editorSuggestWidget.background#14100A
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#B8960C55
  • editorWhitespace.foreground#2A200E
  • editorWidget.background#14100A
  • editorWidget.border#3A2E10
  • editorWidget.foreground#F0E0C0
  • errorForeground#FF4444
  • focusBorder#FFD70066
  • gitDecoration.addedResourceForeground#88BB00
  • gitDecoration.conflictingResourceForeground#E6B800
  • gitDecoration.deletedResourceForeground#CC0000
  • gitDecoration.ignoredResourceForeground#3A2E10
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#88BB00
  • icon.foreground#FFD700
  • input.background#100D07
  • input.border#3A2E10
  • input.foreground#F0E0C0
  • input.placeholderForeground#5A4A20
  • inputOption.activeBackground#B8960C55
  • inputOption.activeBorder#FFD700
  • list.activeSelectionBackground#B8960C44
  • list.activeSelectionForeground#FFD700
  • list.errorForeground#FF4444
  • list.focusBackground#B8960C33
  • list.focusForeground#FFD700
  • list.highlightForeground#FFD700
  • list.hoverBackground#1C1608
  • list.hoverForeground#F0E0C0
  • list.inactiveSelectionBackground#1C1608
  • list.inactiveSelectionForeground#C9A840
  • list.warningForeground#E6B800
  • menu.background#14100A
  • menu.foreground#F0E0C0
  • menu.selectionBackground#B8960C55
  • menu.selectionForeground#FFD700
  • menu.separatorBackground#2A200E
  • minimap.background#0D0A05
  • notificationCenterHeader.background#0D0A05
  • notificationCenterHeader.foreground#FFD700
  • notifications.background#14100A
  • notifications.border#1C1608
  • notifications.foreground#F0E0C0
  • panel.background#0D0A05
  • panel.border#1C1608
  • panelTitle.activeBorder#FFD700
  • panelTitle.activeForeground#FFD700
  • panelTitle.inactiveForeground#5A4A20
  • progressBar.background#FFD700
  • quickInput.background#14100A
  • quickInputList.focusBackground#B8960C55
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#8B000088
  • scrollbarSlider.background#3A2E1055
  • scrollbarSlider.hoverBackground#FFD70044
  • selection.background#B8960C55
  • settings.headerForeground#FFD700
  • settings.modifiedItemIndicator#8B0000
  • sideBar.background#100D07
  • sideBar.border#1C1608
  • sideBar.foreground#C9A840
  • sideBarSectionHeader.background#0D0A05
  • sideBarSectionHeader.border#8B000033
  • sideBarSectionHeader.foreground#FFD700
  • sideBarTitle.foreground#FFD700
  • statusBar.background#7B0000
  • statusBar.border#FFD70044
  • statusBar.debuggingBackground#B8960C
  • statusBar.debuggingForeground#0D0A05
  • statusBar.foreground#FFD700
  • statusBarItem.activeBackground#8B000066
  • statusBarItem.hoverBackground#8B000033
  • statusBarItem.remoteBackground#7B0000
  • statusBarItem.remoteForeground#FFD700
  • tab.activeBackground#14100A
  • tab.activeBorder#8B0000
  • tab.activeBorderTop#FFD700
  • tab.activeForeground#FFD700
  • tab.border#1C1608
  • tab.hoverBackground#1C1608
  • tab.hoverForeground#C9A840
  • tab.inactiveBackground#0D0A05
  • tab.inactiveForeground#5A4A20
  • terminal.ansiBlack#0D0A05
  • terminal.ansiBlue#5577AA
  • terminal.ansiBrightBlack#5A4A20
  • terminal.ansiBrightBlue#88AADD
  • terminal.ansiBrightCyan#88AACC
  • terminal.ansiBrightGreen#88BB00
  • terminal.ansiBrightMagenta#BB77BB
  • terminal.ansiBrightRed#FF4444
  • terminal.ansiBrightWhite#F0E0C0
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#557799
  • terminal.ansiGreen#557A00
  • terminal.ansiMagenta#884488
  • terminal.ansiRed#CC0000
  • terminal.ansiWhite#C9A840
  • terminal.ansiYellow#B8960C
  • terminal.background#0D0A05
  • terminal.border#1C1608
  • terminal.foreground#F0E0C0
  • terminal.selectionBackground#B8960C44
  • terminalCursor.foreground#FFD700
  • titleBar.activeBackground#0D0A05
  • titleBar.activeForeground#FFD700
  • titleBar.border#1C1608
  • titleBar.inactiveBackground#0A0805
  • titleBar.inactiveForeground#5A4A20
  • window.activeBorder#8B0000
  • window.inactiveBorder#1C1608

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F0E0C0
comment, punctuation.definition.comment#5A4825italic
keyword, keyword.control, storage.type, storage.modifier#CC0000bold
keyword.operator#D4A850
string, string.quoted, string.template#FFD700
constant.character.escape#88BB00
punctuation.definition.template-expression#E6B800
constant.numeric#E6B800
constant, constant.language#F5E6B0bold
constant.language.boolean, constant.language.null#FFEA80italic
entity.name.function, support.function#FFEA80
variable.parameter#C9A840italic
storage.type.function.arrow#CC0000
entity.name.class, entity.name.type.class, support.class#FFD700bold
entity.name.type, support.type, storage.type.primitive#DAA520
entity.name.type.interface, entity.name.type.enum#BB9900italic
variable, variable.other, variable.other.readwrite#88BB00
variable.other.property, support.variable.property#C9A840
support.type.property-name#FFEA80
variable.language.this, variable.language.self#CC0000italic
keyword.control.import, keyword.control.export, keyword.control.from#CC0000bold
punctuation.separator, punctuation.terminator#7A6530
punctuation.definition.block, meta.brace#9A8050
meta.decorator, entity.name.function.decorator#BB77BBitalic
entity.name.tag#CC0000
entity.other.attribute-name#C9A840italic
support.class.component, entity.name.tag.tsx#FFD700bold
entity.name.tag.css, entity.other.attribute-name.class.css#CC0000
support.type.property-name.css#C9A840
meta.property-value.css#FFD700
support.type.property-name.json#FFEA80
markup.heading#FFD700bold
markup.bold#F5E6B0bold
markup.underline.link#88AACC
invalid, invalid.illegal#FF0000bold underline