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.background#DED5C4
  • activityBar.foreground#8B4513
  • activityBar.inactiveForeground#A09880
  • activityBarBadge.background#8B0000
  • activityBarBadge.foreground#F5F0E8
  • badge.background#8B0000
  • badge.foreground#F5F0E8
  • button.background#8B4513
  • button.foreground#F5F0E8
  • button.hoverBackground#A0522D
  • editor.background#F5F0E8
  • editor.foreground#2C2418
  • editor.lineHighlightBackground#EDE5D8
  • editor.selectionBackground#CFB53B44
  • editorBracketHighlight.foreground1#8B4513
  • editorBracketHighlight.foreground2#2E6B3E
  • editorBracketHighlight.foreground3#8B0000
  • editorBracketHighlight.foreground4#1A5276
  • editorBracketHighlight.foreground5#6C3483
  • editorBracketHighlight.foreground6#D4A017
  • editorBracketHighlight.unexpectedBracket.foreground#FF0000
  • editorBracketMatch.background#CFB53B33
  • editorBracketMatch.border#CFB53BAA
  • editorCursor.foreground#8B4513
  • editorGroupHeader.tabsBackground#E5DDD0
  • editorGutter.addedBackground#2E6B3E
  • editorGutter.deletedBackground#8B0000
  • editorGutter.modifiedBackground#D4A017
  • editorIndentGuide.activeBackground#CFB53B55
  • editorIndentGuide.background#E0D8C8
  • editorLineNumber.activeForeground#8B4513
  • editorLineNumber.foreground#B0A890
  • editorSuggestWidget.highlightForeground#8B4513
  • editorWidget.background#F0E8DA
  • focusBorder#8B451388
  • gitDecoration.addedResourceForeground#2E6B3E
  • gitDecoration.deletedResourceForeground#8B0000
  • gitDecoration.modifiedResourceForeground#D4A017
  • icon.foreground#8B4513
  • input.background#F5F0E8
  • input.border#C8BFA8
  • input.foreground#2C2418
  • list.activeSelectionBackground#D4A01733
  • list.activeSelectionForeground#8B4513
  • list.highlightForeground#8B0000
  • list.hoverBackground#E0D8C8
  • panel.background#EAE2D4
  • progressBar.background#8B4513
  • settings.headerForeground#8B4513
  • sideBar.background#EAE2D4
  • sideBar.foreground#5A4A30
  • sideBarTitle.foreground#8B4513
  • statusBar.background#DED5C4
  • statusBar.debuggingBackground#8B0000
  • statusBar.debuggingForeground#F5F0E8
  • statusBar.foreground#8B4513
  • tab.activeBackground#F5F0E8
  • tab.activeBorderTop#8B4513
  • tab.activeForeground#8B4513
  • tab.hoverBackground#EDE5D8
  • tab.inactiveBackground#E5DDD0
  • tab.inactiveForeground#A09880
  • terminal.ansiBlue#1A5276
  • terminal.ansiBrightBlue#2874A6
  • terminal.ansiBrightGreen#3D8B4F
  • terminal.ansiBrightRed#CC3333
  • terminal.ansiBrightYellow#D4A017
  • terminal.ansiGreen#2E6B3E
  • terminal.ansiRed#8B0000
  • terminal.ansiYellow#996B00
  • terminal.background#EAE2D4
  • terminal.foreground#2C2418
  • terminalCursor.foreground#8B4513
  • titleBar.activeBackground#E5DDD0
  • titleBar.activeForeground#8B4513
  • titleBar.inactiveForeground#A09880
  • window.activeBorder#C8BFA8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#2C2418—
comment, punctuation.definition.comment#A09880italic
keyword, keyword.control, storage.type, storage.modifier#8B0000bold
keyword.operator#6A5A40—
string, string.quoted#996B00—
constant.character.escape#2E6B3E—
constant.numeric#D4A017—
constant, constant.language#1A1A1Abold
entity.name.function, support.function#1A5276—
variable.parameter#6A5A40italic
entity.name.class, support.class#8B4513bold
entity.name.type, support.type#6C3483—
variable, variable.other#2E6B3E—
variable.other.property#5A4A30—
support.type.property-name#1A5276—
variable.language.this#8B0000italic
keyword.control.import, keyword.control.export#8B0000bold
entity.name.tag#8B0000—
entity.other.attribute-name#8B4513italic
support.type.property-name.json#1A5276—
markup.heading#8B4513bold
invalid#FF0000bold underline