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#eff1f5
  • activityBar.border#e6e9ef
  • activityBar.foreground#403A56
  • activityBarBadge.background#7A64E8
  • activityBarBadge.foreground#eff1f5
  • badge.background#7A64E8
  • badge.foreground#eff1f5
  • breadcrumb.activeSelectionForeground#726b8a
  • breadcrumb.focusForeground#726b8a
  • breadcrumb.foreground#948daa
  • breadcrumbPicker.background#eff1f5
  • button.background#6A52E5
  • button.foreground#eff1f5
  • button.hoverBackground#7A64E8
  • debugExceptionWidget.background#eff1f5
  • debugExceptionWidget.border#e6e9ef
  • debugToolBar.background#eff1f5
  • debugToolBar.border#dce0e8
  • descriptionForeground#403A56
  • diffEditor.insertedTextBackground#16939210
  • diffEditor.removedTextBackground#E03A8110
  • dropdown.background#e6e9ef
  • dropdown.border#e6e9ef
  • dropdown.foreground#169392
  • editor.background#eff1f5
  • editor.findMatchBackground#eff1f5
  • editor.findMatchBorder#e6e9ef
  • editor.findMatchHighlightBackground#7A64E833
  • editor.findMatchHighlightBorder#7A64E899
  • editor.foreground#403A56
  • editor.hoverHighlightBackground#e6e9ef99
  • editor.inactiveSelectionBackground#dce0e899
  • editor.lineHighlightBackground#dce0e899
  • editor.lineHighlightBorder#dce0e8
  • editor.rangeHighlightBackground#dce0e899
  • editor.selectionBackground#6A52E555
  • editor.selectionHighlightBackground#dce0e899
  • editor.wordHighlightBackground#dce0e899
  • editor.wordHighlightStrongBackground#dce0e899
  • editorBracketHighlight.foreground1#726b8a
  • editorBracketHighlight.foreground2#726b8a
  • editorBracketHighlight.foreground3#726b8a
  • editorBracketHighlight.foreground4#726b8a
  • editorBracketHighlight.foreground5#726b8a
  • editorBracketHighlight.foreground6#726b8a
  • editorBracketMatch.background#eff1f5
  • editorBracketMatch.border#e6e9ef
  • editorCodeLens.foreground#7A64E877
  • editorCursor.background#eff1f5
  • editorCursor.foreground#9A8AF2
  • editorError.foreground#E03A81
  • editorGroup.border#e6e9ef
  • editorGroup.dropBackground#16939240
  • editorGroup.emptyBackground#eff1f5
  • editorGroupHeader.noTabsBackground#eff1f5
  • editorGroupHeader.tabsBackground#eff1f5
  • editorGroupHeader.tabsBorder#e6e9ef
  • editorGutter.addedBackground#169392
  • editorGutter.background#eff1f564
  • editorGutter.deletedBackground#E03A81
  • editorGutter.modifiedBackground#7A64E8
  • editorHoverWidget.background#e6e9ef
  • editorHoverWidget.border#e6e9ef
  • editorHoverWidget.foreground#403A56
  • editorIndentGuide.activeBackground1#726b8a
  • editorIndentGuide.background1#dce0e8
  • editorInlayHint.background#e6e9ef00
  • editorInlayHint.foreground#7A64E899
  • editorInlayHint.parameterBackground#e6e9ef00
  • editorInlayHint.parameterForeground#7A64E899
  • editorInlayHint.typeBackground#e6e9ef00
  • editorInlayHint.typeForeground#7A64E899
  • editorLineNumber.activeForeground#403A56
  • editorLineNumber.foreground#948daa
  • editorLink.activeForeground#7A64E8
  • editorMarkerNavigation.background#726b8a
  • editorMarkerNavigationError.background#7A64E8
  • editorMarkerNavigationWarning.background#DDA647
  • editorOverviewRuler.addedForeground#16939299
  • editorOverviewRuler.border#dce0e8
  • editorOverviewRuler.bracketMatchForeground#7A64E8
  • editorOverviewRuler.commonContentForeground#DDA647
  • editorOverviewRuler.currentContentForeground#DDA647
  • editorOverviewRuler.deletedForeground#7A64E899
  • editorOverviewRuler.errorForeground#E03A81
  • editorOverviewRuler.findMatchForeground#e6e9ef99
  • editorOverviewRuler.incomingContentForeground#DDA647
  • editorOverviewRuler.infoForeground#169392
  • editorOverviewRuler.modifiedForeground#7A64E899
  • editorOverviewRuler.rangeHighlightForeground#DDA64799
  • editorOverviewRuler.selectionHighlightForeground#DDA64799
  • editorOverviewRuler.warningForeground#DDA647
  • editorOverviewRuler.wordHighlightForeground#DDA64799
  • editorOverviewRuler.wordHighlightStrongForeground#DDA64799
  • editorRuler.foreground#403A56
  • editorSuggestWidget.background#dce0e8
  • editorSuggestWidget.border#e6e9ef
  • editorSuggestWidget.foreground#403A56
  • editorSuggestWidget.highlightForeground#403A56
  • editorSuggestWidget.selectedBackground#eff1f5
  • editorWarning.foreground#DDA647
  • editorWhitespace.foreground#726b8a
  • editorWidget.background#eff1f5
  • editorWidget.border#e6e9ef
  • editorWidget.resizeBorder#e6e9ef
  • errorForeground#7A64E8
  • extensionButton.prominentBackground#7A64E8
  • extensionButton.prominentForeground#403A56
  • extensionButton.prominentHoverBackground#9A8AF2
  • focusBorder#e6e9ef
  • foreground#726b8a
  • gitDecoration.addedResourceForeground#169392
  • gitDecoration.conflictingResourceForeground#D44FE2
  • gitDecoration.deletedResourceForeground#D44FE2
  • gitDecoration.ignoredResourceForeground#ABA8BD
  • gitDecoration.modifiedResourceForeground#DDA647
  • gitDecoration.untrackedResourceForeground#3FAD45
  • icon.foreground#726b8a
  • input.background#e6e9ef
  • input.border#e6e9ef
  • input.foreground#403A56
  • input.placeholderForeground#726b8a
  • inputOption.activeBorder#e6e9ef
  • inputValidation.errorBackground#E03A81
  • inputValidation.errorBorder#E03A81
  • inputValidation.infoBackground#169392
  • inputValidation.infoBorder#169392
  • inputValidation.warningBackground#DDA647
  • inputValidation.warningBorder#DDA647
  • list.activeSelectionBackground#e6e9ef
  • list.activeSelectionForeground#403A56
  • list.dropBackground#16939240
  • list.errorForeground#9A8AF2
  • list.focusBackground#dce0e8
  • list.focusForeground#169392
  • list.highlightForeground#169392
  • list.hoverBackground#e6e9ef
  • list.hoverForeground#403A56
  • list.inactiveSelectionBackground#eff1f5
  • list.inactiveSelectionForeground#403A56
  • list.invalidItemForeground#9A8AF2
  • list.warningForeground#9A8AF2
  • menu.background#eff1f5
  • menu.border#e6e9ef
  • menu.foreground#726b8a
  • menu.selectionBackground#e6e9ef
  • menu.selectionForeground#403A56
  • menu.separatorBackground#e6e9ef
  • menubar.selectionBackground#e6e9ef
  • merge.currentHeaderBackground#726b8a99
  • merge.incomingHeaderBackground#7A64E899
  • notificationCenterHeader.background#e6e9ef
  • notificationCenterHeader.foreground#403A56
  • notificationLink.foreground#169392
  • notifications.background#eff1f5
  • notifications.border#e6e9ef99
  • notifications.foreground#403A56
  • panel.background#eff1f5
  • panel.border#e6e9ef
  • panelTitle.activeBorder#e6e9ef
  • panelTitle.activeForeground#403A56
  • panelTitle.inactiveForeground#726b8a
  • peekView.border#e6e9ef
  • peekViewEditor.background#eff1f5
  • peekViewEditor.matchHighlightBackground#7A64E8
  • peekViewResult.background#e6e9ef
  • peekViewResult.fileForeground#403A56
  • peekViewResult.lineForeground#726b8a
  • peekViewResult.matchHighlightBackground#7A64E8
  • peekViewResult.selectionBackground#dce0e8
  • peekViewResult.selectionForeground#403A56
  • peekViewTitle.background#eff1f5
  • peekViewTitleDescription.foreground#726b8a
  • peekViewTitleLabel.foreground#403A56
  • pickerGroup.border#e6e9ef
  • pickerGroup.foreground#403A56
  • progressBar.background#7A64E8
  • scrollbar.shadow#e6e9ef
  • scrollbarSlider.activeBackground#dce0e899
  • scrollbarSlider.background#e6e9ef99
  • scrollbarSlider.hoverBackground#dce0e899
  • selection.background#7A64E855
  • settings.dropdownForeground#403A56
  • settings.textInputBackground#e6e9ef
  • settings.textInputBorder#dce0e8
  • sideBar.background#eff1f5
  • sideBar.border#e6e9ef
  • sideBar.dropBackground#9A8AF240
  • sideBar.foreground#726b8a
  • sideBarSectionHeader.background#eff1f5
  • sideBarSectionHeader.foreground#403A56
  • sideBarTitle.foreground#403A56
  • statusBar.background#eff1f5
  • statusBar.border#e6e9ef
  • statusBar.debuggingBackground#7A64E8
  • statusBar.debuggingBorder#7A64E8
  • statusBar.debuggingForeground#eff1f5
  • statusBar.foreground#948daa
  • statusBar.noFolderBackground#eff1f5
  • statusBar.noFolderBorder#e6e9ef
  • statusBarItem.activeBackground#e6e9ef
  • statusBarItem.hoverBackground#e6e9ef
  • statusBarItem.prominentBackground#e6e9ef
  • statusBarItem.prominentHoverBackground#e6e9ef
  • tab.activeBackground#eff1f5
  • tab.activeBorder#eff1f5
  • tab.activeBorderTop#7A64E8
  • tab.activeForeground#403A56
  • tab.border#eff1f5
  • tab.hoverBackground#e6e9ef99
  • tab.hoverForeground#7A64E8
  • tab.inactiveBackground#e6e9ef
  • tab.inactiveForeground#948daa
  • tab.unfocusedActiveForeground#726b8a
  • tab.unfocusedInactiveForeground#726b8a
  • terminal.ansiBlack#2D2840
  • terminal.ansiBlue#169392
  • terminal.ansiBrightBlack#403A56
  • terminal.ansiBrightBlue#169392
  • terminal.ansiBrightCyan#169392
  • terminal.ansiBrightGreen#9D5EF2
  • terminal.ansiBrightMagenta#D44FE2
  • terminal.ansiBrightRed#D44FE2
  • terminal.ansiBrightWhite#403A56
  • terminal.ansiBrightYellow#B08FF9
  • terminal.ansiCyan#169392
  • terminal.ansiGreen#9D5EF2
  • terminal.ansiMagenta#D44FE2
  • terminal.ansiRed#D44FE2
  • terminal.ansiWhite#403A56
  • terminal.ansiYellow#B08FF9
  • terminal.background#eff1f5
  • terminal.foreground#403A56
  • terminal.selectionBackground#7A64E833
  • terminalCursor.background#e6e9ef
  • terminalCursor.foreground#7A64E8
  • textLink.activeForeground#7A64E8
  • textLink.foreground#7A64E8
  • titleBar.activeBackground#eff1f5
  • titleBar.activeForeground#403A56cc
  • titleBar.inactiveBackground#eff1f5
  • titleBar.inactiveForeground#726b8a
  • tree.indentGuidesStroke#403A5633
  • walkThrough.embeddedEditorBackground#eff1f5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#403A56—
