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#B71C1C
  • activityBar.background#EFE8DC
  • activityBar.foreground#3B322F
  • activityBarBadge.background#B71C1C
  • activityBarBadge.foreground#F9F5EF
  • badge.background#B71C1C
  • badge.foreground#F9F5EF
  • button.background#B71C1C
  • button.foreground#F9F5EF
  • button.hoverBackground#B71C1C80
  • dropdown.background#F3EFE7
  • dropdown.border#7A6E68
  • dropdown.foreground#3B322F
  • editor.background#F9F5EF
  • editor.findMatchBackground#B71C1C66
  • editor.findMatchHighlightBackground#B71C1C33
  • editor.foreground#3B322F
  • editor.lineHighlightBackground#B71C1C20
  • editor.lineHighlightBorder#B71C1C80
  • editor.selectionBackground#B71C1C40
  • editor.selectionHighlightBackground#B71C1C30
  • editorBracketMatch.background#B71C1C20
  • editorBracketMatch.border#B71C1C
  • editorCursor.foreground#B71C1C
  • editorGroupHeader.tabsBackground#F9F5EF
  • editorIndentGuide.activeBackground#B71C1C
  • editorIndentGuide.background#8A817C
  • editorLineNumber.activeForeground#B71C1C
  • editorLineNumber.foreground#7A6E68
  • editorWhitespace.foreground#8A817C
  • focusBorder#B71C1C
  • gitDecoration.conflictingResourceForeground#D7A060
  • gitDecoration.deletedResourceForeground#C53929
  • gitDecoration.modifiedResourceForeground#B71C1C
  • gitDecoration.untrackedResourceForeground#5D4C46
  • input.background#F3EFE7
  • input.border#7A6E68
  • input.foreground#3B322F
  • input.placeholderForeground#8A817C
  • inputOption.activeBorder#B71C1C
  • list.activeSelectionBackground#B71C1C40
  • list.activeSelectionForeground#F9F5EF
  • list.focusBackground#B71C1C30
  • list.highlightForeground#B71C1C
  • list.hoverBackground#B71C1C20
  • minimap.background#F9F5EF
  • minimapSlider.activeBackground#B71C1C66
  • minimapSlider.background#8A817C44
  • minimapSlider.hoverBackground#8A817C88
  • panel.background#F9F5EF
  • panel.border#7A6E68
  • panelTitle.activeBorder#B71C1C
  • panelTitle.activeForeground#3B322F
  • panelTitle.inactiveForeground#8A817C
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B71C1C88
  • scrollbarSlider.background#8A817C44
  • scrollbarSlider.hoverBackground#8A817C88
  • sideBar.background#F2EDE5
  • sideBar.foreground#3B322F
  • sideBarSectionHeader.background#E6DFD3
  • sideBarSectionHeader.foreground#3B322F
  • sideBarTitle.foreground#3B322F
  • statusBar.background#B71C1C
  • statusBar.debuggingBackground#C53929
  • statusBar.foreground#F9F5EF
  • statusBar.noFolderBackground#5D4C46
  • statusBarItem.hoverBackground#B71C1C44
  • tab.activeBackground#F9F5EF
  • tab.activeBorder#B71C1C
  • tab.activeForeground#3B322F
  • tab.border#D8D0C6
  • tab.inactiveBackground#F2EDE5
  • tab.inactiveForeground#8A817C
  • terminal.ansiBlue#3B6EA5
  • terminal.ansiBrightBlue#5D9EFF
  • terminal.ansiBrightCyan#6EE7E0
  • terminal.ansiBrightGreen#7EDC81
  • terminal.ansiBrightMagenta#D07CB5
  • terminal.ansiBrightRed#E05555
  • terminal.ansiBrightYellow#F4C04F
  • terminal.ansiCyan#3AA99D
  • terminal.ansiGreen#3C8D6F
  • terminal.ansiMagenta#A23E9A
  • terminal.ansiRed#B71C1C
  • terminal.ansiYellow#D7A060
  • terminal.background#F9F5EF
  • terminal.foreground#3B322F
  • titleBar.activeBackground#EAE2D6
  • titleBar.activeForeground#3B322F
  • titleBar.inactiveBackground#F2EDE5
  • titleBar.inactiveForeground#7A6E68

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A817Citalic
string, string.quoted, string.template#3C8D6F
keyword, storage.type, storage.modifier#B71C1Cbold
keyword.operator, punctuation.accessor#7A6E68
variable, variable.other#3B322F
variable.parameter#7A6E68italic
entity.name.function, support.function#3B6EA5
meta.function-call#3B6EA5
entity.name.class, entity.name.type.class, support.class#3B6EA5bold
entity.name.type, support.type#3B6EA5
entity.name.type.interface#A23E9Aitalic
constant.numeric#D7A060
constant, constant.language, constant.character#D7A060
constant.language.boolean#D7A060bold
variable.other.property, support.variable.property#3B322F
meta.object-literal.key#3B6EA5
entity.name.tag, punctuation.definition.tag#B71C1C
entity.other.attribute-name#7A6E68italic
punctuation, meta.brace#7A6E68
string.regexp#D7A060
constant.character.escape#7A6E68
meta.decorator, punctuation.decorator#D7A060
invalid, invalid.illegal#C53929strikethrough
markup.heading, entity.name.section#B71C1Cbold
markup.bold#B71C1Cbold
markup.italic#7A6E68italic
markup.underline.link#3B6EA5
markup.inline.raw, markup.fenced_code#3C8D6F
support.type.property-name.json#3B6EA5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B71C1C
support.type.property-name.css#3B6EA5
support.constant.property-value.css#D7A060