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#21272C
  • activityBar.border#ffffff15
  • activityBar.foreground#6797E9
  • activityBar.inactiveForeground#FAFBFB60
  • activityBarBadge.background#6797E9
  • activityBarBadge.foreground#21272C
  • button.background#6797E9
  • button.foreground#21272C
  • button.hoverBackground#6797E9dd
  • editor.background#21272C
  • editor.foreground#FAFBFB
  • editor.inactiveSelectionBackground#79CFEC3580
  • editor.lineHighlightBackground#0B0F1940
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#79CFEC35
  • editorCursor.foreground#6797E9
  • editorGroupHeader.tabsBackground#21272Cdd
  • editorLineNumber.activeForeground#6797E9
  • editorLineNumber.foreground#B9C6C980
  • focusBorder#6797E9
  • foreground#FAFBFB
  • input.background#0B0F19
  • input.border#ffffff15
  • input.foreground#FAFBFB
  • input.placeholderForeground#FAFBFB60
  • list.activeSelectionBackground#6797E930
  • list.activeSelectionForeground#FAFBFB
  • list.highlightForeground#6797E9
  • list.hoverBackground#0B0F1940
  • list.hoverForeground#FAFBFB
  • list.inactiveSelectionBackground#6797E915
  • list.inactiveSelectionForeground#FAFBFB
  • selection.background#79CFEC35
  • sideBar.background#0B0F19
  • sideBar.border#ffffff15
  • sideBar.foreground#FAFBFB
  • sideBarSectionHeader.background#21272C80
  • sideBarSectionHeader.foreground#FAFBFB
  • sideBarTitle.foreground#6797E9
  • statusBar.background#21272C
  • statusBar.border#ffffff15
  • statusBar.foreground#FAFBFB
  • statusBar.noFolderBackground#21272C
  • tab.activeBackground#21272C
  • tab.activeBorderTop#6797E9
  • tab.activeForeground#FAFBFB
  • tab.border#ffffff15
  • tab.inactiveBackground#0B0F1960
  • tab.inactiveForeground#FAFBFB80
  • terminal.ansiBlack#21272C
  • terminal.ansiBlue#79CFEC
  • terminal.ansiCyan#55C0E7
  • terminal.ansiGreen#6797E9
  • terminal.ansiMagenta#83C7F1
  • terminal.ansiRed#83C7F1
  • terminal.ansiWhite#FAFBFB
  • terminal.ansiYellow#55C0E7
  • terminal.background#21272C
  • terminal.foreground#FAFBFB
  • titleBar.activeBackground#21272C
  • titleBar.activeForeground#FAFBFB
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#21272C
  • titleBar.inactiveForeground#FAFBFB60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B9C6C9italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#79CFECbold
storage.type, storage.modifier#79CFECitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#6797E9
string, punctuation.definition.string, string.template, meta.template.expression#55C0E7
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#83C7F1
variable, variable.other.readwrite, variable.other.object#FAFBFB
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#FAFBFB
variable.parameter, meta.parameter#FAFBFBdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#FAFBFB80
keyword.operator#FAFBFB
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#55C0E7bold
entity.other.inherited-class#6797E9
entity.name.tag, punctuation.definition.tag#79CFEC
entity.other.attribute-name#6797E9
meta.diff, meta.diff.header#B9C6C9
markup.deleted#83C7F1
markup.inserted#6797E9
markup.changed#55C0E7
markup.heading, markup.heading.setext, punctuation.definition.heading#6797E9bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#55C0E7
string.other.link.title, string.other.link.description#6797E9
markup.underline.link#B9C6C9underline
punctuation.definition.list#79CFEC
markup.quote, punctuation.definition.quote#B9C6C9italic
Morphous Theme by Ameyanagi - VS Code Theme