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#d28c5a
  • activityBar.background#e0e8f0
  • activityBar.foreground#333333
  • activityBarBadge.background#d28c5a
  • activityBarBadge.foreground#ffffff
  • badge.background#d28c5a
  • badge.foreground#ffffff
  • button.background#6c8ea8
  • button.foreground#ffffff
  • button.hoverBackground#5a7d9e
  • dropdown.background#ffffff
  • dropdown.border#e5e5e5
  • dropdown.foreground#333333
  • editor.background#fdf6e3
  • editor.findMatchBackground#6a4c93
  • editor.findMatchHighlightBackground#6a4c9344
  • editor.foreground#333333
  • editor.lineHighlightBackground#e0e8f0
  • editor.lineHighlightBorder#d28c5a
  • editor.selectionBackground#d4a01755
  • editor.selectionHighlightBackground#d28c5a33
  • editorBracketMatch.background#d4a01733
  • editorBracketMatch.border#d28c5a
  • editorCursor.foreground#d28c5a
  • editorGroupHeader.tabsBackground#faf3e5
  • editorIndentGuide.activeBackground#6c8ea8
  • editorIndentGuide.background#e5e5e5
  • editorLineNumber.activeForeground#6c8ea8
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#cbb79e
  • focusBorder#d28c5a
  • gitDecoration.conflictingResourceForeground#6a4c93
  • gitDecoration.deletedResourceForeground#d28c5a
  • gitDecoration.modifiedResourceForeground#6c8ea8
  • gitDecoration.untrackedResourceForeground#9a9b73
  • input.background#ffffff
  • input.border#e5e5e5
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#d28c5a
  • list.activeSelectionBackground#d28c5a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d28c5a33
  • list.highlightForeground#d4a017
  • list.hoverBackground#e0e8f0
  • minimap.background#fdf6e3
  • minimapSlider.activeBackground#cbb79eff
  • minimapSlider.background#cbb79e99
  • minimapSlider.hoverBackground#cbb79ecc
  • panel.background#faf3e5
  • panel.border#e5e5e5
  • panelTitle.activeBorder#d28c5a
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#cbb79ecc
  • scrollbarSlider.background#cbb79e66
  • scrollbarSlider.hoverBackground#cbb79e99
  • sideBar.background#faf3e5
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#eae2d5
  • sideBarSectionHeader.foreground#6c8ea8
  • sideBarTitle.foreground#6c8ea8
  • statusBar.background#6c8ea8
  • statusBar.debuggingBackground#6a4c93
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#cbb79e
  • statusBarItem.hoverBackground#d28c5a
  • tab.activeBackground#ffffff
  • tab.activeBorder#d28c5a
  • tab.activeForeground#333333
  • tab.border#e5e5e5
  • tab.inactiveBackground#faf3e5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#6c8ea8
  • terminal.ansiBrightBlue#5a7d9e
  • terminal.ansiBrightCyan#a2c5c5
  • terminal.ansiBrightGreen#b5b983
  • terminal.ansiBrightMagenta#7b5da0
  • terminal.ansiBrightRed#e39a6c
  • terminal.ansiBrightYellow#e5b723
  • terminal.ansiCyan#8abeb7
  • terminal.ansiGreen#9a9b73
  • terminal.ansiMagenta#6a4c93
  • terminal.ansiRed#d28c5a
  • terminal.ansiYellow#d4a017
  • terminal.background#fdf6e3
  • terminal.foreground#333333
  • titleBar.activeBackground#d4a017
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#cbb79e
  • titleBar.inactiveForeground#555555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a9b73italic
string, string.quoted, string.template#d28c5a
keyword, storage.type, storage.modifier#6a4c93bold
keyword.operator, punctuation.accessor#6c8ea8
variable, variable.other#333333
variable.parameter#6c8ea8italic
entity.name.function, support.function#5a7d9e
meta.function-call#5a7d9e
entity.name.class, entity.name.type.class, support.class#6a4c93bold
entity.name.type, support.type#6c8ea8
entity.name.type.interface#9a9b73italic
constant.numeric#d4a017
constant, constant.language, constant.character#d28c5a
constant.language.boolean#6a4c93bold
variable.other.property, support.variable.property#6c8ea8
meta.object-literal.key#6a4c93
entity.name.tag, punctuation.definition.tag#d28c5a
entity.other.attribute-name#6c8ea8italic
punctuation, meta.brace#777777
string.regexp#d4a017
constant.character.escape#d28c5a
meta.decorator, punctuation.decorator#6a4c93
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#6a4c93bold
markup.bold#6a4c93bold
markup.italic#6c8ea8italic
markup.underline.link#d28c5a
markup.inline.raw, markup.fenced_code#5a7d9e
support.type.property-name.json#6a4c93
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6c8ea8
support.type.property-name.css#d28c5a
support.constant.property-value.css#d4a017