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#2A2A2A
  • activityBar.border#3A3A3A
  • activityBar.dropBackground#3A3A3A
  • activityBar.foreground#F5F0E8
  • activityBar.inactiveForeground#A89984
  • activityBarBadge.background#5A5A5A
  • activityBarBadge.foreground#F5F0E8
  • badge.background#A89984a0
  • badge.foreground#2A2A2A
  • breadcrumb.activeSelectionForeground#F5F0E8
  • breadcrumb.background#3A3A3A
  • breadcrumb.focusForeground#F5F0E8
  • breadcrumb.foreground#A89984
  • breadcrumbPicker.background#2A2A2A
  • button.background#5A5A5A
  • button.foreground#F5F0E8
  • button.hoverBackground#4A4A4A
  • button.secondaryBackground#4A4A4A
  • button.secondaryForeground#F5F0E8
  • button.secondaryHoverBackground#5A5A5A
  • checkbox.background#3A3A3A
  • checkbox.border#5A5A5A
  • checkbox.foreground#A89984
  • debugConsole.errorForeground#e06c75
  • debugConsole.infoForeground#5A5A5A
  • debugConsole.sourceForeground#F5F0E8
  • debugConsole.warningForeground#A89984
  • debugConsoleInputIcon.foreground#E5D5C8
  • debugToolBar.background#3A3A3A
  • debugToolBar.border#5A5A5A
  • descriptionForeground#A89984
  • dropdown.background#3A3A3A
  • dropdown.border#5A5A5A
  • dropdown.foreground#E5D5C8
  • editor.background#2d2a2e
  • editor.findMatchBackground#98c37940
  • editor.findMatchHighlightBackground#98c37920
  • editor.findRangeHighlightBackground#32302f80
  • editor.focusedStackFrameHighlightBackground#5A5A5A40
  • editor.foreground#a89984
  • editor.hoverHighlightBackground#32302f80
  • editor.inactiveSelectionBackground#45403d60
  • editor.lineHighlightBorder#32302f
  • editor.rangeHighlightBackground#32302f80
  • editor.rangeHighlightBorder#928374
  • editor.selectionBackground#45403d80
  • editor.selectionHighlightBackground#45403d60
  • editor.stackFrameHighlightBackground#A8998440
  • editor.wordHighlightBackground#32302f80
  • editor.wordHighlightBorder#928374
  • editor.wordHighlightStrongBackground#32302f80
  • editor.wordHighlightStrongBorder#E5D5C8
  • editorBracketHighlight.foreground1#e06c75
  • editorBracketHighlight.foreground2#A89984
  • editorBracketHighlight.foreground3#98c379
  • editorBracketHighlight.foreground4#89b482
  • editorBracketHighlight.foreground5#7daea3
  • editorBracketHighlight.foreground6#ff6b6b
  • editorBracketHighlight.unexpectedBracket.foreground#e06c75
  • editorBracketMatch.background#45403d80
  • editorBracketMatch.border#928374
  • editorCodeLens.foreground#7c6f64
  • editorCursor.foreground#E5D5C8
  • editorError.foreground#e06c75
  • editorGroup.border#5A5A5A
  • editorGroup.dropBackground#5A5A5A20
  • editorGroupHeader.tabsBackground#3A3A3A
  • editorGroupHeader.tabsBorder#5A5A5A
  • editorGutter.addedBackground#98c379
  • editorGutter.background#2d2a2e
  • editorGutter.deletedBackground#e06c75
  • editorGutter.foldingControlForeground#928374
  • editorGutter.modifiedBackground#7daea3
  • editorHint.foreground#89b482
  • editorHoverWidget.background#2A2A2A
  • editorHoverWidget.border#5A5A5A
  • editorIndentGuide.activeBackground#7c6f64
  • editorIndentGuide.background#5a524c
  • editorInfo.foreground#7daea3
  • editorLineNumber.activeForeground#928374
  • editorLineNumber.foreground#7c6f64
  • editorLink.activeForeground#98c379
  • editorOverviewRuler.addedForeground#98c379
  • editorOverviewRuler.border#45403d
  • editorOverviewRuler.bracketMatchForeground#928374
  • editorOverviewRuler.commonContentForeground#E5D5C8
  • editorOverviewRuler.currentContentForeground#5A5A5A
  • editorOverviewRuler.deletedForeground#e06c75
  • editorOverviewRuler.errorForeground#e06c75
  • editorOverviewRuler.findMatchForeground#98c37940
  • editorOverviewRuler.incomingContentForeground#A89984
  • editorOverviewRuler.infoForeground#7daea3
  • editorOverviewRuler.modifiedForeground#7daea3
  • editorOverviewRuler.rangeHighlightForeground#32302f80
  • editorOverviewRuler.selectionHighlightForeground#45403d80
  • editorOverviewRuler.warningForeground#A89984
  • editorOverviewRuler.wordHighlightForeground#32302f80
  • editorOverviewRuler.wordHighlightStrongForeground#32302f80
  • editorRuler.foreground#5a524c
  • editorSuggestWidget.background#2A2A2A
  • editorSuggestWidget.border#5A5A5A
  • editorSuggestWidget.foreground#E5D5C8
  • editorSuggestWidget.highlightForeground#5A5A5A
  • editorSuggestWidget.selectedBackground#5A5A5A
  • editorWarning.foreground#A89984
  • editorWhitespace.foreground#5a524c
  • errorForeground#ff6d7e
  • extensionButton.prominentBackground#5A5A5A
  • extensionButton.prominentForeground#F5F0E8
  • extensionButton.prominentHoverBackground#4A4A4A
  • focusBorder#5A5A5A
  • foreground#E5D5C8
  • gitDecoration.addedResourceForeground#98c379
  • gitDecoration.conflictingResourceForeground#ff6b6b
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#7daea3
  • gitDecoration.submoduleResourceForeground#89b482
  • gitDecoration.untrackedResourceForeground#A89984
  • icon.foreground#F5F0E8
  • imagePreview.border#5A5A5A
  • input.background#3A3A3A00
  • input.border#5A5A5A
  • input.foreground#F5F0E8
  • input.placeholderForeground#A89984
  • inputOption.activeBorder#5A5A5A
  • inputValidation.errorBackground#b85651
  • inputValidation.errorBorder#e06c75
  • inputValidation.errorForeground#F5F0E8
  • inputValidation.infoBackground#4A4A4A
  • inputValidation.infoBorder#5A5A5A
  • inputValidation.infoForeground#F5F0E8
  • inputValidation.warningBackground#8A8A7A
  • inputValidation.warningBorder#A89984
  • inputValidation.warningForeground#F5F0E8
  • list.activeSelectionBackground#5A5A5A60
  • list.activeSelectionForeground#F5F0E8
  • list.dropBackground#3A3A3A80
  • list.errorForeground#e06c75
  • list.focusBackground#2A2A2A
  • list.focusOutline#2A2A2A
  • list.highlightForeground#5A5A5A
  • list.hoverBackground#3A3A3A00
  • list.hoverForeground#F5F0E8
  • list.inactiveFocusBackground#2A2A2A
  • list.inactiveSelectionBackground#5A5A5A48
  • list.inactiveSelectionForeground#E5D5C8
  • list.invalidItemForeground#b85651
  • list.warningForeground#A89984
  • menu.background#3A3A3A
  • menu.border#5A5A5A
  • menu.foreground#E5D5C8
  • menu.selectionBackground#5A5A5A
  • menu.selectionForeground#F5F0E8
  • menu.separatorBackground#A89984
  • menubar.selectionBackground#5A5A5A
  • menubar.selectionForeground#F5F0E8
  • merge.border#5A5A5A
  • merge.commonContentBackground#E5D5C820
  • merge.commonHeaderBackground#E5D5C840
  • merge.currentContentBackground#5A5A5A20
  • merge.currentHeaderBackground#5A5A5A40
  • merge.incomingContentBackground#A8998420
  • merge.incomingHeaderBackground#A8998440
  • notificationCenterHeader.background#3A3A3A
  • notificationCenterHeader.foreground#F5F0E8
  • notificationLink.foreground#5A5A5A
  • notifications.background#3A3A3A
  • notifications.border#5A5A5A
  • notifications.foreground#E5D5C8
  • notificationsErrorIcon.foreground#e06c75
  • notificationsInfoIcon.foreground#5A5A5A
  • notificationsWarningIcon.foreground#A89984
  • notificationToast.border#5A5A5A
  • panel.background#2A2A2A
  • panel.border#5A5A5A
  • panel.dropBackground#5A5A5A20
  • panelInput.border#5A5A5A
  • panelTitle.activeBorder#5A5A5A
  • panelTitle.activeForeground#F5F0E8
  • panelTitle.inactiveForeground#A89984
  • peekView.border#5A5A5A
  • peekViewEditor.background#3A3A3A
  • peekViewEditor.matchHighlightBackground#5A5A5A20
  • peekViewEditorGutter.background#2A2A2A
  • peekViewResult.background#2A2A2A
  • peekViewResult.fileForeground#F5F0E8
  • peekViewResult.lineForeground#E5D5C8
  • peekViewResult.matchHighlightBackground#5A5A5A20
  • peekViewResult.selectionBackground#5A5A5A
  • peekViewResult.selectionForeground#F5F0E8
  • peekViewTitle.background#5A5A5A
  • peekViewTitleDescription.foreground#A89984
  • peekViewTitleLabel.foreground#F5F0E8
  • pickerGroup.border#5A5A5A
  • pickerGroup.foreground#5A5A5A
  • problemsErrorIcon.foreground#e06c75
  • problemsInfoIcon.foreground#7daea3
  • problemsWarningIcon.foreground#A89984
  • progressBar.background#5A5A5A
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#E5D5C8
  • scrollbarSlider.background#A8998480
  • scrollbarSlider.hoverBackground#A89984
  • selection.background#5A5A5A26
  • sideBar.background#2A2A2A
  • sideBar.border#3A3A3A
  • sideBar.dropBackground#3A3A3A80
  • sideBar.foreground#E5D5C8
  • sideBarSectionHeader.background#3A3A3A
  • sideBarSectionHeader.border#5A5A5A
  • sideBarSectionHeader.foreground#F5F0E8
  • sideBarTitle.foreground#F5F0E8
  • statusBar.background#2A2A2A
  • statusBar.border#3A3A3A
  • statusBar.debuggingBackground#A89984
  • statusBar.debuggingForeground#2A2A2A
  • statusBar.foreground#E5D5C8
  • statusBar.noFolderBackground#2A2A2A
  • statusBar.noFolderBorder#3A3A3A
  • statusBar.noFolderForeground#E5D5C8
  • statusBarItem.activeBackground#5A5A5A80
  • statusBarItem.errorBackground#e06c75
  • statusBarItem.errorForeground#F5F0E8
  • statusBarItem.hoverBackground#5A5A5A60
  • statusBarItem.prominentBackground#5A5A5A
  • statusBarItem.prominentForeground#F5F0E8
  • statusBarItem.prominentHoverBackground#4A4A4A
  • statusBarItem.remoteBackground#5A5A5A
  • statusBarItem.remoteForeground#F5F0E8
  • statusBarItem.warningBackground#A89984
  • statusBarItem.warningForeground#2A2A2A
  • tab.activeBackground#3A3A3A
  • tab.activeBorder#5A5A5A
  • tab.activeBorderTop#5A5A5A
  • tab.activeForeground#F5F0E8
  • tab.activeModifiedBorder#A89984
  • tab.border#3A3A3A
  • tab.hoverBackground#5A5A5A
  • tab.inactiveBackground#2A2A2A
  • tab.inactiveForeground#A89984
  • tab.inactiveModifiedBorder#A8998460
  • tab.unfocusedActiveBackground#3A3A3A
  • tab.unfocusedActiveBorder#5A5A5A60
  • tab.unfocusedActiveForeground#E5D5C8
  • tab.unfocusedInactiveBackground#2A2A2A
  • tab.unfocusedInactiveForeground#A89984
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#5A5A5A
  • terminal.ansiBrightBlack#A89984
  • terminal.ansiBrightBlue#5A5A5A
  • terminal.ansiBrightCyan#E5D5C8
  • terminal.ansiBrightGreen#5A5A5A
  • terminal.ansiBrightMagenta#F5F0E8
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#F5F0E8
  • terminal.ansiBrightYellow#e78a4e
  • terminal.ansiCyan#E5D5C8
  • terminal.ansiGreen#5A5A5A
  • terminal.ansiMagenta#F5F0E8
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#E5D5C8
  • terminal.ansiYellow#e78a4e
  • terminal.background#2A2A2A
  • terminal.border#5A5A5A
  • terminal.foreground#E5D5C8
  • terminal.selectionBackground#5A5A5A80
  • terminal.tab.activeBorder#5A5A5A
  • terminalCursor.background#2A2A2A
  • terminalCursor.foreground#F5F0E8
  • textBlockQuote.background#3A3A3A
  • textBlockQuote.border#E5D5C8
  • textCodeBlock.background#3A3A3A
  • textLink.activeForeground#f2fffc
  • textLink.foreground#5A5A5A
  • textPreformat.foreground#A89984
  • titleBar.activeBackground#2A2A2A
  • titleBar.activeForeground#F5F0E8
  • titleBar.border#3A3A3A
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#A89984
  • toolbar.hoverBackground#4A4A4A
  • tree.indentGuidesStroke#A89984
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928374italic
variable, string constant.other.placeholder#E5D5C8
constant.other.color#E5D5C8
invalid, invalid.illegal#e06c75
keyword, storage.type, storage.modifier#e06c75
keyword.control, 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#A89984
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e06c75
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#98c379
meta.block variable.other#E5D5C8
support.other.variable, string.other.link#e06c75
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff6b6b
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#98c379
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#7daea3
support.type#7daea3
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#7daea3
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e06c75
variable.language#e06c75italic
entity.name.method.js#98c379italic
meta.class-method.js entity.name.function.js, variable.function.constructor#98c379
entity.other.attribute-name#ff6b6b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#A89984italic
entity.other.attribute-name.class#A89984
source.sass keyword.control#98c379
markup.inserted#98c379
markup.deleted#e06c75
markup.changed#ff6b6b
string.regexp#89b482
constant.character.escape#89b482
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#98c379italic
source.js constant.other.object.key.js string.unquoted.label.js#e06c75italic
source.json meta.structure.dictionary.json support.type.property-name.json#98c379
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A89984
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#7daea3
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#e06c75
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#89b482
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#7daea3
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#e06c75
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#ff6b6b
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#98c379
markup.italic#e06c75italic
markup.bold, markup.bold string#e06c75bold
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#e06c75bold
markup.underline#A89984underline
markup.strike#89b482strike
markup.quote#89b482italic
markup.raw.block#ff6b6b
markup.table#E5D5C8
text.html.markdown, punctuation.definition.list_item.markdown#E5D5C8
text.html.markdown markup.inline.raw.markdown#ff6b6b
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#928374
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#98c379
markup.italic#A89984italic
markup.bold, markup.bold string#A89984bold
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#A89984bold
markup.quote punctuation.definition.blockquote.markdown#928374
markup.quoteitalic
string.other.link.title.markdown#7daea3
string.other.link.description.title.markdown#ff6b6b
constant.other.reference.link.markdown#A89984
markup.raw.block.fenced.markdown#E5D5C8
punctuation.definition.fenced.markdown#928374
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E5D5C8
variable.language.fenced.markdown#928374
meta.separator#928374bold
markup.table#E5D5C8