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#E9ECF1
  • activityBar.dropBackground#EFF1F5cc
  • activityBar.foreground#4f5b66
  • activityBarBadge.background#6D8E51
  • activityBarBadge.foreground#ffffffe6
  • badge.background#749856
  • badge.foreground#ffffffe6
  • button.background#6D8E51
  • button.foreground#ffffffe6
  • button.hoverBackground#749856
  • debugExceptionWidget.background#62282E
  • debugExceptionWidget.border#62282E
  • diffEditor.insertedTextBackground#4E653A1a
  • diffEditor.removedTextBackground#62282E1a
  • dropdown.background#E9ECF1
  • dropdown.border#E9ECF1
  • dropdown.foreground#4f5b66
  • dropdown.listBackground#EFF1F5
  • editor.background#eff1f5
  • editor.findMatchBackground#edd6913c
  • editor.findMatchHighlightBackground#00000016
  • editor.foreground#4e5a65
  • editor.inactiveSelectionBackground#00000010
  • editor.lineHighlightBackground#0000000d
  • editor.rangeHighlightBackground#00000016
  • editor.selectionBackground#0000001a
  • editor.selectionHighlightBackground#00000016
  • editor.wordHighlightBackground#00000016
  • editor.wordHighlightStrongBackground#0000001a
  • editorBracketMatch.background#00000016
  • editorBracketMatch.border#00000016
  • editorCodeLens.foreground#00000016
  • editorCursor.foreground#a4bf8d
  • editorError.foreground#6F2D33
  • editorGroup.background#FEFEFE
  • editorGroup.border#0000001a
  • editorGroup.dropBackground#EFF1F5cc
  • editorGroupHeader.noTabsBackground#E9ECF1
  • editorGroupHeader.tabsBackground#E9ECF1
  • editorGroupHeader.tabsBorder#FEFEFE
  • editorGutter.addedBackground#617E48b3
  • editorGutter.background#E6E9EF
  • editorGutter.deletedBackground#7B3239b3
  • editorGutter.modifiedBackground#BF8B21b3
  • editorHoverWidget.background#F5F6F9
  • editorIndentGuide.activeBackground#00000033
  • editorIndentGuide.background#0000001a
  • editorLineNumber.activeForeground#0000005a
  • editorLineNumber.foreground#00000033
  • editorLink.activeForeground#8fa1b3
  • editorMarkerNavigation.background#EFF1F5
  • editorMarkerNavigationError.background#7B3239b3
  • editorMarkerNavigationWarning.background#BF8B21b3
  • editorOverviewRuler.addedForeground#4E653A
  • editorOverviewRuler.border#0000001a
  • editorOverviewRuler.currentContentForeground#3E4E5C1a
  • editorOverviewRuler.deletedForeground#62282E
  • editorOverviewRuler.errorForeground#62282E
  • editorOverviewRuler.findMatchForeground#edd6913c
  • editorOverviewRuler.incomingContentForeground#996F1A1a
  • editorOverviewRuler.infoForeground#996F1A
  • editorOverviewRuler.modifiedForeground#996F1A
  • editorOverviewRuler.rangeHighlightForeground#00000016
  • editorOverviewRuler.selectionHighlightForeground#00000016
  • editorOverviewRuler.warningForeground#996F1A
  • editorOverviewRuler.wordHighlightForeground#0000001a
  • editorOverviewRuler.wordHighlightStrongForeground#0000001a
  • editorRuler.foreground#0000001a
  • editorSuggestWidget.background#EFF1F5
  • editorSuggestWidget.border#E9ECF1
  • editorSuggestWidget.foreground#4f5b66
  • editorSuggestWidget.selectedBackground#E9ECF1
  • editorWarning.foreground#866117
  • editorWhitespace.foreground#00000016
  • editorWidget.background#EFF1F5
  • editorWidget.border#E9ECF1
  • errorForeground#6F2D33
  • extensionButton.prominentBackground#6D8E51
  • extensionButton.prominentForeground#ffffffe6
  • extensionButton.prominentHoverBackground#5E7B46
  • focusBorder#00000026
  • foreground#4f5b66
  • gitDecoration.conflictingResourceForeground#6F2D33
  • gitDecoration.deletedResourceForeground#6F2D33
  • gitDecoration.ignoredResourceForeground#4f5b66a6
  • gitDecoration.modifiedResourceForeground#374451
  • gitDecoration.untrackedResourceForeground#445832
  • input.background#F5F6F9
  • input.border#E9ECF1
  • input.foreground#4f5b66
  • input.placeholderForeground#4f5b66a6
  • inputOption.activeBorder#E0E4EC
  • inputValidation.errorBackground#E9ECF1
  • inputValidation.errorBorder#62282E
  • inputValidation.infoBackground#E9ECF1
  • inputValidation.infoBorder#3E4E5C
  • inputValidation.warningBackground#E9ECF1
  • inputValidation.warningBorder#996F1A
  • list.activeSelectionBackground#0000001a
  • list.activeSelectionForeground#49545E
  • list.dropBackground#0000000d
  • list.focusBackground#00000026
  • list.focusForeground#4A5660
  • list.highlightForeground#92B277
  • list.hoverBackground#0000000d
  • list.hoverForeground#4D5964
  • list.inactiveFocusBackground#00000012
  • list.inactiveSelectionBackground#00000014
  • list.inactiveSelectionForeground#4C5762
  • list.invalidItemForeground#6F2D33
  • merge.border#62282E
  • merge.currentContentBackground#3E4E5C1a
  • merge.currentHeaderBackground#3E4E5C
  • merge.incomingContentBackground#996F1A1a
  • merge.incomingHeaderBackground#996F1A
  • notificationCenter.border#5E7B46
  • notificationCenterHeader.background#5E7B46
  • notificationCenterHeader.foreground#ffffffe6
  • notificationLink.foreground#8fa1b3
  • notifications.background#E0E4EC
  • notifications.border#E0E4EC
  • notifications.foreground#53606B
  • notificationToast.border#EFF1F5
  • panel.background#FEFEFE
  • panel.border#E0E4EC
  • panelTitle.activeBorder#5E7B46
  • panelTitle.activeForeground#53606B
  • panelTitle.inactiveForeground#4B5661
  • peekView.border#EFF1F5
  • peekViewEditor.background#F5F6F9
  • peekViewEditor.matchHighlightBackground#00000016
  • peekViewEditorGutter.background#F5F6F9
  • peekViewResult.background#F5F6F9
  • peekViewResult.fileForeground#4e5a65
  • peekViewResult.lineForeground#4e5a65
  • peekViewResult.matchHighlightBackground#00000016
  • peekViewResult.selectionBackground#0000001a
  • peekViewResult.selectionForeground#4e5a65
  • peekViewTitle.background#E9ECF1
  • peekViewTitleDescription.foreground#4B5661
  • peekViewTitleLabel.foreground#515D68
  • pickerGroup.border#F5F6F9
  • pickerGroup.foreground#4D5964
  • progressBar.background#92B277
  • scrollbar.shadow#E9ECF1
  • scrollbarSlider.activeBackground#4f5b664d
  • scrollbarSlider.background#4f5b661a
  • scrollbarSlider.hoverBackground#4f5b6633
  • selection.background#4E6173b3
  • sideBar.background#FEFEFE
  • sideBar.border#EFF1F5
  • sideBar.foreground#4f5b66
  • sideBarSectionHeader.background#EFF1F5
  • sideBarSectionHeader.foreground#4f5b66
  • sideBarTitle.foreground#4D5964
  • statusBar.background#EFF1F5
  • statusBar.border#E9ECF1
  • statusBar.debuggingBackground#6D8E51
  • statusBar.debuggingForeground#ffffffe6
  • statusBar.foreground#000000cc
  • statusBar.noFolderBackground#EFF1F5
  • statusBar.noFolderForeground#4B5661
  • statusBarItem.activeBackground#0000001a
  • statusBarItem.hoverBackground#0000000d
  • statusBarItem.prominentBackground#5E7B46
  • statusBarItem.prominentHoverBackground#749856
  • tab.activeBackground#FEFEFE
  • tab.activeBorder#5E7B46
  • tab.activeForeground#4f5b66
  • tab.border#E0E4EC
  • tab.hoverBackground#F5F6F9
  • tab.inactiveBackground#E9ECF1
  • tab.inactiveForeground#4D5964
  • tab.unfocusedActiveForeground#4D5964
  • tab.unfocusedHoverBackground#FEFEFE
  • tab.unfocusedInactiveForeground#4B5661
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#EFF1F5
  • terminal.foreground#4f5b66
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#E9ECF1
  • titleBar.activeForeground#53606B
  • titleBar.border#E0E4EC
  • titleBar.inactiveBackground#EFF1F5
  • titleBar.inactiveForeground#4D5964
  • walkThrough.embeddedEditorBackground#EFF1F5
  • welcomePage.buttonBackground#F5F6F9
  • welcomePage.buttonHoverBackground#FEFEFE
  • widget.shadow#E9ECF1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#4e5a65—
