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#d9c589
  • activityBar.badge.background#c41e1e
  • activityBar.badge.foreground#ffffff
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#555555
  • badge.background#c41e1e
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1a1a1a
  • breadcrumb.background#f4e8c1
  • breadcrumb.foreground#555555
  • breadcrumbPicker.background#e8d5a3
  • button.background#c41e1e
  • button.foreground#ffffff
  • button.hoverBackground#8b1a1a
  • diffEditor.insertedTextBackground#5a6e4a40
  • diffEditor.insertedTextBorder#2a6682
  • diffEditor.removedTextBackground#c41e1e40
  • diffEditor.removedTextBorder#c41e1e
  • diffEditorOverview.insertedForeground#2a668288
  • diffEditorOverview.removedForeground#c41e1e88
  • dropdown.background#faf3e0
  • dropdown.border#c9b87a
  • dropdown.foreground#1a1a1a
  • editor.background#f5e9c2
  • editor.findMatchBackground#8b6914
  • editor.findMatchForeground#f4e8c1
  • editor.findMatchHighlightBackground#8b691480
  • editor.foreground#1a1a1a
  • editor.lineHighlightBackground#b8b0a0
  • editor.matchHighlightBackground#d9c589
  • editor.selectionBackground#a0845a
  • editor.selectionHighlightBackground#d9c589
  • editorBracketMatch.background#d9c589
  • editorBracketMatch.border#5c4033
  • editorCursor.foreground#1a1a1a
  • editorGroup.border#c9b87a
  • editorGroupHeader.tabsBackground#e8d5a3
  • editorGutter.background#e8d5a3
  • editorHoverWidget.background#faf3e0
  • editorHoverWidget.border#c9b87a
  • editorHoverWidget.foreground#1a1a1a
  • editorIndentGuide.activeBackground#8b6914
  • editorIndentGuide.background#8b7355
  • editorLineNumber.activeForeground#1a1a1a
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#c9b87a
  • editorSuggestWidget.background#faf3e0
  • editorSuggestWidget.border#c9b87a
  • editorSuggestWidget.foreground#1a1a1a
  • editorSuggestWidget.highlightForeground#c41e1e
  • editorSuggestWidget.selectedBackground#a0845a
  • editorWhitespace.foreground#c9b87a
  • errorForeground#c41e1e
  • gitDecoration.addedResourceForeground#2a6682
  • gitDecoration.conflictingResourceForeground#c41e1e
  • gitDecoration.deletedResourceForeground#c41e1e
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#8b6914
  • gitDecoration.untrackedResourceForeground#5a6e4a
  • infoForeground#2a6682
  • input.background#faf3e0
  • input.border#c9b87a
  • input.foreground#1a1a1a
  • input.placeholderForeground#888888
  • inputOption.activeBackground#d9c589
  • inputOption.activeForeground#1a1a1a
  • list.activeSelectionBackground#a0845a
  • list.activeSelectionForeground#f4e8c1
  • list.focusBackground#d9c589
  • list.highlightForeground#c41e1e
  • list.hoverBackground#d9c589
  • list.hoverForeground#1a1a1a
  • list.inactiveSelectionBackground#d9c589
  • list.inactiveSelectionForeground#1a1a1a
  • minimapGutter.background#e8d5a3
  • notification.background#faf3e0
  • notification.border#c9b87a
  • notification.foreground#1a1a1a
  • notifications.background#faf3e0
  • notifications.border#c9b87a
  • notifications.foreground#1a1a1a
  • panel.background#e8d5a3
  • panel.border#c9b87a
  • panelInput.border#c9b87a
  • panelTitle.activeForeground#c41e1e
  • panelTitle.inactiveForeground#555555
  • peekView.border#c41e1e
  • peekViewEditor.background#f4e8c1
  • peekViewEditor.matchHighlightBackground#8b691480
  • peekViewResult.background#e8d5a3
  • peekViewResult.matchHighlightBackground#8b691480
  • peekViewResult.selectionBackground#a0845a
  • peekViewTitle.background#a0845a
  • peekViewTitle.foreground#f4e8c1
  • scrollbarSlider.activeBackground#5c403380
  • scrollbarSlider.background#8b735580
  • scrollbarSlider.hoverBackground#5c4033cc
  • sideBar.background#e8d5a3
  • sideBar.border#c9b87a
  • sideBar.foreground#1a1a1a
  • sideBarSectionHeader.background#d9c589
  • sideBarSectionHeader.foreground#1a1a1a
  • statusBar.background#a0845a
  • statusBar.debuggingBackground#c41e1e
  • statusBar.foreground#f4e8c1
  • statusBarItem.prominentBackground#c41e1e
  • statusBarItem.remoteBackground#2a6682
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#a0845a
  • tab.activeBorder#c41e1e
  • tab.activeBorderTop#c41e1e
  • tab.activeForeground#f4e8c1
  • tab.border#c9b87a
  • tab.inactiveBackground#e8d5a3
  • tab.inactiveForeground#555555
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#2a6682
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5a9ec8
  • terminal.ansiBrightCyan#5a9ec8
  • terminal.ansiBrightGreen#5a6e4a
  • terminal.ansiBrightMagenta#b55a5a
  • terminal.ansiBrightRed#e06c60
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#8b6914
  • terminal.ansiCyan#2a6682
  • terminal.ansiGreen#5a6e4a
  • terminal.ansiMagenta#8b1a1a
  • terminal.ansiRed#c41e1e
  • terminal.ansiWhite#e8d5a3
  • terminal.ansiYellow#8b6914
  • terminal.background#f4e8c1
  • terminal.border#c9b87a
  • terminal.foreground#1a1a1a
  • terminal.selectionBackground#a0845a
  • terminalCursor.foreground#1a1a1a
  • titleBar.activeBackground#a0845a
  • titleBar.activeForeground#f4e8c1
  • titleBar.inactiveBackground#e8d5a3
  • titleBar.inactiveForeground#555555
  • warningForeground#8b6914

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, comment.block.documentation#5d704eitalic
keyword, keyword.control, storage.type, storage.modifier#2a6682bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#555555
string, string.quoted, string.quoted.single, string.quoted.double, string.regexp#5c4033
constant.numeric, constant.numeric.integer, constant.numeric.float#8b1a1a
constant.language, constant.language.boolean, constant.language.null#8b6914
variable, variable.other, variable.other.readwrite#3a3530
variable.other.constant, variable.language.special#8b1a1a
entity.name.function, support.function, meta.function-call#1a1a1abold
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type#2a6682
support.constant, constant.other#8b6914
punctuation, punctuation.separator, punctuation.definition, meta.brace#888888
invalid, invalid.illegal, invalid.broken, invalid.deprecated#c41e1eunderline
markup.inserted, meta.diff.header.from-file, markup.inserted#2c6e8c
markup.deleted, meta.diff.header.to-file, markup.deleted#c41e1e
markup.heading, markup.heading.markdown#1a1a1abold
markup.boldbold
markup.italicitalic
markup.underline.link, markup.underline#2a6682underline
markup.list, markup.list.unordered, markup.list.ordered#5c4033
entity.name.tag, meta.tag, punctuation.definition.tag#6b3a2a
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#8b6914
string.quoted.double constant.character.escape, constant.character.escape, constant.character.escape.html#8b1a1a
support.type.property-name, variable.other.property, meta.property-name#3a3530
markup.table, markup.table.markdown#1a1a1a