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