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#5A6A78
  • activityBar.background#F2EDE3
  • activityBar.foreground#5A6A78
  • activityBarBadge.background#5A6A78
  • activityBarBadge.foreground#FAF5EC
  • badge.background#5A6A78
  • badge.foreground#FAF5EC
  • button.background#A68B71
  • button.foreground#FAF5EC
  • button.hoverBackground#B1A495
  • dropdown.background#FFFFFF
  • dropdown.border#D8CFC0
  • dropdown.foreground#393837
  • editor.background#FAF5EC
  • editor.findMatchBackground#A68B71
  • editor.findMatchHighlightBackground#A68B7150
  • editor.foreground#393837
  • editor.lineHighlightBackground#F0EAE0
  • editor.lineHighlightBorder#D8CFC0
  • editor.selectionBackground#C5B9A6
  • editor.selectionHighlightBackground#C5B9A660
  • editorBracketMatch.background#C5B9A660
  • editorBracketMatch.border#5A6A78
  • editorCursor.foreground#5A6A78
  • editorGroupHeader.tabsBackground#FAF5EC
  • editorIndentGuide.activeBackground#A68B71
  • editorIndentGuide.background#C5C0B8
  • editorLineNumber.activeForeground#5A6A78
  • editorLineNumber.foreground#B1A495
  • editorWhitespace.foreground#C5C0B8
  • focusBorder#5A6A78
  • gitDecoration.conflictingResourceForeground#B1A495
  • gitDecoration.deletedResourceForeground#CC3333
  • gitDecoration.modifiedResourceForeground#5A6A78
  • gitDecoration.untrackedResourceForeground#5A6A78
  • input.background#FFFFFF
  • input.border#D8CFC0
  • input.foreground#393837
  • input.placeholderForeground#B1A495
  • inputOption.activeBorder#5A6A78
  • list.activeSelectionBackground#C5B9A6
  • list.activeSelectionForeground#393837
  • list.focusBackground#C5B9A6
  • list.highlightForeground#5A6A78
  • list.hoverBackground#F0EAE0
  • minimap.background#FAF5EC
  • minimapSlider.activeBackground#5A6A7866
  • minimapSlider.background#5A6A7822
  • minimapSlider.hoverBackground#5A6A7844
  • panel.background#FAF5EC
  • panel.border#D8CFC0
  • panelTitle.activeBorder#5A6A78
  • panelTitle.activeForeground#5A6A78
  • panelTitle.inactiveForeground#A68B71
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A6A7888
  • scrollbarSlider.background#B1A49544
  • scrollbarSlider.hoverBackground#B1A49588
  • sideBar.background#F7F3EA
  • sideBar.foreground#393837
  • sideBarSectionHeader.background#EDE8DD
  • sideBarSectionHeader.foreground#5A6A78
  • sideBarTitle.foreground#5A6A78
  • statusBar.background#E3D9C9
  • statusBar.debuggingBackground#A68B71
  • statusBar.foreground#393837
  • statusBar.noFolderBackground#F2EDE3
  • statusBarItem.hoverBackground#D8CFC0
  • tab.activeBackground#FAF5EC
  • tab.activeBorder#5A6A78
  • tab.activeForeground#5A6A78
  • tab.border#D8CFC0
  • tab.inactiveBackground#F2EDE3
  • tab.inactiveForeground#A68B71
  • terminal.ansiBlue#5A6A78
  • terminal.ansiBrightBlue#5A6A78
  • terminal.ansiBrightCyan#A68B71
  • terminal.ansiBrightGreen#5A6A78
  • terminal.ansiBrightMagenta#5A6A78
  • terminal.ansiBrightRed#D44747
  • terminal.ansiBrightYellow#BFA07A
  • terminal.ansiCyan#40676B
  • terminal.ansiGreen#5A6A78
  • terminal.ansiMagenta#A68B71
  • terminal.ansiRed#CC3333
  • terminal.ansiYellow#B1A495
  • terminal.background#FAF5EC
  • terminal.foreground#393837
  • titleBar.activeBackground#EFEAE0
  • titleBar.activeForeground#393837
  • titleBar.inactiveBackground#FAF5EC
  • titleBar.inactiveForeground#A68B71

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9A8F80italic
string, string.quoted, string.template#40676B
keyword, storage.type, storage.modifier#5A6A78bold
keyword.operator, punctuation.accessor#A68B71
variable, variable.other#393837
variable.parameter#A68B71italic
entity.name.function, support.function#5A6A78
meta.function-call#5A6A78
entity.name.class, entity.name.type.class, support.class#A68B71bold
entity.name.type, support.type#A68B71
entity.name.type.interface#5A6A78italic
constant.numeric#40676B
constant, constant.language, constant.character#40676B
constant.language.boolean#5A6A78bold
variable.other.property, support.variable.property#5A6A78
meta.object-literal.key#5A6A78
entity.name.tag, punctuation.definition.tag#5A6A78
entity.other.attribute-name#A68B71italic
punctuation, meta.brace#393837
string.regexp#40676B
constant.character.escape#5A6A78
meta.decorator, punctuation.decorator#A68B71
invalid, invalid.illegal#CC3333strikethrough
markup.heading, entity.name.section#5A6A78bold
markup.bold#5A6A78bold
markup.italic#A68B71italic
markup.underline.link#40676B
markup.inline.raw, markup.fenced_code#40676B
support.type.property-name.json#5A6A78
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#A68B71
support.type.property-name.css#40676B
support.constant.property-value.css#40676B