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#0e1424
  • activityBar.border#171c28
  • activityBar.dropBorder#3c4d72
  • activityBar.foreground#8695b7
  • activityBar.inactiveForeground#8695b799
  • activityBarBadge.background#5bcc7d
  • activityBarBadge.foreground#171c28
  • badge.background#5bcc7d
  • badge.foreground#0d111b
  • breadcrumb.activeSelectionForeground#d7dce2
  • breadcrumb.background#0d111b
  • breadcrumb.focusForeground#d7dce2
  • breadcrumb.foreground#8695b7
  • breadcrumbPicker.background#171c28
  • button.background#5bcc7d
  • button.foreground#171c28
  • button.hoverBackground#5bcc7d99
  • debugExceptionWidget.background#2f3b54
  • debugExceptionWidget.border#2f3b54
  • debugToolBar.background#2f3b54
  • debugToolBar.border#2f3b54
  • descriptionForeground#d7dce2
  • diffEditor.border#2f3b54
  • diffEditor.insertedTextBackground#bae67e22
  • diffEditor.insertedTextBorder#bae67e44
  • diffEditor.removedTextBackground#ef6b7322
  • diffEditor.removedTextBorder#ef6b7344
  • dropdown.background#2f3b54
  • dropdown.border#2f3b54
  • dropdown.foreground#d7dce2
  • dropdown.listBackground#171c28
  • editor.background#0d111b
  • editor.findMatchBackground#8695b777
  • editor.findMatchBorder#5bcc7d
  • editor.findMatchHighlightBackground#8695b755
  • editor.findMatchHighlightBorder#5bcc7d77
  • editor.findRangeHighlightBackground#8695b755
  • editor.findRangeHighlightBorder#5bcc7d77
  • editor.foreground#a2aabc
  • editor.hoverHighlightBackground#8695b799
  • editor.inactiveSelectionBackground#8695b755
  • editor.lineHighlightBackground#2f3b54
  • editor.lineHighlightBorder#2f3b54
  • editor.rangeHighlightBackground#2f3b54
  • editor.rangeHighlightBorder#8695b755
  • editor.selectionBackground#2f3b54
  • editor.selectionForeground#a2aabc
  • editor.selectionHighlightBackground#2f3b5499
  • editor.selectionHighlightBorder#8695b755
  • editor.wordHighlightBackground#8695b755
  • editor.wordHighlightBorder#8695b7
  • editor.wordHighlightStrongBackground#8695b755
  • editor.wordHighlightStrongBorder#5bcc7d
  • editorBracketMatch.background#8695b755
  • editorBracketMatch.border#5bcc7d
  • editorCodeLens.foreground#d7dce2
  • editorCursor.background#0d111b
  • editorCursor.foreground#5bcc7d
  • editorError.foreground#ef6b73
  • editorGroup.border#2f3b54
  • editorGroup.dropBackground#2f3b54
  • editorGroup.emptyBackground#0d111b
  • editorGroup.focusedEmptyBorder#0d111b
  • editorGroupHeader.noTabsBackground#0d111b
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#171c28
  • editorGutter.addedBackground#bae67e
  • editorGutter.background#0d111b
  • editorGutter.deletedBackground#ef6b73
  • editorGutter.modifiedBackground#5ccfe6
  • editorHint.foreground#5bcc7d
  • editorHoverWidget.background#2f3b54
  • editorHoverWidget.border#2f3b54
  • editorIndentGuide.activeBackground#8695b755
  • editorIndentGuide.background#8695b733
  • editorInfo.foreground#5ccfe6
  • editorLineNumber.activeForeground#8695b7
  • editorLineNumber.foreground#8695b755
  • editorLink.activeForeground#5bcc7d
  • editorMarkerNavigation.background#2f3b54
  • editorMarkerNavigationError.background#ef6b73
  • editorMarkerNavigationInfo.background#5ccfe6
  • editorMarkerNavigationWarning.background#5bcc7d
  • editorOverviewRuler.addedForeground#bae67e
  • editorOverviewRuler.border#2f3b54
  • editorOverviewRuler.bracketMatchForeground#5bcc7d
  • editorOverviewRuler.commonContentForeground#2f3b54
  • editorOverviewRuler.currentContentForeground#5ccfe6
  • editorOverviewRuler.deletedForeground#ef6b73
  • editorOverviewRuler.errorForeground#ef6b73
  • editorOverviewRuler.findMatchForeground#5bcc7d
  • editorOverviewRuler.incomingContentForeground#bae67e
  • editorOverviewRuler.infoForeground#5ccfe6
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.rangeHighlightForeground#8695b7
  • editorOverviewRuler.selectionHighlightForeground#8695b7
  • editorOverviewRuler.warningForeground#46d471
  • editorOverviewRuler.wordHighlightForeground#8695b7
  • editorOverviewRuler.wordHighlightStrongForeground#8695b7
  • editorPane.background#101624
  • editorRuler.foreground#2f3b54
  • editorSuggestWidget.background#2f3b54
  • editorSuggestWidget.border#2f3b54
  • editorSuggestWidget.foreground#d7dce2
  • editorSuggestWidget.highlightForeground#5bcc7d
  • editorSuggestWidget.selectedBackground#0d111b
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#8695b777
  • editorWidget.background#171c28
  • editorWidget.border#171c28
  • errorForeground#ef6b73
  • extensionButton.prominentBackground#5bcc7d
  • extensionButton.prominentForeground#0d111b
  • extensionButton.prominentHoverBackground#5bcc7d99
  • focusBorder#8695b777
  • foreground#8695b7
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#ef6b73
  • gitDecoration.ignoredResourceForeground#8695b777
  • gitDecoration.modifiedResourceForeground#5ccfe6
  • gitDecoration.untrackedResourceForeground#bae67e
  • input.background#0d111b
  • input.border#2f3b54
  • input.foreground#d7dce2
  • input.placeholderForeground#8695b777
  • inputOption.activeBorder#2f3b54
  • inputValidation.errorBackground#0d111b
  • inputValidation.errorBorder#ef6b73
  • inputValidation.errorForeground#ef6b73
  • inputValidation.infoBackground#0d111b
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.infoForeground#5ccfe6
  • inputValidation.warningBackground#0d111b
  • inputValidation.warningBorder#46d471
  • inputValidation.warningForeground#46d471
  • list.activeSelectionBackground#2f3b54
  • list.activeSelectionForeground#d7dce2
  • list.dropBackground#2f3b54
  • list.errorForeground#ef6b73
  • list.focusBackground#2f3b54
  • list.focusForeground#d7dce2
  • list.highlightForeground#5bcc7d
  • list.hoverBackground#2f3b54
  • list.hoverForeground#d7dce2
  • list.inactiveFocusBackground#2f3b54
  • list.inactiveSelectionBackground#2f3b54
  • list.inactiveSelectionForeground#d7dce2
  • list.invalidItemForeground#ef6b73
  • list.warningForeground#46d471
  • listFilterWidget.background#2f3b54
  • listFilterWidget.noMatchesOutline#ef6b73
  • listFilterWidget.outline#2f3b54
  • menu.background#171c28
  • menu.foreground#8695b7
  • menu.selectionBackground#2f3b54
  • menu.selectionForeground#d7dce2
  • menubar.selectionBackground#2f3b54
  • menubar.selectionForeground#d7dce2
  • merge.border#8695b7
  • merge.commonContentBackground#2f3b5455
  • merge.commonHeaderBackground#2f3b5477
  • merge.currentContentBackground#5ccfe622
  • merge.currentHeaderBackground#5ccfe677
  • merge.incomingContentBackground#bae67e22
  • merge.incomingHeaderBackground#bae67e77
  • notificationCenter.border#171c28
  • notificationCenterHeader.background#171c28
  • notificationCenterHeader.foreground#d7dce2
  • notificationLink.foreground#d7dce2
  • notifications.background#171c28
  • notifications.border#171c28
  • notifications.foreground#d7dce2
  • notificationToast.border#171c28
  • panel.background#171c28
  • panel.border#0d111b
  • panel.dropBorder#2f3b54
  • panelInput.border#8695b7
  • panelSection.border#2f3b54
  • panelSection.dropBackground#2f3b54
  • panelSectionHeader.background#0d111b
  • panelSectionHeader.foreground#5bcc7d
  • panelTitle.activeBorder#5bcc7d
  • panelTitle.activeForeground#d7dce2
  • panelTitle.inactiveForeground#8695b7
  • peekView.border#5bcc7d
  • peekViewEditor.background#2f3b54
  • peekViewEditor.matchHighlightBackground#8695b7
  • peekViewEditor.matchHighlightBorder#5bcc7d
  • peekViewEditorGutter.background#0d111b
  • peekViewResult.background#2f3b54
  • peekViewResult.fileForeground#8695b7
  • peekViewResult.lineForeground#d7dce2
  • peekViewResult.matchHighlightBackground#5bcc7d33
  • peekViewResult.selectionBackground#2f3b54
  • peekViewResult.selectionForeground#d7dce2
  • peekViewTitle.background#2f3b54
  • peekViewTitleDescription.foreground#8695b7
  • peekViewTitleLabel.foreground#8695b7
  • pickerGroup.border#2f3b54
  • pickerGroup.foreground#5bcc7d
  • progressBar.background#5bcc7d
  • scrollbar.shadow#00030F
  • scrollbarSlider.activeBackground#8695b777
  • scrollbarSlider.background#8695b755
  • scrollbarSlider.hoverBackground#8695b799
  • selection.background#8695b777
  • settings.checkboxBackground#2f3b54
  • settings.checkboxBorder#2f3b54
  • settings.checkboxForeground#d7dce2
  • settings.dropdownBackground#2f3b54
  • settings.dropdownBorder#2f3b54
  • settings.dropdownForeground#d7dce2
  • settings.dropdownListBorder#2f3b54
  • settings.headerForeground#d7dce2
  • settings.modifiedItemIndicator#5ccfe6
  • settings.numberInputBackground#2f3b54
  • settings.numberInputBorder#2f3b54
  • settings.numberInputForeground#d7dce2
  • settings.textInputBackground#2f3b54
  • settings.textInputBorder#2f3b54
  • settings.textInputForeground#d7dce2
  • sideBar.background#131a29
  • sideBar.foreground#8695b7
  • sideBarSectionHeader.background#0d111b
  • sideBarSectionHeader.border#3a486b
  • sideBarSectionHeader.foreground#5bcc7d
  • sideBarTitle.foreground#5bcc7d
  • statusBar.background#171c28
  • statusBar.border#171c28
  • statusBar.debuggingBackground#171c28
  • statusBar.debuggingForeground#8695b7
  • statusBar.foreground#8695b7
  • statusBar.noFolderBackground#171c28
  • statusBar.noFolderForeground#8695b7
  • statusBarItem.activeBackground#2f3b54
  • statusBarItem.hoverBackground#0d111b
  • statusBarItem.remoteBackground#171c28
  • statusBarItem.remoteForeground#8695b7
  • tab.activeBackground#0d111b
  • tab.activeBorder#5bcc7d
  • tab.activeBorderTop#171c28
  • tab.activeForeground#d7dce2
  • tab.border#171c28
  • tab.hoverBackground#2f3b54
  • tab.hoverBorder#5bcc7d
  • tab.inactiveBackground#171c28
  • tab.inactiveForeground#d7dce277
  • tab.unfocusedActiveBackground#0d111b
  • tab.unfocusedActiveBorder#5bcc7d77
  • tab.unfocusedActiveBorderTop#0d111b
  • tab.unfocusedActiveForeground#d7dce2
  • tab.unfocusedHoverBackground#0d111b
  • tab.unfocusedHoverBorder#5bcc7d77
  • tab.unfocusedInactiveForeground#d7dce277
  • terminal.ansiBlack#2f3b54
  • terminal.ansiBlue#5ccfe6
  • terminal.ansiBrightBlack#444a5e
  • terminal.ansiBrightBlue#5ccfe6
  • terminal.ansiBrightCyan#5ccfe6
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#c3a6ff
  • terminal.ansiBrightRed#ef6b73
  • terminal.ansiBrightWhite#a2aabc
  • terminal.ansiBrightYellow#5bcc7d
  • terminal.ansiCyan#5ccfe6
  • terminal.ansiGreen#bae67e
  • terminal.ansiMagenta#c3a6ff
  • terminal.ansiRed#ef6b73
  • terminal.ansiWhite#a2aabc
  • terminal.ansiYellow#5bcc7d
  • terminal.background#171c28
  • terminal.border#171c28
  • terminal.foreground#a2aabc
  • terminal.selectionBackground#8695b733
  • terminalCursor.background#5bcc7d
  • terminalCursor.foreground#5bcc7d
  • textBlockQuote.background#2f3b54
  • textBlockQuote.border#2f3b54
  • textCodeBlock.background#171c28
  • textLink.activeForeground#5bcc7d
  • textLink.foreground#5bcc7d
  • textPreformat.foreground#d7dce2
  • textSeparator.foreground#d7dce2
  • titleBar.activeBackground#171c28
  • titleBar.activeForeground#d7dce2
  • titleBar.border#171c28
  • titleBar.inactiveBackground#171c28
  • titleBar.inactiveForeground#8695b7
  • tree.indentGuidesStroke#2f3b54
  • walkThrough.embeddedEditorBackground#171c28
  • welcomePage.buttonBackground#2f3b54
  • welcomePage.buttonHoverBackground#2f3b5499
  • widget.shadow#00030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a2aabc
