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.activeBorder#FF5541
  • activityBar.background#1a1916
  • activityBar.foreground#FDE8D5
  • activityBar.inactiveForeground#433B39
  • activityBarBadge.background#FF5541
  • activityBarBadge.foreground#1E1E1E
  • badge.background#ff3e3e
  • badge.foreground#ffffff
  • banner.background#141411
  • banner.foreground#FDE8D5
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#FF5541
  • breadcrumb.background#1E1E1E
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#FDE8D5
  • breadcrumbPicker.background#141411
  • button.background#FF5541
  • button.foreground#141411
  • charts.blue#004cff
  • charts.foreground#FDE8D5
  • charts.green#FF5541
  • charts.lines#FDE8D5
  • charts.orange#2ee7b6
  • charts.purple#9f00ff
  • charts.red#ff3e3e
  • charts.yellow#ffaf00
  • checkbox.background#141411
  • checkbox.border#141411
  • checkbox.foreground#FF5541
  • debugExceptionWidget.background#ff3e3e49
  • debugExceptionWidget.border#ff3e3e49
  • debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
  • debugIcon.breakpointDisabledForeground#ff3e3e49
  • debugIcon.breakpointForeground#ff3e3e
  • debugIcon.breakpointStackframeForeground#004cff49
  • debugIcon.breakpointUnverifiedForeground#FDE8D5
  • debugIcon.continueForeground#FF5541
  • debugIcon.disconnectForeground#ff3e3e
  • debugIcon.pauseForeground#FF5541
  • debugIcon.restartForeground#ffaf00
  • debugIcon.startForeground#FF5541
  • debugIcon.stepBackForeground#FDE8D5
  • debugIcon.stepIntoForeground#FDE8D5
  • debugIcon.stepOutForeground#FDE8D5
  • debugIcon.stepOverForeground#FDE8D5
  • debugIcon.stopForeground#ff3e3e
  • debugToolBar.background#1E1E1E
  • debugToolBar.border#1E1E1E
  • descriptionForeground#FDE8D5
  • dropdown.background#141411
  • dropdown.foreground#FDE8D5
  • dropdown.listBackground#141411
  • editor.background#1a1916
  • editor.findMatchBackground#6e7b96a1
  • editor.findMatchHighlightBackground#6e7b968C
  • editor.findRangeHighlightBackground#6e7b968C
  • editor.foldBackground#1a1916
  • editor.foreground#FDE8D5
  • editor.lineHighlightBackground#1E1E1E
  • editor.lineHighlightBorder#1E1E1E
  • editor.rangeHighlightBackground#433B39
  • editor.selectionBackground#6e7b968C
  • editor.selectionForeground#141411
  • editor.selectionHighlightBackground#6e7b968C
  • editor.stackFrameHighlightBackground#6e7b968C
  • editorBracketMatch.border#433B39
  • editorCursor.background#FF5541
  • editorGroup.border#433B39
  • editorGroup.dropBackground#6e7b9625
  • editorGroupHeader.tabsBackground#141411
  • editorGutter.addedBackground#FF5541
  • editorGutter.background#1a1916
  • editorGutter.commentRangeForeground#FDE8D5
  • editorGutter.deletedBackground#ff3e3e
  • editorGutter.modifiedBackground#004cff
  • editorHoverWidget.background#1E1E1E
  • editorHoverWidget.foreground#FDE8D5
  • editorIndentGuide.activeBackground#FDE8D5
  • editorIndentGuide.background#433B39
  • editorLightBulb.foreground#ffaf00
  • editorLightBulbAutoFix.foreground#FF5541
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#433B39
  • editorOverviewRuler.bracketMatchForeground#FDE8D5
  • editorOverviewRuler.commonContentForeground#FF5541
  • editorOverviewRuler.errorForeground#ff3e3e
  • editorOverviewRuler.findMatchForeground#004cff
  • editorOverviewRuler.infoForeground#ffffff
  • editorOverviewRuler.rangeHighlightForeground#004cff
  • editorOverviewRuler.selectionHighlightForeground#004cff
  • editorOverviewRuler.warningForeground#ffaf00
  • editorOverviewRuler.wordHighlightForeground#FDE8D5
  • editorSuggestWidget.background#1E1E1E
  • editorSuggestWidget.border#1E1E1E
  • editorSuggestWidget.foreground#FDE8D5
  • editorWidget.background#1E1E1E
  • editorWidget.border#1E1E1E
  • errorForeground#ff3e3e
  • extensionBadge.remoteBackground#2ee7b6
  • extensionBadge.remoteForeground#141411
  • extensionButton.prominentBackground#FF5541
  • extensionButton.prominentForeground#141411
  • extensionButton.prominentHoverBackground#c5f467
  • extensionIcon.starForeground#ffaf00
  • focusBorder#1E1E1E
  • foreground#FDE8D5
  • gitDecoration.addedResourceForeground#FF5541
  • gitDecoration.conflictingResourceForeground#ffaf00
  • gitDecoration.deletedResourceForeground#ff3e3e
  • gitDecoration.ignoredResourceForeground#6e7b968C
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.submoduleResourceForeground#5cecc6
  • gitDecoration.untrackedResourceForeground#FDE8D5
  • icon.foreground#FDE8D5
  • input.background#1a1916
  • input.border#1a1916
  • input.foreground#ffffff
  • input.placeholderForeground#FDE8D5
  • inputOption.activeBackground#433B39
  • inputOption.activeBorder#433B39
  • inputOption.activeForeground#FDE8D5
  • inputValidation.errorBackground#ff3e3e70
  • inputValidation.errorBorder#ff3e3e49
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#004cff70
  • inputValidation.infoBorder#004cff54
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ffaf0070
  • inputValidation.warningBorder#ffaf0070
  • inputValidation.warningForeground#ffffff
  • keybindingLabel.background#6e7b965d
  • keybindingLabel.border#6e7b968C
  • keybindingLabel.bottomBorder#FDE8D57e
  • keybindingLabel.foreground#FDE8D5
  • list.activeSelectionBackground#1E1E1E
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#433B39
  • list.errorForeground#ff3e3e
  • list.hoverBackground#1E1E1E
  • list.inactiveSelectionBackground#1E1E1E
  • list.warningForeground#ffaf00
  • listFilterWidget.background#004cff
  • menu.background#141411
  • menu.separatorBackground#1E1E1E
  • menubar.selectionBackground#141411
  • menubar.selectionForeground#FDE8D5
  • merge.commonContentBackground#ffffff
  • merge.commonHeaderBackground#ffffff
  • merge.currentContentBackground#ff3e3e49
  • merge.currentHeaderBackground#ff3e3e
  • merge.incomingContentBackground#004cff49
  • merge.incomingHeaderBackground#004cff
  • minimap.errorHighlight#ff8484
  • minimap.findMatchHighlight#c5f467
  • minimap.selectionHighlight#ffffffd0
  • minimap.warningHighlight#ffcc5c
  • minimapGutter.addedBackground#FF5541
  • minimapGutter.deletedBackground#ff3e3e
  • minimapGutter.modifiedBackground#004cff
  • minimapSlider.activeBackground#6e7b968C
  • minimapSlider.background#1a1916
  • minimapSlider.hoverBackground#141411
  • notificationCenterHeader.background#1E1E1E
  • notificationLink.foreground#5cb2ff
  • notifications.background#1E1E1E
  • notifications.foreground#FDE8D5
  • notificationsErrorIcon.foreground#ff8484
  • notificationsInfoIcon.foreground#FF5541
  • notificationsWarningIcon.foreground#ffcc5c
  • panel.background#141411
  • panel.border#1a1916
  • panelTitle.activeBorder#FF5541
  • panelTitle.inactiveForeground#FDE8D5
  • peekView.border#1E1E1E
  • peekViewEditor.background#1a1916
  • progressBar.background#FF5541
  • scm.providerBorder#FDE8D5
  • scrollbar.shadow#1a1916
  • scrollbarSlider.activeBackground#6e7b968C
  • scrollbarSlider.background#6e7b968C
  • scrollbarSlider.hoverBackground#6e7b968C
  • selection.background#433B39
  • settings.checkboxBackground#141411
  • settings.checkboxBorder#141411
  • settings.checkboxForeground#FF5541
  • settings.dropdownBackground#141411
  • settings.dropdownBorder#141411
  • settings.dropdownForeground#FDE8D5
  • settings.dropdownListBorder#141411
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#FF5541
  • settings.numberInputBackground#141411
  • settings.numberInputBorder#141411
  • settings.numberInputForeground#FDE8D5
  • settings.textInputBackground#141411
  • settings.textInputBorder#141411
  • settings.textInputForeground#FDE8D5
  • sideBar.background#1E1E1E
  • sideBar.foreground#FDE8D5
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#6e7b968C
  • sideBarTitle.foreground#FDE8D5
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#ff8484
  • statusBar.debuggingForeground#141411
  • statusBar.foreground#FDE8D5
  • statusBar.noFolderBackground#1E1E1E
  • statusBar.noFolderForeground#FDE8D5
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#1E1E1E
  • tab.activeBorderTop#1a1916
  • tab.activeModifiedBorder#FDE8D5
  • tab.border#1a1916
  • tab.hoverBackground#1a1916
  • tab.hoverBorder#1a1916
  • tab.inactiveBackground#1a1916
  • tab.inactiveForeground#6e7b968C
  • tab.unfocusedActiveBorder#FDE8D5
  • terminal.ansiBlue#004cff
  • terminal.ansiBrightBlue#5cb2ff
  • terminal.ansiBrightCyan#5cecc6
  • terminal.ansiBrightGreen#c5f467
  • terminal.ansiBrightMagenta#c16cfa
  • terminal.ansiBrightRed#ff8484
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc5c
  • terminal.ansiCyan#2ee7b6
  • terminal.ansiGreen#FF5541
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#ff3e3e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffaf00
  • terminal.background#141411
  • terminal.foreground#FDE8D5
  • terminalCursor.background#433B39
  • testing.iconErrored#ffaf00
  • testing.iconFailed#ff3e3e
  • testing.iconPassed#FF5541
  • testing.iconQueued#FDE8D5
  • testing.iconSkipped#FDE8D5
  • testing.iconUnset#FDE8D5
  • testing.message.error.decorationForeground#ff3e3e
  • testing.message.error.lineBackground#ff3e3e
  • testing.message.hint.decorationForeground#2ee7b6
  • testing.message.hint.lineBackground#2ee7b6
  • testing.message.info.decorationForeground#004cff
  • testing.message.info.lineBackground#004cff
  • testing.message.warning.decorationForeground#ffaf00
  • testing.message.warning.lineBackground#ffaf00
  • testing.peekBorder#FDE8D5
  • textBlockQuote.background#1a1916
  • textBlockQuote.border#FDE8D5
  • textCodeBlock.background#141411
  • textLink.activeForeground#c5f467
  • textLink.foreground#FF5541
  • textPreformat.foreground#2e6cff
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#1a1916
  • titleBar.activeForeground#FDE8D5
  • titleBar.border#1a1916
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#433B39
  • tree.indentGuidesStroke#FF5541
  • walkThrough.embeddedEditorBackground#1a1916
  • welcomePage.background#1a1916
  • welcomePage.buttonBackground#1E1E1E
  • welcomePage.buttonHoverBackground#433B39
  • widget.shadow#1414117e
  • window.activeBorder#1E1E1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#FDE8D5
