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#F6F6F6
  • activityBar.border#E5E5E5
  • activityBar.foreground#133928
  • activityBar.inactiveForeground#5A6A62
  • activityBarBadge.background#1EC677
  • activityBarBadge.foreground#FFFFFF
  • badge.background#1EC677
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#1EC677
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#133928
  • breadcrumb.foreground#5A6A62
  • breadcrumbPicker.background#F6F6F6
  • button.background#1EC677
  • button.foreground#FFFFFF
  • button.hoverBackground#3CCD88
  • button.secondaryBackground#D6EFDF
  • button.secondaryForeground#133928
  • button.secondaryHoverBackground#F1F8F1
  • checkbox.background#FFFFFF
  • checkbox.border#E5E5E5
  • checkbox.foreground#133928
  • debugToolBar.background#F6F6F6
  • debugToolBar.border#E5E5E5
  • descriptionForeground#5A6A62
  • diffEditor.insertedLineBackground#1EC67714
  • diffEditor.insertedTextBackground#1EC67729
  • diffEditor.removedLineBackground#EA819B14
  • diffEditor.removedTextBackground#EA819B29
  • dropdown.background#FFFFFF
  • dropdown.border#E5E5E5
  • dropdown.foreground#133928
  • editor.background#FFFFFF
  • editor.findMatchBackground#1EC677
  • editor.findMatchHighlightBackground#1EC67766
  • editor.foreground#133928
  • editor.hoverHighlightBackground#33333314
  • editor.inactiveSelectionBackground#3333330A
  • editor.lineHighlightBackground#3333330A
  • editor.selectionBackground#33333314
  • editor.selectionHighlightBackground#33333314
  • editor.wordHighlightBackground#33333314
  • editor.wordHighlightStrongBackground#3333331F
  • editorBracketMatch.background#33333314
  • editorBracketMatch.border#1EC677
  • editorCodeLens.foreground#5A6A62
  • editorCursor.foreground#1EC677
  • editorError.foreground#EA819B
  • editorGroup.border#E5E5E5
  • editorGroup.dropBackground#1EC67729
  • editorGroupHeader.noTabsBackground#F6F6F6
  • editorGroupHeader.tabsBackground#F6F6F6
  • editorGroupHeader.tabsBorder#E5E5E5
  • editorGutter.background#FFFFFF
  • editorHint.foreground#5A6A62
  • editorHoverWidget.background#F6F6F6
  • editorHoverWidget.border#E5E5E5
  • editorIndentGuide.activeBackground#5A6A62
  • editorIndentGuide.background#E5E5E5
  • editorInfo.foreground#3CCD88
  • editorLineNumber.activeForeground#133928
  • editorLineNumber.foreground#5A6A62
  • editorOverviewRuler.border#E5E5E5
  • editorOverviewRuler.commonContentForeground#767676
  • editorOverviewRuler.currentContentForeground#1EC677
  • editorOverviewRuler.incomingContentForeground#8DCFD3
  • editorRuler.foreground#E5E5E5
  • editorSuggestWidget.background#F6F6F6
  • editorSuggestWidget.border#E5E5E5
  • editorSuggestWidget.foreground#133928
  • editorSuggestWidget.selectedBackground#F1F8F1
  • editorWarning.foreground#F8D849
  • editorWidget.background#F6F6F6
  • editorWidget.border#E5E5E5
  • errorForeground#EA819B
  • extensionButton.prominentBackground#1EC677
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3CCD88
  • focusBorder#1EC677
  • foreground#133928
  • gitDecoration.addedResourceForeground#1EC677
  • gitDecoration.conflictingResourceForeground#CA7AD3
  • gitDecoration.deletedResourceForeground#EA819B
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#F8D849
  • gitDecoration.renamedResourceForeground#8DCFD3
  • gitDecoration.stageDeletedResourceForeground#D91848
  • gitDecoration.stageModifiedResourceForeground#D68628
  • gitDecoration.submoduleResourceForeground#5A6A62
  • gitDecoration.untrackedResourceForeground#3CCD88
  • input.background#FFFFFF
  • input.border#E5E5E5
  • input.foreground#133928
  • input.placeholderForeground#5A6A62
  • inputOption.activeBackground#1EC677
  • inputOption.activeForeground#FFFFFF
  • inputValidation.errorBackground#FBE8ED
  • inputValidation.errorBorder#EA819B
  • inputValidation.infoBackground#F1F8F1
  • inputValidation.infoBorder#3CCD88
  • inputValidation.warningBackground#FFFDF4
  • inputValidation.warningBorder#F8D849
  • list.activeSelectionBackground#D6EFDF
  • list.activeSelectionForeground#133928
  • list.focusBackground#D6EFDF
  • list.focusForeground#133928
  • list.highlightForeground#1EC677
  • list.hoverBackground#33333314
  • list.hoverForeground#133928
  • list.inactiveSelectionBackground#33333314
  • list.inactiveSelectionForeground#133928
  • menu.background#F6F6F6
  • menu.border#E5E5E5
  • menu.foreground#133928
  • menu.selectionBackground#F1F8F1
  • menu.selectionForeground#133928
  • menu.separatorBackground#E5E5E5
  • menubar.selectionBackground#33333314
  • menubar.selectionForeground#133928
  • merge.border#E5E5E5
  • merge.commonContentBackground#76767629
  • merge.commonHeaderBackground#76767666
  • merge.currentContentBackground#1EC67729
  • merge.currentHeaderBackground#1EC67766
  • merge.incomingContentBackground#8DCFD329
  • merge.incomingHeaderBackground#8DCFD366
  • minimap.background#F6F6F6
  • minimapSlider.activeBackground#33333329
  • minimapSlider.background#33333314
  • minimapSlider.hoverBackground#3333331F
  • notificationCenter.border#E5E5E5
  • notificationCenterHeader.background#F1F8F1
  • notificationCenterHeader.foreground#133928
  • notifications.background#F6F6F6
  • notifications.border#E5E5E5
  • notifications.foreground#133928
  • notificationsErrorIcon.foreground#EA819B
  • notificationsInfoIcon.foreground#3CCD88
  • notificationsWarningIcon.foreground#F8D849
  • notificationToast.border#E5E5E5
  • panel.background#F6F6F6
  • panel.border#E5E5E5
  • panelTitle.activeBorder#1EC677
  • panelTitle.activeForeground#133928
  • panelTitle.inactiveForeground#5A6A62
  • peekView.border#1EC677
  • peekViewEditor.background#F1F8F1
  • peekViewEditor.matchHighlightBackground#1EC67766
  • peekViewEditorGutter.background#F1F8F1
  • peekViewResult.background#F6F6F6
  • peekViewResult.fileForeground#133928
  • peekViewResult.lineForeground#5A6A62
  • peekViewResult.matchHighlightBackground#1EC67766
  • peekViewResult.selectionBackground#F1F8F1
  • peekViewResult.selectionForeground#133928
  • peekViewTitle.background#D6EFDF
  • peekViewTitleDescription.foreground#5A6A62
  • peekViewTitleLabel.foreground#133928
  • pickerGroup.border#E5E5E5
  • pickerGroup.foreground#1EC677
  • progressBar.background#1EC677
  • scrollbar.shadow#33333314
  • scrollbarSlider.activeBackground#33333329
  • scrollbarSlider.background#33333314
  • scrollbarSlider.hoverBackground#3333331F
  • searchEditor.findMatchBackground#1EC67766
  • searchEditor.textInputBorder#E5E5E5
  • selection.background#1EC677
  • settings.checkboxBackground#FFFFFF
  • settings.checkboxBorder#E5E5E5
  • settings.checkboxForeground#133928
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownBorder#E5E5E5
  • settings.dropdownForeground#133928
  • settings.headerForeground#133928
  • settings.modifiedItemIndicator#1EC677
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputBorder#E5E5E5
  • settings.numberInputForeground#133928
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#E5E5E5
  • settings.textInputForeground#133928
  • sideBar.background#F6F6F6
  • sideBar.border#E5E5E5
  • sideBar.foreground#133928
  • sideBarSectionHeader.background#F1F8F1
  • sideBarSectionHeader.border#E5E5E5
  • sideBarSectionHeader.foreground#133928
  • sideBarTitle.foreground#133928
  • statusBar.background#0D4029
  • statusBar.border#E5E5E5
  • statusBar.debuggingBackground#EA819B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#EE7979
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#FFFFFF1F
  • statusBarItem.hoverBackground#FFFFFF14
  • statusBarItem.prominentBackground#1EC677
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.prominentHoverBackground#3CCD88
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#1EC677
  • tab.activeForeground#133928
  • tab.activeModifiedBorder#F8D849
  • tab.border#E5E5E5
  • tab.hoverBackground#F1F8F1
  • tab.hoverForeground#133928
  • tab.inactiveBackground#F6F6F6
  • tab.inactiveForeground#5A6A62
  • tab.inactiveModifiedBorder#D68628
  • tab.unfocusedActiveBackground#F6F6F6
  • tab.unfocusedActiveBorder#5A6A62
  • tab.unfocusedActiveForeground#5A6A62
  • tab.unfocusedActiveModifiedBorder#D68628
  • tab.unfocusedHoverBackground#3333330A
  • tab.unfocusedHoverForeground#133928
  • tab.unfocusedInactiveBackground#F6F6F6
  • tab.unfocusedInactiveForeground#B3BAB7
  • tab.unfocusedInactiveModifiedBorder#D68628
  • terminal.ansiBlack#2A2A2A
  • terminal.ansiBlue#8DCFD3
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#CFF9F6
  • terminal.ansiBrightCyan#DDF1DC
  • terminal.ansiBrightGreen#AEE3C1
  • terminal.ansiBrightMagenta#FDE3FF
  • terminal.ansiBrightRed#EE7979
  • terminal.ansiBrightWhite#F6F6F6
  • terminal.ansiBrightYellow#FFF9D8
  • terminal.ansiCyan#3CCD88
  • terminal.ansiGreen#1EC677
  • terminal.ansiMagenta#F7BDFE
  • terminal.ansiRed#EA819B
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFEB84
  • terminal.background#FFFFFF
  • terminal.foreground#133928
  • textBlockQuote.background#F1F8F1
  • textBlockQuote.border#1EC677
  • textCodeBlock.background#F1F8F1
  • textLink.activeForeground#1EC677
  • textLink.foreground#3CCD88
  • textPreformat.foreground#5A6A62
  • textSeparator.foreground#E5E5E5
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#133928
  • titleBar.border#E5E5E5
  • titleBar.inactiveBackground#F6F6F6
  • titleBar.inactiveForeground#5A6A62
  • toolbar.activeBackground#3333331F
  • toolbar.hoverBackground#33333314
  • tree.indentGuidesStroke#E5E5E5
  • tree.tableColumnsBorder#E5E5E5
  • tree.tableOddRowsBackground#3333330A
  • widget.border#E5E5E5
  • widget.shadow#33333314

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#767676italic
variable, string constant.other.placeholder#133928
constant.other.color#133928
invalid, invalid.illegal#EA819B
keyword, storage.type, storage.modifier#CA7AD3
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#34898E
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EA819B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#157349
meta.block variable.other#EA819B
support.other.variable, string.other.link#EA819B
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#D68628
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#157349
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#D68628
support.type#5A6A62
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#5A6A62
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EA819B
variable.language#EA819Bitalic
entity.name.method.js#157349italic
meta.class-method.js entity.name.function.js, variable.function.constructor#157349
entity.other.attribute-name#CA7AD3
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D68628italic
entity.other.attribute-name.class#D68628
source.sass keyword.control#157349
markup.inserted#157349
markup.deleted#EA819B
markup.changed#CA7AD3
string.regexp#34898E
constant.character.escape#34898E
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#157349italic
source.js constant.other.object.key.js string.unquoted.label.js#EA819Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#CA7AD3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D68628
source.json 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#D68628
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#EA819B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#D68628
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#157349
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#EA819B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#CA7AD3
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json 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#1EC677
text.html.markdown, punctuation.definition.list_item.markdown#133928
text.html.markdown markup.inline.raw.markdown#CA7AD3
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#34898E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#1EC677
markup.italic#EA819Bitalic
markup.bold, markup.bold string#EA819Bbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#EA819Bbold
markup.underline#F8D849underline
markup.quote punctuation.definition.blockquote.markdown#34898E
markup.quoteitalic
string.other.link.title.markdown#157349
string.other.link.description.title.markdown#CA7AD3
constant.other.reference.link.markdown#D68628
markup.raw.block#CA7AD3
markup.raw.block.fenced.markdown#133928
punctuation.definition.fenced.markdown#133928
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#133928
variable.language.fenced.markdown#34898E
meta.separator#34898Ebold
markup.table#133928