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.activeBorder#ffb64e
  • activityBarBadge.background#ffb64e
  • breadcrumb.activeSelectionForeground#ffb64e
  • editor.background#25282f
  • editor.findMatchBorder#ffb64e
  • editor.foreground#a9b7c6
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#214283
  • editorCursor.foreground#179aff
  • editorGroupHeader.tabsBackground#212429
  • editorIndentGuide.activeBackground1#5d7851
  • editorIndentGuide.background1#383c43
  • editorLineNumber.foreground#66686e
  • editorSuggestWidget.highlightForeground#ffb64e
  • editorWidget.border#46494f
  • editorWidget.resizeBorder#ffb64e
  • list.activeSelectionForeground#ffb64e
  • list.highlightForeground#ffb64e
  • list.inactiveSelectionForeground#ffb64e
  • menu.selectionForeground#ffb64e
  • menubar.selectionForeground#ffb64e
  • notificationLink.foreground#ffb64e
  • panelTitle.activeBorder#ffb64e
  • pickerGroup.foreground#ffb64e
  • progressBar.background#ffb64e
  • scrollbarSlider.activeBackground#ffb64e
  • settings.headerForeground#ffb64e
  • settings.modifiedItemIndicator#ffb64e
  • sideBar.background#212429
  • sideBar.foreground#a9b7c6
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#212429
  • statusBar.foreground#a9b7c6
  • tab.activeBackground#282c34
  • tab.activeBorder#ffb64e
  • textLink.foreground#ffb64e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#75715E
string#698857
constant.numeric#6897BB
constant.language#9975AB
constant.character, constant.other#9975AB
variable#9975AB
keyword#CE7827
storage#CE7827
storage.type#CE7827
entity.name.class#FFB64Eunderline
entity.other.inherited-class#FFB64Eitalic underline
entity.name.function#FFB64E
variable.parameter#9975AB
entity.name.tag#CE7827
entity.other.attribute-name#BABA8A
support.function#FFB64E
support.constant#FFB64E
support.type, support.class
support.other.variable
invalid#BD1900
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.property, variable.constant, variable.other.property, variable.other.constant, variable.other.object.property, variable.object.property, support.variable.property, meta.definition.property entity.name.function#9E73AD
variable.object.property.js.jsx, meta.object-literal.key#698857
meta.brace.round.js.jsx, punctuation.definition.string.begin.js.jsx, punctuation.definition.string.end.js.jsx, objectliteral.key.separator, punctuation.separator.key-value, punctuation.definition.template-expression.begin.js.jsx, punctuation.definition.template-expression.end.js.jsx, meta.brace.square.js.jsx, keyword.operator.assignment.js.jsx, punctuation.separator.comma, punctuation.separator.parameter, punctuation.terminator.statement, punctuation.accessor.js.jsx#A9B7C6
constant.language.null.js.jsx, constant.language.undefined.js.jsx, constant.language.boolean.true.js.jsx, constant.language.boolean.false.js.jsx#CE7827