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.activeBorder#c41e1e
  • activityBar.background#2a2620
  • activityBar.badge.background#c41e1e
  • activityBar.badge.foreground#ffffff
  • activityBar.foreground#d4c896
  • activityBar.inactiveForeground#666666
  • badge.background#c41e1e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#a68a2e
  • breadcrumb.background#1a1410
  • breadcrumb.foreground#666666
  • breadcrumbPicker.background#2a2620
  • button.background#c41e1e
  • button.foreground#ffffff
  • button.hoverBackground#8b1a1a
  • diffEditor.insertedTextBackground#2a3a2a40
  • diffEditor.removedTextBackground#3a1a1a40
  • diffEditorInsertedTextBorder#a3be8c
  • diffEditorOverview.insertedForeground#a3be8c88
  • diffEditorOverview.removedForeground#d8655a88
  • diffEditorRemovedTextBorder#d8655a
  • dropdown.background#221e18
  • dropdown.border#3c3630
  • dropdown.foreground#d4c896
  • editor.background#1a1410
  • editor.findMatchBackground#a68a2e
  • editor.findMatchForeground#d4c896
  • editor.findMatchHighlightBackground#a68a2e80
  • editor.foreground#d4c896
  • editor.lineHighlightBackground#3c3630
  • editor.matchHighlightBackground#3c3630
  • editor.selectionBackground#4a3c2a
  • editor.selectionHighlightBackground#3c3630
  • editorBracketMatch.background#3c3630
  • editorBracketMatch.border#a68a2e
  • editorCursor.foreground#a68a2e
  • editorGroup.border#3c3630
  • editorGroupHeader.tabsBackground#2a2620
  • editorGutter.background#2a2620
  • editorHoverWidget.background#221e18
  • editorHoverWidget.border#3c3630
  • editorHoverWidget.foreground#d4c896
  • editorIndentGuide.activeBackground#a68a2e
  • editorIndentGuide.background#4a3c2a
  • editorLineNumber.activeForeground#a68a2e
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.border#3c3630
  • editorSuggestWidget.background#221e18
  • editorSuggestWidget.border#3c3630
  • editorSuggestWidget.foreground#d4c896
  • editorSuggestWidget.highlightForeground#c41e1e
  • editorSuggestWidget.selectedBackground#3c3630
  • editorWhitespace.foreground#3c3630
  • errorForeground#c41e1e
  • gitDecoration.addedResourceForeground#a3be8c
  • gitDecoration.conflictingResourceForeground#c41e1e
  • gitDecoration.deletedResourceForeground#d8655a
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#a68a2e
  • gitDecoration.untrackedResourceForeground#6aabd2
  • infoForeground#6aabd2
  • input.background#221e18
  • input.border#3c3630
  • input.foreground#d4c896
  • input.placeholderForeground#666666
  • inputOption.activeBackground#3c3630
  • inputOption.activeForeground#a68a2e
  • list.activeSelectionBackground#3c3630
  • list.activeSelectionForeground#a68a2e
  • list.focusBackground#3c3630
  • list.highlightForeground#c41e1e
  • list.hoverBackground#3c3630
  • list.hoverForeground#a68a2e
  • list.inactiveSelectionBackground#2a2620
  • list.inactiveSelectionForeground#d4c896
  • minimapGutter.background#2a2620
  • notification.background#2a2620
  • notification.border#3c3630
  • notification.foreground#d4c896
  • notifications.background#2a2620
  • notifications.border#3c3630
  • notifications.foreground#d4c896
  • panel.background#2a2620
  • panel.border#3c3630
  • panelInput.border#3c3630
  • panelTitle.activeForeground#c41e1e
  • panelTitle.inactiveForeground#666666
  • peekView.border#c41e1e
  • peekViewEditor.background#1a1410
  • peekViewEditor.matchHighlightBackground#a68a2e80
  • peekViewResult.background#2a2620
  • peekViewResult.matchHighlightBackground#a68a2e80
  • peekViewResult.selectionBackground#3c3630
  • peekViewTitle.background#1a1410
  • peekViewTitle.foreground#d4c896
  • scrollbarSlider.activeBackground#5c403380
  • scrollbarSlider.background#3c363080
  • scrollbarSlider.hoverBackground#5c4033cc
  • sideBar.background#2a2620
  • sideBar.border#3c3630
  • sideBar.foreground#d4c896
  • sideBarSectionHeader.background#3c3630
  • sideBarSectionHeader.foreground#d4c896
  • statusBar.background#1a1410
  • statusBar.debuggingBackground#c41e1e
  • statusBar.foreground#d4c896
  • statusBarItem.prominentBackground#c41e1e
  • statusBarItem.remoteBackground#2c6e8c
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#3c3630
  • tab.activeBorder#c41e1e
  • tab.activeBorderTop#c41e1e
  • tab.activeForeground#a68a2e
  • tab.border#3c3630
  • tab.inactiveBackground#2a2620
  • tab.inactiveForeground#666666
  • tab.unfocusedActiveForeground#c8b88a
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#1a1410
  • terminal.ansiBlue#6aabd2
  • terminal.ansiBrightBlack#3c3630
  • terminal.ansiBrightBlue#8ac6e8
  • terminal.ansiBrightCyan#8ac6e8
  • terminal.ansiBrightGreen#7a8e6a
  • terminal.ansiBrightMagenta#f08080
  • terminal.ansiBrightRed#d8655a
  • terminal.ansiBrightWhite#e8d5a3
  • terminal.ansiBrightYellow#a68a2e
  • terminal.ansiCyan#6aabd2
  • terminal.ansiGreen#5a6e4a
  • terminal.ansiMagenta#d8655a
  • terminal.ansiRed#c41e1e
  • terminal.ansiWhite#d4c896
  • terminal.ansiYellow#a68a2e
  • terminal.background#1a1410
  • terminal.border#3c3630
  • terminal.foreground#d4c896
  • terminal.selectionBackground#3c3630
  • terminalCursor.foreground#a68a2e
  • titleBar.activeBackground#3c3630
  • titleBar.activeForeground#a68a2e
  • titleBar.inactiveBackground#2a2620
  • titleBar.inactiveForeground#666666
  • warningForeground#a68a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, comment.block.documentation#7a8e6aitalic
keyword, keyword.control, storage.type, storage.modifier#a68a2ebold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#888888
string, string.quoted, string.quoted.single, string.quoted.double, string.regexp#d8655a
constant.numeric, constant.numeric.integer, constant.numeric.float#c41e1e
constant.language, constant.language.boolean, constant.language.null#b55a5a
constant.other, support.constant#b55a5a
variable, variable.other, variable.other.readwrite#d2b48c
variable.other.constant, variable.language.special#e06c60
entity.name.function, support.function, meta.function-call#6aabd2bold
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type#6aabd2
support.type.property-name, variable.other.property, meta.property-name#8aab7a
punctuation, punctuation.separator, punctuation.definition, meta.brace#888888
invalid, invalid.legal, invalid.broken, invalid.deprecated#c41e1eunderline
markup.inserted, meta.diff.header.from-file, marking.inserted#a3be8c
markup.deleted, meta.diff.header.to-file, marking.deleted#e06c60
markup.heading, markup.heading.markdown#8b6914bold
markup.boldbold
markup.italicitalic
markup.underline.link, markup.underline#6aabd2underline
markup.list, markup.list.unordered, markup.list.ordered#e06c60
entity.name.tag, meta.tag, punctuation.definition.tag#cd853f
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#b55a5a
string.quoted.double constant.character.escape, constant.character.escape, constant.character.escape.html#d8655a
markup.table, markup.table.markdown#d4c896