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#C4621E
  • activityBar.background#EFE6D5
  • activityBar.foreground#40362A
  • activityBarBadge.background#C4621E
  • activityBarBadge.foreground#FAF3E0
  • badge.background#C4621E
  • badge.foreground#FAF3E0
  • button.background#C4621E
  • button.foreground#FAF3E0
  • button.hoverBackground#C4621E80
  • dropdown.background#EFE6D5
  • dropdown.border#8A9C92
  • dropdown.foreground#40362A
  • editor.background#FAF3E0
  • editor.findMatchBackground#8A9C9240
  • editor.findMatchHighlightBackground#8A9C9220
  • editor.foreground#40362A
  • editor.lineHighlightBackground#8A9C9280
  • editor.lineHighlightBorder#8A9C92
  • editor.selectionBackground#C4621E40
  • editor.selectionHighlightBackground#C4621E20
  • editorBracketMatch.background#C4621E33
  • editorBracketMatch.border#C4621E
  • editorCursor.foreground#C4621E
  • editorGroupHeader.tabsBackground#FAF3E0
  • editorIndentGuide.activeBackground#C4621E
  • editorIndentGuide.background#D0C0B0
  • editorLineNumber.activeForeground#40362A
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#C0B0A0
  • focusBorder#C4621E
  • gitDecoration.conflictingResourceForeground#D4B84C
  • gitDecoration.deletedResourceForeground#C4621E
  • gitDecoration.modifiedResourceForeground#8A9C92
  • gitDecoration.untrackedResourceForeground#8C9A5B
  • input.background#EFE6D5
  • input.border#8A9C92
  • input.foreground#40362A
  • input.placeholderForeground#A9A9A9
  • inputOption.activeBorder#C4621E
  • list.activeSelectionBackground#8A9C9260
  • list.activeSelectionForeground#FAF3E0
  • list.focusBackground#8A9C9280
  • list.highlightForeground#C4621E
  • list.hoverBackground#8A9C9240
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#8A9C9280
  • minimapSlider.background#8A9C9220
  • minimapSlider.hoverBackground#8A9C9240
  • panel.background#FAF3E0
  • panel.border#8A9C92
  • panelTitle.activeBorder#C4621E
  • panelTitle.activeForeground#C4621E
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C4621E80
  • scrollbarSlider.background#8A9C9280
  • scrollbarSlider.hoverBackground#8A9C92C0
  • sideBar.background#FAF3E0
  • sideBar.foreground#40362A
  • sideBarSectionHeader.background#EFE6D5
  • sideBarSectionHeader.foreground#C4621E
  • sideBarTitle.foreground#C4621E
  • statusBar.background#C4621E
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#FAF3E0
  • statusBar.noFolderBackground#C4621E
  • statusBarItem.hoverBackground#C4621E80
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#C4621E
  • tab.activeForeground#40362A
  • tab.border#C0B0A0
  • tab.inactiveBackground#EFE6D5
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#5A8FB2
  • terminal.ansiBrightBlue#7FB3E2
  • terminal.ansiBrightCyan#A0CFEA
  • terminal.ansiBrightGreen#A5C96A
  • terminal.ansiBrightMagenta#E085C5
  • terminal.ansiBrightRed#F48C68
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#7AA9C2
  • terminal.ansiGreen#8C9A5B
  • terminal.ansiMagenta#C17BA0
  • terminal.ansiRed#C4621E
  • terminal.ansiYellow#D4B84C
  • terminal.background#FAF3E0
  • terminal.foreground#40362A
  • titleBar.activeBackground#8A9C92
  • titleBar.activeForeground#40362A
  • titleBar.inactiveBackground#C0B0A0
  • titleBar.inactiveForeground#40362A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A9A9A9italic
string, string.quoted, string.template#6B8E23—
keyword, storage.type, storage.modifier#D2691Ebold
keyword.operator, punctuation.accessor#7A9A92—
variable, variable.other#4B3B2A—
variable.parameter#6B8E23italic
entity.name.function, support.function#D2691E—
meta.function-call#7A9A92—
entity.name.class, entity.name.type.class, support.class#D2691Ebold
entity.name.type, support.type#7A9A92—
entity.name.type.interface#7A9A92italic
constant.numeric#D4B84C—
constant, constant.language, constant.character#C17BA0—
constant.language.boolean#D2691Ebold
variable.other.property, support.variable.property#4B3B2A—
meta.object-literal.key#D2691E—
entity.name.tag, punctuation.definition.tag#D2691E—
entity.other.attribute-name#7A9A92italic
punctuation, meta.brace#7A9A92—
string.regexp#F48C68—
constant.character.escape#D2691E—
meta.decorator, punctuation.decorator#E085C5—
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#D2691Ebold
markup.bold#D2691Ebold
markup.italic#7A9A92italic
markup.underline.link#7A9A92—
markup.inline.raw, markup.fenced_code#6B8E23—
support.type.property-name.json#D2691E—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7FB3E2—
support.type.property-name.css#6B8E23—
support.constant.property-value.css#7A9A92—