string constant.other.placeholder#C5D1EB
constant.other.color#FFFFFF
invalid, invalid.illegal#FF8484
keyword, storage.type, storage.modifier#FF8484
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#5CECC6
keyword.control#CF8DFB
markup.deleted.git_gutter#C5D1EB
entity.name.tag, meta.tag.sgml#FF8484
markup.deleted.git_gutter#C5D1EB
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFCC5C
meta.block variable.other#C5D1EB
support.other.variable#FF8484
string.other.link#FF8484
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FF
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#C5F467
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#FF8484
entity.name, entity.other.inherited-class#ffffff
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#FF8484
support.type#FDE8D5
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#FDE8D5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8484
variable.language#FF8484italic
entity.name.method.js#5CB2FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#FF8484
entity.other.attribute-name#5CB2FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCC5Citalic
entity.other.attribute-name.class#5CB2FF
source.sass keyword.control#5CB2FF
markup.inserted#C5F467
markup.deleted#FF8484
markup.changed#CF8DFB
string.regexp#5CB2FF
constant.character.escape#5CB2FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5CB2FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF8484italic
source.json meta.structure.dictionary.json support.type.property-name.json#CF8DFB
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FF
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#5CB2FF
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#FF8484
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#FF68B3
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#5CB2FF
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#FF8484
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#CF8DFB
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#C5F467
text.html.markdown, punctuation.definition.list_item.markdown#FDE8D5
text.html.markdown markup.inline.raw.markdown#CF8DFB
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#433B39
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C5F467
markup.italic#FF8484italic
markup.bold, markup.bold string#ff009d
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#FF8484bold
markup.underline#FF8484underline
markup.quote punctuation.definition.blockquote.markdown#1E1E1E
markup.quoteitalic
string.other.link.title.markdown#5CB2FF
string.other.link.description.title.markdown#CF8DFB
constant.other.reference.link.markdown#5CB2FF
markup.raw.block#CF8DFB
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FDE8D5
variable.language.fenced.markdown#433B39
meta.separator#433B39bold
markup.table#FDE8D5
token.info-token#5CB2FF
token.warn-token#FFCC5C
token.error-token#FF8484
token.debug-token#CF8DFB