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