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#2a2418
  • activityBar.activeBorder#FFD700
  • activityBar.background#141008
  • activityBar.border#3a3420
  • activityBar.foreground#FFA500
  • activityBar.inactiveForeground#8a7a5a
  • activityBarBadge.background#228B22
  • activityBarBadge.foreground#ffffff
  • badge.background#FFB6C1
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#FF8C00
  • breadcrumb.focusForeground#FFD700
  • breadcrumb.foreground#aa9a7a
  • button.background#FF8C00
  • button.foreground#000000
  • button.hoverBackground#FFA500
  • button.secondaryBackground#4a4430
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#5a5440
  • debugToolBar.background#2a2418
  • debugToolBar.border#FFA500
  • diffEditor.border#3a3420
  • diffEditor.insertedTextBackground#32CD3230
  • diffEditor.removedTextBackground#DC143C30
  • dropdown.background#2a2418
  • dropdown.border#FFA500
  • dropdown.foreground#ffffff
  • editor.background#1a1408
  • editor.findMatchBackground#FFD70080
  • editor.findMatchHighlightBackground#FFD70050
  • editor.foreground#F5F5DC
  • editor.inactiveSelectionBackground#FF8C0050
  • editor.lineHighlightBackground#2a2418
  • editor.selectionBackground#FF8C0080
  • editor.selectionHighlightBackground#FFA50040
  • editor.wordHighlightBackground#32CD3230
  • editor.wordHighlightStrongBackground#32CD3250
  • editorBracketMatch.background#FF8C0050
  • editorBracketMatch.border#FFA500
  • editorCursor.foreground#FF8C00
  • editorError.background#8B000080
  • editorError.border#DC143C
  • editorError.foreground#8B0000
  • editorGroupHeader.tabsBackground#141008
  • editorGroupHeader.tabsBorder#3a3420
  • editorHint.foreground#DAA520
  • editorHoverWidget.background#2a2418
  • editorHoverWidget.border#FFA500
  • editorIndentGuide.activeBackground1#FFA500
  • editorIndentGuide.background1#3a3420
  • editorInfo.foreground#32CD32
  • editorLineNumber.activeForeground#FFD700
  • editorLineNumber.foreground#8a7a5a
  • editorSuggestWidget.background#2a2418
  • editorSuggestWidget.border#FFA500
  • editorSuggestWidget.foreground#F5F5DC
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#FF8C0060
  • editorWarning.foreground#FF6347
  • editorWhitespace.foreground#3a3420
  • editorWidget.background#2a2418
  • editorWidget.border#FFA500
  • editorWidget.foreground#F5F5DC
  • focusBorder#FFD700
  • gitDecoration.conflictingResourceForeground#8B0000
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#8a7a5a
  • gitDecoration.modifiedResourceForeground#FFA500
  • gitDecoration.untrackedResourceForeground#32CD32
  • input.background#2a2418
  • input.border#FFA500
  • input.foreground#ffffff
  • input.placeholderForeground#8a7a5a
  • inputOption.activeBorder#FFD700
  • inputValidation.errorBackground#2a0a0a
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#3a2414
  • inputValidation.warningBorder#FF6347
  • list.activeSelectionBackground#FF8C0080
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#FF8C0080
  • list.focusForeground#ffffff
  • list.highlightForeground#FFD700
  • list.hoverBackground#3a3420
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#4a4430
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FF6347
  • merge.border#FFD700
  • merge.currentContentBackground#FF8C0030
  • merge.currentHeaderBackground#FF8C0070
  • merge.incomingContentBackground#DC143C30
  • merge.incomingHeaderBackground#DC143C70
  • minimap.background#141008
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#FFD70080
  • minimap.selectionHighlight#FF8C0080
  • minimap.warningHighlight#FF6347
  • minimapGutter.addedBackground#32CD32
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#FFA500
  • notificationCenter.border#3a3420
  • notificationCenterHeader.background#2a2418
  • notificationLink.foreground#FFD700
  • notifications.background#2a2418
  • notifications.border#FFA500
  • notifications.foreground#ffffff
  • panel.background#1a1408
  • panel.border#3a3420
  • panelTitle.activeBorder#FFA500
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#aa9a7a
  • peekView.border#FFA500
  • peekViewEditor.background#2a2418
  • peekViewEditor.matchHighlightBackground#FF8C0050
  • peekViewResult.background#1a1408
  • peekViewResult.matchHighlightBackground#FF8C0050
  • peekViewResult.selectionBackground#FF8C0080
  • peekViewTitle.background#2a2418
  • peekViewTitleDescription.foreground#aa9a7a
  • peekViewTitleLabel.foreground#FFD700
  • scrollbarSlider.activeBackground#FFD700A0
  • scrollbarSlider.background#F4C43060
  • scrollbarSlider.hoverBackground#F4C43080
  • sideBar.background#1a1408
  • sideBar.border#3a3420
  • sideBar.foreground#e8e0c8
  • sideBarSectionHeader.background#2a2418
  • sideBarSectionHeader.border#3a3420
  • sideBarSectionHeader.foreground#FF8C00
  • sideBarTitle.foreground#FFD700
  • statusBar.background#FF8C00
  • statusBar.border#3a3420
  • statusBar.debuggingBackground#DC143C
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#4a4430
  • statusBarItem.errorBackground#8B0000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#FFD700
  • statusBarItem.prominentHoverBackground#FFA500
  • statusBarItem.warningBackground#FF6347
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#2a2418
  • tab.activeBorder#141008
  • tab.activeBorderTop#FF8C00
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#2a2418
  • tab.hoverBorder#FFA500
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1a1408
  • tab.inactiveForeground#aa9a7a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#4169E1
  • terminal.ansiBrightBlack#4a4430
  • terminal.ansiBrightBlue#5DADE2
  • terminal.ansiBrightCyan#7FFF00
  • terminal.ansiBrightGreen#90EE90
  • terminal.ansiBrightMagenta#FFD1DC
  • terminal.ansiBrightRed#FF6347
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffea00
  • terminal.ansiCyan#32CD32
  • terminal.ansiGreen#228B22
  • terminal.ansiMagenta#FFB6C1
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#F5F5DC
  • terminal.ansiYellow#FFD700
  • terminal.background#1a1408
  • terminal.foreground#F5F5DC
  • terminalCursor.foreground#FF8C00
  • titleBar.activeBackground#141008
  • titleBar.activeForeground#FFD700
  • titleBar.border#3a3420
  • titleBar.inactiveBackground#0f0c06
  • titleBar.inactiveForeground#8a7a5a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D2B48Citalic
