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#f4f7ed
  • activityBar.border#00000015
  • activityBar.foreground#b8e3c2
  • activityBar.inactiveForeground#22282060
  • activityBarBadge.background#b8e3c2
  • activityBarBadge.foreground#f4f7ed
  • button.background#b8e3c2
  • button.foreground#f4f7ed
  • button.hoverBackground#b8e3c2dd
  • editor.background#f4f7ed
  • editor.foreground#222820
  • editor.inactiveSelectionBackground#60745c2580
  • editor.lineHighlightBackground#e6efe150
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#60745c25
  • editorCursor.foreground#b8e3c2
  • editorGroupHeader.tabsBackground#e6efe1aa
  • editorLineNumber.activeForeground#b8e3c2
  • editorLineNumber.foreground#9aa99580
  • focusBorder#b8e3c2
  • foreground#222820
  • input.background#e6efe1
  • input.border#00000015
  • input.foreground#222820
  • input.placeholderForeground#22282060
  • list.activeSelectionBackground#b8e3c230
  • list.activeSelectionForeground#222820
  • list.highlightForeground#b8e3c2
  • list.hoverBackground#e6efe140
  • list.hoverForeground#222820
  • list.inactiveSelectionBackground#b8e3c215
  • list.inactiveSelectionForeground#222820
  • selection.background#60745c25
  • sideBar.background#e6efe1
  • sideBar.border#00000015
  • sideBar.foreground#222820
  • sideBarSectionHeader.background#e6efe180
  • sideBarSectionHeader.foreground#222820
  • sideBarTitle.foreground#b8e3c2
  • statusBar.background#f4f7ed
  • statusBar.border#00000015
  • statusBar.foreground#222820
  • statusBar.noFolderBackground#f4f7ed
  • tab.activeBackground#f4f7ed
  • tab.activeBorderTop#b8e3c2
  • tab.activeForeground#222820
  • tab.border#00000015
  • tab.inactiveBackground#f4f7ed60
  • tab.inactiveForeground#22282080
  • terminal.ansiBlack#222820
  • terminal.ansiBlue#60745c
  • terminal.ansiCyan#d9f0d8
  • terminal.ansiGreen#b8e3c2
  • terminal.ansiMagenta#caa46a
  • terminal.ansiRed#caa46a
  • terminal.ansiWhite#222820
  • terminal.ansiYellow#d9f0d8
  • terminal.background#f4f7ed
  • terminal.foreground#222820
  • titleBar.activeBackground#f4f7ed
  • titleBar.activeForeground#222820
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f4f7ed
  • titleBar.inactiveForeground#22282060
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa995italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#60745cbold
storage.type, storage.modifier#60745citalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#b8e3c2
string, punctuation.definition.string, string.template, meta.template.expression#d9f0d8
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#caa46a
variable, variable.other.readwrite, variable.other.object#222820
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#222820
variable.parameter, meta.parameter#222820dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#22282080
keyword.operator#222820
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d9f0d8bold
entity.other.inherited-class#b8e3c2
entity.name.tag, punctuation.definition.tag#60745c
entity.other.attribute-name#b8e3c2
meta.diff, meta.diff.header#9aa995
markup.deleted#caa46a
markup.inserted#b8e3c2
markup.changed#d9f0d8
markup.heading, markup.heading.setext, punctuation.definition.heading#b8e3c2bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d9f0d8
string.other.link.title, string.other.link.description#b8e3c2
markup.underline.link#9aa995underline
punctuation.definition.list#60745c
markup.quote, punctuation.definition.quote#9aa995italic
Morphous Theme by Ameyanagi - VS Code Theme