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.activeBackground#1d2025
  • activityBar.activeBorder#00000000
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#1d2025
  • activityBar.border#00000000
  • activityBar.dropBorder#ff7f66
  • activityBar.foreground#faf5eb
  • activityBar.inactiveForeground#faf5ebcc
  • activityBarBadge.background#ff7f66
  • activityBarBadge.foreground#faf5eb
  • badge.background#ff7f66
  • badge.foreground#faf5eb
  • breadcrumb.activeSelectionForeground#ffe6cc
  • breadcrumb.background#1d2025
  • breadcrumb.focusForeground#faf5eb
  • breadcrumb.foreground#faf5eb
  • breadcrumbPicker.background#1d2025
  • button.background#ff3333
  • button.foreground#faf5eb
  • button.hoverBackground#ff7f66
  • button.secondaryBackground#ff3333
  • button.secondaryForeground#faf5eb
  • button.secondaryHoverBackground#ff7f66
  • checkbox.background#2d2d39
  • checkbox.border#ffe6cc
  • checkbox.foreground#ffbb99
  • debugExceptionWidget.background#2d2d39
  • debugExceptionWidget.border#00000000
  • descriptionForeground#faf5eb
  • diffEditor.border#00000000
  • diffEditor.diagonalFill#2d2d39
  • diffEditor.insertedTextBackground#eeff9940
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#ff333340
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#1d2025
  • dropdown.border#ff7f6680
  • dropdown.foreground#faf5eb
  • dropdown.listBackground#1d2025
  • editor.background#1d2025
  • editor.findMatchBackground#ffe6cc80
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#ffbb9980
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#99c0ff40
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#2d2d3980
  • editor.foreground#faf5eb
  • editor.hoverHighlightBackground#1d2025
  • editor.inactiveSelectionBackground#ffe6cc40
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#ff333340
  • editor.linkedEditingBackground#1d2025
  • editor.rangeHighlightBackground#ff333340
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#ff333340
  • editor.selectionForeground#66baff
  • editor.selectionHighlightBackground#ff7f6640
  • editor.selectionHighlightBorder#00000000
  • editor.symbolHighlightBackground#1d2025
  • editor.symbolHighlightBorder#00000000
  • editor.wordHighlightBackground#ff7f6680
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#ff7f6680
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#ff333380
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#ffe6cc80
  • editorCursor.background#ff7f66
  • editorCursor.foreground#ff7f66
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#ff3344
  • editorGroup.border#00000000
  • editorGroup.dropBackground#ff7f66
  • editorGroup.emptyBackground#1d2025
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#1d2025
  • editorGroupHeader.tabsBackground#1d2025
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#ffff6680
  • editorGutter.background#1d2025
  • editorGutter.commentRangeForeground#2d2d39
  • editorGutter.deletedBackground#ff333380
  • editorGutter.foldingControlForeground#ffe6cccc
  • editorGutter.modifiedBackground#33c5ff80
  • editorHint.border#00000000
  • editorHint.foreground#3333ff
  • editorHoverWidget.background#1d2025
  • editorHoverWidget.border#ff333380
  • editorHoverWidget.foreground#faf5eb
  • editorHoverWidget.statusBarBackground#24262e
  • editorIndentGuide.activeBackground#ffe6cc80
  • editorIndentGuide.background#ffe6cc40
  • editorInfo.background#00000000
  • editorInfo.border#00000000
  • editorInfo.foreground#3333ff
  • editorLightBulb.foreground#ffe6cc80
  • editorLightBulbAutoFix.foreground#ffe6cc80
  • editorLineNumber.activeForeground#ffe6cccc
  • editorLineNumber.foreground#ffe6cc80
  • editorLink.activeForeground#99c0ff
  • editorMarkerNavigation.background#1d2025
  • editorMarkerNavigationError.background#ff3344
  • editorMarkerNavigationInfo.background#3333ff
  • editorMarkerNavigationWarning.background#ffaa33
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.commonContentForeground#ffbb9980
  • editorOverviewRuler.currentContentForeground#eeff99cc
  • editorOverviewRuler.incomingContentForeground#66baffcc
  • editorPane.background#1d2025
  • editorRuler.foreground#ff333380
  • editorSuggestWidget.background#1d2025
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.foreground#faf5eb
  • editorSuggestWidget.highlightForeground#ffe6cc
  • editorSuggestWidget.selectedBackground#2d2d39
  • editorUnnecessaryCode.border#00000000
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#ffaa33
  • editorWhitespace.foreground#ffe6cc80
  • editorWidget.background#1d2025
  • editorWidget.border#2d2d39
  • editorWidget.foreground#faf5eb
  • editorWidget.resizeBorder#2d2d39
  • errorForeground#ff3344
  • extensionBadge.remoteBackground#33c5ff
  • extensionBadge.remoteForeground#faf5eb
  • extensionButton.prominentBackground#ff3333
  • extensionButton.prominentForeground#faf5eb
  • extensionButton.prominentHoverBackground#ffbb99
  • extensionIcon.starForeground#ffe6cc
  • focusBorder#00000000
  • foreground#faf5eb
  • icon.foreground#faf5eb
  • imagePreview.border#2d2d39
  • input.background#1d2025
  • input.border#ff7f6680
  • input.foreground#faf5eb
  • input.placeholderForeground#faf5ebcc
  • inputOption.activeBackground#24262e
  • inputOption.activeBorder#ff7f66cc
  • inputOption.activeForeground#faf5eb
  • inputValidation.errorBackground#1d2025
  • inputValidation.errorBorder#ff3344
  • inputValidation.errorForeground#ff3344
  • inputValidation.infoBackground#1d2025
  • inputValidation.infoBorder#ff333380
  • inputValidation.infoForeground#3333ff
  • inputValidation.warningBackground#1d2025
  • inputValidation.warningBorder#ffaa33
  • inputValidation.warningForeground#ffaa33
  • list.activeSelectionBackground#2d2d39
  • list.activeSelectionForeground#ffe6cc
  • list.deemphasizedForeground#faf5ebcc
  • list.dropBackground#2d2d39
  • list.errorForeground#ff3344
  • list.filterMatchBackground#1d2025
  • list.filterMatchBorder#1d2025
  • list.focusBackground#2d2d39
  • list.focusForeground#faf5eb
  • list.focusOutline#00000000
  • list.highlightForeground#faf5eb
  • list.hoverBackground#2d2d39
  • list.hoverForeground#faf5eb
  • list.inactiveFocusBackground#2d2d39
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#24262e
  • list.inactiveSelectionForeground#faf5eb
  • list.invalidItemForeground#ff3333
  • list.warningForeground#ffaa33
  • listFilterWidget.background#1d2025
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#1d2025
  • menu.background#1d2025
  • menu.border#00000000
  • menu.foreground#faf5ebcc
  • menu.selectionBackground#24262e
  • menu.selectionBorder#00000000
  • menu.selectionForeground#faf5eb
  • menu.separatorBackground#1d2025
  • menubar.selectionBackground#24262e
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#faf5eb
  • merge.border#00000000
  • merge.commonContentBackground#00000000
  • merge.commonHeaderBackground#00000000
  • merge.currentContentBackground#eeff9940
  • merge.currentHeaderBackground#eeff9980
  • merge.incomingContentBackground#66baff40
  • merge.incomingHeaderBackground#66baff80
  • minimap.background#1d202580
  • minimap.errorHighlight#ff3344
  • minimap.findMatchHighlight#66baff
  • minimap.selectionHighlight#ffbb99
  • minimap.warningHighlight#ffaa33
  • minimapGutter.addedBackground#eeff99
  • minimapGutter.deletedBackground#ff3333
  • minimapGutter.modifiedBackground#66baff
  • minimapSlider.activeBackground#24262e80
  • minimapSlider.background#24262e80
  • minimapSlider.hoverBackground#24262e80
  • notebook.focusedRowBorder#ff3333
  • notebook.rowHoverBackground#24262e
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#2d2d39
  • notificationCenterHeader.foreground#faf5eb
  • notificationLink.foreground#ff7f66
  • notifications.background#24262e
  • notifications.border#00000000
  • notifications.foreground#faf5eb
  • notificationsErrorIcon.foreground#ff3344
  • notificationsInfoIcon.foreground#3333ff
  • notificationsWarningIcon.foreground#ffaa33
  • notificationToast.border#00000000
  • panel.background#1d2025
  • panel.border#00000000
  • panel.dropBorder#ff7f66
  • panelInput.border#00000000
  • panelSection.border#00000000
  • panelSection.dropBackground#33c5ff
  • panelSectionHeader.background#1d2025
  • panelSectionHeader.border#00000000
  • panelSectionHeader.foreground#faf5eb
  • panelTitle.activeBorder#ff7f66
  • panelTitle.activeForeground#ffe6cc
  • panelTitle.inactiveForeground#faf5eb
  • peekView.border#00000000
  • peekViewEditor.background#24262e
  • peekViewEditor.matchHighlightBackground#ff333340
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#2d2d39
  • peekViewResult.background#2d2d39
  • peekViewResult.fileForeground#faf5eb
  • peekViewResult.matchHighlightBackground#ff333340
  • peekViewResult.selectionBackground#ff7f6640
  • peekViewResult.selectionForeground#faf5eb
  • peekViewTitle.background#2d2d39
  • peekViewTitleDescription.foreground#faf5eb
  • peekViewTitleLabel.foreground#faf5eb
  • pickerGroup.border#00000000
  • pickerGroup.foreground#2d2d39
  • problemsErrorIcon.foreground#ff3344
  • problemsInfoIcon.foreground#3333ff
  • problemsWarningIcon.foreground#ffaa33
  • progressBar.background#ff7f66
  • quickInput.background#1d2025
  • quickInput.foreground#faf5eb
  • quickInputList.focusBackground#2d2d39
  • quickInputTitle.background#24262e
  • sash.hoverBorder#ffe6cc
  • scrollbar.shadow#24262e80
  • scrollbarSlider.activeBackground#24262e
  • scrollbarSlider.background#1d2025
  • scrollbarSlider.hoverBackground#24262e
  • searchEditor.findMatchBackground#1d2025
  • searchEditor.findMatchBorder#00000000
  • searchEditor.textInputBorder#ff333380
  • selection.background#ff333340
  • settings.checkboxBackground#1d2025
  • settings.checkboxBorder#ffbb99
  • settings.checkboxForeground#ffbb99
  • settings.dropdownBackground#1d2025
  • settings.dropdownBorder#00000000
  • settings.dropdownForeground#faf5eb
  • settings.dropdownListBorder#00000000
  • settings.focusedRowBackground#24262e
  • settings.headerForeground#faf5eb
  • settings.modifiedItemIndicator#ff3333
  • settings.numberInputBackground#1d2025
  • settings.numberInputBorder#00000000
  • settings.numberInputForeground#faf5eb
  • settings.textInputBackground#1d2025
  • settings.textInputBorder#ff333380
  • settings.textInputForeground#faf5eb
  • sideBar.background#1d2025
  • sideBar.border#00000000
  • sideBar.dropBackground#ff7f66
  • sideBar.foreground#faf5eb
  • sideBarSectionHeader.background#24262e
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#faf5eb
  • sideBarTitle.foreground#faf5eb
  • statusBar.background#1d2025
  • statusBar.border#00000000
  • statusBar.debuggingBackground#24262e
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#faf5eb
  • statusBar.foreground#faf5ebcc
  • statusBar.noFolderBackground#faf5ebcc
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#24262e
  • statusBarItem.activeBackground#24262e
  • statusBarItem.errorBackground#ff334480
  • statusBarItem.errorForeground#faf5eb
  • statusBarItem.hoverBackground#2d2d39
  • statusBarItem.prominentBackground#2d2d39
  • statusBarItem.prominentForeground#faf5eb
  • statusBarItem.prominentHoverBackground#2d2d39
  • statusBarItem.remoteBackground#33c5ff80
  • statusBarItem.remoteForeground#faf5eb
  • symbolIcon.arrayForeground#66baff
  • symbolIcon.booleanForeground#66baff
  • symbolIcon.classForeground#66baff
  • symbolIcon.colorForeground#66baff
  • symbolIcon.constantForeground#ffbb99
  • symbolIcon.constructorForeground#ffbb99
  • symbolIcon.enumeratorForeground#ff7f66
  • symbolIcon.enumeratorMemberForeground#faf5eb
  • symbolIcon.eventForeground#66baff
  • symbolIcon.fieldForeground#66baff
  • symbolIcon.fileForeground#ffe6cc
  • symbolIcon.folderForeground#ffbb99
  • symbolIcon.functionForeground#ff7f66
  • symbolIcon.interfaceForeground#66baff
  • symbolIcon.keyForeground#33c5ff
  • symbolIcon.keywordForeground#99c0ff
  • symbolIcon.methodForeground#ff7f66
  • symbolIcon.moduleForeground#99c0ff
  • symbolIcon.namespaceForeground#99c0ff
  • symbolIcon.nullForeground#33c5ff
  • symbolIcon.numberForeground#66baff
  • symbolIcon.objectForeground#33c5ff
  • symbolIcon.operatorForeground#ffe6cc
  • symbolIcon.packageForeground#ff3333
  • symbolIcon.propertyForeground#faf5eb
  • symbolIcon.referenceForeground#ffe6cc
  • symbolIcon.snippetForeground#faf5eb
  • symbolIcon.stringForeground#ffff66
  • symbolIcon.structForeground#66baff
  • symbolIcon.textForeground#faf5eb
  • symbolIcon.typeParameterForeground#faf5eb
  • symbolIcon.unitForeground#33c5ff
  • symbolIcon.variableForeground#ffbb99
  • tab.activeBackground#1d2025
  • tab.activeBorder#ff7f66
  • tab.activeBorderTop#00000000
  • tab.activeForeground#faf5eb
  • tab.activeModifiedBorder#ff3333
  • tab.border#00000000
  • tab.hoverBackground#24262e
  • tab.hoverBorder#ff7f66
  • tab.hoverForeground#faf5eb
  • tab.inactiveBackground#1d2025
  • tab.inactiveForeground#faf5eb80
  • tab.inactiveModifiedBorder#ffe6cc
  • tab.lastPinnedBorder#00000000
  • tab.unfocusedActiveBackground#1d2025
  • tab.unfocusedActiveBorder#ffbb99
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#faf5eb80
  • tab.unfocusedActiveModifiedBorder#ff3333
  • tab.unfocusedHoverBackground#24262e
  • tab.unfocusedHoverBorder#ffe6cc
  • tab.unfocusedHoverForeground#faf5eb
  • tab.unfocusedInactiveBackground#1d2025
  • tab.unfocusedInactiveForeground#faf5eb80
  • tab.unfocusedInactiveModifiedBorder#ffe6cc
  • textBlockQuote.background#24262e
  • textCodeBlock.background#24262e
  • textLink.activeForeground#ffbb99
  • textLink.foreground#ff3333
  • textSeparator.foreground#ffe6cc
  • titleBar.activeBackground#1d2025
  • titleBar.activeForeground#faf5eb
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1d2025
  • titleBar.inactiveForeground#faf5eb80
  • tree.indentGuidesStroke#ffe6cc
  • tree.tableColumnsBorder#ffe6cc
  • widget.shadow#00000000
  • window.activeBorder#1d2025
  • window.inactiveBorder#1d2025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#faf5eb80italic
