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#f7fbfa
  • activityBar.border#00000015
  • activityBar.foreground#7b4fb3
  • activityBar.inactiveForeground#18212660
  • activityBarBadge.background#7b4fb3
  • activityBarBadge.foreground#f7fbfa
  • button.background#7b4fb3
  • button.foreground#f7fbfa
  • button.hoverBackground#7b4fb3dd
  • editor.background#f7fbfa
  • editor.foreground#182126
  • editor.inactiveSelectionBackground#b7e5d02580
  • editor.lineHighlightBackground#edf7f250
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#b7e5d025
  • editorCursor.foreground#7b4fb3
  • editorGroupHeader.tabsBackground#edf7f2aa
  • editorLineNumber.activeForeground#7b4fb3
  • editorLineNumber.foreground#c6b7e880
  • focusBorder#7b4fb3
  • foreground#182126
  • input.background#edf7f2
  • input.border#00000015
  • input.foreground#182126
  • input.placeholderForeground#18212660
  • list.activeSelectionBackground#7b4fb330
  • list.activeSelectionForeground#182126
  • list.highlightForeground#7b4fb3
  • list.hoverBackground#edf7f240
  • list.hoverForeground#182126
  • list.inactiveSelectionBackground#7b4fb315
  • list.inactiveSelectionForeground#182126
  • selection.background#b7e5d025
  • sideBar.background#edf7f2
  • sideBar.border#00000015
  • sideBar.foreground#182126
  • sideBarSectionHeader.background#edf7f280
  • sideBarSectionHeader.foreground#182126
  • sideBarTitle.foreground#7b4fb3
  • statusBar.background#f7fbfa
  • statusBar.border#00000015
  • statusBar.foreground#182126
  • statusBar.noFolderBackground#f7fbfa
  • tab.activeBackground#f7fbfa
  • tab.activeBorderTop#7b4fb3
  • tab.activeForeground#182126
  • tab.border#00000015
  • tab.inactiveBackground#f7fbfa60
  • tab.inactiveForeground#18212680
  • terminal.ansiBlack#182126
  • terminal.ansiBlue#b7e5d0
  • terminal.ansiCyan#64b98f
  • terminal.ansiGreen#7b4fb3
  • terminal.ansiMagenta#55616a
  • terminal.ansiRed#55616a
  • terminal.ansiWhite#182126
  • terminal.ansiYellow#64b98f
  • terminal.background#f7fbfa
  • terminal.foreground#182126
  • titleBar.activeBackground#f7fbfa
  • titleBar.activeForeground#182126
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7fbfa
  • titleBar.inactiveForeground#18212660
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#c6b7e8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#b7e5d0bold
storage.type, storage.modifier#b7e5d0italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#7b4fb3
string, punctuation.definition.string, string.template, meta.template.expression#64b98f
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#55616a
variable, variable.other.readwrite, variable.other.object#182126
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#182126
variable.parameter, meta.parameter#182126dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#18212680
keyword.operator#182126
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#64b98fbold
entity.other.inherited-class#7b4fb3
entity.name.tag, punctuation.definition.tag#b7e5d0
entity.other.attribute-name#7b4fb3
meta.diff, meta.diff.header#c6b7e8
markup.deleted#55616a
markup.inserted#7b4fb3
markup.changed#64b98f
markup.heading, markup.heading.setext, punctuation.definition.heading#7b4fb3bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#64b98f
string.other.link.title, string.other.link.description#7b4fb3
markup.underline.link#c6b7e8underline
punctuation.definition.list#b7e5d0
markup.quote, punctuation.definition.quote#c6b7e8italic