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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9db4c0italic
keyword, storage.type, storage.modifier#344a52italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#5c6b73
keyword.control.import, keyword.control.export, keyword.control.from#344a52
string, string.quoted, string.template#4a7a30
punctuation.definition.string.begin, punctuation.definition.string.end#6a9a50
constant.character.escape, constant.other.placeholder#a05030italic
entity.name.function, meta.function-call, variable.function, support.function#253237
entity.name.label#253237
entity.name.type.class, entity.name.type, support.class, support.type#2e5c6eitalic
meta.type.annotation, meta.type.parameters#2e5c6eitalic
entity.name.type.module, meta.import variable.other#2e5c6e
variable, variable.name, variable.other#253237
variable.parameter#344a52
variable.language#7a5c20italic
variable.other.property, variable.other.object.property, support.variable.property#7a5c20
constant.numeric#6a3a7a
constant.language#344a52
constant, constant.other, constant.character#6a3a7a
entity.name.tag, meta.tag.sgml#344a52
entity.name.tag support.class.component#2e5c6e
meta.tag.attribute, entity.other.attribute-name#7a5c20italic
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#5c6b73
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#9db4c0
punctuation.accessor#5c6b73
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#2e5c6e
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#4a7a30
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#7a5c20
meta.property-value.css, support.constant.property-value.css#4a7a30
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#253237italic
meta.object-literal.key#7a5c20
source.json meta.structure.dictionary.json support.type.property-name.json#7a5c20
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4a7a30
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#2e5c6e
*url*, *link*, *uri*#2e5c6eunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#344a52italic
markup.heading, entity.name.section#253237bold
markup.italic#344a52italic
markup.bold#253237bold
markup.underline#7a5c20underline
markup.strike#9db4c0strikethrough
markup.quote#5c6b73italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#4a7a30
markup.deleted, punctuation.definition.deleted#c0392b
markup.inserted, punctuation.definition.inserted#4a7a30
markup.changed, punctuation.definition.changed#7a5c20
entity.other.inherited-class#2e5c6e
invalid, invalid.illegal#f14c4c
token.info-token#5c6b73
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#9db4c0