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