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#f7f8f6
  • activityBar.border#00000015
  • activityBar.foreground#2f5367
  • activityBar.inactiveForeground#18283260
  • activityBarBadge.background#2f5367
  • activityBarBadge.foreground#f7f8f6
  • button.background#2f5367
  • button.foreground#f7f8f6
  • button.hoverBackground#2f5367dd
  • editor.background#f7f8f6
  • editor.foreground#182832
  • editor.inactiveSelectionBackground#d7dee12580
  • editor.lineHighlightBackground#edf1f050
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d7dee125
  • editorCursor.foreground#2f5367
  • editorGroupHeader.tabsBackground#edf1f0aa
  • editorLineNumber.activeForeground#2f5367
  • editorLineNumber.foreground#d7dee180
  • focusBorder#2f5367
  • foreground#182832
  • input.background#edf1f0
  • input.border#00000015
  • input.foreground#182832
  • input.placeholderForeground#18283260
  • list.activeSelectionBackground#2f536730
  • list.activeSelectionForeground#182832
  • list.highlightForeground#2f5367
  • list.hoverBackground#edf1f040
  • list.hoverForeground#182832
  • list.inactiveSelectionBackground#2f536715
  • list.inactiveSelectionForeground#182832
  • selection.background#d7dee125
  • sideBar.background#edf1f0
  • sideBar.border#00000015
  • sideBar.foreground#182832
  • sideBarSectionHeader.background#edf1f080
  • sideBarSectionHeader.foreground#182832
  • sideBarTitle.foreground#2f5367
  • statusBar.background#f7f8f6
  • statusBar.border#00000015
  • statusBar.foreground#182832
  • statusBar.noFolderBackground#f7f8f6
  • tab.activeBackground#f7f8f6
  • tab.activeBorderTop#2f5367
  • tab.activeForeground#182832
  • tab.border#00000015
  • tab.inactiveBackground#f7f8f660
  • tab.inactiveForeground#18283280
  • terminal.ansiBlack#182832
  • terminal.ansiBlue#d7dee1
  • terminal.ansiCyan#d8c6aa
  • terminal.ansiGreen#2f5367
  • terminal.ansiMagenta#5d7f94
  • terminal.ansiRed#5d7f94
  • terminal.ansiWhite#182832
  • terminal.ansiYellow#d8c6aa
  • terminal.background#f7f8f6
  • terminal.foreground#182832
  • titleBar.activeBackground#f7f8f6
  • titleBar.activeForeground#182832
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7f8f6
  • titleBar.inactiveForeground#18283260
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d7dee1italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d7dee1bold
storage.type, storage.modifier#d7dee1italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2f5367
string, punctuation.definition.string, string.template, meta.template.expression#d8c6aa
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#5d7f94
variable, variable.other.readwrite, variable.other.object#182832
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#182832
variable.parameter, meta.parameter#182832dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#18283280
keyword.operator#182832
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#d8c6aabold
entity.other.inherited-class#2f5367
entity.name.tag, punctuation.definition.tag#d7dee1
entity.other.attribute-name#2f5367
meta.diff, meta.diff.header#d7dee1
markup.deleted#5d7f94
markup.inserted#2f5367
markup.changed#d8c6aa
markup.heading, markup.heading.setext, punctuation.definition.heading#2f5367bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#d8c6aa
string.other.link.title, string.other.link.description#2f5367
markup.underline.link#d7dee1underline
punctuation.definition.list#d7dee1
markup.quote, punctuation.definition.quote#d7dee1italic