comment, punctuation.definition.comment#a6acb9italic
variable, variable.other, variable.name#3E4851—
variable.parameter#3E4851—
variable.language, variable.scss, variable.less, variable.styl#A2424Citalic
punctuation.definition.variable#3E4851italic
variable.other.constant#698199bold
constant, constant.other, constant.character#9A6791—
support.type.property-name, constant.numeric, support.constant#C15E40—
meta.object-literal.key#E0AD49—
constant.language#A2424Citalic
constant.character.escape, constant.other.placeholder#E0AD49italic
invalid, invalid.illegal#A2424C—
keyword, storage.type#9A6791—
storage.modifier#A2424C—
storage.modifier, storage.type, keyword.control—italic
keyword.operator, punctuation.accessor.#D48A46—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#3E4851—
entity.name#E0AD49—
entity.name.tag, meta.tag.sgml#A2424C
entity.name.function, entity.name.label, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#698199
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#A4BF8D
meta.tag.attribute, entity.other.attribute-name#C15E40italic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#6A7387—
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class#D48A46—
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id#698199—
support.type.property-name.css#3E4851—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#4F5665italic
*url*, *link*, *uri*#8fa1b3italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#698199italic
source.json meta.structure.dictionary.json support.type.property-name.json#E0AD49—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C15E40—
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#9A6791—
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#3E4851—
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#698199—
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#D48A46—
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#6A7387—
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#4F5665—
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#A2424C—
text.html.markdown, punctuation.definition.list_item.markdown#6A7387—
text.html.markdown markup.inline.raw.markdown#9A6791—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4F5665—
text.html.markdown meta.dummy.line-break—
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#A2424C—
beginning.punctuation.definition.list.markdown#C15E40—
markup.italic#D48A46italic
markup.bold, markup.bold string#D48A46bold
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#D48A46bold italic
markup.underline#8fa1b3underline
markup.strike#a6acb9strike
beginning.punctuation.definition.quote#00000013—
markup.quote#7c8598italic
string.other.link.title.markdown#C15E40—
string.other.link.description.title.markdown#A4BF8D—
constant.other.reference.link.markdown#D48A46—
markup.raw.block#3E4851—
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#3E4851—
meta.separator#4f5b66bold
markup.table#4e5a65—
token.info-token#374451—
token.warn-token#866117—
token.error-token#6F2D33—
token.debug-token#698199—
markup.deleted, punctuation.definition.deleted#6F2D33—
markup.inserted, punctuation.definition.inserted#445832—
markup.changed, punctuation.definition.changed#374451—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php—italic
keyword.other.namespace.php, keyword.other.use.php—italic
meta.tag.sgml.doctype.html—italic