comment, punctuation.definition.comment#8695b799italic
variable, string constant.other.placeholder, source#7793d4
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#c3a6ff
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#c3a6ff
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#a2aabc
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#5bcc7d
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#5ccfe6
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#5bcc7d
meta.block variable.other#a2aabc
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a2aabc
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#bae67e
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#ffd580
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#5ccfe6
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#5ccfe6
entity.name.module.js, variable.import.parameter.js#ef6b73
variable.language#5ccfe6italic
entity.name.method.js#5ccfe6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#5ccfe6
entity.other.attribute-name#5bcc7d
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5bcc7d
entity.other.attribute-name.class, punctuation.definition.entity.css#5bcc7d
source.sass keyword.control#5ccfe6
markup.inserted#bae67e
markup.deleted#ef6b73
markup.changed#c3a6ff
string.regexp#bae67e
constant.character.escape#bae67e
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#5ccfe6
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#5ccfe6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ccfe6
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#5bcc7d
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#5ccfe6
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#5bcc7d
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#5ccfe6
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#5bcc7d
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#5ccfe6
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#5bcc7d
markup.italic#ef6b73italic
markup.bold#ef6b73bold
markup.underline#c3a6ffunderline
markup.strike#5bcc7ditalic
markup.quote#5ccfe6italic
markup.raw.block#5bcc7d
markup.table#5ccfe6
text.html.markdown, punctuation.definition.list_item.markdown#a2aabc
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#5ccfe6
text.html.markdown meta.dummy.line-break#a2aabc
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#bae67e
markup.quote, punctuation.definition.blockquote.markdown#5ccfe6italic
string.other.link.title.markdown#5bcc7dunderline
markup.raw.block.fenced.markdown#d7dce2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a2aabc
variable.language.fenced.markdown#a2aabc
meta.separator#a2aabc
token.info-token#5ccfe6
token.warn-token#5bcc7d
token.error-token#ef6b73
token.debug-token#c3a6ff
storage.type.error.go#5ccfe6
punctuation.other.period.go#5bcc7d