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#f3f0eb
  • activityBar.border#e8e4df
  • activityBar.foreground#3d3a36
  • activityBar.inactiveForeground#9a948c
  • activityBarBadge.background#7c5cba
  • activityBarBadge.foreground#ffffff
  • badge.background#7c5cba
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#3d3a36
  • breadcrumb.focusForeground#3d3a36
  • breadcrumb.foreground#6b6660
  • breadcrumbPicker.background#f8f6f3
  • button.background#7c5cba
  • button.foreground#ffffff
  • button.hoverBackground#6a4aa8
  • button.secondaryBackground#e8e4df
  • button.secondaryForeground#3d3a36
  • button.secondaryHoverBackground#ddd8d1
  • descriptionForeground#6b6660
  • diffEditor.insertedLineBackground#5a9a5215
  • diffEditor.insertedTextBackground#5a9a5220
  • diffEditor.removedLineBackground#c75a4d15
  • diffEditor.removedTextBackground#c75a4d20
  • dropdown.background#fdfcfa
  • dropdown.border#e8e4df
  • dropdown.foreground#3d3a36
  • editor.background#fdfcfa
  • editor.findMatchBackground#e5cf8a
  • editor.findMatchHighlightBackground#e5cf8a80
  • editor.foreground#3d3a36
  • editor.hoverHighlightBackground#f0ece7
  • editor.lineHighlightBackground#f5f2ee
  • editor.lineHighlightBorder#f0ece700
  • editor.rangeHighlightBackground#f0ece7
  • editor.selectionBackground#9b8ac430
  • editor.selectionHighlightBackground#9b8ac420
  • editor.wordHighlightBackground#9b8ac420
  • editor.wordHighlightStrongBackground#9b8ac435
  • editorBracketMatch.background#9b8ac430
  • editorBracketMatch.border#9b8ac4
  • editorCursor.foreground#7c5cba
  • editorError.foreground#c75a4d
  • editorGroup.border#e8e4df
  • editorGroupHeader.tabsBackground#f8f6f3
  • editorGroupHeader.tabsBorder#e8e4df
  • editorGutter.addedBackground#5a9a52
  • editorGutter.background#fdfcfa
  • editorGutter.deletedBackground#c75a4d
  • editorGutter.modifiedBackground#b8943a
  • editorHint.foreground#8a7ab0
  • editorIndentGuide.activeBackground#c4bfb8
  • editorIndentGuide.background#e8e4df
  • editorInfo.foreground#7c5cba
  • editorLineNumber.activeForeground#6b6660
  • editorLineNumber.foreground#c4bfb8
  • editorLink.activeForeground#5a7cc7
  • editorSuggestWidget.background#f8f6f3
  • editorSuggestWidget.border#e8e4df
  • editorSuggestWidget.foreground#3d3a36
  • editorSuggestWidget.highlightForeground#7c5cba
  • editorSuggestWidget.selectedBackground#e8e4df
  • editorWarning.foreground#b8943a
  • editorWhitespace.foreground#c4bfb840
  • editorWidget.background#f8f6f3
  • editorWidget.border#e8e4df
  • errorForeground#c75a4d
  • focusBorder#9b8ac4
  • foreground#3d3a36
  • gitDecoration.addedResourceForeground#5a9a52
  • gitDecoration.conflictingResourceForeground#b8943a
  • gitDecoration.deletedResourceForeground#c75a4d
  • gitDecoration.ignoredResourceForeground#9a948c
  • gitDecoration.modifiedResourceForeground#b8943a
  • gitDecoration.untrackedResourceForeground#5a9a52
  • icon.foreground#6b6660
  • input.background#fdfcfa
  • input.border#e8e4df
  • input.foreground#3d3a36
  • input.placeholderForeground#9a948c
  • inputOption.activeBorder#7c5cba
  • inputValidation.errorBackground#c75a4d20
  • inputValidation.errorBorder#c75a4d
  • inputValidation.infoBackground#7c5cba20
  • inputValidation.infoBorder#7c5cba
  • inputValidation.warningBackground#b8943a20
  • inputValidation.warningBorder#b8943a
  • list.activeSelectionBackground#e8e4df
  • list.activeSelectionForeground#3d3a36
  • list.errorForeground#c75a4d
  • list.focusBackground#e8e4df
  • list.focusForeground#3d3a36
  • list.highlightForeground#7c5cba
  • list.hoverBackground#f0ece7
  • list.hoverForeground#3d3a36
  • list.inactiveSelectionBackground#f0ece7
  • list.inactiveSelectionForeground#3d3a36
  • list.warningForeground#b8943a
  • minimap.errorHighlight#c75a4d
  • minimap.findMatchHighlight#e5cf8a
  • minimap.selectionHighlight#9b8ac440
  • minimap.warningHighlight#b8943a
  • minimapGutter.addedBackground#5a9a52
  • minimapGutter.deletedBackground#c75a4d
  • minimapGutter.modifiedBackground#b8943a
  • notificationCenter.border#e8e4df
  • notificationCenterHeader.background#f3f0eb
  • notificationCenterHeader.foreground#3d3a36
  • notificationLink.foreground#7c5cba
  • notifications.background#f8f6f3
  • notifications.border#e8e4df
  • notifications.foreground#3d3a36
  • notificationsErrorIcon.foreground#c75a4d
  • notificationsInfoIcon.foreground#7c5cba
  • notificationsWarningIcon.foreground#b8943a
  • panel.background#f8f6f3
  • panel.border#e8e4df
  • panelTitle.activeBorder#7c5cba
  • panelTitle.activeForeground#3d3a36
  • panelTitle.inactiveForeground#6b6660
  • peekView.border#7c5cba
  • peekViewEditor.background#f8f6f3
  • peekViewEditor.matchHighlightBackground#e5cf8a80
  • peekViewEditorGutter.background#f8f6f3
  • peekViewResult.background#f3f0eb
  • peekViewResult.fileForeground#3d3a36
  • peekViewResult.lineForeground#6b6660
  • peekViewResult.matchHighlightBackground#e5cf8a80
  • peekViewResult.selectionBackground#e8e4df
  • peekViewResult.selectionForeground#3d3a36
  • peekViewTitle.background#f3f0eb
  • peekViewTitleDescription.foreground#6b6660
  • peekViewTitleLabel.foreground#3d3a36
  • progressBar.background#7c5cba
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#9a948c
  • scrollbarSlider.background#c4bfb860
  • scrollbarSlider.hoverBackground#c4bfb8a0
  • selection.background#9b8ac440
  • sideBar.background#f8f6f3
  • sideBar.border#e8e4df
  • sideBar.foreground#3d3a36
  • sideBarSectionHeader.background#f3f0eb
  • sideBarSectionHeader.border#e8e4df
  • sideBarSectionHeader.foreground#3d3a36
  • sideBarTitle.foreground#3d3a36
  • statusBar.background#f3f0eb
  • statusBar.border#e8e4df
  • statusBar.debuggingBackground#c75a4d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#6b6660
  • statusBar.noFolderBackground#f3f0eb
  • statusBar.noFolderForeground#6b6660
  • statusBarItem.hoverBackground#e8e4df
  • statusBarItem.remoteBackground#7c5cba
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#fdfcfa
  • tab.activeBorder#fdfcfa
  • tab.activeBorderTop#7c5cba
  • tab.activeForeground#3d3a36
  • tab.border#e8e4df
  • tab.hoverBackground#f0ece7
  • tab.inactiveBackground#f8f6f3
  • tab.inactiveForeground#6b6660
  • tab.unfocusedActiveBorder#fdfcfa
  • terminal.ansiBlack#3d3a36
  • terminal.ansiBlue#5a7cc7
  • terminal.ansiBrightBlack#6b6660
  • terminal.ansiBrightBlue#a5bbe8
  • terminal.ansiBrightCyan#98d4d4
  • terminal.ansiBrightGreen#a8d4a2
  • terminal.ansiBrightMagenta#d4b8e8
  • terminal.ansiBrightRed#e8a59c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e5cf8a
  • terminal.ansiCyan#4a9a9a
  • terminal.ansiGreen#5a9a52
  • terminal.ansiMagenta#9b6bb8
  • terminal.ansiRed#c75a4d
  • terminal.ansiWhite#fdfcfa
  • terminal.ansiYellow#b8943a
  • terminal.background#fdfcfa
  • terminal.foreground#3d3a36
  • terminalCursor.foreground#7c5cba
  • titleBar.activeBackground#f3f0eb
  • titleBar.activeForeground#3d3a36
  • titleBar.border#e8e4df
  • titleBar.inactiveBackground#f3f0eb
  • titleBar.inactiveForeground#6b6660
  • tree.indentGuidesStroke#e8e4df
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b0aaa2italic
keyword, storage.type, storage.modifier#9b6bb8—
keyword.control, keyword.operator.new, keyword.operator.expression#9b6bb8—
string, string.quoted#5a9a52—
constant.character.escape#4a9a9a—
entity.name.function, support.function, meta.function-call#5a7cc7—
variable.parameter, meta.parameter#3d3a36—
constant.numeric#c78a5a—
constant, constant.language, support.constant#c78a5a—
constant.language.boolean#c78a5a—
variable, variable.other#3d3a36—
variable.other.property, variable.other.object.property#3d3a36—
entity.name.type, support.type, entity.name.class#4a9a9a—
entity.name.type.parameter#4a9a9a—
entity.name.type.interface#4a9a9a—
entity.name.type.enum#4a9a9a—
entity.other.attribute-name#7c5cba—
entity.name.tag, punctuation.definition.tag#7c5cba—
keyword.operator, punctuation.accessor#6b6660—
punctuation, meta.brace#6b6660—
punctuation.definition.block, punctuation.section#8a847c—
entity.name.section, markup.heading#5a4090bold
string.other.link, markup.underline.link#7c5cba—
markup.underline.link.markdown#5a7cc7—
markup.italic—italic
markup.bold—bold
markup.inline.raw, markup.raw.inline#5a9a52—
markup.fenced_code.block, markup.raw.block#3d3a36—
markup.inserted#5a9a52—
markup.deleted#c75a4d—
markup.changed#b8943a—
string.regexp#4a9a9a—
meta.decorator, punctuation.decorator#9b6bb8—
entity.name.module, entity.name.namespace#4a9a9a—
keyword.control.import, keyword.control.export, keyword.control.from#9b6bb8—
support.type.property-name.json#7c5cba—
support.type.property-name.css, support.type.vendored.property-name.css#5a7cc7—
support.constant.property-value.css#c78a5a—
keyword.other.unit.css#c78a5a—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7c5cba—
invalid, invalid.illegal#c75a4d—
invalid.deprecated#b8943a—
Purple Stark Theme by MTCC - VS Code Theme