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#c8d8da
  • activityBar.border#dddbcb
  • activityBar.foreground#050505
  • activityBarBadge.background#050505
  • activityBarBadge.foreground#ffffff
  • badge.background#050505
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#050505
  • breadcrumb.background#f5f1e3
  • breadcrumb.focusForeground#0d7080
  • breadcrumb.foreground#1b9aaa
  • breadcrumbPicker.background#f5f1e3
  • button.background#050505
  • button.foreground#ffffff
  • button.hoverBackground#0d4048
  • debugExceptionWidget.background#dddbcb
  • debugExceptionWidget.border#1b9aaa
  • diffEditor.insertedTextBackground#1b9aaa20
  • diffEditor.removedTextBackground#1b9aaa0a
  • dropdown.background#f5f1e3
  • dropdown.border#dddbcb
  • dropdown.foreground#0d4048
  • dropdown.listBackground#dddbcb
  • editor.background#f5f1e3
  • editor.findMatchBackground#1b9aaa50
  • editor.findMatchHighlightBackground#1b9aaa25
  • editor.foreground#050505
  • editor.inactiveSelectionBackground#1b9aaa30
  • editor.lineHighlightBackground#edeae0
  • editor.rangeHighlightBackground#1b9aaa12
  • editor.selectionBackground#1b9aaa44
  • editor.selectionHighlightBackground#1b9aaa28
  • editor.wordHighlightBackground#1b9aaa28
  • editor.wordHighlightStrongBackground#1b9aaa44
  • editorBracketMatch.background#1b9aaa20
  • editorBracketMatch.border#1b9aaa
  • editorCodeLens.foreground#1b9aaa
  • editorCursor.foreground#050505
  • editorError.foreground#f14c4c
  • editorGroup.border#dddbcb
  • editorGroup.dropBackground#dddbcbcc
  • editorGroupHeader.noTabsBackground#f5f1e3
  • editorGroupHeader.tabsBackground#edeae0
  • editorGroupHeader.tabsBorder#dddbcb
  • editorGutter.addedBackground#050505b3
  • editorGutter.background#f5f1e3
  • editorGutter.deletedBackground#1b9aaab3
  • editorGutter.modifiedBackground#0d4048b3
  • editorHoverWidget.background#dddbcb
  • editorHoverWidget.border#c8d8da
  • editorLineNumber.activeForeground#1b9aaa
  • editorLineNumber.foreground#dddbcb
  • editorLink.activeForeground#0d4048
  • editorMarkerNavigation.background#dddbcb
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#050505
  • editorOverviewRuler.border#dddbcb
  • editorOverviewRuler.currentContentForeground#05050520
  • editorOverviewRuler.deletedForeground#1b9aaa
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#1b9aaa50
  • editorOverviewRuler.incomingContentForeground#1b9aaa20
  • editorOverviewRuler.infoForeground#1b9aaa
  • editorOverviewRuler.modifiedForeground#0d4048
  • editorOverviewRuler.rangeHighlightForeground#1b9aaa44
  • editorOverviewRuler.selectionHighlightForeground#1b9aaa44
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#1b9aaa28
  • editorOverviewRuler.wordHighlightStrongForeground#1b9aaa44
  • editorRuler.foreground#dddbcb
  • editorSuggestWidget.background#dddbcb
  • editorSuggestWidget.border#c8d8da
  • editorSuggestWidget.foreground#050505
  • editorSuggestWidget.highlightForeground#050505
  • editorSuggestWidget.selectedBackground#1b9aaa44
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#dddbcb66
  • editorWidget.background#dddbcb
  • editorWidget.border#c8d8da
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#050505
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#0d4048
  • focusBorder#1b9aaa80
  • foreground#0d4048
  • gitDecoration.conflictingResourceForeground#1b9aaa
  • gitDecoration.deletedResourceForeground#1b9aaa
  • gitDecoration.ignoredResourceForeground#dddbcb
  • gitDecoration.modifiedResourceForeground#0d4048
  • gitDecoration.untrackedResourceForeground#050505
  • input.background#edeae0
  • input.border#dddbcb
  • input.foreground#050505
  • input.placeholderForeground#dddbcb
  • inputOption.activeBorder#1b9aaa
  • inputValidation.errorBackground#f5f1e3
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#f5f1e3
  • inputValidation.infoBorder#1b9aaa
  • inputValidation.warningBackground#f5f1e3
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#1b9aaa44
  • list.activeSelectionForeground#050505
  • list.dropBackground#1b9aaa28
  • list.focusBackground#1b9aaa44
  • list.focusForeground#050505
  • list.highlightForeground#0d4048
  • list.hoverBackground#edeae0
  • list.hoverForeground#050505
  • list.inactiveFocusBackground#1b9aaa28
  • list.inactiveSelectionBackground#1b9aaa28
  • list.inactiveSelectionForeground#050505
  • list.invalidItemForeground#1b9aaa
  • merge.border#1b9aaa80
  • merge.currentContentBackground#05050520
  • merge.currentHeaderBackground#05050540
  • merge.incomingContentBackground#1b9aaa20
  • merge.incomingHeaderBackground#1b9aaa40
  • notificationCenter.border#1b9aaa
  • notificationCenterHeader.background#050505
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#0d4048
  • notifications.background#dddbcb
  • notifications.border#c8d8da
  • notifications.foreground#050505
  • notificationToast.border#c8d8da
  • panel.background#f5f1e3
  • panel.border#dddbcb
  • panelTitle.activeBorder#050505
  • panelTitle.activeForeground#050505
  • panelTitle.inactiveForeground#1b9aaa
  • peekView.border#dddbcb
  • peekViewEditor.background#edeae0
  • peekViewEditor.matchHighlightBackground#1b9aaa30
  • peekViewEditorGutter.background#edeae0
  • peekViewResult.background#f5f1e3
  • peekViewResult.fileForeground#050505
  • peekViewResult.lineForeground#0d4048
  • peekViewResult.matchHighlightBackground#1b9aaa30
  • peekViewResult.selectionBackground#1b9aaa44
  • peekViewResult.selectionForeground#050505
  • peekViewTitle.background#f5f1e3
  • peekViewTitleDescription.foreground#1b9aaa
  • peekViewTitleLabel.foreground#050505
  • pickerGroup.border#dddbcb
  • pickerGroup.foreground#1b9aaa
  • progressBar.background#050505
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#1b9aaa66
  • scrollbarSlider.background#1b9aaa22
  • scrollbarSlider.hoverBackground#1b9aaa44
  • selection.background#1b9aaa44
  • sideBar.background#edeae0
  • sideBar.border#dddbcb
  • sideBar.foreground#050505
  • sideBarSectionHeader.background#dddbcb
  • sideBarSectionHeader.foreground#0d4048
  • sideBarTitle.foreground#0d4048
  • statusBar.background#dddbcb
  • statusBar.border#edeae0
  • statusBar.debuggingBackground#050505
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#050505
  • statusBar.noFolderBackground#edeae0
  • statusBar.noFolderForeground#0d4048
  • statusBarItem.activeBackground#1b9aaa44
  • statusBarItem.hoverBackground#1b9aaa28
  • statusBarItem.prominentBackground#050505
  • statusBarItem.prominentHoverBackground#0d4048
  • tab.activeBackground#f5f1e3
  • tab.activeBorder#050505
  • tab.activeForeground#050505
  • tab.border#dddbcb
  • tab.hoverBackground#edeae0
  • tab.inactiveBackground#edeae0
  • tab.inactiveForeground#1b9aaa
  • tab.unfocusedActiveForeground#0d4048
  • tab.unfocusedHoverBackground#edeae0
  • tab.unfocusedInactiveForeground#1b9aaa
  • terminal.ansiBlack#050505
  • terminal.ansiBlue#1a3868
  • terminal.ansiBrightBlack#1b9aaa
  • terminal.ansiBrightBlue#0d4048
  • terminal.ansiBrightCyan#1b9aaa
  • terminal.ansiBrightGreen#050505
  • terminal.ansiBrightMagenta#0d4048
  • terminal.ansiBrightRed#050505
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#dddbcb
  • terminal.ansiCyan#0d7080
  • terminal.ansiGreen#0d6040
  • terminal.ansiMagenta#4a1858
  • terminal.ansiRed#8a1a1a
  • terminal.ansiWhite#0d4048
  • terminal.ansiYellow#7a5808
  • terminal.background#f5f1e3
  • terminal.foreground#050505
  • terminal.selectionBackground#1b9aaa44
  • titleBar.activeBackground#dddbcb
  • titleBar.activeForeground#050505
  • titleBar.border#edeae0
  • titleBar.inactiveBackground#dddbcb
  • titleBar.inactiveForeground#1b9aaa
  • walkThrough.embeddedEditorBackground#f5f1e3
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#1b9aaaitalic
keyword, storage.type, storage.modifier#050505italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#0d4048
keyword.control.import, keyword.control.export, keyword.control.from#050505
string, string.quoted, string.template#7a4a08
punctuation.definition.string.begin, punctuation.definition.string.end#8a5a18
constant.character.escape, constant.other.placeholder#9a6a28italic
entity.name.function, meta.function-call, variable.function, support.function#0d4048
entity.name.label#0d4048
entity.name.type.class, entity.name.type, support.class, support.type#0d7080italic
meta.type.annotation, meta.type.parameters#0d7080italic
entity.name.type.module, meta.import variable.other#0d7080
variable, variable.name, variable.other#050505
variable.parameter#1a1a1a
variable.language#0d4048italic
variable.other.property, variable.other.object.property, support.variable.property#8a5a00
constant.numeric#0d6050
constant.language#050505
constant, constant.other, constant.character#0d6050
entity.name.tag, meta.tag.sgml#0d4048
entity.name.tag support.class.component#0d7080
meta.tag.attribute, entity.other.attribute-name#8a5a00italic
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#0d4048
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#1b9aaa
punctuation.accessor#0d4048
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#0d7080
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#8a5a00
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#0d4048
meta.property-value.css, support.constant.property-value.css#7a4a08
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#0d6050italic
meta.object-literal.key#8a5a00
source.json meta.structure.dictionary.json support.type.property-name.json#0d4048
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a5a00
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#0d7080
*url*, *link*, *uri*#0d4048underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#050505italic
markup.heading, entity.name.section#050505bold
markup.italic#0d4048italic
markup.bold#050505bold
markup.underline#7a4a08underline
markup.strike#1b9aaastrikethrough
markup.quote#1b9aaaitalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#0d6050
markup.deleted, punctuation.definition.deleted#1b9aaa
markup.inserted, punctuation.definition.inserted#0d6050
markup.changed, punctuation.definition.changed#8a5a00
entity.other.inherited-class#0d7080
invalid, invalid.illegal#f14c4c
token.info-token#0d4048
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#1b9aaa