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#171921
  • activityBar.border#171921
  • activityBar.dropBorder#3a4562
  • activityBar.foreground#7f8a9e
  • activityBar.inactiveForeground#7f8a9e99
  • activityBarBadge.background#ff595e
  • activityBarBadge.foreground#171921
  • badge.background#ff595e
  • badge.foreground#1d202b
  • breadcrumb.activeSelectionForeground#cdd0d8
  • breadcrumb.background#1d202b
  • breadcrumb.focusForeground#cdd0d8
  • breadcrumb.foreground#7f8a9e
  • breadcrumbPicker.background#171921
  • button.background#ff595e
  • button.foreground#171921
  • button.hoverBackground#ff595e99
  • debugExceptionWidget.background#3a4562
  • debugExceptionWidget.border#3a4562
  • debugToolBar.background#3a4562
  • debugToolBar.border#3a4562
  • descriptionForeground#cdd0d8
  • diffEditor.border#3a4562
  • diffEditor.insertedTextBackground#72ddf722
  • diffEditor.insertedTextBorder#72ddf744
  • diffEditor.removedTextBackground#ff2d3b22
  • diffEditor.removedTextBorder#ff2d3b44
  • dropdown.background#3a4562
  • dropdown.border#3a4562
  • dropdown.foreground#cdd0d8
  • dropdown.listBackground#171921
  • editor.background#1d202b
  • editor.findMatchBackground#7f8a9e77
  • editor.findMatchBorder#d8e8ff
  • editor.findMatchHighlightBackground#7f8a9e77
  • editor.findRangeHighlightBackground#7f8a9e77
  • editor.foreground#a9aab5
  • editor.hoverHighlightBackground#7f8a9e77
  • editor.inactiveSelectionBackground#7f8a9e77
  • editor.lineHighlightBackground#3a4562
  • editor.lineHighlightBorder#3a4562
  • editor.rangeHighlightBackground#3a4562
  • editor.selectionBackground#3a4562
  • editor.selectionForeground#a9aab5
  • editor.selectionHighlightBackground#d8e8ff15
  • editor.wordHighlightBackground#7f8a9e77
  • editor.wordHighlightStrongBackground#7f8a9e77
  • editorBracketMatch.background#d8e8ff20
  • editorBracketMatch.border#d8e8ff70
  • editorCodeLens.foreground#cdd0d8
  • editorCursor.background#1d202b
  • editorCursor.foreground#ff595e
  • editorError.foreground#ff2d3b
  • editorGroup.border#3a4562
  • editorGroup.dropBackground#3a4562
  • editorGroup.emptyBackground#1d202b
  • editorGroup.focusedEmptyBorder#1d202b
  • editorGroupHeader.noTabsBackground#1d202b
  • editorGroupHeader.tabsBackground#171921
  • editorGroupHeader.tabsBorder#171921
  • editorGutter.addedBackground#72ddf7
  • editorGutter.background#1d202b
  • editorGutter.deletedBackground#ff2d3b
  • editorGutter.modifiedBackground#5c7cfa
  • editorHint.foreground#ff595e
  • editorHoverWidget.background#3a4562
  • editorHoverWidget.border#3a4562
  • editorIndentGuide.activeBackground#7f8a9e77
  • editorIndentGuide.background#7f8a9e33
  • editorInfo.foreground#5c7cfa
  • editorInlayHint.background#171921
  • editorInlayHint.foreground#7f8a9e99
  • editorLineNumber.activeForeground#7f8a9e
  • editorLineNumber.foreground#7f8a9e55
  • editorLink.activeForeground#ff595e
  • editorMarkerNavigation.background#3a4562
  • editorMarkerNavigationError.background#ff2d3b
  • editorMarkerNavigationInfo.background#5c7cfa
  • editorMarkerNavigationWarning.background#ff595e
  • editorOverviewRuler.addedForeground#72ddf7
  • editorOverviewRuler.border#3a4562
  • editorOverviewRuler.bracketMatchForeground#ff595e
  • editorOverviewRuler.commonContentForeground#3a4562
  • editorOverviewRuler.currentContentForeground#5c7cfa
  • editorOverviewRuler.deletedForeground#ff2d3b
  • editorOverviewRuler.errorForeground#ff2d3b
  • editorOverviewRuler.findMatchForeground#ff595e
  • editorOverviewRuler.incomingContentForeground#72ddf7
  • editorOverviewRuler.infoForeground#5c7cfa
  • editorOverviewRuler.modifiedForeground#5c7cfa
  • editorOverviewRuler.rangeHighlightForeground#7f8a9e
  • editorOverviewRuler.selectionHighlightForeground#7f8a9e
  • editorOverviewRuler.warningForeground#ffca3a
  • editorOverviewRuler.wordHighlightForeground#7f8a9e
  • editorOverviewRuler.wordHighlightStrongForeground#7f8a9e
  • editorPane.background#1d202b
  • editorRuler.foreground#3a4562
  • editorSuggestWidget.background#3a4562
  • editorSuggestWidget.border#3a4562
  • editorSuggestWidget.foreground#cdd0d8
  • editorSuggestWidget.highlightForeground#ff595e
  • editorSuggestWidget.selectedBackground#1d202b
  • editorWarning.foreground#ffca3a
  • editorWhitespace.foreground#7f8a9e77
  • editorWidget.background#171921
  • editorWidget.border#171921
  • errorForeground#ff2d3b
  • extensionButton.prominentBackground#ff595e
  • extensionButton.prominentForeground#1d202b
  • extensionButton.prominentHoverBackground#ff595e99
  • focusBorder#7f8a9e77
  • foreground#7f8a9e
  • gitDecoration.conflictingResourceForeground#ff2d3b
  • gitDecoration.deletedResourceForeground#ff2d3b
  • gitDecoration.ignoredResourceForeground#7f8a9e77
  • gitDecoration.modifiedResourceForeground#5c7cfa
  • gitDecoration.untrackedResourceForeground#72ddf7
  • input.background#1d202b
  • input.border#3a4562
  • input.foreground#cdd0d8
  • input.placeholderForeground#7f8a9e77
  • inputOption.activeBorder#3a4562
  • inputValidation.errorBackground#1d202b
  • inputValidation.errorBorder#ff2d3b
  • inputValidation.errorForeground#ff2d3b
  • inputValidation.infoBackground#1d202b
  • inputValidation.infoBorder#5c7cfa
  • inputValidation.infoForeground#5c7cfa
  • inputValidation.warningBackground#1d202b
  • inputValidation.warningBorder#ffca3a
  • inputValidation.warningForeground#ffca3a
  • list.activeSelectionBackground#3a4562
  • list.activeSelectionForeground#cdd0d8
  • list.dropBackground#3a4562
  • list.errorForeground#ff2d3b
  • list.focusBackground#3a4562
  • list.focusForeground#cdd0d8
  • list.highlightForeground#ff595e
  • list.hoverBackground#3a4562
  • list.hoverForeground#cdd0d8
  • list.inactiveFocusBackground#3a4562
  • list.inactiveSelectionBackground#3a4562
  • list.inactiveSelectionForeground#cdd0d8
  • list.invalidItemForeground#ff2d3b
  • list.warningForeground#ffca3a
  • listFilterWidget.background#3a4562
  • listFilterWidget.noMatchesOutline#ff2d3b
  • listFilterWidget.outline#3a4562
  • menu.background#171921
  • menu.foreground#7f8a9e
  • menu.selectionBackground#3a4562
  • menu.selectionForeground#cdd0d8
  • menubar.selectionBackground#3a4562
  • menubar.selectionForeground#cdd0d8
  • merge.border#7f8a9e
  • merge.commonContentBackground#3a456255
  • merge.commonHeaderBackground#3a456277
  • merge.currentContentBackground#5c7cfa22
  • merge.currentHeaderBackground#5c7cfa77
  • merge.incomingContentBackground#72ddf722
  • merge.incomingHeaderBackground#72ddf777
  • notificationCenter.border#171921
  • notificationCenterHeader.background#171921
  • notificationCenterHeader.foreground#cdd0d8
  • notificationLink.foreground#cdd0d8
  • notifications.background#171921
  • notifications.border#171921
  • notifications.foreground#cdd0d8
  • notificationToast.border#171921
  • panel.background#171921
  • panel.border#1d202b
  • panel.dropBorder#3a4562
  • panelInput.border#7f8a9e
  • panelSection.border#3a4562
  • panelSection.dropBackground#3a4562
  • panelSectionHeader.background#1d202b
  • panelSectionHeader.foreground#ff595e
  • panelTitle.activeBorder#ff595e
  • panelTitle.activeForeground#cdd0d8
  • panelTitle.inactiveForeground#7f8a9e
  • peekView.border#ff595e
  • peekViewEditor.background#3a4562
  • peekViewEditor.matchHighlightBackground#7f8a9e
  • peekViewEditor.matchHighlightBorder#ff595e
  • peekViewEditorGutter.background#1d202b
  • peekViewResult.background#3a4562
  • peekViewResult.fileForeground#7f8a9e
  • peekViewResult.lineForeground#cdd0d8
  • peekViewResult.matchHighlightBackground#ff595e33
  • peekViewResult.selectionBackground#3a4562
  • peekViewResult.selectionForeground#cdd0d8
  • peekViewTitle.background#3a4562
  • peekViewTitleDescription.foreground#7f8a9e
  • peekViewTitleLabel.foreground#7f8a9e
  • pickerGroup.border#3a4562
  • pickerGroup.foreground#ff595e
  • progressBar.background#ff595e
  • scrollbar.shadow#05050a
  • scrollbarSlider.activeBackground#7f8a9e77
  • scrollbarSlider.background#7f8a9e55
  • scrollbarSlider.hoverBackground#7f8a9e99
  • selection.background#7f8a9e77
  • settings.checkboxBackground#3a4562
  • settings.checkboxBorder#3a4562
  • settings.checkboxForeground#cdd0d8
  • settings.dropdownBackground#3a4562
  • settings.dropdownBorder#3a4562
  • settings.dropdownForeground#cdd0d8
  • settings.dropdownListBorder#3a4562
  • settings.headerForeground#cdd0d8
  • settings.modifiedItemIndicator#5c7cfa
  • settings.numberInputBackground#3a4562
  • settings.numberInputBorder#3a4562
  • settings.numberInputForeground#cdd0d8
  • settings.textInputBackground#3a4562
  • settings.textInputBorder#3a4562
  • settings.textInputForeground#cdd0d8
  • sideBar.background#171921
  • sideBar.foreground#7f8a9e
  • sideBarSectionHeader.background#1d202b
  • sideBarSectionHeader.border#171921
  • sideBarSectionHeader.foreground#ff595e
  • sideBarTitle.foreground#ff595e
  • statusBar.background#171921
  • statusBar.border#171921
  • statusBar.debuggingBackground#171921
  • statusBar.debuggingForeground#7f8a9e
  • statusBar.foreground#7f8a9e
  • statusBar.noFolderBackground#171921
  • statusBar.noFolderForeground#7f8a9e
  • statusBarItem.activeBackground#3a4562
  • statusBarItem.hoverBackground#1d202b
  • statusBarItem.remoteBackground#171921
  • statusBarItem.remoteForeground#7f8a9e
  • tab.activeBackground#1d202b
  • tab.activeBorder#ff595e
  • tab.activeBorderTop#171921
  • tab.activeForeground#cdd0d8
  • tab.border#171921
  • tab.hoverBackground#3a4562
  • tab.hoverBorder#ff595e
  • tab.inactiveBackground#171921
  • tab.inactiveForeground#cdd0d877
  • tab.unfocusedActiveBackground#1d202b
  • tab.unfocusedActiveBorder#ff595e77
  • tab.unfocusedActiveBorderTop#1d202b
  • tab.unfocusedActiveForeground#cdd0d8
  • tab.unfocusedHoverBackground#1d202b
  • tab.unfocusedHoverBorder#ff595e77
  • tab.unfocusedInactiveForeground#cdd0d877
  • terminal.ansiBlack#3a4562
  • terminal.ansiBlue#5c7cfa
  • terminal.ansiBrightBlack#4b4b57
  • terminal.ansiBrightBlue#5c7cfa
  • terminal.ansiBrightCyan#5c7cfa
  • terminal.ansiBrightGreen#72ddf7
  • terminal.ansiBrightMagenta#ff595e
  • terminal.ansiBrightRed#ff2d3b
  • terminal.ansiBrightWhite#a9aab5
  • terminal.ansiBrightYellow#ff595e
  • terminal.ansiCyan#5c7cfa
  • terminal.ansiGreen#72ddf7
  • terminal.ansiMagenta#ff595e
  • terminal.ansiRed#ff2d3b
  • terminal.ansiWhite#a9aab5
  • terminal.ansiYellow#ff595e
  • terminal.background#171921
  • terminal.border#171921
  • terminal.foreground#a9aab5
  • terminal.selectionBackground#7f8a9e33
  • terminalCursor.background#ff595e
  • terminalCursor.foreground#ff595e
  • textBlockQuote.background#3a4562
  • textBlockQuote.border#3a4562
  • textCodeBlock.background#171921
  • textLink.activeForeground#ff595e
  • textLink.foreground#ff595e
  • textPreformat.foreground#cdd0d8
  • textSeparator.foreground#cdd0d8
  • titleBar.activeBackground#171921
  • titleBar.activeForeground#cdd0d8
  • titleBar.border#171921
  • titleBar.inactiveBackground#171921
  • titleBar.inactiveForeground#7f8a9e
  • tree.indentGuidesStroke#3a4562
  • walkThrough.embeddedEditorBackground#171921
  • welcomePage.buttonBackground#3a4562
  • welcomePage.buttonHoverBackground#3a456299
  • widget.shadow#05050a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a9aab5
