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#6c584ccf
  • activityBar.border#6C584C60
  • activityBar.foreground#392f28
  • activityBarBadge.background#A98467
  • activityBarBadge.foreground#6C584C
  • badge.background#6C584C30
  • badge.foreground#392f28
  • breadcrumb.activeSelectionForeground#ADC178
  • breadcrumb.background#6C584C
  • breadcrumb.focusForeground#D9A984
  • breadcrumb.foreground#ADC178
  • breadcrumbPicker.background#6C584C
  • button.background#ADC17850
  • contrastBorder#ADC17840
  • debugToolBar.background#6C584C
  • diffEditor.insertedTextBackground#D9A98415
  • diffEditor.removedTextBackground#ADC17820
  • dropdown.background#6C584C
  • dropdown.border#D9A98410
  • editor.background#4f4139
  • editor.findMatchBackground#6C584C
  • editor.findMatchBorder#ADC178
  • editor.findMatchHighlightBackground#ADC17893
  • editor.findMatchHighlightBorder#D9A98430
  • editor.foreground#D9A984
  • editor.lineHighlightBackground#6C584C50
  • editor.selectionBackground#A9846730
  • editor.selectionHighlightBackground#ADC1786b
  • editor.selectionHighlightBorder#A98467f0
  • editorBracketMatch.background#6C584C
  • editorBracketMatch.border#D9A9847f
  • editorCursor.foreground#D9A984
  • editorError.foreground#ADC17870
  • editorGroup.border#6C584C30
  • editorGroupHeader.tabsBackground#6C584C
  • editorGutter.addedBackground#D9A98460
  • editorGutter.deletedBackground#ADC17860
  • editorGutter.modifiedBackground#A9846760
  • editorHoverWidget.background#6C584C
  • editorHoverWidget.border#D9A98410
  • editorIndentGuide.activeBackground#6C584C
  • editorIndentGuide.background#6C584C70
  • editorInfo.foreground#A9846770
  • editorLineNumber.activeForeground#A98467
  • editorLineNumber.foreground#ADC178c0
  • editorLink.activeForeground#D9A984
  • editorMarkerNavigation.background#D9A98405
  • editorOverviewRuler.border#6C584C
  • editorOverviewRuler.errorForeground#ADC17840
  • editorOverviewRuler.findMatchForeground#ADC178
  • editorOverviewRuler.infoForeground#A9846740
  • editorOverviewRuler.warningForeground#D9A98470
  • editorRuler.foreground#6C584C
  • editorSuggestWidget.background#6C584C
  • editorSuggestWidget.border#D9A98410
  • editorSuggestWidget.foreground#D9A984
  • editorSuggestWidget.highlightForeground#D9A984
  • editorSuggestWidget.selectedBackground#ADC17820
  • editorWarning.foreground#D9A984
  • editorWhitespace.foreground#D9A98440
  • editorWidget.background#6C584C
  • editorWidget.border#D9A984
  • editorWidget.resizeBorder#ADC178
  • extensionButton.prominentBackground#D9A98490
  • extensionButton.prominentHoverBackground#ADC178
  • focusBorder#D9A98400
  • gitDecoration.conflictingResourceForeground#D9A984
  • gitDecoration.deletedResourceForeground#ADC178
  • gitDecoration.ignoredResourceForeground#ADC178
  • gitDecoration.modifiedResourceForeground#ADC178
  • gitDecoration.untrackedResourceForeground#A98467
  • input.background#6C584C
  • input.border#D9A98410
  • input.foreground#D9A984
  • input.placeholderForeground#D9A98460
  • inputOption.activeBackground#D9A98430
  • inputOption.activeBorder#D9A98430
  • inputValidation.errorBorder#ADC17850
  • inputValidation.infoBorder#A9846750
  • inputValidation.warningBorder#D9A98450
  • list.activeSelectionBackground#6C584C
  • list.activeSelectionForeground#ADC178
  • list.focusBackground#6C584C
  • list.focusForeground#392f28
  • list.highlightForeground#ADC178
  • list.hoverBackground#a98467
  • list.hoverForeground#392f28
  • list.inactiveSelectionBackground#6C584C30
  • list.inactiveSelectionForeground#ADC178
  • list.warningForeground#D9A984
  • listFilterWidget.background#6C584C30
  • listFilterWidget.noMatchesOutline#6C584C30
  • listFilterWidget.outline#6C584C30
  • menu.background#6C584Cf8
  • menu.border#ADC17850
  • menu.foreground#D9A984
  • menu.selectionBackground#6C584C
  • menu.selectionBorder#6C584C30
  • menu.selectionForeground#D9A984
  • menu.separatorBackground#D9A984
  • menubar.selectionBackground#6C584C
  • menubar.selectionBorder#ADC17850
  • menubar.selectionForeground#D9A984
  • minimap.background#4f4139
  • minimapGutter.addedBackground#ADC178
  • minimapGutter.deletedBackground#D9A984
  • minimapGutter.modifiedBackground#D9A984
  • minimapSlider.activeBackground#D9A984b0
  • minimapSlider.background#D9A98480
  • minimapSlider.hoverBackground#D9A984a0
  • notificationLink.foreground#ADC178
  • notifications.background#6C584C
  • notifications.foreground#D9A984
  • panel.background#6C584C
  • panel.border#D9A98460
  • panelTitle.activeBorder#ADC178
  • panelTitle.activeForeground#392f28
  • panelTitle.border#D9A98460
  • panelTitle.inactiveForeground#D9A984
  • peekView.border#6C584C30
  • peekViewEditor.background#D9A98405
  • peekViewEditor.matchHighlightBackground#ADC17850
  • peekViewEditorGutter.background#D9A98405
  • peekViewResult.background#D9A98405
  • peekViewResult.matchHighlightBackground#ADC17850
  • peekViewResult.selectionBackground#ADC17870
  • peekViewTitle.background#D9A98405
  • peekViewTitleDescription.foreground#D9A98460
  • pickerGroup.foreground#c5f347
  • progressBar.background#ADC178
  • scrollbar.shadow#6C584C00
  • scrollbarSlider.activeBackground#ADC178cc
  • scrollbarSlider.background#ADC178bb
  • scrollbarSlider.hoverBackground#ADC178ee
  • selection.background#ADC178
  • settings.checkboxBackground#6C584C
  • settings.checkboxForeground#D9A984
  • settings.dropdownBackground#6C584C
  • settings.dropdownForeground#D9A984
  • settings.headerForeground#ADC178
  • settings.modifiedItemIndicator#ADC178
  • settings.numberInputBackground#6C584C
  • settings.numberInputForeground#D9A984
  • settings.textInputBackground#6C584C
  • settings.textInputForeground#D9A984
  • sideBar.background#6C584C
  • sideBar.border#ADC17850
  • sideBar.foreground#A98467
  • sideBarSectionHeader.background#6C584C
  • sideBarSectionHeader.border#6C584C60
  • sideBarSectionHeader.foreground#A98467
  • sideBarTitle.foreground#D9A984
  • statusBar.background#6c584ccf
  • statusBar.border#6C584C60
  • statusBar.debuggingBackground#D9A984
  • statusBar.debuggingForeground#D9A984
  • statusBar.foreground#392f28
  • statusBar.noFolderBackground#6C584C
  • statusBarItem.hoverBackground#ADC17820
  • statusBarItem.remoteBackground#D9A984
  • statusBarItem.remoteForeground#6C584C
  • tab.activeBackground#ADC17850
  • tab.activeBorder#ADC178
  • tab.activeForeground#D9A984
  • tab.activeModifiedBorder#ADC178
  • tab.border#6C584C
  • tab.inactiveBackground#ADC17820
  • tab.inactiveForeground#D9A984af
  • tab.unfocusedActiveBackground#ADC17840
  • tab.unfocusedActiveBorder#ADC178
  • tab.unfocusedActiveForeground#D9A984
  • tab.unfocusedInactiveBackground#ADC17810
  • tab.unfocusedInactiveForeground#D9A9847f
  • terminal.ansiBlack#6C584C
  • terminal.ansiBlue#A98467
  • terminal.ansiBrightBlack#ADC178
  • terminal.ansiBrightBlue#A98467
  • terminal.ansiBrightCyan#A98467
  • terminal.ansiBrightGreen#D9A984
  • terminal.ansiBrightMagenta#D9A984
  • terminal.ansiBrightRed#ADC178
  • terminal.ansiBrightWhite#D9A984
  • terminal.ansiBrightYellow#D9A984
  • terminal.ansiCyan#A98467
  • terminal.ansiGreen#D9A984
  • terminal.ansiMagenta#D9A984
  • terminal.ansiRed#ADC178
  • terminal.ansiWhite#D9A984
  • terminal.ansiYellow#D9A984
  • terminal.foreground#ADC178
  • terminalCursor.background#6C584C
  • terminalCursor.foreground#D9A984
  • textLink.activeForeground#D9A984
  • textLink.foreground#ADC178
  • titleBar.activeBackground#6c584ccf
  • titleBar.activeForeground#392f28
  • titleBar.border#6C584C60
  • titleBar.inactiveBackground#6C584C
  • titleBar.inactiveForeground#ADC178
  • tree.indentGuidesStroke#6C584C
  • widget.shadow#6C584C30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#D9A984
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#D9A984
constant.other.php#D9A984
constant.other.color#D9A984
invalid, invalid.illegal#ADC178
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#f0ead2italic bold
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#D9A984
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#adc178
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D9A984italic bold
entity.name.tag.htmlitalic bold
variable.parameter.js, variable.parameter.keyframe-list.css#D9A984
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#ADC178
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#A98467
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#A98467
support.other.variable, string.other.link, markup.table#D9A984
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#D9A984
variable.parameter.function.language.special, variable.parameter#ADC178
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#D9A984
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, entity.other.attribute-name.html#D9A984
support.type#B2CCD6
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#ADC178
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ADC178
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#A98467italic
entity.other.attribute-name, support.function#D9A984
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#D9A984
source.scss keyword.control#D9A984
markup.inserted#D9A984
markup.deleted#ADC178
markup.changed#D9A984
string.regexp#A98467
constant.character.escape#A98467
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#D9A984italic
support.type.property-name.json#D9A984
text.html.markdown, punctuation.definition.list_item.markdown#D9A984
text.html.markdown markup.inline.raw.markdown#D9A984
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#ADC17850
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#ADC178bold
markup.underline#A98467underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#ADC17850
markup.quoteitalic
string.other.link.description.title.markdown#D9A984
constant.other.reference.link.markdown#D9A984
markup.raw.block#D9A984
punctuation.definition.raw.markdown, punctuation.definition.markdown#A98467
variable.language.fenced.markdown#ADC178
meta.separator#A7A8AFbold
token.info-token#ADC178
token.warn-token#D9A984
token.error-token#FF293B
token.debug-token#A98467