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#2D2D2D
  • activityBar.foreground#E8D4C0
  • activityBar.inactiveForeground#8B8178
  • activityBarBadge.background#D98E7E
  • activityBarBadge.foreground#2D2D2D
  • button.background#D98E7E
  • button.foreground#2D2D2D
  • button.hoverBackground#A6755E
  • editor.background#2D2D2D
  • editor.foreground#E8D4C0
  • editor.selectionBackground#5C4A4180
  • editor.selectionHighlightBackground#5C4A4140
  • editor.wordHighlightBackground#5C4A4130
  • editor.wordHighlightStrongBackground#5C4A4150
  • editorGroupHeader.tabsBackground#2D2D2D
  • foreground#E8D4C0
  • input.background#383432
  • input.border#5C4A41
  • input.foreground#E8D4C0
  • input.placeholderForeground#8B8178
  • list.activeSelectionBackground#5C4A4180
  • list.activeSelectionForeground#E8D4C0
  • list.hoverBackground#38343280
  • list.inactiveSelectionBackground#38343260
  • sideBar.background#2D2D2D
  • sideBar.foreground#E8D4C0
  • sideBarSectionHeader.background#383432
  • sideBarSectionHeader.foreground#E8D4C0
  • sideBarTitle.foreground#E8D4C0
  • statusBar.background#D98E7E
  • statusBar.debuggingBackground#A6755E
  • statusBar.foreground#2D2D2D
  • statusBar.noFolderBackground#5C4A41
  • tab.activeBackground#383432
  • tab.activeForeground#E8D4C0
  • tab.border#2D2D2D
  • tab.inactiveBackground#2D2D2D
  • 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#F9F5F0
  • terminal.ansiBrightYellow#F5E6D3
  • terminal.ansiCyan#B4A497
  • terminal.ansiGreen#A89984
  • terminal.ansiMagenta#C49B8A
  • terminal.ansiRed#D98E7E
  • terminal.ansiWhite#E8D4C0
  • terminal.ansiYellow#E8B4A2
  • terminal.background#2D2D2D
  • terminal.foreground#E8D4C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B8178italic
string, string.quoted.double, string.quoted.single#C49B8A—
constant.numeric, constant.language, constant.character#D98E7E—
keyword, storage.type, storage.modifier#E8B4A2—
entity.name.function, support.function#C49B8A—
entity.name.type.class, entity.other.inherited-class, support.class#E8B4A2—
variable, variable.other#E8D4C0—
variable.other.property, variable.other.object.property#C5B8A8—
entity.name.type, support.type#E8B4A2—
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default#E8B4A2—
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#E8B4A2—
string.template, punctuation.definition.string.template, string.template.quoted, string.template.tagged#C49B8A—
string.regexp, constant.regexp, string.regexp.character-class, string.regexp.anchor, punctuation.definition.character-class.regexp#D98E7E—
meta.decorator, punctuation.decorator, meta.decorator.identifier#D98E7E—
support.type.property-name.css, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#C5B8A8—
entity.name.tag, punctuation.definition.tag, entity.other.attribute-name#E8B4A2—
support.type.property-name.json#C5B8A8—
markup.underline.link, markup.inline.raw, markup.raw.block#C49B8A—
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#D98E7E—
invalid, invalid.illegal, invalid.deprecated#D98E7Eitalic underline