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#f2f4f5
  • activityBar.border#00000015
  • activityBar.foreground#3b82b8
  • activityBar.inactiveForeground#11131660
  • activityBarBadge.background#3b82b8
  • activityBarBadge.foreground#f2f4f5
  • button.background#3b82b8
  • button.foreground#f2f4f5
  • button.hoverBackground#3b82b8dd
  • editor.background#f2f4f5
  • editor.foreground#111316
  • editor.inactiveSelectionBackground#6f78822580
  • editor.lineHighlightBackground#dfe3e550
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#6f788225
  • editorCursor.foreground#3b82b8
  • editorGroupHeader.tabsBackground#dfe3e5aa
  • editorLineNumber.activeForeground#3b82b8
  • editorLineNumber.foreground#9aa0a580
  • focusBorder#3b82b8
  • foreground#111316
  • input.background#dfe3e5
  • input.border#00000015
  • input.foreground#111316
  • input.placeholderForeground#11131660
  • list.activeSelectionBackground#3b82b830
  • list.activeSelectionForeground#111316
  • list.highlightForeground#3b82b8
  • list.hoverBackground#dfe3e540
  • list.hoverForeground#111316
  • list.inactiveSelectionBackground#3b82b815
  • list.inactiveSelectionForeground#111316
  • selection.background#6f788225
  • sideBar.background#dfe3e5
  • sideBar.border#00000015
  • sideBar.foreground#111316
  • sideBarSectionHeader.background#dfe3e580
  • sideBarSectionHeader.foreground#111316
  • sideBarTitle.foreground#3b82b8
  • statusBar.background#f2f4f5
  • statusBar.border#00000015
  • statusBar.foreground#111316
  • statusBar.noFolderBackground#f2f4f5
  • tab.activeBackground#f2f4f5
  • tab.activeBorderTop#3b82b8
  • tab.activeForeground#111316
  • tab.border#00000015
  • tab.inactiveBackground#f2f4f560
  • tab.inactiveForeground#11131680
  • terminal.ansiBlack#111316
  • terminal.ansiBlue#6f7882
  • terminal.ansiCyan#9bb8c8
  • terminal.ansiGreen#3b82b8
  • terminal.ansiMagenta#b24a3a
  • terminal.ansiRed#b24a3a
  • terminal.ansiWhite#111316
  • terminal.ansiYellow#9bb8c8
  • terminal.background#f2f4f5
  • terminal.foreground#111316
  • titleBar.activeBackground#f2f4f5
  • titleBar.activeForeground#111316
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f2f4f5
  • titleBar.inactiveForeground#11131660
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9aa0a5italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#6f7882bold
storage.type, storage.modifier#6f7882italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#3b82b8
string, punctuation.definition.string, string.template, meta.template.expression#9bb8c8
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#b24a3a
variable, variable.other.readwrite, variable.other.object#111316
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#111316
variable.parameter, meta.parameter#111316dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#11131680
keyword.operator#111316
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#9bb8c8bold
entity.other.inherited-class#3b82b8
entity.name.tag, punctuation.definition.tag#6f7882
entity.other.attribute-name#3b82b8
meta.diff, meta.diff.header#9aa0a5
markup.deleted#b24a3a
markup.inserted#3b82b8
markup.changed#9bb8c8
markup.heading, markup.heading.setext, punctuation.definition.heading#3b82b8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#9bb8c8
string.other.link.title, string.other.link.description#3b82b8
markup.underline.link#9aa0a5underline
punctuation.definition.list#6f7882
markup.quote, punctuation.definition.quote#9aa0a5italic