variable, string constant.other.placeholder#FFD700
keyword, storage.type, storage.modifier#FF8C00bold
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#4169E1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#32CD32bold
entity.name.type.class, entity.name.class, support.type, support.class#DEB887bold
string, constant.other.symbol, constant.other.key, entity.name.tag, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FFB6C1
constant.numeric, constant.language, constant.character, constant#F4C430
entity.name.type, entity.other.inherited-class, support.type#FF8C00
variable.other.property, variable.other.object.property, variable.object.property, support.variable.property#FFA500
variable.other.constant, constant.language.boolean, constant.language.null, constant.language.undefined#A9A9A9bold
variable.parameter, meta.parameter#DAA520italic
keyword.control.import, keyword.control.from, keyword.control.export, meta.import#228B22bold
entity.name.tag, meta.tag, markup.deleted.git_gutter#DC143C
entity.other.attribute-name#32CD32italic
markup.heading, markup.heading entity.name#FF8C00bold
markup.bold, punctuation.definition.bold#FFD700bold
markup.italic, punctuation.definition.italic#FFB6C1italic
markup.inline.raw, markup.fenced_code.block#F5F5DC
markup.underline.link, string.other.link#32CD32underline
markup.quote#90EE90italic
markup.list#228B22
markup.inserted, markup.inserted.git_gutter#32CD32
markup.deleted, markup.deleted.git_gutter#8B0000
markup.changed, markup.changed.git_gutter#FF8C00
invalid, invalid.illegal, invalid.broken#8B0000bold underline
invalid.deprecated#708090italic strikethrough
string.regexp#228B22
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#DAA520
punctuation, meta.brace, meta.delimiter#D2B48C
meta.decorator, punctuation.decorator#DC143Cbold
variable.language.this, variable.language.self, variable.language.super#FF8C00bold italic
entity.name.namespace, entity.name.type.module#228B22
storage.type.annotation, punctuation.definition.annotation#F4C430
entity.other.attribute-name.class.css#DEB887
entity.other.attribute-name.id.css#32CD32
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#F5F5DC
keyword.other.DML.sql, keyword.other.DDL.create.II.sql#FF8C00bold