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.background#F9F5F0
  • activityBar.foreground#2D2D2D
  • activityBar.inactiveForeground#8B8178
  • activityBarBadge.background#E8B4A2
  • activityBarBadge.foreground#2D2D2D
  • button.background#E8B4A2
  • button.foreground#2D2D2D
  • button.hoverBackground#D98E7E
  • editor.background#F9F5F0
  • editor.foreground#2D2D2D
  • editor.selectionBackground#E8D4C080
  • editor.selectionHighlightBackground#E8D4C040
  • editor.wordHighlightBackground#E8D4C030
  • editor.wordHighlightStrongBackground#E8D4C050
  • editorGroupHeader.tabsBackground#F9F5F0
  • foreground#2D2D2D
  • input.background#FFFFFF
  • input.border#E8D4C0
  • input.foreground#2D2D2D
  • input.placeholderForeground#8B8178
  • list.activeSelectionBackground#E8D4C080
  • list.activeSelectionForeground#2D2D2D
  • list.hoverBackground#F5E6D380
  • list.inactiveSelectionBackground#F5E6D360
  • sideBar.background#F9F5F0
  • sideBar.foreground#2D2D2D
  • sideBarSectionHeader.background#F5E6D3
  • sideBarSectionHeader.foreground#2D2D2D
  • sideBarTitle.foreground#2D2D2D
  • statusBar.background#E8B4A2
  • statusBar.debuggingBackground#D98E7E
  • statusBar.foreground#2D2D2D
  • statusBar.noFolderBackground#E8D4C0
  • tab.activeBackground#F5E6D3
  • tab.activeForeground#2D2D2D
  • tab.border#F9F5F0
  • tab.inactiveBackground#F9F5F0
  • tab.inactiveForeground#8B8178
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#8B8178
  • terminal.ansiBrightBlack#5C5C5C
  • terminal.ansiBrightBlue#A89984
  • terminal.ansiBrightCyan#C5B8A8
  • terminal.ansiBrightGreen#C5B8A8
  • terminal.ansiBrightMagenta#D4BEB2
  • terminal.ansiBrightRed#E8B4A2
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5E6D3
  • terminal.ansiCyan#B4A497
  • terminal.ansiGreen#A89984
  • terminal.ansiMagenta#C49B8A
  • terminal.ansiRed#D98E7E
  • terminal.ansiWhite#F9F5F0
  • terminal.ansiYellow#E8B4A2
  • terminal.background#F9F5F0
  • terminal.foreground#2D2D2D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B8178italic
string, string.quoted.double, string.quoted.single#986A54
constant.numeric, constant.language, constant.character#D98E7E
keyword, storage.type, storage.modifier#C49B8A
entity.name.function, support.function#986A54
entity.name.type.class, entity.other.inherited-class, support.class#8B614D
variable, variable.other#2D2D2D
variable.other.property, variable.other.object.property#725548
entity.name.type, support.type#8B614D
keyword.operator#D98E7E
markup.bold#8B614Dbold
markup.italic#986A54italic
markup.heading#C49B8Abold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#C49B8A
storage.type.class, storage.type.function, storage.type.interface, storage.type.enum, storage.type.property, storage.type.generic, storage.type.object, storage.type.string, storage.type.number, storage.type.boolean, storage.type.primitive#8B614D
string.template, punctuation.definition.string.template, string.template.quoted, string.template.tagged#986A54
string.regexp, constant.regexp, string.regexp.character-class, string.regexp.anchor, punctuation.definition.character-class.regexp#D98E7E
meta.decorator, punctuation.decorator, meta.decorator.identifier#A6755E
support.type.property-name.css, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#725548
entity.name.tag, punctuation.definition.tag, entity.other.attribute-name#8B614D
support.type.property-name.json#725548
markup.underline.link, markup.inline.raw, markup.raw.block#986A54
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#D98E7E
invalid, invalid.illegal, invalid.deprecated#D98E7Eitalic underline