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

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#272446
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#272446
variable.parameter, meta.parameter#272446dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#27244680
keyword.operator#272446
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