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#151e21
  • activityBar.border#344a52
  • activityBar.foreground#e0fbfc
  • activityBarBadge.background#9db4c0
  • activityBarBadge.foreground#151e21
  • badge.background#9db4c0
  • badge.foreground#151e21
  • breadcrumb.activeSelectionForeground#e0fbfc
  • breadcrumb.background#253237
  • breadcrumb.focusForeground#c2dfe3
  • breadcrumb.foreground#9db4c0
  • breadcrumbPicker.background#151e21
  • button.background#9db4c0
  • button.foreground#151e21
  • button.hoverBackground#7a9aa8
  • debugExceptionWidget.background#344a52
  • debugExceptionWidget.border#9db4c0
  • diffEditor.insertedTextBackground#9db4c020
  • diffEditor.removedTextBackground#9db4c015
  • dropdown.background#151e21
  • dropdown.border#344a52
  • dropdown.foreground#c2dfe3
  • dropdown.listBackground#344a52
  • editor.background#253237
  • editor.findMatchBackground#9db4c050
  • editor.findMatchHighlightBackground#9db4c025
  • editor.foreground#e0fbfc
  • editor.inactiveSelectionBackground#9db4c040
  • editor.lineHighlightBackground#344a52
  • editor.rangeHighlightBackground#9db4c015
  • editor.selectionBackground#9db4c066
  • editor.selectionHighlightBackground#9db4c044
  • editor.wordHighlightBackground#9db4c044
  • editor.wordHighlightStrongBackground#9db4c066
  • editorBracketMatch.background#9db4c020
  • editorBracketMatch.border#9db4c0
  • editorCodeLens.foreground#5c6b73
  • editorCursor.foreground#9db4c0
  • editorError.foreground#f14c4c
  • editorGroup.border#344a52
  • editorGroup.dropBackground#344a52cc
  • editorGroupHeader.noTabsBackground#253237
  • editorGroupHeader.tabsBackground#151e21
  • editorGroupHeader.tabsBorder#344a52
  • editorGutter.addedBackground#c2dfe3b3
  • editorGutter.background#253237
  • editorGutter.deletedBackground#9db4c0b3
  • editorGutter.modifiedBackground#5c6b73b3
  • editorHoverWidget.background#344a52
  • editorHoverWidget.border#5c6b73
  • editorLineNumber.activeForeground#5c6b73
  • editorLineNumber.foreground#344a52
  • editorLink.activeForeground#c2dfe3
  • editorMarkerNavigation.background#344a52
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#c2dfe3
  • editorOverviewRuler.border#344a52
  • editorOverviewRuler.currentContentForeground#c2dfe320
  • editorOverviewRuler.deletedForeground#9db4c0
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#9db4c050
  • editorOverviewRuler.incomingContentForeground#9db4c020
  • editorOverviewRuler.infoForeground#9db4c0
  • editorOverviewRuler.modifiedForeground#5c6b73
  • editorOverviewRuler.rangeHighlightForeground#9db4c044
  • editorOverviewRuler.selectionHighlightForeground#9db4c044
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#9db4c044
  • editorOverviewRuler.wordHighlightStrongForeground#9db4c066
  • editorRuler.foreground#344a52
  • editorSuggestWidget.background#344a52
  • editorSuggestWidget.border#5c6b73
  • editorSuggestWidget.foreground#e0fbfc
  • editorSuggestWidget.highlightForeground#e0fbfc
  • editorSuggestWidget.selectedBackground#9db4c066
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#344a5266
  • editorWidget.background#344a52
  • editorWidget.border#5c6b73
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#9db4c0
  • extensionButton.prominentForeground#151e21
  • extensionButton.prominentHoverBackground#7a9aa8
  • focusBorder#9db4c080
  • foreground#c2dfe3
  • gitDecoration.conflictingResourceForeground#7a9aa8
  • gitDecoration.deletedResourceForeground#9db4c0
  • gitDecoration.ignoredResourceForeground#5c6b73
  • gitDecoration.modifiedResourceForeground#c2dfe3
  • gitDecoration.untrackedResourceForeground#e0fbfc
  • input.background#344a52
  • input.border#5c6b73
  • input.foreground#e0fbfc
  • input.placeholderForeground#5c6b73
  • inputOption.activeBorder#9db4c0
  • inputValidation.errorBackground#253237
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#253237
  • inputValidation.infoBorder#9db4c0
  • inputValidation.warningBackground#253237
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#9db4c066
  • list.activeSelectionForeground#e0fbfc
  • list.dropBackground#9db4c044
  • list.focusBackground#9db4c066
  • list.focusForeground#e0fbfc
  • list.highlightForeground#9db4c0
  • list.hoverBackground#344a52
  • list.hoverForeground#e0fbfc
  • list.inactiveFocusBackground#9db4c040
  • list.inactiveSelectionBackground#9db4c044
  • list.inactiveSelectionForeground#e0fbfc
  • list.invalidItemForeground#9db4c0
  • merge.border#9db4c080
  • merge.currentContentBackground#c2dfe320
  • merge.currentHeaderBackground#c2dfe340
  • merge.incomingContentBackground#9db4c020
  • merge.incomingHeaderBackground#9db4c040
  • notificationCenter.border#9db4c0
  • notificationCenterHeader.background#9db4c0
  • notificationCenterHeader.foreground#151e21
  • notificationLink.foreground#c2dfe3
  • notifications.background#344a52
  • notifications.border#5c6b73
  • notifications.foreground#e0fbfc
  • notificationToast.border#5c6b73
  • panel.background#151e21
  • panel.border#344a52
  • panelTitle.activeBorder#9db4c0
  • panelTitle.activeForeground#e0fbfc
  • panelTitle.inactiveForeground#5c6b73
  • peekView.border#5c6b73
  • peekViewEditor.background#344a52
  • peekViewEditor.matchHighlightBackground#9db4c030
  • peekViewEditorGutter.background#344a52
  • peekViewResult.background#151e21
  • peekViewResult.fileForeground#e0fbfc
  • peekViewResult.lineForeground#c2dfe3
  • peekViewResult.matchHighlightBackground#9db4c030
  • peekViewResult.selectionBackground#9db4c066
  • peekViewResult.selectionForeground#e0fbfc
  • peekViewTitle.background#253237
  • peekViewTitleDescription.foreground#5c6b73
  • peekViewTitleLabel.foreground#e0fbfc
  • pickerGroup.border#344a52
  • pickerGroup.foreground#5c6b73
  • progressBar.background#9db4c0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9db4c066
  • scrollbarSlider.background#9db4c022
  • scrollbarSlider.hoverBackground#9db4c044
  • selection.background#9db4c066
  • sideBar.background#151e21
  • sideBar.border#344a52
  • sideBar.foreground#c2dfe3
  • sideBarSectionHeader.background#344a52
  • sideBarSectionHeader.foreground#9db4c0
  • sideBarTitle.foreground#c2dfe3
  • statusBar.background#151e21
  • statusBar.border#344a52
  • statusBar.debuggingBackground#9db4c0
  • statusBar.debuggingForeground#151e21
  • statusBar.foreground#9db4c0
  • statusBar.noFolderBackground#344a52
  • statusBar.noFolderForeground#9db4c0
  • statusBarItem.activeBackground#9db4c066
  • statusBarItem.hoverBackground#9db4c044
  • statusBarItem.prominentBackground#9db4c0
  • statusBarItem.prominentHoverBackground#7a9aa8
  • tab.activeBackground#253237
  • tab.activeBorder#9db4c0
  • tab.activeForeground#e0fbfc
  • tab.border#344a52
  • tab.hoverBackground#344a52
  • tab.inactiveBackground#151e21
  • tab.inactiveForeground#5c6b73
  • tab.unfocusedActiveForeground#c2dfe3
  • tab.unfocusedHoverBackground#344a52
  • tab.unfocusedInactiveForeground#5c6b73
  • terminal.ansiBlack#253237
  • terminal.ansiBlue#5c6b73
  • terminal.ansiBrightBlack#5c6b73
  • terminal.ansiBrightBlue#9db4c0
  • terminal.ansiBrightCyan#e0fbfc
  • terminal.ansiBrightGreen#e0fbfc
  • terminal.ansiBrightMagenta#7a9aa8
  • terminal.ansiBrightRed#9db4c0
  • terminal.ansiBrightWhite#e0fbfc
  • terminal.ansiBrightYellow#c2dfe3
  • terminal.ansiCyan#c2dfe3
  • terminal.ansiGreen#c2dfe3
  • terminal.ansiMagenta#9db4c0
  • terminal.ansiRed#9db4c0
  • terminal.ansiWhite#c2dfe3
  • terminal.ansiYellow#7a9aa8
  • terminal.background#151e21
  • terminal.foreground#e0fbfc
  • terminal.selectionBackground#9db4c066
  • titleBar.activeBackground#151e21
  • titleBar.activeForeground#e0fbfc
  • titleBar.border#344a52
  • titleBar.inactiveBackground#151e21
  • titleBar.inactiveForeground#5c6b73
  • walkThrough.embeddedEditorBackground#151e21
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6b73italic
keyword, storage.type, storage.modifier#9db4c0italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#7a9aa8
keyword.control.import, keyword.control.export, keyword.control.from#9db4c0
string, string.quoted, string.template#c8e6a0
punctuation.definition.string.begin, punctuation.definition.string.end#a8c880
constant.character.escape, constant.other.placeholder#e0a080italic
entity.name.function, meta.function-call, variable.function, support.function#c2dfe3
entity.name.label#c2dfe3
entity.name.type.class, entity.name.type, support.class, support.type#b0d4e0italic
meta.type.annotation, meta.type.parameters#b0d4e0italic
entity.name.type.module, meta.import variable.other#b0d4e0
variable, variable.name, variable.other#e0fbfc
variable.parameter#c2dfe3
variable.language#e0c88aitalic
variable.other.property, variable.other.object.property, support.variable.property#e0c88a
constant.numeric#d4a8e0
constant.language#9db4c0
constant, constant.other, constant.character#d4a8e0
entity.name.tag, meta.tag.sgml#9db4c0
entity.name.tag support.class.component#b0d4e0
meta.tag.attribute, entity.other.attribute-name#e0c88aitalic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7a9aa8
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#5c6b73
punctuation.accessor#7a9aa8
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#b0d4e0
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#c8e6a0
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#e0c88a
meta.property-value.css, support.constant.property-value.css#c8e6a0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#c2dfe3italic
meta.object-literal.key#e0c88a
source.json meta.structure.dictionary.json support.type.property-name.json#e0c88a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c8e6a0
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#b0d4e0
*url*, *link*, *uri*#c2dfe3underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9db4c0italic
markup.heading, entity.name.section#c2dfe3bold
markup.italic#c2dfe3italic
markup.bold#e0fbfcbold
markup.underline#e0c88aunderline
markup.strike#5c6b73strikethrough
markup.quote#7a9aa8italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#c8e6a0
markup.deleted, punctuation.definition.deleted#9db4c0
markup.inserted, punctuation.definition.inserted#c8e6a0
markup.changed, punctuation.definition.changed#e0c88a
entity.other.inherited-class#b0d4e0
invalid, invalid.illegal#f14c4c
token.info-token#9db4c0
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#5c6b73