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#f8faf7
  • activityBar.border#ffffff15
  • activityBar.foreground#4c7a5a
  • activityBar.inactiveForeground#eef3f060
  • activityBarBadge.background#4c7a5a
  • activityBarBadge.foreground#f8faf7
  • button.background#4c7a5a
  • button.foreground#f8faf7
  • button.hoverBackground#4c7a5add
  • editor.background#f8faf7
  • editor.foreground#eef3f0
  • editor.inactiveSelectionBackground#7a8a5f3580
  • editor.lineHighlightBackground#223b3840
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7a8a5f35
  • editorCursor.foreground#4c7a5a
  • editorGroupHeader.tabsBackground#f8faf7dd
  • editorLineNumber.activeForeground#4c7a5a
  • editorLineNumber.foreground#a9b3ad80
  • focusBorder#4c7a5a
  • foreground#eef3f0
  • input.background#223b38
  • input.border#ffffff15
  • input.foreground#eef3f0
  • input.placeholderForeground#eef3f060
  • list.activeSelectionBackground#4c7a5a30
  • list.activeSelectionForeground#eef3f0
  • list.highlightForeground#4c7a5a
  • list.hoverBackground#223b3840
  • list.hoverForeground#eef3f0
  • list.inactiveSelectionBackground#4c7a5a15
  • list.inactiveSelectionForeground#eef3f0
  • selection.background#7a8a5f35
  • sideBar.background#223b38
  • sideBar.border#ffffff15
  • sideBar.foreground#eef3f0
  • sideBarSectionHeader.background#f8faf780
  • sideBarSectionHeader.foreground#eef3f0
  • sideBarTitle.foreground#4c7a5a
  • statusBar.background#f8faf7
  • statusBar.border#ffffff15
  • statusBar.foreground#eef3f0
  • statusBar.noFolderBackground#f8faf7
  • tab.activeBackground#f8faf7
  • tab.activeBorderTop#4c7a5a
  • tab.activeForeground#eef3f0
  • tab.border#ffffff15
  • tab.inactiveBackground#223b3860
  • tab.inactiveForeground#eef3f080
  • terminal.ansiBlack#f8faf7
  • terminal.ansiBlue#7a8a5f
  • terminal.ansiCyan#5e8f8d
  • terminal.ansiGreen#4c7a5a
  • terminal.ansiMagenta#d1a24a
  • terminal.ansiRed#d1a24a
  • terminal.ansiWhite#eef3f0
  • terminal.ansiYellow#5e8f8d
  • terminal.background#f8faf7
  • terminal.foreground#eef3f0
  • titleBar.activeBackground#f8faf7
  • titleBar.activeForeground#eef3f0
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#f8faf7
  • titleBar.inactiveForeground#eef3f060
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a9b3aditalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7a8a5fbold
storage.type, storage.modifier#7a8a5fitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4c7a5a
string, punctuation.definition.string, string.template, meta.template.expression#5e8f8d
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#d1a24a
variable, variable.other.readwrite, variable.other.object#eef3f0
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#eef3f0
variable.parameter, meta.parameter#eef3f0dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#eef3f080
keyword.operator#eef3f0
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#5e8f8dbold
entity.other.inherited-class#4c7a5a
entity.name.tag, punctuation.definition.tag#7a8a5f
entity.other.attribute-name#4c7a5a
meta.diff, meta.diff.header#a9b3ad
markup.deleted#d1a24a
markup.inserted#4c7a5a
markup.changed#5e8f8d
markup.heading, markup.heading.setext, punctuation.definition.heading#4c7a5abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#5e8f8d
string.other.link.title, string.other.link.description#4c7a5a
markup.underline.link#a9b3adunderline
punctuation.definition.list#7a8a5f
markup.quote, punctuation.definition.quote#a9b3aditalic