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#1a1d2a
  • activityBar.activeBorder#7da6ff
  • activityBar.background#1a1d2a
  • activityBar.foreground#7da6ff
  • activityBar.inactiveForeground#8ca0c9
  • activityBarBadge.background#7da6ff
  • activityBarBadge.foreground#1a1d2a
  • commandCenter.background#1a1d2a
  • commandCenter.border#1a1d2a
  • editor.background#1a1d2a
  • editor.foreground#cdd6f4
  • editor.inactiveSelectionBackground#8fbcbb30
  • editor.lineHighlightBackground#27304a80
  • editor.lineHighlightBorder#27304a
  • editor.selectionBackground#7da6ff40
  • editor.selectionHighlightBackground#f5c2e730
  • editorCursor.foreground#7da6ff
  • editorGroup.background#1a1d2a
  • editorGroupHeader.tabsBackground#1a1d2a
  • editorHoverWidget.background#1a1d2a
  • editorHoverWidget.border#313244
  • editorHoverWidget.statusBarBackground#1e1e2e
  • editorIndentGuide.activeBackground#7da6ff
  • editorIndentGuide.background#27304a
  • editorLineNumber.activeForeground#7da6ff
  • editorLineNumber.foreground#8ca0c9
  • editorSuggestWidget.background#1a1d2a
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.foreground#cdd6f4
  • editorSuggestWidget.highlightForeground#7da6ff
  • editorSuggestWidget.selectedBackground#7da6ff40
  • editorWidget.resizeBorder#424242
  • focusBorder#424242
  • input.background#1a1d2a
  • input.border#27304a
  • input.foreground#cdd6f4
  • input.placeholderForeground#8ca0c9
  • inputOption.activeBackground#7da6ff20
  • inputOption.activeBorder#424242
  • inputOption.hoverBackground#7da6ff10
  • inputValidation.errorBackground#f38ba820
  • inputValidation.errorBorder#f38ba8
  • inputValidation.infoBackground#7da6ff20
  • inputValidation.infoBorder#424242
  • inputValidation.warningBackground#f5c2e720
  • inputValidation.warningBorder#f5c2e7
  • listFilterWidget.background#27304a
  • listFilterWidget.noMatchesOutline#f38ba8
  • listFilterWidget.outline#424242
  • menu.background#1a1d2a
  • menubar.selectionBackground#1a1d2a
  • notification.background#1a1d2a
  • notification.foreground#cdd6f4
  • panelTitle.activeBorder#424242
  • peekView.border#424242
  • peekViewEditor.background#313244
  • peekViewEditor.matchHighlightBackground#f5c2e740
  • peekViewEditorGutter.background#313244
  • peekViewResult.background#1e1e2e
  • peekViewResult.fileForeground#cdd6f4
  • peekViewResult.lineForeground#8ca0c9
  • peekViewResult.matchHighlightBackground#f5c2e740
  • peekViewResult.selectionBackground#31324440
  • peekViewResult.selectionForeground#cdd6f4
  • peekViewTitle.background#313244
  • peekViewTitleDescription.foreground#8ca0c9
  • peekViewTitleLabel.foreground#cdd6f4
  • quickInput.background#1a1d2a
  • quickInputList.focusBackground#1a1d2a
  • searchEditor.textInputBorder#424242
  • sideBar.background#1a1d2a
  • sideBar.border#27304a
  • sideBar.foreground#cdd6f4
  • statusBar.background#1a1d2a
  • statusBar.border#27304a
  • statusBar.foreground#cdd6f4
  • tab.activeBackground#1a1d2a
  • tab.activeForeground#cdd6f4
  • tab.hoverBackground#1a1d2a
  • tab.inactiveBackground#1a1d2a
  • tab.inactiveForeground#8ca0c9
  • tab.unfocusedActiveBackground#1a1d2a
  • tab.unfocusedHoverBackground#1a1d2a
  • tab.unfocusedInactiveBackground#1a1d2a
  • titleBar.activeBackground#1a1d2a
  • titleBar.inactiveBackground#1a1d2a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8ca0c9italic
variable, string constant.other.placeholder#f5e0dc—
keyword, storage.type, storage.modifier, keyword.control, constant.language, support.type.primitive#f5c2e7—
entity.name.function, meta.function-call, support.function, variable.function#7da6ff—
variable.parameter, meta.parameter, meta.function.parameters.js, meta.parameters.js, variable.other.readwrite#ffb47e—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple#C9534D—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#fab387—
constant, constant.character, constant.character.escape, constant.other#f5c2e7—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#cdd6f4—
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#f5c2e7—
entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.xml#7da6ff—
entity.other.attribute-name.html, entity.other.attribute-name.xml#f5c2e7—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#6b8cff—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#fab387—
support.type.property-name.json#f5c2e7—
string.quoted.double.json#b48ead—