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#0f1929
  • activityBar.border#0f1929
  • activityBar.dropBorder#234677
  • activityBar.foreground#678db1
  • activityBar.inactiveForeground#678db199
  • activityBarBadge.background#ff595e
  • activityBarBadge.foreground#0f1929
  • badge.background#ff595e
  • badge.foreground#132035
  • breadcrumb.activeSelectionForeground#c6d1df
  • breadcrumb.background#132035
  • breadcrumb.focusForeground#c6d1df
  • breadcrumb.foreground#678db1
  • breadcrumbPicker.background#0f1929
  • button.background#ff595e
  • button.foreground#0f1929
  • button.hoverBackground#ff595e99
  • debugExceptionWidget.background#234677
  • debugExceptionWidget.border#234677
  • debugToolBar.background#234677
  • debugToolBar.border#234677
  • descriptionForeground#c6d1df
  • diffEditor.border#234677
  • diffEditor.insertedTextBackground#90e0ef22
  • diffEditor.insertedTextBorder#90e0ef44
  • diffEditor.removedTextBackground#ff2d3b22
  • diffEditor.removedTextBorder#ff2d3b44
  • dropdown.background#234677
  • dropdown.border#234677
  • dropdown.foreground#c6d1df
  • dropdown.listBackground#0f1929
  • editor.background#132035
  • editor.findMatchBackground#678db177
  • editor.findMatchBorder#d1f1ff
  • editor.findMatchHighlightBackground#678db177
  • editor.findRangeHighlightBackground#678db177
  • editor.foreground#a3a9bb
  • editor.hoverHighlightBackground#678db177
  • editor.inactiveSelectionBackground#678db177
  • editor.lineHighlightBackground#234677
  • editor.lineHighlightBorder#234677
  • editor.rangeHighlightBackground#234677
  • editor.selectionBackground#234677
  • editor.selectionForeground#a3a9bb
  • editor.selectionHighlightBackground#d1f1ff15
  • editor.wordHighlightBackground#678db177
  • editor.wordHighlightStrongBackground#678db177
  • editorBracketMatch.background#d1f1ff20
  • editorBracketMatch.border#d1f1ff70
  • editorCodeLens.foreground#c6d1df
  • editorCursor.background#132035
  • editorCursor.foreground#ff595e
  • editorError.foreground#ff2d3b
  • editorGroup.border#234677
  • editorGroup.dropBackground#234677
  • editorGroup.emptyBackground#132035
  • editorGroup.focusedEmptyBorder#132035
  • editorGroupHeader.noTabsBackground#132035
  • editorGroupHeader.tabsBackground#0f1929
  • editorGroupHeader.tabsBorder#0f1929
  • editorGutter.addedBackground#90e0ef
  • editorGutter.background#132035
  • editorGutter.deletedBackground#ff2d3b
  • editorGutter.modifiedBackground#00bbf9
  • editorHint.foreground#ff595e
  • editorHoverWidget.background#234677
  • editorHoverWidget.border#234677
  • editorIndentGuide.activeBackground#678db177
  • editorIndentGuide.background#678db133
  • editorInfo.foreground#00bbf9
  • editorInlayHint.background#0f1929
  • editorInlayHint.foreground#678db199
  • editorLineNumber.activeForeground#678db1
  • editorLineNumber.foreground#678db155
  • editorLink.activeForeground#ff595e
  • editorMarkerNavigation.background#234677
  • editorMarkerNavigationError.background#ff2d3b
  • editorMarkerNavigationInfo.background#00bbf9
  • editorMarkerNavigationWarning.background#ff595e
  • editorOverviewRuler.addedForeground#90e0ef
  • editorOverviewRuler.border#234677
  • editorOverviewRuler.bracketMatchForeground#ff595e
  • editorOverviewRuler.commonContentForeground#234677
  • editorOverviewRuler.currentContentForeground#00bbf9
  • editorOverviewRuler.deletedForeground#ff2d3b
  • editorOverviewRuler.errorForeground#ff2d3b
  • editorOverviewRuler.findMatchForeground#ff595e
  • editorOverviewRuler.incomingContentForeground#90e0ef
  • editorOverviewRuler.infoForeground#00bbf9
  • editorOverviewRuler.modifiedForeground#00bbf9
  • editorOverviewRuler.rangeHighlightForeground#678db1
  • editorOverviewRuler.selectionHighlightForeground#678db1
  • editorOverviewRuler.warningForeground#ffd166
  • editorOverviewRuler.wordHighlightForeground#678db1
  • editorOverviewRuler.wordHighlightStrongForeground#678db1
  • editorPane.background#132035
  • editorRuler.foreground#234677
  • editorSuggestWidget.background#234677
  • editorSuggestWidget.border#234677
  • editorSuggestWidget.foreground#c6d1df
  • editorSuggestWidget.highlightForeground#ff595e
  • editorSuggestWidget.selectedBackground#132035
  • editorWarning.foreground#ffd166
  • editorWhitespace.foreground#678db177
  • editorWidget.background#0f1929
  • editorWidget.border#0f1929
  • errorForeground#ff2d3b
  • extensionButton.prominentBackground#ff595e
  • extensionButton.prominentForeground#132035
  • extensionButton.prominentHoverBackground#ff595e99
  • focusBorder#678db177
  • foreground#678db1
  • gitDecoration.conflictingResourceForeground#ff2d3b
  • gitDecoration.deletedResourceForeground#ff2d3b
  • gitDecoration.ignoredResourceForeground#678db177
  • gitDecoration.modifiedResourceForeground#00bbf9
  • gitDecoration.untrackedResourceForeground#90e0ef
  • input.background#132035
  • input.border#234677
  • input.foreground#c6d1df
  • input.placeholderForeground#678db177
  • inputOption.activeBorder#234677
  • inputValidation.errorBackground#132035
  • inputValidation.errorBorder#ff2d3b
  • inputValidation.errorForeground#ff2d3b
  • inputValidation.infoBackground#132035
  • inputValidation.infoBorder#00bbf9
  • inputValidation.infoForeground#00bbf9
  • inputValidation.warningBackground#132035
  • inputValidation.warningBorder#ffd166
  • inputValidation.warningForeground#ffd166
  • list.activeSelectionBackground#234677
  • list.activeSelectionForeground#c6d1df
  • list.dropBackground#234677
  • list.errorForeground#ff2d3b
  • list.focusBackground#234677
  • list.focusForeground#c6d1df
  • list.highlightForeground#ff595e
  • list.hoverBackground#234677
  • list.hoverForeground#c6d1df
  • list.inactiveFocusBackground#234677
  • list.inactiveSelectionBackground#234677
  • list.inactiveSelectionForeground#c6d1df
  • list.invalidItemForeground#ff2d3b
  • list.warningForeground#ffd166
  • listFilterWidget.background#234677
  • listFilterWidget.noMatchesOutline#ff2d3b
  • listFilterWidget.outline#234677
  • menu.background#0f1929
  • menu.foreground#678db1
  • menu.selectionBackground#234677
  • menu.selectionForeground#c6d1df
  • menubar.selectionBackground#234677
  • menubar.selectionForeground#c6d1df
  • merge.border#678db1
  • merge.commonContentBackground#23467755
  • merge.commonHeaderBackground#23467777
  • merge.currentContentBackground#00bbf922
  • merge.currentHeaderBackground#00bbf977
  • merge.incomingContentBackground#90e0ef22
  • merge.incomingHeaderBackground#90e0ef77
  • notificationCenter.border#0f1929
  • notificationCenterHeader.background#0f1929
  • notificationCenterHeader.foreground#c6d1df
  • notificationLink.foreground#c6d1df
  • notifications.background#0f1929
  • notifications.border#0f1929
  • notifications.foreground#c6d1df
  • notificationToast.border#0f1929
  • panel.background#0f1929
  • panel.border#132035
  • panel.dropBorder#234677
  • panelInput.border#678db1
  • panelSection.border#234677
  • panelSection.dropBackground#234677
  • panelSectionHeader.background#132035
  • panelSectionHeader.foreground#ff595e
  • panelTitle.activeBorder#ff595e
  • panelTitle.activeForeground#c6d1df
  • panelTitle.inactiveForeground#678db1
  • peekView.border#ff595e
  • peekViewEditor.background#234677
  • peekViewEditor.matchHighlightBackground#678db1
  • peekViewEditor.matchHighlightBorder#ff595e
  • peekViewEditorGutter.background#132035
  • peekViewResult.background#234677
  • peekViewResult.fileForeground#678db1
  • peekViewResult.lineForeground#c6d1df
  • peekViewResult.matchHighlightBackground#ff595e33
  • peekViewResult.selectionBackground#234677
  • peekViewResult.selectionForeground#c6d1df
  • peekViewTitle.background#234677
  • peekViewTitleDescription.foreground#678db1
  • peekViewTitleLabel.foreground#678db1
  • pickerGroup.border#234677
  • pickerGroup.foreground#ff595e
  • progressBar.background#ff595e
  • scrollbar.shadow#00020f
  • scrollbarSlider.activeBackground#678db177
  • scrollbarSlider.background#678db155
  • scrollbarSlider.hoverBackground#678db199
  • selection.background#678db177
  • settings.checkboxBackground#234677
  • settings.checkboxBorder#234677
  • settings.checkboxForeground#c6d1df
  • settings.dropdownBackground#234677
  • settings.dropdownBorder#234677
  • settings.dropdownForeground#c6d1df
  • settings.dropdownListBorder#234677
  • settings.headerForeground#c6d1df
  • settings.modifiedItemIndicator#00bbf9
  • settings.numberInputBackground#234677
  • settings.numberInputBorder#234677
  • settings.numberInputForeground#c6d1df
  • settings.textInputBackground#234677
  • settings.textInputBorder#234677
  • settings.textInputForeground#c6d1df
  • sideBar.background#0f1929
  • sideBar.foreground#678db1
  • sideBarSectionHeader.background#132035
  • sideBarSectionHeader.border#0f1929
  • sideBarSectionHeader.foreground#ff595e
  • sideBarTitle.foreground#ff595e
  • statusBar.background#0f1929
  • statusBar.border#0f1929
  • statusBar.debuggingBackground#0f1929
  • statusBar.debuggingForeground#678db1
  • statusBar.foreground#678db1
  • statusBar.noFolderBackground#0f1929
  • statusBar.noFolderForeground#678db1
  • statusBarItem.activeBackground#234677
  • statusBarItem.hoverBackground#132035
  • statusBarItem.remoteBackground#0f1929
  • statusBarItem.remoteForeground#678db1
  • tab.activeBackground#132035
  • tab.activeBorder#ff595e
  • tab.activeBorderTop#0f1929
  • tab.activeForeground#c6d1df
  • tab.border#0f1929
  • tab.hoverBackground#234677
  • tab.hoverBorder#ff595e
  • tab.inactiveBackground#0f1929
  • tab.inactiveForeground#c6d1df77
  • tab.unfocusedActiveBackground#132035
  • tab.unfocusedActiveBorder#ff595e77
  • tab.unfocusedActiveBorderTop#132035
  • tab.unfocusedActiveForeground#c6d1df
  • tab.unfocusedHoverBackground#132035
  • tab.unfocusedHoverBorder#ff595e77
  • tab.unfocusedInactiveForeground#c6d1df77
  • terminal.ansiBlack#234677
  • terminal.ansiBlue#00bbf9
  • terminal.ansiBrightBlack#45495d
  • terminal.ansiBrightBlue#00bbf9
  • terminal.ansiBrightCyan#00bbf9
  • terminal.ansiBrightGreen#90e0ef
  • terminal.ansiBrightMagenta#ff595e
  • terminal.ansiBrightRed#ff2d3b
  • terminal.ansiBrightWhite#a3a9bb
  • terminal.ansiBrightYellow#ff595e
  • terminal.ansiCyan#00bbf9
  • terminal.ansiGreen#90e0ef
  • terminal.ansiMagenta#ff595e
  • terminal.ansiRed#ff2d3b
  • terminal.ansiWhite#a3a9bb
  • terminal.ansiYellow#ff595e
  • terminal.background#0f1929
  • terminal.border#0f1929
  • terminal.foreground#a3a9bb
  • terminal.selectionBackground#678db133
  • terminalCursor.background#ff595e
  • terminalCursor.foreground#ff595e
  • textBlockQuote.background#234677
  • textBlockQuote.border#234677
  • textCodeBlock.background#0f1929
  • textLink.activeForeground#ff595e
  • textLink.foreground#ff595e
  • textPreformat.foreground#c6d1df
  • textSeparator.foreground#c6d1df
  • titleBar.activeBackground#0f1929
  • titleBar.activeForeground#c6d1df
  • titleBar.border#0f1929
  • titleBar.inactiveBackground#0f1929
  • titleBar.inactiveForeground#678db1
  • tree.indentGuidesStroke#234677
  • walkThrough.embeddedEditorBackground#0f1929
  • welcomePage.buttonBackground#234677
  • welcomePage.buttonHoverBackground#23467799
  • widget.shadow#00020f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a3a9bb