variable, string constant.other.placeholder#faf5eb
constant.other.color#faf5eb
invalid, invalid.illegal#FF4040
keyword, storage.type, storage.modifier#ff7f66
keyword.control, constant.other.color#99c0ff
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#ffff66
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff3333
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ff3333
meta.block variable.other#faf5eb
support.other.variable, string.other.link#ffbb99
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#33c5ff
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#eeff99
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.inherited-class#66baff
support.type#66baff
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#eeff99
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff3333
variable.language#99c0ffitalic
entity.name.method.js#ff3333italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff3333
entity.other.attribute-name#66baff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#66baffitalic
entity.other.attribute-name.class#66baff
source.sass keyword.control#33c5ff
markup.inserted#ffff66
markup.deleted#ff3333
markup.changed#33c5ff
string.regexp#99c0ff
constant.character.escape#eeff99
*url*, *link*, *uri*#eeff99underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff3333italic
source.js constant.other.object.key.js string.unquoted.label.js#ffbb99italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff7f66
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffff66
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#33c5ff
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#ffbb99
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#eeff99
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#99c0ff
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#ffbb99
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#33c5ff
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#ffff66
text.html.markdown, punctuation.definition.list_item.markdown#faf5eb
text.html.markdown markup.inline.raw.markdown#faf5eb
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ffbb99
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff3333
markup.italic#ff3333italic
markup.bold, markup.bold string#ff3333bold
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#ff3333bold
markup.underline#ff3333underline
markup.quote punctuation.definition.blockquote.markdown#ffbb99
markup.quote#ffbb99italic
string.other.link.title.markdown#ff7f66
string.other.link.description.title.markdown#faf5eb
constant.other.reference.link.markdown#ff3333
markup.raw.block#ff7f66
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#faf5eb
variable.language.fenced.markdown#ff7f66
meta.separator#ffbb99bold
markup.table#ffbb99