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#FBFCFE
  • activityBar.border#00000015
  • activityBar.foreground#442593
  • activityBar.inactiveForeground#12203360
  • activityBarBadge.background#442593
  • activityBarBadge.foreground#FBFCFE
  • button.background#442593
  • button.foreground#FBFCFE
  • button.hoverBackground#442593dd
  • editor.background#FBFCFE
  • editor.foreground#122033
  • editor.inactiveSelectionBackground#2156832580
  • editor.lineHighlightBackground#F4F7FA50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#21568325
  • editorCursor.foreground#442593
  • editorGroupHeader.tabsBackground#F4F7FAaa
  • editorLineNumber.activeForeground#442593
  • editorLineNumber.foreground#aeb8c880
  • focusBorder#442593
  • foreground#122033
  • input.background#F4F7FA
  • input.border#00000015
  • input.foreground#122033
  • input.placeholderForeground#12203360
  • list.activeSelectionBackground#44259330
  • list.activeSelectionForeground#122033
  • list.highlightForeground#442593
  • list.hoverBackground#F4F7FA40
  • list.hoverForeground#122033
  • list.inactiveSelectionBackground#44259315
  • list.inactiveSelectionForeground#122033
  • selection.background#21568325
  • sideBar.background#F4F7FA
  • sideBar.border#00000015
  • sideBar.foreground#122033
  • sideBarSectionHeader.background#F4F7FA80
  • sideBarSectionHeader.foreground#122033
  • sideBarTitle.foreground#442593
  • statusBar.background#FBFCFE
  • statusBar.border#00000015
  • statusBar.foreground#122033
  • statusBar.noFolderBackground#FBFCFE
  • tab.activeBackground#FBFCFE
  • tab.activeBorderTop#442593
  • tab.activeForeground#122033
  • tab.border#00000015
  • tab.inactiveBackground#FBFCFE60
  • tab.inactiveForeground#12203380
  • terminal.ansiBlack#122033
  • terminal.ansiBlue#215683
  • terminal.ansiCyan#2997A3
  • terminal.ansiGreen#442593
  • terminal.ansiMagenta#331976
  • terminal.ansiRed#331976
  • terminal.ansiWhite#122033
  • terminal.ansiYellow#2997A3
  • terminal.background#FBFCFE
  • terminal.foreground#122033
  • titleBar.activeBackground#FBFCFE
  • titleBar.activeForeground#122033
  • titleBar.border#00000015
  • titleBar.inactiveBackground#FBFCFE
  • titleBar.inactiveForeground#12203360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aeb8c8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#215683bold
storage.type, storage.modifier#215683italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#442593
string, punctuation.definition.string, string.template, meta.template.expression#2997A3
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#331976
variable, variable.other.readwrite, variable.other.object#122033
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#122033
variable.parameter, meta.parameter#122033dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#12203380
keyword.operator#122033
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#2997A3bold
entity.other.inherited-class#442593
entity.name.tag, punctuation.definition.tag#215683
entity.other.attribute-name#442593
meta.diff, meta.diff.header#aeb8c8
markup.deleted#331976
markup.inserted#442593
markup.changed#2997A3
markup.heading, markup.heading.setext, punctuation.definition.heading#442593bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#2997A3
string.other.link.title, string.other.link.description#442593
markup.underline.link#aeb8c8underline
punctuation.definition.list#215683
markup.quote, punctuation.definition.quote#aeb8c8italic
Morphous Theme by Ameyanagi - VS Code Theme