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#e0e0e0
  • activityBar.background#181a20
  • activityBar.foreground#e0e0e0
  • activityBar.inactiveForeground#7a869a
  • activityBarBadge.background#181a20
  • activityBarBadge.foreground#f9e2af
  • badge.background#181a20
  • badge.foreground#f9e2af
  • commandCenter.background#181a20
  • commandCenter.border#23272e
  • editor.background#181a20
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#3b6cf620
  • editor.lineHighlightBackground#23272e
  • editor.lineHighlightBorder#23272e
  • editor.selectionBackground#3b6cf640
  • editor.selectionHighlightBackground#3b6cf620
  • editorCursor.foreground#ffd700
  • editorGroup.background#181a20
  • editorGroupHeader.tabsBackground#181a20
  • editorHoverWidget.background#181a20
  • editorHoverWidget.border#313244
  • editorHoverWidget.statusBarBackground#1e1e2e
  • editorIndentGuide.activeBackground#ffd700
  • editorIndentGuide.background#393e4b
  • editorLineNumber.activeForeground#ffd700
  • editorLineNumber.foreground#7a869a
  • editorSuggestWidget.background#181a20
  • editorSuggestWidget.border#424242
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#74c7ec
  • editorSuggestWidget.selectedBackground#74c7ec40
  • editorWidget.resizeBorder#424242
  • extensionButton.prominentBackground#181a20
  • extensionButton.prominentForeground#f9e2af
  • extensionButton.prominentHoverBackground#23272e
  • focusBorder#424242
  • input.background#23272e
  • input.border#393e4b
  • input.foreground#ffffff
  • input.placeholderForeground#7a869a
  • inputOption.activeBackground#ffd70020
  • inputOption.activeBorder#424242
  • inputOption.hoverBackground#ffd70010
  • inputValidation.errorBackground#ff634720
  • inputValidation.errorBorder#ff6347
  • inputValidation.infoBackground#3b6cf620
  • inputValidation.infoBorder#424242
  • inputValidation.warningBackground#ffd70020
  • inputValidation.warningBorder#ffd700
  • listFilterWidget.background#23272e
  • listFilterWidget.noMatchesOutline#ff6347
  • listFilterWidget.outline#424242
  • menu.background#181a20
  • menubar.selectionBackground#23272e
  • panelTitle.activeBorder#424242
  • peekView.border#424242
  • peekViewEditor.background#313244
  • peekViewEditor.matchHighlightBackground#ffd70040
  • peekViewEditorGutter.background#313244
  • peekViewResult.background#1e1e2e
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#7a869a
  • peekViewResult.matchHighlightBackground#ffd70040
  • peekViewResult.selectionBackground#31324440
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#313244
  • peekViewTitleDescription.foreground#7a869a
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#181a20
  • quickInputList.focusBackground#23272e
  • searchEditor.textInputBorder#424242
  • sideBar.background#181a20
  • sideBar.border#23272e
  • sideBar.foreground#ffffff
  • statusBar.background#23272e
  • statusBar.border#23272e
  • statusBar.foreground#e0e0e0
  • tab.activeBackground#181a20
  • tab.activeBorder#23272e
  • tab.activeBorderTop#23272e
  • tab.activeForeground#e0e0e0
  • tab.hoverBackground#181a20
  • tab.inactiveBackground#181a20
  • tab.inactiveForeground#7a869a
  • 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#7a869aitalic
entity.name.tag.html, entity.name.tag.xml, punctuation.definition.tag.html, punctuation.definition.tag.xml#cba6f7—
entity.other.attribute-name.html, entity.other.attribute-name.xml#f9e2af—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#89b4fa—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#a6e3a1—
support.type.property-name.json#ffd700—
string.quoted.double.json#ff9800—
variable, string constant.other.placeholder#74c7ec—
keyword, storage.type, storage.modifier, keyword.control, constant.language, support.type.primitive#f9e2af—
entity.name.function, meta.function-call, support.function, variable.function#89b4fa—
variable.parameter, meta.parameter, meta.function.parameters.js, meta.parameters.js, variable.other.readwrite#ff6347—
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple#f5c2e7—
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#fab387—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#ffffff—
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#f9e2af—
Azure Iris Themes by Lielisk - VS Code Theme