comment, punctuation.definition.comment#7f8a9e99italic
variable, string constant.other.placeholder, source#a9aab5
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ff595e
invalid, invalid.illegal#ff2d3b
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#ff595e
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#a9aab5
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#ff9f1c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#5c7cfa
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffca3a
meta.block variable.other#a9aab5
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a9aab5
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, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#72ddf7
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#ffca3a
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#5c7cfa
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, support.type.property-name, support.variable.object.node, support.variable.object.process#5c7cfa
entity.name.module.js, variable.import.parameter.js#ff2d3b
variable.language#5c7cfaitalic
entity.name.method.js#5c7cfaitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#5c7cfa
entity.other.attribute-name#ff9f1c
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff9f1c
entity.other.attribute-name.class, punctuation.definition.entity.css#ff9f1c
source.sass keyword.control#5c7cfa
markup.inserted#72ddf7
markup.deleted#ff2d3b
markup.changed#ff595e
string.regexp#ff9f1c
constant.character.escape#5c7cfa
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#5c7cfa
source.js constant.other.object.key.js string.unquoted.label.js#ff2d3bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#5c7cfa
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5c7cfa
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#ff9f1c
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#5c7cfa
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#ff9f1c
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#5c7cfa
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#ff9f1c
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#5c7cfa
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#ff9f1c
markup.italic#ff2d3bitalic
markup.bold#ff2d3bbold
markup.underline#ff595eunderline
markup.strike#ff595eitalic
markup.quote#5c7cfaitalic
markup.raw.block#ff9f1c
markup.table#5c7cfa
text.html.markdown, punctuation.definition.list_item.markdown#a9aab5
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#5c7cfa
text.html.markdown meta.dummy.line-break#a9aab5
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#72ddf7
markup.quote, punctuation.definition.blockquote.markdown#5c7cfaitalic
string.other.link.title.markdown#ff595eunderline
markup.raw.block.fenced.markdown#cdd0d8
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a9aab5
variable.language.fenced.markdown#a9aab5
meta.separator#a9aab5
token.info-token#5c7cfa
token.warn-token#ff595e
token.error-token#ff2d3b
token.debug-token#ff595e
storage.type.error.go#5c7cfa
punctuation.other.period.go#ff9f1c