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#fffefe
  • activityBar.border#00000015
  • activityBar.foreground#8b1e1e
  • activityBar.inactiveForeground#2b2f3360
  • activityBarBadge.background#8b1e1e
  • activityBarBadge.foreground#fffefe
  • button.background#8b1e1e
  • button.foreground#fffefe
  • button.hoverBackground#8b1e1edd
  • editor.background#fffefe
  • editor.foreground#2b2f33
  • editor.inactiveSelectionBackground#6b727a2580
  • editor.lineHighlightBackground#ececec50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#6b727a25
  • editorCursor.foreground#8b1e1e
  • editorGroupHeader.tabsBackground#ecececaa
  • editorLineNumber.activeForeground#8b1e1e
  • editorLineNumber.foreground#f4f5f680
  • focusBorder#8b1e1e
  • foreground#2b2f33
  • input.background#ececec
  • input.border#00000015
  • input.foreground#2b2f33
  • input.placeholderForeground#2b2f3360
  • list.activeSelectionBackground#8b1e1e30
  • list.activeSelectionForeground#2b2f33
  • list.highlightForeground#8b1e1e
  • list.hoverBackground#ececec40
  • list.hoverForeground#2b2f33
  • list.inactiveSelectionBackground#8b1e1e15
  • list.inactiveSelectionForeground#2b2f33
  • selection.background#6b727a25
  • sideBar.background#ececec
  • sideBar.border#00000015
  • sideBar.foreground#2b2f33
  • sideBarSectionHeader.background#ececec80
  • sideBarSectionHeader.foreground#2b2f33
  • sideBarTitle.foreground#8b1e1e
  • statusBar.background#fffefe
  • statusBar.border#00000015
  • statusBar.foreground#2b2f33
  • statusBar.noFolderBackground#fffefe
  • tab.activeBackground#fffefe
  • tab.activeBorderTop#8b1e1e
  • tab.activeForeground#2b2f33
  • tab.border#00000015
  • tab.inactiveBackground#fffefe60
  • tab.inactiveForeground#2b2f3380
  • terminal.ansiBlack#2b2f33
  • terminal.ansiBlue#6b727a
  • terminal.ansiCyan#d6dade
  • terminal.ansiGreen#8b1e1e
  • terminal.ansiMagenta#c47f2a
  • terminal.ansiRed#c47f2a
  • terminal.ansiWhite#2b2f33
  • terminal.ansiYellow#d6dade
  • terminal.background#fffefe
  • terminal.foreground#2b2f33
  • titleBar.activeBackground#fffefe
  • titleBar.activeForeground#2b2f33
  • titleBar.border#00000015
  • titleBar.inactiveBackground#fffefe
  • titleBar.inactiveForeground#2b2f3360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f4f5f6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#6b727abold
storage.type, storage.modifier#6b727aitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#8b1e1e
string, punctuation.definition.string, string.template, meta.template.expression#d6dade
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#c47f2a
variable, variable.other.readwrite, variable.other.object#2b2f33
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#2b2f33
variable.parameter, meta.parameter#2b2f33dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#2b2f3380
keyword.operator#2b2f33
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d6dadebold
entity.other.inherited-class#8b1e1e
entity.name.tag, punctuation.definition.tag#6b727a
entity.other.attribute-name#8b1e1e
meta.diff, meta.diff.header#f4f5f6
markup.deleted#c47f2a
markup.inserted#8b1e1e
markup.changed#d6dade
markup.heading, markup.heading.setext, punctuation.definition.heading#8b1e1ebold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d6dade
string.other.link.title, string.other.link.description#8b1e1e
markup.underline.link#f4f5f6underline
punctuation.definition.list#6b727a
markup.quote, punctuation.definition.quote#f4f5f6italic
Morphous Theme by Ameyanagi - VS Code Theme