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.activeBackground#181a20
  • activityBar.activeBorder#b39ddb
  • activityBar.background#181a20
  • activityBar.foreground#b39ddb
  • activityBar.inactiveForeground#a0aec0
  • activityBarBadge.background#e0c97f
  • activityBarBadge.foreground#181a20
  • commandCenter.background#181a20
  • commandCenter.border#181a20
  • editor.background#181a20
  • editor.foreground#bfc7d5
  • editor.inactiveSelectionBackground#b39ddb20
  • editor.lineHighlightBackground#23272e80
  • editor.lineHighlightBorder#23272e
  • editor.selectionBackground#7da6ff30
  • editor.selectionHighlightBackground#b39ddb20
  • editorCursor.foreground#e0c97f
  • editorGroup.background#181a20
  • editorGroupHeader.tabsBackground#181a20
  • editorHoverWidget.background#181a20
  • editorHoverWidget.border#24283b
  • editorHoverWidget.statusBarBackground#1a1b26
  • editorIndentGuide.activeBackground#b39ddb
  • editorIndentGuide.background#393e4b
  • editorLineNumber.activeForeground#e0c97f
  • editorLineNumber.foreground#a0aec0
  • editorSuggestWidget.background#181a20
  • editorSuggestWidget.border#393e4b
  • editorSuggestWidget.foreground#bfc7d5
  • editorSuggestWidget.highlightForeground#7da6ff
  • editorSuggestWidget.selectedBackground#7da6ff40
  • editorWidget.resizeBorder#424242
  • focusBorder#424242
  • input.background#181a20
  • input.border#393e4b
  • input.foreground#bfc7d5
  • input.placeholderForeground#a0aec0
  • inputOption.activeBackground#b39ddb20
  • inputOption.activeBorder#424242
  • inputOption.hoverBackground#b39ddb10
  • inputValidation.errorBackground#ff6b6b20
  • inputValidation.errorBorder#ff6b6b
  • inputValidation.infoBackground#7da6ff20
  • inputValidation.infoBorder#424242
  • inputValidation.warningBackground#e0c97f20
  • inputValidation.warningBorder#e0c97f
  • listFilterWidget.background#23272e
  • listFilterWidget.noMatchesOutline#ff6b6b
  • listFilterWidget.outline#424242
  • menu.background#181a20
  • menubar.selectionBackground#181a20
  • panelTitle.activeBorder#424242
  • peekView.border#424242
  • peekViewEditor.background#24283b
  • peekViewEditor.matchHighlightBackground#e0c97f40
  • peekViewEditorGutter.background#24283b
  • peekViewResult.background#1a1b26
  • peekViewResult.fileForeground#bfc7d5
  • peekViewResult.lineForeground#a0aec0
  • peekViewResult.matchHighlightBackground#e0c97f40
  • peekViewResult.selectionBackground#24283b40
  • peekViewResult.selectionForeground#bfc7d5
  • peekViewTitle.background#24283b
  • peekViewTitleDescription.foreground#a0aec0
  • peekViewTitleLabel.foreground#bfc7d5
  • quickInput.background#181a20
  • quickInputList.focusBackground#181a20
  • searchEditor.textInputBorder#424242
  • sideBar.background#181a20
  • sideBar.border#23272e
  • sideBar.foreground#bfc7d5
  • statusBar.background#23272e
  • statusBar.border#23272e
  • statusBar.foreground#bfc7d5
  • tab.activeBackground#181a20
  • tab.activeForeground#bfc7d5
  • tab.hoverBackground#181a20
  • tab.inactiveBackground#181a20
  • tab.inactiveForeground#a0aec0
  • tab.unfocusedActiveBackground#181a20
  • tab.unfocusedHoverBackground#181a20
  • tab.unfocusedInactiveBackground#181a20
  • titleBar.activeBackground#181a20
  • titleBar.inactiveBackground#181a20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#a0aec0italic
variable, string constant.other.placeholder#f5f7fa—
keyword, storage.type, storage.modifier, keyword.control, constant.language, support.type.primitive#e0c97f—
entity.name.function, meta.function-call, support.function, variable.function#b39ddb—
variable.parameter, meta.parameter, meta.function.parameters.js, meta.parameters.js, variable.other.readwrite#aeefff—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple#80cbc4—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#7da6ff—
constant, constant.character, constant.character.escape, constant.other#b39ddb—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#bfc7d5—
meta.object-literal.key, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.json, support.type.property-name.json, support.type.property-name.object, variable.object.property#e0c97f—
entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.xml#b39ddb—
entity.other.attribute-name.html, entity.other.attribute-name.xml#e0c97f—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#7da6ff—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#80cbc4—
support.type.property-name.json#e0c97f—
string.quoted.double.json#80cbc4—