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#f8faf8
  • activityBar.border#00000015
  • activityBar.foreground#4f9ab8
  • activityBar.inactiveForeground#1f242860
  • activityBarBadge.background#4f9ab8
  • activityBarBadge.foreground#f8faf8
  • button.background#4f9ab8
  • button.foreground#f8faf8
  • button.hoverBackground#4f9ab8dd
  • editor.background#f8faf8
  • editor.foreground#1f2428
  • editor.inactiveSelectionBackground#d7dee22580
  • editor.lineHighlightBackground#eef3f250
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d7dee225
  • editorCursor.foreground#4f9ab8
  • editorGroupHeader.tabsBackground#eef3f2aa
  • editorLineNumber.activeForeground#4f9ab8
  • editorLineNumber.foreground#b9c4ca80
  • focusBorder#4f9ab8
  • foreground#1f2428
  • input.background#eef3f2
  • input.border#00000015
  • input.foreground#1f2428
  • input.placeholderForeground#1f242860
  • list.activeSelectionBackground#4f9ab830
  • list.activeSelectionForeground#1f2428
  • list.highlightForeground#4f9ab8
  • list.hoverBackground#eef3f240
  • list.hoverForeground#1f2428
  • list.inactiveSelectionBackground#4f9ab815
  • list.inactiveSelectionForeground#1f2428
  • selection.background#d7dee225
  • sideBar.background#eef3f2
  • sideBar.border#00000015
  • sideBar.foreground#1f2428
  • sideBarSectionHeader.background#eef3f280
  • sideBarSectionHeader.foreground#1f2428
  • sideBarTitle.foreground#4f9ab8
  • statusBar.background#f8faf8
  • statusBar.border#00000015
  • statusBar.foreground#1f2428
  • statusBar.noFolderBackground#f8faf8
  • tab.activeBackground#f8faf8
  • tab.activeBorderTop#4f9ab8
  • tab.activeForeground#1f2428
  • tab.border#00000015
  • tab.inactiveBackground#f8faf860
  • tab.inactiveForeground#1f242880
  • terminal.ansiBlack#1f2428
  • terminal.ansiBlue#d7dee2
  • terminal.ansiCyan#a9dbe8
  • terminal.ansiGreen#4f9ab8
  • terminal.ansiMagenta#697987
  • terminal.ansiRed#697987
  • terminal.ansiWhite#1f2428
  • terminal.ansiYellow#a9dbe8
  • terminal.background#f8faf8
  • terminal.foreground#1f2428
  • titleBar.activeBackground#f8faf8
  • titleBar.activeForeground#1f2428
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8faf8
  • titleBar.inactiveForeground#1f242860
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b9c4caitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d7dee2bold
storage.type, storage.modifier#d7dee2italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4f9ab8
string, punctuation.definition.string, string.template, meta.template.expression#a9dbe8
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#697987
variable, variable.other.readwrite, variable.other.object#1f2428
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2428
variable.parameter, meta.parameter#1f2428dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f242880
keyword.operator#1f2428
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#a9dbe8bold
entity.other.inherited-class#4f9ab8
entity.name.tag, punctuation.definition.tag#d7dee2
entity.other.attribute-name#4f9ab8
meta.diff, meta.diff.header#b9c4ca
markup.deleted#697987
markup.inserted#4f9ab8
markup.changed#a9dbe8
markup.heading, markup.heading.setext, punctuation.definition.heading#4f9ab8bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#a9dbe8
string.other.link.title, string.other.link.description#4f9ab8
markup.underline.link#b9c4caunderline
punctuation.definition.list#d7dee2
markup.quote, punctuation.definition.quote#b9c4caitalic