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
Azure Iris Themes by Lielisk - VS Code Theme