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