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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#faf0eb80italic
variable, string constant.other.placeholder#faf0eb
constant.other.color#faf0eb
invalid, invalid.illegal#FF4040
keyword, storage.type, storage.modifier#ff7366
keyword.control, constant.other.color#ffdd99
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#66ffb3
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#faf0eb
support.other.variable, string.other.link#ffaa99
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff9933
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#99ffd5
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#ffbf66
support.type#ffbf66
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#99ffd5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff3333
variable.language#ffdd99italic
entity.name.method.js#ff3333italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff3333
entity.other.attribute-name#ffbf66
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffbf66italic
entity.other.attribute-name.class#ffbf66
source.sass keyword.control#ff9933
markup.inserted#66ffb3
markup.deleted#ff3333
markup.changed#ff9933
string.regexp#ffdd99
constant.character.escape#99ffd5
*url*, *link*, *uri*#99ffd5underline
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#ffaa99italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff7366
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#66ffb3
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#ff9933
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#ffaa99
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#99ffd5
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#ffdd99
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#ffaa99
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#ff9933
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#66ffb3
text.html.markdown, punctuation.definition.list_item.markdown#faf0eb
text.html.markdown markup.inline.raw.markdown#faf0eb
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ffaa99
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#ffaa99
markup.quote#ffaa99italic
string.other.link.title.markdown#ff7366
string.other.link.description.title.markdown#faf0eb
constant.other.reference.link.markdown#ff3333
markup.raw.block#ff7366
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#faf0eb
variable.language.fenced.markdown#ff7366
meta.separator#ffaa99bold
markup.table#ffaa99
Tarren's Theme Collection by Tarren - VS Code Theme