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#2a1500
  • activityBar.activeBorder#FFD700
  • activityBar.background#0f0600
  • activityBar.border#3a2010
  • activityBar.foreground#FF6B00
  • activityBar.inactiveForeground#8a5a30
  • activityBarBadge.background#DC143C
  • activityBarBadge.foreground#ffffff
  • badge.background#DC143C
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FF6B00
  • breadcrumb.focusForeground#FFD700
  • breadcrumb.foreground#aa8860
  • button.background#FF6B00
  • button.foreground#000000
  • button.hoverBackground#FF8C00
  • button.secondaryBackground#4a3020
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#6a4030
  • debugExceptionWidget.background#2a0000
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#2a1500
  • debugToolBar.border#FF6B00
  • diffEditor.border#3a2010
  • diffEditor.insertedTextBackground#FF6B0020
  • diffEditor.removedTextBackground#DC143C20
  • dropdown.background#2a1500
  • dropdown.border#FF6B00
  • dropdown.foreground#ffffff
  • editor.background#1a0a00
  • editor.findMatchBackground#FFD70080
  • editor.findMatchHighlightBackground#FFD70050
  • editor.foreground#fff5e6
  • editor.inactiveSelectionBackground#FF6B0050
  • editor.lineHighlightBackground#2a1500
  • editor.selectionBackground#FF6B0080
  • editor.selectionHighlightBackground#FF8C0040
  • editor.wordHighlightBackground#FFA50030
  • editor.wordHighlightStrongBackground#FFA50050
  • editorBracketMatch.background#FF8C0050
  • editorBracketMatch.border#FFA500
  • editorCursor.foreground#FF6B00
  • editorError.background#1a000080
  • editorError.border#DC143C
  • editorError.foreground#DC143C
  • editorGroupHeader.tabsBackground#0f0600
  • editorGroupHeader.tabsBorder#3a2010
  • editorHint.foreground#FF8C00
  • editorIndentGuide.activeBackground1#FF6B00
  • editorIndentGuide.background1#3a2010
  • editorInfo.foreground#FFA500
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#8a5a30
  • editorSuggestWidget.background#2a1500
  • editorSuggestWidget.border#FF6B00
  • editorSuggestWidget.foreground#fff5e6
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#FF6B0050
  • editorWarning.foreground#FFD700
  • editorWhitespace.foreground#3a2010
  • editorWidget.background#2a1500
  • editorWidget.border#FF6B00
  • editorWidget.foreground#fff5e6
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#6a4030
  • gitDecoration.modifiedResourceForeground#FF8C00
  • gitDecoration.untrackedResourceForeground#FFD700
  • input.background#2a1500
  • input.border#FF6B00
  • input.foreground#ffffff
  • input.placeholderForeground#8a5a30
  • inputOption.activeBorder#FFD700
  • inputValidation.errorBackground#2a0000
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#3a2a00
  • inputValidation.warningBorder#FFD700
  • list.activeSelectionBackground#FF6B0070
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#FF6B0070
  • list.focusForeground#ffffff
  • list.highlightForeground#FFD700
  • list.hoverBackground#3a2010
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#4a3020
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FFD700
  • merge.border#FFD700
  • merge.currentContentBackground#FF6B0030
  • merge.currentHeaderBackground#FF6B0070
  • merge.incomingContentBackground#DC143C30
  • merge.incomingHeaderBackground#DC143C70
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#FFD70080
  • minimap.selectionHighlight#FF6B0080
  • minimap.warningHighlight#FFD700
  • minimapGutter.addedBackground#FF8C00
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#FFA500
  • notificationCenter.border#3a2010
  • notificationCenterHeader.background#2a1500
  • notificationLink.foreground#FFD700
  • notifications.background#2a1500
  • notifications.border#FF6B00
  • notifications.foreground#ffffff
  • panel.background#1a0a00
  • panel.border#3a2010
  • panelTitle.activeBorder#FF6B00
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#aa8860
  • peekView.border#FF6B00
  • peekViewEditor.background#2a1500
  • peekViewEditor.matchHighlightBackground#FF8C0050
  • peekViewResult.background#150a00
  • peekViewResult.matchHighlightBackground#FF8C0050
  • peekViewResult.selectionBackground#FF6B0070
  • peekViewTitle.background#2a1500
  • peekViewTitleDescription.foreground#aa8860
  • peekViewTitleLabel.foreground#FFD700
  • progressBar.background#FF6B00
  • scrollbarSlider.activeBackground#FF8C00A0
  • scrollbarSlider.background#FF6B0050
  • scrollbarSlider.hoverBackground#FF6B0070
  • sideBar.background#150a00
  • sideBar.border#3a2010
  • sideBar.foreground#e8d4b8
  • sideBarSectionHeader.background#2a1500
  • sideBarSectionHeader.border#3a2010
  • sideBarSectionHeader.foreground#FF8C00
  • sideBarTitle.foreground#FFD700
  • statusBar.background#FF6B00
  • statusBar.border#3a2010
  • statusBar.debuggingBackground#DC143C
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#3a2010
  • statusBarItem.errorBackground#DC143C
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#FFD700
  • statusBarItem.prominentHoverBackground#FFA500
  • statusBarItem.warningBackground#FFD700
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#2a1500
  • tab.activeBorder#0f0600
  • tab.activeBorderTop#FF6B00
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#2a1500
  • tab.hoverBorder#FFA500
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#150a00
  • tab.inactiveForeground#aa8860
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#FF8C00
  • terminal.ansiBrightBlack#4a3020
  • terminal.ansiBrightBlue#ffaa44
  • terminal.ansiBrightCyan#ffcc66
  • terminal.ansiBrightGreen#ccaa88
  • terminal.ansiBrightMagenta#ff8888
  • terminal.ansiBrightRed#ff4466
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffea00
  • terminal.ansiCyan#FFA500
  • terminal.ansiGreen#aa8860
  • terminal.ansiMagenta#ff6666
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#fff5e6
  • terminal.ansiYellow#FFD700
  • terminal.background#1a0a00
  • terminal.foreground#fff5e6
  • terminalCursor.foreground#FFD700
  • titleBar.activeBackground#0f0600
  • titleBar.activeForeground#FFD700
  • titleBar.border#3a2010
  • titleBar.inactiveBackground#0a0400
  • titleBar.inactiveForeground#8a5a30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a4030italic