comment, punctuation.definition.comment#678db199italic
variable, string constant.other.placeholder, source#a3a9bb
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#a3a9bb
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#fb8500
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#00bbf9
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffd166
meta.block variable.other#a3a9bb
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a3a9bb
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#90e0ef
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#ffd166
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#00bbf9
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#00bbf9
entity.name.module.js, variable.import.parameter.js#ff2d3b
variable.language#00bbf9italic
entity.name.method.js#00bbf9italic
meta.class-method.js entity.name.function.js, variable.function.constructor#00bbf9
entity.other.attribute-name#fb8500
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fb8500
entity.other.attribute-name.class, punctuation.definition.entity.css#fb8500
source.sass keyword.control#00bbf9
markup.inserted#90e0ef
markup.deleted#ff2d3b
markup.changed#ff595e
string.regexp#fb8500
constant.character.escape#00bbf9
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#00bbf9
source.js constant.other.object.key.js string.unquoted.label.js#ff2d3bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#00bbf9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00bbf9
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#fb8500
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#00bbf9
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#fb8500
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#00bbf9
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#fb8500
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#00bbf9
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#fb8500
markup.italic#ff2d3bitalic
markup.bold#ff2d3bbold
markup.underline#ff595eunderline
markup.strike#ff595eitalic
markup.quote#00bbf9italic
markup.raw.block#fb8500
markup.table#00bbf9
text.html.markdown, punctuation.definition.list_item.markdown#a3a9bb
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#00bbf9
text.html.markdown meta.dummy.line-break#a3a9bb
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#90e0ef
markup.quote, punctuation.definition.blockquote.markdown#00bbf9italic
string.other.link.title.markdown#ff595eunderline
markup.raw.block.fenced.markdown#c6d1df
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a3a9bb
variable.language.fenced.markdown#a3a9bb
meta.separator#a3a9bb
token.info-token#00bbf9
token.warn-token#ff595e
token.error-token#ff2d3b
token.debug-token#ff595e
storage.type.error.go#00bbf9
punctuation.other.period.go#fb8500