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—