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#2A2018
  • activityBar.border#ffffff15
  • activityBar.foreground#5A51AE
  • activityBar.inactiveForeground#F6F4F760
  • activityBarBadge.background#5A51AE
  • activityBarBadge.foreground#2A2018
  • button.background#5A51AE
  • button.foreground#2A2018
  • button.hoverBackground#5A51AEdd
  • editor.background#2A2018
  • editor.foreground#F6F4F7
  • editor.inactiveSelectionBackground#8A84E63580
  • editor.lineHighlightBackground#27244640
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#8A84E635
  • editorCursor.foreground#5A51AE
  • editorGroupHeader.tabsBackground#2A2018dd
  • editorLineNumber.activeForeground#5A51AE
  • editorLineNumber.foreground#A6AEA680
  • focusBorder#5A51AE
  • foreground#F6F4F7
  • input.background#272446
  • input.border#ffffff15
  • input.foreground#F6F4F7
  • input.placeholderForeground#F6F4F760
  • list.activeSelectionBackground#5A51AE30
  • list.activeSelectionForeground#F6F4F7
  • list.highlightForeground#5A51AE
  • list.hoverBackground#27244640
  • list.hoverForeground#F6F4F7
  • list.inactiveSelectionBackground#5A51AE15
  • list.inactiveSelectionForeground#F6F4F7
  • selection.background#8A84E635
  • sideBar.background#272446
  • sideBar.border#ffffff15
  • sideBar.foreground#F6F4F7
  • sideBarSectionHeader.background#2A201880
  • sideBarSectionHeader.foreground#F6F4F7
  • sideBarTitle.foreground#5A51AE
  • statusBar.background#2A2018
  • statusBar.border#ffffff15
  • statusBar.foreground#F6F4F7
  • statusBar.noFolderBackground#2A2018
  • tab.activeBackground#2A2018
  • tab.activeBorderTop#5A51AE
  • tab.activeForeground#F6F4F7
  • tab.border#ffffff15
  • tab.inactiveBackground#27244660
  • tab.inactiveForeground#F6F4F780
  • terminal.ansiBlack#2A2018
  • terminal.ansiBlue#8A84E6
  • terminal.ansiCyan#5F8A3B
  • terminal.ansiGreen#5A51AE
  • terminal.ansiMagenta#7DA55A
  • terminal.ansiRed#7DA55A
  • terminal.ansiWhite#F6F4F7
  • terminal.ansiYellow#5F8A3B
  • terminal.background#2A2018
  • terminal.foreground#F6F4F7
  • titleBar.activeBackground#2A2018
  • titleBar.activeForeground#F6F4F7
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#2A2018
  • titleBar.inactiveForeground#F6F4F760
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A6AEA6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#8A84E6bold
storage.type, storage.modifier#8A84E6italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#5A51AE
string, punctuation.definition.string, string.template, meta.template.expression#5F8A3B
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#7DA55A
variable, variable.other.readwrite, variable.other.object#F6F4F7
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#F6F4F7
variable.parameter, meta.parameter#F6F4F7dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#F6F4F780
keyword.operator#F6F4F7
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#5F8A3Bbold
entity.other.inherited-class#5A51AE
entity.name.tag, punctuation.definition.tag#8A84E6
entity.other.attribute-name#5A51AE
meta.diff, meta.diff.header#A6AEA6
markup.deleted#7DA55A
markup.inserted#5A51AE
markup.changed#5F8A3B
markup.heading, markup.heading.setext, punctuation.definition.heading#5A51AEbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#5F8A3B
string.other.link.title, string.other.link.description#5A51AE
markup.underline.link#A6AEA6underline
punctuation.definition.list#8A84E6
markup.quote, punctuation.definition.quote#A6AEA6italic
Morphous Theme by Ameyanagi - VS Code Theme