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#181818
  • activityBar.border#18181860
  • activityBar.foreground#D8D8D8
  • activityBarBadge.background#F1D9A9
  • activityBarBadge.foreground#181818
  • badge.background#18181830
  • badge.foreground#875136
  • breadcrumb.activeSelectionForeground#875136
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#D8D8D8
  • breadcrumb.foreground#A56342
  • breadcrumbPicker.background#181818
  • button.background#87513650
  • contrastBorder#87513640
  • debugToolBar.background#181818
  • diffEditor.insertedTextBackground#67241915
  • diffEditor.removedTextBackground#94775920
  • dropdown.background#181818
  • dropdown.border#F0F0D810
  • editor.background#181818
  • editor.findMatchBackground#181818
  • editor.findMatchBorder#875136
  • editor.findMatchHighlightBackground#87513693
  • editor.findMatchHighlightBorder#F0F0D830
  • editor.foreground#D8D8D8
  • editor.lineHighlightBackground#18181850
  • editor.selectionBackground#F1D9A930
  • editor.selectionHighlightBackground#8751366b
  • editor.selectionHighlightBorder#F1D9A9f0
  • editorBracketHighlight.foreground1#a06936
  • editorBracketHighlight.foreground2#923a2d
  • editorBracketHighlight.foreground3#c7b182
  • editorBracketMatch.background#181818
  • editorBracketMatch.border#A438187f
  • editorCursor.foreground#A43818
  • editorError.foreground#94775970
  • editorGroup.border#18181830
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#67241960
  • editorGutter.deletedBackground#94775960
  • editorGutter.modifiedBackground#F1D9A960
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#F0F0D810
  • editorIndentGuide.activeBackground#3F3F3F
  • editorIndentGuide.background#3F3F3F70
  • editorInfo.foreground#F1D9A970
  • editorLineNumber.activeForeground#F1D9A9
  • editorLineNumber.foreground#875136c0
  • editorLink.activeForeground#D8D8D8
  • editorMarkerNavigation.background#D8D8D805
  • editorOverviewRuler.border#181818
  • editorOverviewRuler.errorForeground#94775940
  • editorOverviewRuler.findMatchForeground#875136
  • editorOverviewRuler.infoForeground#F1D9A940
  • editorOverviewRuler.warningForeground#A4381870
  • editorRuler.foreground#3F3F3F
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#F0F0D810
  • editorSuggestWidget.foreground#D8D8D8
  • editorSuggestWidget.highlightForeground#A43818
  • editorSuggestWidget.selectedBackground#87513620
  • editorWarning.foreground#672419
  • editorWhitespace.foreground#D8D8D840
  • editorWidget.background#181818
  • editorWidget.border#A43818
  • editorWidget.resizeBorder#875136
  • extensionButton.prominentBackground#67241990
  • extensionButton.prominentHoverBackground#947759
  • focusBorder#F0F0D800
  • gitDecoration.conflictingResourceForeground#A43818
  • gitDecoration.deletedResourceForeground#947759
  • gitDecoration.ignoredResourceForeground#875136
  • gitDecoration.modifiedResourceForeground#A56342
  • gitDecoration.untrackedResourceForeground#F1D9A9
  • input.background#242323
  • input.border#F0F0D810
  • input.foreground#D8D8D8
  • input.placeholderForeground#D8D8D860
  • inputOption.activeBackground#D8D8D830
  • inputOption.activeBorder#D8D8D830
  • inputValidation.errorBorder#94775950
  • inputValidation.infoBorder#F1D9A950
  • inputValidation.warningBorder#A4381850
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#875136
  • list.focusBackground#2D2D2D
  • list.focusForeground#F1D9A9
  • list.highlightForeground#875136
  • list.hoverBackground#3F3F3F
  • list.hoverForeground#F0F0D8
  • list.inactiveSelectionBackground#18181830
  • list.inactiveSelectionForeground#875136
  • list.warningForeground#A43818
  • listFilterWidget.background#18181830
  • listFilterWidget.noMatchesOutline#18181830
  • listFilterWidget.outline#18181830
  • menu.background#181818f8
  • menu.border#87513650
  • menu.foreground#D8D8D8
  • menu.selectionBackground#2D2D2D
  • menu.selectionBorder#18181830
  • menu.selectionForeground#D8D8D8
  • menu.separatorBackground#D8D8D8
  • menubar.selectionBackground#2D2D2D
  • menubar.selectionBorder#87513650
  • menubar.selectionForeground#D8D8D8
  • minimap.background#181818
  • minimapGutter.addedBackground#947759
  • minimapGutter.deletedBackground#A43818
  • minimapGutter.modifiedBackground#672419
  • minimapSlider.activeBackground#672419b0
  • minimapSlider.background#67241980
  • minimapSlider.hoverBackground#672419a0
  • notificationLink.foreground#875136
  • notifications.background#181818
  • notifications.foreground#D8D8D8
  • panel.background#181818
  • panel.border#18181860
  • panelTitle.activeBorder#875136
  • panelTitle.activeForeground#F0F0D8
  • panelTitle.inactiveForeground#D8D8D8
  • peekView.border#18181830
  • peekViewEditor.background#D8D8D805
  • peekViewEditor.matchHighlightBackground#87513650
  • peekViewEditorGutter.background#D8D8D805
  • peekViewResult.background#D8D8D805
  • peekViewResult.matchHighlightBackground#87513650
  • peekViewResult.selectionBackground#87513670
  • peekViewTitle.background#D8D8D805
  • peekViewTitleDescription.foreground#D8D8D860
  • pickerGroup.foreground#875136
  • progressBar.background#875136
  • scrollbar.shadow#18181800
  • scrollbarSlider.activeBackground#875136cc
  • scrollbarSlider.background#875136bb
  • scrollbarSlider.hoverBackground#875136ee
  • selection.background#875136
  • settings.checkboxBackground#181818
  • settings.checkboxForeground#D8D8D8
  • settings.dropdownBackground#181818
  • settings.dropdownForeground#D8D8D8
  • settings.headerForeground#875136
  • settings.modifiedItemIndicator#875136
  • settings.numberInputBackground#181818
  • settings.numberInputForeground#D8D8D8
  • settings.textInputBackground#181818
  • settings.textInputForeground#D8D8D8
  • sideBar.background#181818
  • sideBar.border#87513650
  • sideBar.foreground#F1D9A9
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#18181860
  • sideBarSectionHeader.foreground#F1D9A9
  • sideBarTitle.foreground#D8D8D8
  • statusBar.background#181818
  • statusBar.border#18181860
  • statusBar.debuggingBackground#A43818
  • statusBar.debuggingForeground#F0F0D8
  • statusBar.foreground#BA6F4A
  • statusBar.noFolderBackground#181818
  • statusBarItem.hoverBackground#87513620
  • statusBarItem.remoteBackground#875136
  • statusBarItem.remoteForeground#181818
  • tab.activeBackground#87513650
  • tab.activeBorder#875136
  • tab.activeForeground#F0F0D8
  • tab.activeModifiedBorder#875136
  • tab.border#181818
  • tab.inactiveBackground#87513620
  • tab.inactiveForeground#D8D8D8af
  • tab.unfocusedActiveBackground#87513640
  • tab.unfocusedActiveBorder#875136
  • tab.unfocusedActiveForeground#D8D8D8
  • tab.unfocusedInactiveBackground#87513610
  • tab.unfocusedInactiveForeground#D8D8D87f
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#F1D9A9
  • terminal.ansiBrightBlack#875136
  • terminal.ansiBrightBlue#F1D9A9
  • terminal.ansiBrightCyan#DADADA
  • terminal.ansiBrightGreen#672419
  • terminal.ansiBrightMagenta#A43818
  • terminal.ansiBrightRed#947759
  • terminal.ansiBrightWhite#F0F0D8
  • terminal.ansiBrightYellow#A43818
  • terminal.ansiCyan#DADADA
  • terminal.ansiGreen#672419
  • terminal.ansiMagenta#A43818
  • terminal.ansiRed#947759
  • terminal.ansiWhite#F0F0D8
  • terminal.ansiYellow#A43818
  • terminalCursor.background#181818
  • terminalCursor.foreground#A43818
  • textLink.activeForeground#D8D8D8
  • textLink.foreground#875136
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#D8D8D8
  • titleBar.border#18181860
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#875136
  • tree.indentGuidesStroke#3F3F3F
  • widget.shadow#18181830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#A43818
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#672419
constant.other.php#A43818
constant.other.color#F0F0D8
invalid, invalid.illegal#947759
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#A56342
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#D8D8D8
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#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#D8D8D8
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#A43818
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#A56342
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#F1D9A9
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#DADADA
support.other.variable, string.other.link, markup.table#D8D8D8
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#A43818
variable.parameter.function.language.special, variable.parameter#947759
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#672419
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#A43818
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#A56342
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#947759
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F1D9A9italic
entity.other.attribute-name, support.function#A43818
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#D8D8D8
source.scss keyword.control#A43818
markup.inserted#672419
markup.deleted#947759
markup.changed#A43818
string.regexp#DADADA
constant.character.escape#DADADA
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#D8D8D8italic
support.type.property-name.json#D8D8D8
text.html.markdown, punctuation.definition.list_item.markdown#D8D8D8
text.html.markdown markup.inline.raw.markdown#A43818
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#87513650
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#A56342bold
markup.underline#F1D9A9underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#87513650
markup.quoteitalic
string.other.link.description.title.markdown#A43818
constant.other.reference.link.markdown#A43818
markup.raw.block#A43818
punctuation.definition.raw.markdown, punctuation.definition.markdown#DADADA
variable.language.fenced.markdown#875136
meta.separator#A7A8AFbold
token.info-token#875136
token.warn-token#A43818
token.error-token#FF293B
token.debug-token#DADADA
Death Code by Júlia Favero - VS Code Theme