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#f8fbff
  • activityBar.border#00000015
  • activityBar.foreground#4aa3df
  • activityBar.inactiveForeground#1f2b3660
  • activityBarBadge.background#4aa3df
  • activityBarBadge.foreground#f8fbff
  • button.background#4aa3df
  • button.foreground#f8fbff
  • button.hoverBackground#4aa3dfdd
  • editor.background#f8fbff
  • editor.foreground#1f2b36
  • editor.inactiveSelectionBackground#9fb4c72580
  • editor.lineHighlightBackground#e8f1f750
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#9fb4c725
  • editorCursor.foreground#4aa3df
  • editorGroupHeader.tabsBackground#e8f1f7aa
  • editorLineNumber.activeForeground#4aa3df
  • editorLineNumber.foreground#b9c8d480
  • focusBorder#4aa3df
  • foreground#1f2b36
  • input.background#e8f1f7
  • input.border#00000015
  • input.foreground#1f2b36
  • input.placeholderForeground#1f2b3660
  • list.activeSelectionBackground#4aa3df30
  • list.activeSelectionForeground#1f2b36
  • list.highlightForeground#4aa3df
  • list.hoverBackground#e8f1f740
  • list.hoverForeground#1f2b36
  • list.inactiveSelectionBackground#4aa3df15
  • list.inactiveSelectionForeground#1f2b36
  • selection.background#9fb4c725
  • sideBar.background#e8f1f7
  • sideBar.border#00000015
  • sideBar.foreground#1f2b36
  • sideBarSectionHeader.background#e8f1f780
  • sideBarSectionHeader.foreground#1f2b36
  • sideBarTitle.foreground#4aa3df
  • statusBar.background#f8fbff
  • statusBar.border#00000015
  • statusBar.foreground#1f2b36
  • statusBar.noFolderBackground#f8fbff
  • tab.activeBackground#f8fbff
  • tab.activeBorderTop#4aa3df
  • tab.activeForeground#1f2b36
  • tab.border#00000015
  • tab.inactiveBackground#f8fbff60
  • tab.inactiveForeground#1f2b3680
  • terminal.ansiBlack#1f2b36
  • terminal.ansiBlue#9fb4c7
  • terminal.ansiCyan#8de2f0
  • terminal.ansiGreen#4aa3df
  • terminal.ansiMagenta#7c8bc9
  • terminal.ansiRed#7c8bc9
  • terminal.ansiWhite#1f2b36
  • terminal.ansiYellow#8de2f0
  • terminal.background#f8fbff
  • terminal.foreground#1f2b36
  • titleBar.activeBackground#f8fbff
  • titleBar.activeForeground#1f2b36
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8fbff
  • titleBar.inactiveForeground#1f2b3660
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b9c8d4italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#9fb4c7bold
storage.type, storage.modifier#9fb4c7italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4aa3df
string, punctuation.definition.string, string.template, meta.template.expression#8de2f0
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#7c8bc9
variable, variable.other.readwrite, variable.other.object#1f2b36
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2b36
variable.parameter, meta.parameter#1f2b36dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f2b3680
keyword.operator#1f2b36
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#8de2f0bold
entity.other.inherited-class#4aa3df
entity.name.tag, punctuation.definition.tag#9fb4c7
entity.other.attribute-name#4aa3df
meta.diff, meta.diff.header#b9c8d4
markup.deleted#7c8bc9
markup.inserted#4aa3df
markup.changed#8de2f0
markup.heading, markup.heading.setext, punctuation.definition.heading#4aa3dfbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#8de2f0
string.other.link.title, string.other.link.description#4aa3df
markup.underline.link#b9c8d4underline
punctuation.definition.list#9fb4c7
markup.quote, punctuation.definition.quote#b9c8d4italic