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#D56B3F
  • activityBar.background#EFE8D9
  • activityBar.foreground#433A33
  • activityBarBadge.background#D56B3F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D56B3F
  • badge.foreground#FFFFFF
  • button.background#D56B3F
  • button.foreground#FFFFFF
  • button.hoverBackground#D56B3F80
  • dropdown.background#F3EDE0
  • dropdown.border#E7DFCF
  • dropdown.foreground#433A33
  • editor.background#FAF4E6
  • editor.findMatchBackground#FFB07A
  • editor.findMatchHighlightBackground#FFA066
  • editor.foreground#433A33
  • editor.lineHighlightBackground#FFF8EE
  • editor.lineHighlightBorder#E5D8C5
  • editor.selectionBackground#FFDECC
  • editor.selectionHighlightBackground#FFC5A5
  • editorBracketMatch.background#FFB07A44
  • editorBracketMatch.border#FF6F3C
  • editorCursor.foreground#D56B3F
  • editorGroupHeader.tabsBackground#F3EDE0
  • editorIndentGuide.activeBackground#B8947AAA
  • editorIndentGuide.background#B8947A44
  • editorLineNumber.activeForeground#433A33
  • editorLineNumber.foreground#9A938C
  • editorWhitespace.foreground#B8947A
  • focusBorder#D56B3F
  • gitDecoration.conflictingResourceForeground#FF6F3C
  • gitDecoration.deletedResourceForeground#D56B3F
  • gitDecoration.modifiedResourceForeground#D56B3F
  • gitDecoration.untrackedResourceForeground#B8947A
  • input.background#F3EDE0
  • input.border#E7DFCF
  • input.foreground#433A33
  • input.placeholderForeground#9A938C
  • inputOption.activeBorder#D56B3F
  • list.activeSelectionBackground#B8947A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#B8947A
  • list.highlightForeground#D56B3F
  • list.hoverBackground#B8947A66
  • minimap.background#FAF4E6
  • minimapSlider.activeBackground#9A938C99
  • minimapSlider.background#9A938C33
  • minimapSlider.hoverBackground#9A938C66
  • panel.background#FAF4E6
  • panel.border#E7DFCF
  • panelTitle.activeBorder#D56B3F
  • panelTitle.activeForeground#433A33
  • panelTitle.inactiveForeground#7A7065
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9A938C99
  • scrollbarSlider.background#9A938C33
  • scrollbarSlider.hoverBackground#9A938C66
  • sideBar.background#F3EDE0
  • sideBar.foreground#433A33
  • sideBarSectionHeader.background#E7DFCF
  • sideBarSectionHeader.foreground#D56B3F
  • sideBarTitle.foreground#D56B3F
  • statusBar.background#B8947A
  • statusBar.debuggingBackground#D56B3F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#A08066
  • statusBarItem.hoverBackground#D56B3F33
  • tab.activeBackground#FAF4E6
  • tab.activeBorder#D56B3F
  • tab.activeForeground#433A33
  • tab.border#E7DFCF
  • tab.inactiveBackground#F3EDE0
  • tab.inactiveForeground#7A7065
  • terminal.ansiBlue#5A7FA6
  • terminal.ansiBrightBlue#7AB8FF
  • terminal.ansiBrightCyan#8FD9D9
  • terminal.ansiBrightGreen#8CFF8C
  • terminal.ansiBrightMagenta#D593B5
  • terminal.ansiBrightRed#FF7F66
  • terminal.ansiBrightYellow#FFD06B
  • terminal.ansiCyan#5FA9A9
  • terminal.ansiGreen#6ABF6A
  • terminal.ansiMagenta#B8947A
  • terminal.ansiRed#D56B3F
  • terminal.ansiYellow#C6A35B
  • terminal.background#FAF4E6
  • terminal.foreground#433A33
  • titleBar.activeBackground#E7DFCF
  • titleBar.activeForeground#433A33
  • titleBar.inactiveBackground#F3EDE0
  • titleBar.inactiveForeground#7A7065

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a837citalic
string, string.quoted, string.template#ff6f3c
keyword, storage.type, storage.modifier#d9643bbold
keyword.operator, punctuation.accessor#b58a71
variable, variable.other#332c28
variable.parameter#b58a71italic
entity.name.function, support.function#5a7fa6
meta.function-call#5a7fa6
entity.name.class, entity.name.type.class, support.class#b58a71bold
entity.name.type, support.type#5a7fa6
entity.name.type.interface#6a8dbfitalic
constant.numeric#ff6f3c
constant, constant.language, constant.character#ff6f3c
constant.language.boolean#d9643bbold
variable.other.property, support.variable.property#5a7fa6
meta.object-literal.key#5a7fa6
entity.name.tag, punctuation.definition.tag#d9643b
entity.other.attribute-name#b58a71italic
punctuation, meta.brace#332c28
string.regexp#ff6f3c
constant.character.escape#d9643b
meta.decorator, punctuation.decorator#b58a71
invalid, invalid.illegal#ff6f3cstrikethrough
markup.heading, entity.name.section#d9643bbold
markup.bold#d9643bbold
markup.italic#b58a71italic
markup.underline.link#5a7fa6
markup.inline.raw, markup.fenced_code#ff6f3c
support.type.property-name.json#5a7fa6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d9643b
support.type.property-name.css#5a7fa6
support.constant.property-value.css#ff6f3c