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#f7f1f5
  • activityBar.border#00000015
  • activityBar.foreground#40204f
  • activityBar.inactiveForeground#17101860
  • activityBarBadge.background#40204f
  • activityBarBadge.foreground#f7f1f5
  • button.background#40204f
  • button.foreground#f7f1f5
  • button.hoverBackground#40204fdd
  • editor.background#f7f1f5
  • editor.foreground#171018
  • editor.inactiveSelectionBackground#2116292580
  • editor.lineHighlightBackground#eadfe550
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#21162925
  • editorCursor.foreground#40204f
  • editorGroupHeader.tabsBackground#eadfe5aa
  • editorLineNumber.activeForeground#40204f
  • editorLineNumber.foreground#73965a80
  • focusBorder#40204f
  • foreground#171018
  • input.background#eadfe5
  • input.border#00000015
  • input.foreground#171018
  • input.placeholderForeground#17101860
  • list.activeSelectionBackground#40204f30
  • list.activeSelectionForeground#171018
  • list.highlightForeground#40204f
  • list.hoverBackground#eadfe540
  • list.hoverForeground#171018
  • list.inactiveSelectionBackground#40204f15
  • list.inactiveSelectionForeground#171018
  • selection.background#21162925
  • sideBar.background#eadfe5
  • sideBar.border#00000015
  • sideBar.foreground#171018
  • sideBarSectionHeader.background#eadfe580
  • sideBarSectionHeader.foreground#171018
  • sideBarTitle.foreground#40204f
  • statusBar.background#f7f1f5
  • statusBar.border#00000015
  • statusBar.foreground#171018
  • statusBar.noFolderBackground#f7f1f5
  • tab.activeBackground#f7f1f5
  • tab.activeBorderTop#40204f
  • tab.activeForeground#171018
  • tab.border#00000015
  • tab.inactiveBackground#f7f1f560
  • tab.inactiveForeground#17101880
  • terminal.ansiBlack#171018
  • terminal.ansiBlue#211629
  • terminal.ansiCyan#b33472
  • terminal.ansiGreen#40204f
  • terminal.ansiMagenta#557b45
  • terminal.ansiRed#557b45
  • terminal.ansiWhite#171018
  • terminal.ansiYellow#b33472
  • terminal.background#f7f1f5
  • terminal.foreground#171018
  • titleBar.activeBackground#f7f1f5
  • titleBar.activeForeground#171018
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7f1f5
  • titleBar.inactiveForeground#17101860
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#73965aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#211629bold
storage.type, storage.modifier#211629italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#40204f
string, punctuation.definition.string, string.template, meta.template.expression#b33472
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#557b45
variable, variable.other.readwrite, variable.other.object#171018
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#171018
variable.parameter, meta.parameter#171018dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#17101880
keyword.operator#171018
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#b33472bold
entity.other.inherited-class#40204f
entity.name.tag, punctuation.definition.tag#211629
entity.other.attribute-name#40204f
meta.diff, meta.diff.header#73965a
markup.deleted#557b45
markup.inserted#40204f
markup.changed#b33472
markup.heading, markup.heading.setext, punctuation.definition.heading#40204fbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#b33472
string.other.link.title, string.other.link.description#40204f
markup.underline.link#73965aunderline
punctuation.definition.list#211629
markup.quote, punctuation.definition.quote#73965aitalic
Morphous Theme by Ameyanagi - VS Code Theme