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#2B373B
  • activityBar.border#ffffff15
  • activityBar.foreground#67C9E9
  • activityBar.inactiveForeground#f4faf860
  • activityBarBadge.background#67C9E9
  • activityBarBadge.foreground#2B373B
  • button.background#67C9E9
  • button.foreground#2B373B
  • button.hoverBackground#67C9E9dd
  • editor.background#2B373B
  • editor.foreground#f4faf8
  • editor.inactiveSelectionBackground#A5EC793580
  • editor.lineHighlightBackground#181D2040
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#A5EC7935
  • editorCursor.foreground#67C9E9
  • editorGroupHeader.tabsBackground#2B373Bdd
  • editorLineNumber.activeForeground#67C9E9
  • editorLineNumber.foreground#94a79a80
  • focusBorder#67C9E9
  • foreground#f4faf8
  • input.background#181D20
  • input.border#ffffff15
  • input.foreground#f4faf8
  • input.placeholderForeground#f4faf860
  • list.activeSelectionBackground#67C9E930
  • list.activeSelectionForeground#f4faf8
  • list.highlightForeground#67C9E9
  • list.hoverBackground#181D2040
  • list.hoverForeground#f4faf8
  • list.inactiveSelectionBackground#67C9E915
  • list.inactiveSelectionForeground#f4faf8
  • selection.background#A5EC7935
  • sideBar.background#181D20
  • sideBar.border#ffffff15
  • sideBar.foreground#f4faf8
  • sideBarSectionHeader.background#2B373B80
  • sideBarSectionHeader.foreground#f4faf8
  • sideBarTitle.foreground#67C9E9
  • statusBar.background#2B373B
  • statusBar.border#ffffff15
  • statusBar.foreground#f4faf8
  • statusBar.noFolderBackground#2B373B
  • tab.activeBackground#2B373B
  • tab.activeBorderTop#67C9E9
  • tab.activeForeground#f4faf8
  • tab.border#ffffff15
  • tab.inactiveBackground#181D2060
  • tab.inactiveForeground#f4faf880
  • terminal.ansiBlack#2B373B
  • terminal.ansiBlue#A5EC79
  • terminal.ansiCyan#55C7E7
  • terminal.ansiGreen#67C9E9
  • terminal.ansiMagenta#F1CB83
  • terminal.ansiRed#F1CB83
  • terminal.ansiWhite#f4faf8
  • terminal.ansiYellow#55C7E7
  • terminal.background#2B373B
  • terminal.foreground#f4faf8
  • titleBar.activeBackground#2B373B
  • titleBar.activeForeground#f4faf8
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#2B373B
  • titleBar.inactiveForeground#f4faf860
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94a79aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#A5EC79bold
storage.type, storage.modifier#A5EC79italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#67C9E9
string, punctuation.definition.string, string.template, meta.template.expression#55C7E7
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#F1CB83
variable, variable.other.readwrite, variable.other.object#f4faf8
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f4faf8
variable.parameter, meta.parameter#f4faf8dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f4faf880
keyword.operator#f4faf8
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#55C7E7bold
entity.other.inherited-class#67C9E9
entity.name.tag, punctuation.definition.tag#A5EC79
entity.other.attribute-name#67C9E9
meta.diff, meta.diff.header#94a79a
markup.deleted#F1CB83
markup.inserted#67C9E9
markup.changed#55C7E7
markup.heading, markup.heading.setext, punctuation.definition.heading#67C9E9bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#55C7E7
string.other.link.title, string.other.link.description#67C9E9
markup.underline.link#94a79aunderline
punctuation.definition.list#A5EC79
markup.quote, punctuation.definition.quote#94a79aitalic