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#F7F8F4
  • activityBar.border#00000015
  • activityBar.foreground#4F7B4A
  • activityBar.inactiveForeground#2B2F2D60
  • activityBarBadge.background#4F7B4A
  • activityBarBadge.foreground#F7F8F4
  • button.background#4F7B4A
  • button.foreground#F7F8F4
  • button.hoverBackground#4F7B4Add
  • editor.background#F7F8F4
  • editor.foreground#2B2F2D
  • editor.inactiveSelectionBackground#E6F1E62580
  • editor.lineHighlightBackground#FFFFFF50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#E6F1E625
  • editorCursor.foreground#4F7B4A
  • editorGroupHeader.tabsBackground#FFFFFFaa
  • editorLineNumber.activeForeground#4F7B4A
  • editorLineNumber.foreground#D7DED680
  • focusBorder#4F7B4A
  • foreground#2B2F2D
  • input.background#FFFFFF
  • input.border#00000015
  • input.foreground#2B2F2D
  • input.placeholderForeground#2B2F2D60
  • list.activeSelectionBackground#4F7B4A30
  • list.activeSelectionForeground#2B2F2D
  • list.highlightForeground#4F7B4A
  • list.hoverBackground#FFFFFF40
  • list.hoverForeground#2B2F2D
  • list.inactiveSelectionBackground#4F7B4A15
  • list.inactiveSelectionForeground#2B2F2D
  • selection.background#E6F1E625
  • sideBar.background#FFFFFF
  • sideBar.border#00000015
  • sideBar.foreground#2B2F2D
  • sideBarSectionHeader.background#FFFFFF80
  • sideBarSectionHeader.foreground#2B2F2D
  • sideBarTitle.foreground#4F7B4A
  • statusBar.background#F7F8F4
  • statusBar.border#00000015
  • statusBar.foreground#2B2F2D
  • statusBar.noFolderBackground#F7F8F4
  • tab.activeBackground#F7F8F4
  • tab.activeBorderTop#4F7B4A
  • tab.activeForeground#2B2F2D
  • tab.border#00000015
  • tab.inactiveBackground#F7F8F460
  • tab.inactiveForeground#2B2F2D80
  • terminal.ansiBlack#2B2F2D
  • terminal.ansiBlue#E6F1E6
  • terminal.ansiCyan#7BAE6B
  • terminal.ansiGreen#4F7B4A
  • terminal.ansiMagenta#6E564E
  • terminal.ansiRed#6E564E
  • terminal.ansiWhite#2B2F2D
  • terminal.ansiYellow#7BAE6B
  • terminal.background#F7F8F4
  • terminal.foreground#2B2F2D
  • titleBar.activeBackground#F7F8F4
  • titleBar.activeForeground#2B2F2D
  • titleBar.border#00000015
  • titleBar.inactiveBackground#F7F8F4
  • titleBar.inactiveForeground#2B2F2D60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7DED6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#E6F1E6bold
storage.type, storage.modifier#E6F1E6italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4F7B4A—
string, punctuation.definition.string, string.template, meta.template.expression#7BAE6B—
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6E564E—
variable, variable.other.readwrite, variable.other.object#2B2F2D—
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#2B2F2D—
variable.parameter, meta.parameter#2B2F2Ddditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#2B2F2D80—
keyword.operator#2B2F2D—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#7BAE6Bbold
entity.other.inherited-class#4F7B4A—
entity.name.tag, punctuation.definition.tag#E6F1E6—
entity.other.attribute-name#4F7B4A—
meta.diff, meta.diff.header#D7DED6—
markup.deleted#6E564E—
markup.inserted#4F7B4A—
markup.changed#7BAE6B—
markup.heading, markup.heading.setext, punctuation.definition.heading#4F7B4Abold
markup.bold—bold
markup.italic—italic
markup.inline.raw, markup.raw.block#7BAE6B—
string.other.link.title, string.other.link.description#4F7B4A—
markup.underline.link#D7DED6underline
punctuation.definition.list#E6F1E6—
markup.quote, punctuation.definition.quote#D7DED6italic