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#f8fbfb
  • activityBar.border#00000015
  • activityBar.foreground#b8d8e7
  • activityBar.inactiveForeground#2d211860
  • activityBarBadge.background#b8d8e7
  • activityBarBadge.foreground#f8fbfb
  • button.background#b8d8e7
  • button.foreground#f8fbfb
  • button.hoverBackground#b8d8e7dd
  • editor.background#f8fbfb
  • editor.foreground#2d2118
  • editor.inactiveSelectionBackground#eef6f82580
  • editor.lineHighlightBackground#dce8ea50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#eef6f825
  • editorCursor.foreground#b8d8e7
  • editorGroupHeader.tabsBackground#dce8eaaa
  • editorLineNumber.activeForeground#b8d8e7
  • editorLineNumber.foreground#eef6f880
  • focusBorder#b8d8e7
  • foreground#2d2118
  • input.background#dce8ea
  • input.border#00000015
  • input.foreground#2d2118
  • input.placeholderForeground#2d211860
  • list.activeSelectionBackground#b8d8e730
  • list.activeSelectionForeground#2d2118
  • list.highlightForeground#b8d8e7
  • list.hoverBackground#dce8ea40
  • list.hoverForeground#2d2118
  • list.inactiveSelectionBackground#b8d8e715
  • list.inactiveSelectionForeground#2d2118
  • selection.background#eef6f825
  • sideBar.background#dce8ea
  • sideBar.border#00000015
  • sideBar.foreground#2d2118
  • sideBarSectionHeader.background#dce8ea80
  • sideBarSectionHeader.foreground#2d2118
  • sideBarTitle.foreground#b8d8e7
  • statusBar.background#f8fbfb
  • statusBar.border#00000015
  • statusBar.foreground#2d2118
  • statusBar.noFolderBackground#f8fbfb
  • tab.activeBackground#f8fbfb
  • tab.activeBorderTop#b8d8e7
  • tab.activeForeground#2d2118
  • tab.border#00000015
  • tab.inactiveBackground#f8fbfb60
  • tab.inactiveForeground#2d211880
  • terminal.ansiBlack#2d2118
  • terminal.ansiBlue#eef6f8
  • terminal.ansiCyan#7a5438
  • terminal.ansiGreen#b8d8e7
  • terminal.ansiMagenta#a8b1ad
  • terminal.ansiRed#a8b1ad
  • terminal.ansiWhite#2d2118
  • terminal.ansiYellow#7a5438
  • terminal.background#f8fbfb
  • terminal.foreground#2d2118
  • titleBar.activeBackground#f8fbfb
  • titleBar.activeForeground#2d2118
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8fbfb
  • titleBar.inactiveForeground#2d211860
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#eef6f8italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#eef6f8bold
storage.type, storage.modifier#eef6f8italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#b8d8e7
string, punctuation.definition.string, string.template, meta.template.expression#7a5438
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#a8b1ad
variable, variable.other.readwrite, variable.other.object#2d2118
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#2d2118
variable.parameter, meta.parameter#2d2118dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#2d211880
keyword.operator#2d2118
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#7a5438bold
entity.other.inherited-class#b8d8e7
entity.name.tag, punctuation.definition.tag#eef6f8
entity.other.attribute-name#b8d8e7
meta.diff, meta.diff.header#eef6f8
markup.deleted#a8b1ad
markup.inserted#b8d8e7
markup.changed#7a5438
markup.heading, markup.heading.setext, punctuation.definition.heading#b8d8e7bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#7a5438
string.other.link.title, string.other.link.description#b8d8e7
markup.underline.link#eef6f8underline
punctuation.definition.list#eef6f8
markup.quote, punctuation.definition.quote#eef6f8italic