punctuation, constant.other.symbol#726b8a—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#DDA647—
constant.language.boolean#7A64E8—
constant.language.null, constant.language.undefined#7A64E899—
constant.numeric#7A64E8—
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#403A56—
keyword, keyword.other, modifier#726b8a—
constant.language.import-export-all#169392—
variable.language.this, support.type.object, constant.language#7A64E8—
entity.name.function, support.function#9A8AF2—
storage.type, storage.modifier#7A64E8—
support.module, support.node#7A64E8italic
support.type, constant.other.key#726b8a—
entity.name.type, entity.other.inherited-class, entity.other#726b8a—
comment, punctuation.definition.comment#726b8aitalic
punctuation#726b8a—
entity.name, entity.name.type.class, support.type, support.class, meta.use#9A8AF2—
variable.object.property, meta.field.declaration entity.name.function#9A8AF2—
meta.definition.method entity.name.function#7A64E8—
meta.function entity.name.function#9A8AF2—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7A64E8—
meta.embedded, source.groovy.embedded, meta.template.expression#403A56—
entity.name.tag.yaml#7A64E8—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#9A8AF2—
constant.language.json#7A64E8—
entity.other.attribute-name.class#7A64E8—
entity.other.attribute-name.id#7A64E8—
source.css entity.name.tag#7A64E8—
support.type.property-name.css#9A8AF2—
meta.tag, punctuation.definition.tag#7A64E8—
entity.name.tag#7A64E8—
entity.other.attribute-name#9A8AF2italic
markup.heading#726b8a—
markup.inserted#169392—
markup.deleted#E03A81—
text.html.markdown meta.link.inline, meta.link.reference, text.html.markdown beginning.punctuation.definition.list, string.other.link.description.markdown, punctuation.definition.metadata.markdown#D44FE2—
markup.italic#3FAD45italic
markup.bold#3FAD45bold
markup.underline.link.image, punctuation.definition.link.description.begin.markdown, string.other.link.title.markdown, string.other.link.description.markdown meta.image.inline.markdown meta.paragraph.markdown text.html.markdown, markup.underline.link.markdown meta.link.inline.markdown meta.paragraph.markdown text.html.markdown#D44FE2bold
markup.bold markup.italic, markup.italic markup.bold#3FAD45italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#3FAD45—
entity.name.section.markdown, punctuation.definition.heading.markdown#7A64E8bold
punctuation.definition.comment.html#7A64E8aa—
punctuation.definition.inserted#169392—
punctuation.definition.deleted#E03A81—
markup.inline.raw.string.markdown#7A64E8—
keyword.other.definition.ini#726b8a—
entity.name.section.group-title.ini#726b8a—
source.cs meta.class.identifier storage.type#7A64E8—
source.cs meta.method.identifier entity.name.function#7A64E8—
source.cs meta.method-call meta.method, source.cs entity.name.function#9A8AF2—
source.cs storage.type#9A8AF2—
source.cs meta.method.return-type#9A8AF2—
source.cs meta.preprocessor#726b8a—
source.cs entity.name.type.namespace#403A56—
meta.jsx.children, SXNested#403A56—
support.class.component#726b8a—
source.cpp meta.block variable.other#403A56—
source.python meta.member.access.python#7A64E8—
source.python meta.function-call.python, meta.function-call.arguments#9A8AF2—
meta.block#726b8a—
entity.name.function.call#9A8AF2—
source.php support.other.namespace, source.php meta.use support.class#403A56—
keyword.control#726b8aitalic
keyword.operator.arithmetic#726b8a—
markup.quote#169392italic
markup.fenced_code.block#726b8a—
punctuation.definition.quote#726b8a—
meta.structure.dictionary.json support.type.property-name.json#9A8AF2—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9A8AF2—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3FAD45—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3FAD45—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#7A64E8—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#9A8AF2—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#3FAD45—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#7A64E8—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#169392—
token.info-token#169392—
token.warn-token#9A8AF2—
token.error-token#E03A81—
token.debug-token#3FAD45—
punctuation.definition.list.begin.markdown#9A8AF2—