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#f7fafb
  • activityBar.border#00000015
  • activityBar.foreground#2f607a
  • activityBar.inactiveForeground#18222b60
  • activityBarBadge.background#2f607a
  • activityBarBadge.foreground#f7fafb
  • button.background#2f607a
  • button.foreground#f7fafb
  • button.hoverBackground#2f607add
  • editor.background#f7fafb
  • editor.foreground#18222b
  • editor.inactiveSelectionBackground#c9d4da2580
  • editor.lineHighlightBackground#e7eef150
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#c9d4da25
  • editorCursor.foreground#2f607a
  • editorGroupHeader.tabsBackground#e7eef1aa
  • editorLineNumber.activeForeground#2f607a
  • editorLineNumber.foreground#8fa0aa80
  • focusBorder#2f607a
  • foreground#18222b
  • input.background#e7eef1
  • input.border#00000015
  • input.foreground#18222b
  • input.placeholderForeground#18222b60
  • list.activeSelectionBackground#2f607a30
  • list.activeSelectionForeground#18222b
  • list.highlightForeground#2f607a
  • list.hoverBackground#e7eef140
  • list.hoverForeground#18222b
  • list.inactiveSelectionBackground#2f607a15
  • list.inactiveSelectionForeground#18222b
  • selection.background#c9d4da25
  • sideBar.background#e7eef1
  • sideBar.border#00000015
  • sideBar.foreground#18222b
  • sideBarSectionHeader.background#e7eef180
  • sideBarSectionHeader.foreground#18222b
  • sideBarTitle.foreground#2f607a
  • statusBar.background#f7fafb
  • statusBar.border#00000015
  • statusBar.foreground#18222b
  • statusBar.noFolderBackground#f7fafb
  • tab.activeBackground#f7fafb
  • tab.activeBorderTop#2f607a
  • tab.activeForeground#18222b
  • tab.border#00000015
  • tab.inactiveBackground#f7fafb60
  • tab.inactiveForeground#18222b80
  • terminal.ansiBlack#18222b
  • terminal.ansiBlue#c9d4da
  • terminal.ansiCyan#68c7d4
  • terminal.ansiGreen#2f607a
  • terminal.ansiMagenta#d49a45
  • terminal.ansiRed#d49a45
  • terminal.ansiWhite#18222b
  • terminal.ansiYellow#68c7d4
  • terminal.background#f7fafb
  • terminal.foreground#18222b
  • titleBar.activeBackground#f7fafb
  • titleBar.activeForeground#18222b
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f7fafb
  • titleBar.inactiveForeground#18222b60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8fa0aaitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#c9d4dabold
storage.type, storage.modifier#c9d4daitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2f607a
string, punctuation.definition.string, string.template, meta.template.expression#68c7d4
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#d49a45
variable, variable.other.readwrite, variable.other.object#18222b
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#18222b
variable.parameter, meta.parameter#18222bdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#18222b80
keyword.operator#18222b
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#68c7d4bold
entity.other.inherited-class#2f607a
entity.name.tag, punctuation.definition.tag#c9d4da
entity.other.attribute-name#2f607a
meta.diff, meta.diff.header#8fa0aa
markup.deleted#d49a45
markup.inserted#2f607a
markup.changed#68c7d4
markup.heading, markup.heading.setext, punctuation.definition.heading#2f607abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#68c7d4
string.other.link.title, string.other.link.description#2f607a
markup.underline.link#8fa0aaunderline
punctuation.definition.list#c9d4da
markup.quote, punctuation.definition.quote#8fa0aaitalic