keyword, storage.type, storage.modifier#DC143Cbold
keyword.control, keyword.operator#ff4466bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FF8C00
string, string.quoted#FFA500
string.template, string.quoted.template#ffaa44
constant.character.escape#FFD700bold
string.regexp#ffcc66
constant.numeric, constant.language#FFD700
constant.language.boolean#ff8888bold
variable, variable.other#FF6B00bold
variable.parameter#ffaa66italic
variable.other.property, support.variable.property#e8d4b8
entity.name.function, support.function#FFD700bold
meta.function-call#ffea88
entity.name.type, entity.name.class, support.class#DC143C
entity.other.inherited-class#ff6666italic
entity.name.tag#FF6B00bold
entity.other.attribute-name#FFA500italic
entity.name.tag.css, entity.other.attribute-name.class.css#FF6B00
support.type.property-name.css#FFA500
support.constant.property-value.css#FFD700
support.type, support.class#ffaa66
support.constant#ff8888
support.type.property-name.json#FF8C00
keyword.operator#DC143C
punctuation#cc9966
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#aa8860
meta.brace, punctuation.section#e8d4b8
invalid#ffffff
invalid.deprecated#6a4030strikethrough
markup.heading#FF6B00bold
markup.bold#DC143Cbold
markup.italic#FFA500italic
markup.inline.raw#FFD700
markup.underline.link#ffaa44underline
markup.list#FF8C00
markup.inserted#FFD700
markup.deleted#DC143C
markup.changed#FFA500
variable.language.this#ff6666italic
entity.name.type.ts, entity.name.type.tsx#ff8888
meta.decorator, punctuation.decorator#FF6B00bold
variable.language.special.self.python#DC143Citalic
entity.name.function.decorator.python#FF8C00
keyword.control.conditional, keyword.control.loop#ff4466bold
entity.name.exception, support.class.exception#DC143Cbold