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#202428
  • activityBar.border#404850
  • breadcrumbPicker.border#404850
  • chat.avatarBorder#404850
  • chat.requestBorder#404850
  • chat.responseBorder#404850
  • contrastBorder#404850
  • debugConsole.border#404850
  • debugExceptionWidget.border#404850
  • debugToolBar.border#404850
  • diffEditor.border#404850
  • dropdown.border#404850
  • editor.background#202428
  • editor.foreground#fefefe
  • editor.lineHighlightBackground#8884
  • editor.selectionBackground#a5d8ff44
  • editorCursor.foreground#ffffff
  • editorGroupHeader.border#404850
  • editorGroupHeader.tabsBackground#202428
  • editorGroupHeader.tabsBorder#0000
  • editorOverviewRuler.background#202428
  • editorWhitespace.foreground#8886
  • focusBorder#404850
  • inlineChat.border#404850
  • inlineChat.shadow#404850
  • input.border#404850
  • merge.border#404850
  • mergeEditor.change.border#404850
  • mergeEditor.conflict.border#404850
  • mergeEditor.conflict.handledFocused.border#404850
  • mergeEditor.conflict.handledUnfocused.border#404850
  • mergeEditor.conflict.unhandledFocused.border#404850
  • mergeEditor.conflict.unhandledUnfocused.border#404850
  • notificationCenter.border#404850
  • notifications.border#404850
  • notificationToast.border#404850
  • panel.border#404850
  • panelSection.border#404850
  • panelSectionHeader.border#404850
  • panelTitle.activeBorder#404850
  • pickerGroup.border#404850
  • quickInput.background#202428
  • sideBar.background#202428
  • sideBar.border#404850
  • sideBarSectionHeader.border#404850
  • sideBarTitle.foreground#404850
  • statusBar.background#202428
  • statusBar.border#404850
  • tab.activeBackground#303438
  • tab.activeBorder#404850
  • tab.activeForeground#fff
  • tab.inactiveBackground#202428
  • tab.inactiveForeground#888
  • terminal.border#404850
  • testing.message.error.border#404850
  • testing.message.info.border#404850
  • testing.message.warning.border#404850
  • titleBar.activeBackground#202428
  • titleBar.inactiveBackground#202428
  • walkthrough.step.border#404850
  • welcomePage.border#404850
  • widget.border#404850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#fefefe
comment, punctuation.definition.comment#9ed39e
meta.jsx.children#6ee7d8
variable#fefefe
meta.object.member#4dd6c9
keyword, storage.type, storage.modifier#d6a4ff
keyword.operator, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7ee7ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f28b9a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#82cfff
support.other.variable, string.other.link#ff9aa2
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#ffb86c
punctuation.definition.string, string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a7f3a1
entity.name.class, entity.name.type.class, support.class, markup.changed.git_gutter#ffd97d
support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php#ffe36ebold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f28b82
variable.language#f28b82italic
entity.name.method.js#e9ecf1
meta.class-method.js entity.name.function.js, variable.function.constructor#e9ecf1
entity.other.attribute-name#ff99cc
markup.inserted#b3e6b9
markup.deleted#f28b82
markup.changed#c7a6cf
string.regexp#70d6d6
constant.character.escape#70d6d6
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#d0b19f
entity.name.filename.find-in-files#b3e6b9
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9bbdf9italic
source.js constant.other.object.key.js string.unquoted.label.js#f28b82italic