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.background#1e1b18
  • activityBar.border#3a3530
  • activityBar.foreground#e8e4df
  • activityBar.inactiveForeground#706a62
  • activityBarBadge.background#b898e0
  • activityBarBadge.foreground#1e1b18
  • badge.background#b898e0
  • badge.foreground#1e1b18
  • breadcrumb.activeSelectionForeground#e8e4df
  • breadcrumb.focusForeground#e8e4df
  • breadcrumb.foreground#a8a29a
  • breadcrumbPicker.background#282420
  • button.background#b898e0
  • button.foreground#1e1b18
  • button.hoverBackground#c8a8f0
  • button.secondaryBackground#3a3530
  • button.secondaryForeground#e8e4df
  • button.secondaryHoverBackground#4a4540
  • descriptionForeground#a8a29a
  • diffEditor.insertedLineBackground#7cc07015
  • diffEditor.insertedTextBackground#7cc07020
  • diffEditor.removedLineBackground#e07a6d15
  • diffEditor.removedTextBackground#e07a6d20
  • dropdown.background#22201c
  • dropdown.border#3a3530
  • dropdown.foreground#e8e4df
  • editor.background#22201c
  • editor.findMatchBackground#d8b85a60
  • editor.findMatchHighlightBackground#d8b85a40
  • editor.foreground#e8e4df
  • editor.hoverHighlightBackground#322e28
  • editor.lineHighlightBackground#2a2622
  • editor.lineHighlightBorder#322e2800
  • editor.rangeHighlightBackground#322e28
  • editor.selectionBackground#a890d030
  • editor.selectionHighlightBackground#a890d020
  • editor.wordHighlightBackground#a890d020
  • editor.wordHighlightStrongBackground#a890d035
  • editorBracketMatch.background#a890d030
  • editorBracketMatch.border#a890d0
  • editorCursor.foreground#b898e0
  • editorError.foreground#e07a6d
  • editorGroup.border#3a3530
  • editorGroupHeader.tabsBackground#282420
  • editorGroupHeader.tabsBorder#3a3530
  • editorGutter.addedBackground#7cc070
  • editorGutter.background#22201c
  • editorGutter.deletedBackground#e07a6d
  • editorGutter.modifiedBackground#d8b85a
  • editorHint.foreground#a088c0
  • editorIndentGuide.activeBackground#504a44
  • editorIndentGuide.background#3a3530
  • editorInfo.foreground#b898e0
  • editorLineNumber.activeForeground#a8a29a
  • editorLineNumber.foreground#504a44
  • editorLink.activeForeground#7a9ce0
  • editorSuggestWidget.background#282420
  • editorSuggestWidget.border#3a3530
  • editorSuggestWidget.foreground#e8e4df
  • editorSuggestWidget.highlightForeground#b898e0
  • editorSuggestWidget.selectedBackground#3a3530
  • editorWarning.foreground#d8b85a
  • editorWhitespace.foreground#504a4440
  • editorWidget.background#282420
  • editorWidget.border#3a3530
  • errorForeground#e07a6d
  • focusBorder#a890d0
  • foreground#e8e4df
  • gitDecoration.addedResourceForeground#7cc070
  • gitDecoration.conflictingResourceForeground#d8b85a
  • gitDecoration.deletedResourceForeground#e07a6d
  • gitDecoration.ignoredResourceForeground#706a62
  • gitDecoration.modifiedResourceForeground#d8b85a
  • gitDecoration.untrackedResourceForeground#7cc070
  • icon.foreground#a8a29a
  • input.background#22201c
  • input.border#3a3530
  • input.foreground#e8e4df
  • input.placeholderForeground#706a62
  • inputOption.activeBorder#b898e0
  • inputValidation.errorBackground#e07a6d20
  • inputValidation.errorBorder#e07a6d
  • inputValidation.infoBackground#b898e020
  • inputValidation.infoBorder#b898e0
  • inputValidation.warningBackground#d8b85a20
  • inputValidation.warningBorder#d8b85a
  • list.activeSelectionBackground#3a3530
  • list.activeSelectionForeground#e8e4df
  • list.errorForeground#e07a6d
  • list.focusBackground#3a3530
  • list.focusForeground#e8e4df
  • list.highlightForeground#b898e0
  • list.hoverBackground#322e28
  • list.hoverForeground#e8e4df
  • list.inactiveSelectionBackground#322e28
  • list.inactiveSelectionForeground#e8e4df
  • list.warningForeground#d8b85a
  • minimap.errorHighlight#e07a6d
  • minimap.findMatchHighlight#d8b85a80
  • minimap.selectionHighlight#a890d040
  • minimap.warningHighlight#d8b85a
  • minimapGutter.addedBackground#7cc070
  • minimapGutter.deletedBackground#e07a6d
  • minimapGutter.modifiedBackground#d8b85a
  • notificationCenter.border#3a3530
  • notificationCenterHeader.background#1e1b18
  • notificationCenterHeader.foreground#e8e4df
  • notificationLink.foreground#b898e0
  • notifications.background#282420
  • notifications.border#3a3530
  • notifications.foreground#e8e4df
  • notificationsErrorIcon.foreground#e07a6d
  • notificationsInfoIcon.foreground#b898e0
  • notificationsWarningIcon.foreground#d8b85a
  • panel.background#282420
  • panel.border#3a3530
  • panelTitle.activeBorder#b898e0
  • panelTitle.activeForeground#e8e4df
  • panelTitle.inactiveForeground#a8a29a
  • peekView.border#b898e0
  • peekViewEditor.background#282420
  • peekViewEditor.matchHighlightBackground#d8b85a50
  • peekViewEditorGutter.background#282420
  • peekViewResult.background#1e1b18
  • peekViewResult.fileForeground#e8e4df
  • peekViewResult.lineForeground#a8a29a
  • peekViewResult.matchHighlightBackground#d8b85a50
  • peekViewResult.selectionBackground#3a3530
  • peekViewResult.selectionForeground#e8e4df
  • peekViewTitle.background#1e1b18
  • peekViewTitleDescription.foreground#a8a29a
  • peekViewTitleLabel.foreground#e8e4df
  • progressBar.background#b898e0
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#706a62
  • scrollbarSlider.background#504a4460
  • scrollbarSlider.hoverBackground#504a44a0
  • selection.background#a890d040
  • sideBar.background#282420
  • sideBar.border#3a3530
  • sideBar.foreground#e8e4df
  • sideBarSectionHeader.background#1e1b18
  • sideBarSectionHeader.border#3a3530
  • sideBarSectionHeader.foreground#e8e4df
  • sideBarTitle.foreground#e8e4df
  • statusBar.background#1e1b18
  • statusBar.border#3a3530
  • statusBar.debuggingBackground#e07a6d
  • statusBar.debuggingForeground#1e1b18
  • statusBar.foreground#a8a29a
  • statusBar.noFolderBackground#1e1b18
  • statusBar.noFolderForeground#a8a29a
  • statusBarItem.hoverBackground#3a3530
  • statusBarItem.remoteBackground#b898e0
  • statusBarItem.remoteForeground#1e1b18
  • tab.activeBackground#22201c
  • tab.activeBorder#22201c
  • tab.activeBorderTop#b898e0
  • tab.activeForeground#e8e4df
  • tab.border#3a3530
  • tab.hoverBackground#322e28
  • tab.inactiveBackground#282420
  • tab.inactiveForeground#a8a29a
  • tab.unfocusedActiveBorder#22201c
  • terminal.ansiBlack#22201c
  • terminal.ansiBlue#7a9ce0
  • terminal.ansiBrightBlack#706a62
  • terminal.ansiBrightBlue#a8c4f0
  • terminal.ansiBrightCyan#98e0e0
  • terminal.ansiBrightGreen#a8dca0
  • terminal.ansiBrightMagenta#d8b8f0
  • terminal.ansiBrightRed#f0a090
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0d888
  • terminal.ansiCyan#68c0c0
  • terminal.ansiGreen#7cc070
  • terminal.ansiMagenta#b890d8
  • terminal.ansiRed#e07a6d
  • terminal.ansiWhite#e8e4df
  • terminal.ansiYellow#d8b85a
  • terminal.background#22201c
  • terminal.foreground#e8e4df
  • terminalCursor.foreground#b898e0
  • titleBar.activeBackground#1e1b18
  • titleBar.activeForeground#e8e4df
  • titleBar.border#3a3530
  • titleBar.inactiveBackground#1e1b18
  • titleBar.inactiveForeground#a8a29a
  • tree.indentGuidesStroke#3a3530
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#686058italic
keyword, storage.type, storage.modifier#b890d8
keyword.control, keyword.operator.new, keyword.operator.expression#b890d8
string, string.quoted#7cc070
constant.character.escape#68c0c0
entity.name.function, support.function, meta.function-call#7a9ce0
variable.parameter, meta.parameter#e8e4df
constant.numeric#e0a070
constant, constant.language, support.constant#e0a070
constant.language.boolean#e0a070
variable, variable.other#e8e4df
variable.other.property, variable.other.object.property#e8e4df
entity.name.type, support.type, entity.name.class#68c0c0
entity.name.type.parameter#68c0c0
entity.name.type.interface#68c0c0
entity.name.type.enum#68c0c0
entity.other.attribute-name#b898e0
entity.name.tag, punctuation.definition.tag#b898e0
keyword.operator, punctuation.accessor#a8a29a
punctuation, meta.brace#a8a29a
punctuation.definition.block, punctuation.section#888078
entity.name.section, markup.heading#d8c0f8bold
string.other.link, markup.underline.link#b898e0
markup.underline.link.markdown#7a9ce0
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.raw.inline#7cc070
markup.fenced_code.block, markup.raw.block#e8e4df
markup.inserted#7cc070
markup.deleted#e07a6d
markup.changed#d8b85a
string.regexp#68c0c0
meta.decorator, punctuation.decorator#b890d8
entity.name.module, entity.name.namespace#68c0c0
keyword.control.import, keyword.control.export, keyword.control.from#b890d8
support.type.property-name.json#b898e0
support.type.property-name.css, support.type.vendored.property-name.css#7a9ce0
support.constant.property-value.css#e0a070
keyword.other.unit.css#e0a070
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b898e0
invalid, invalid.illegal#e07a6d
invalid.deprecated#d8b85a