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.activeBackground#0099ad33
  • activityBar.activeBorder#0099ad
  • activityBar.background#fef8ec
  • activityBar.border#ece2c600
  • activityBar.foreground#0099ad
  • activityBarBadge.background#0099ad
  • activityBarBadge.foreground#fef8ec
  • badge.background#0099ad
  • badge.foreground#fef8ec
  • breadcrumb.activeSelectionForeground#005661
  • breadcrumb.background#fef8ec
  • breadcrumb.focusForeground#0099ad
  • breadcrumb.foreground#888477
  • breadcrumbPicker.background#f2edde
  • button.background#099
  • button.foreground#f1f1f1
  • button.hoverBackground#0cc
  • debugExceptionWidget.background#f9f1e1
  • debugExceptionWidget.border#00899e
  • debugToolBar.background#f9f1e1
  • descriptionForeground#929ea0
  • diffEditor.insertedTextBackground#14b83230
  • diffEditor.removedTextBackground#BB1F0522
  • dropdown.background#fef8ec
  • dropdown.border#fef8ec
  • dropdown.foreground#005661
  • editor.background#fef8ec
  • editor.findMatchBackground#8ce99a55
  • editor.findMatchBorder#8ce99a00
  • editor.findMatchHighlightBackground#148f9f33
  • editor.findMatchHighlightBorder#148f9f00
  • editor.findRangeHighlightBackground#99e62a55
  • editor.findRangeHighlightBorder#58CC6D00
  • editor.foreground#005661
  • editor.hoverHighlightBackground#0099ad3f
  • editor.inactiveSelectionBackground#bce8f055
  • editor.lineHighlightBorder#ade2eb77
  • editor.rangeHighlightBackground#f1e9d5a1
  • editor.selectionBackground#ade2eb77
  • editor.selectionHighlightBackground#bce8f055
  • editor.selectionHighlightBorder#14a5ff00
  • editor.snippetFinalTabstopHighlightBackground#fdefd3
  • editor.snippetFinalTabstopHighlightBorder#fdf3dd
  • editor.snippetTabstopHighlightBackground#fdefd3
  • editor.snippetTabstopHighlightBorder#fdf3dd
  • editor.wordHighlightBackground#e9a14922
  • editor.wordHighlightBorder#e9a14900
  • editor.wordHighlightStrongBackground#b5890027
  • editor.wordHighlightStrongBorder#b5890000
  • editorBracketMatch.background#0099ad20
  • editorBracketMatch.border#0099ad
  • editorCodeLens.foreground#77aaca
  • editorCursor.foreground#0092a8
  • editorError.border#fef8ec
  • editorError.foreground#ff4000
  • editorGroup.border#f0e7d1
  • editorGroup.dropBackground#b8ae9333
  • editorGroup.emptyBackground#b8ae9333
  • editorGroupHeader.noTabsBackground#f0e9d6
  • editorGroupHeader.tabsBackground#f0e9d6
  • editorGroupHeader.tabsBorder#f0e9d600
  • editorGutter.addedBackground#8ce99a
  • editorGutter.background#fef8ec
  • editorGutter.deletedBackground#ff4000
  • editorGutter.modifiedBackground#e9a149
  • editorHint.border#58cc6d00
  • editorHint.foreground#58cc6d
  • editorHoverWidget.background#f2edde
  • editorHoverWidget.border#ece2c600
  • editorIndentGuide.activeBackground#88adc3
  • editorIndentGuide.background#d3cec5aa
  • editorInfo.border#fef8ec
  • editorInfo.foreground#00c6e0
  • editorInlayHint.background#f9f1e1
  • editorInlayHint.foreground#8ca6a6
  • editorInlayHint.parameterBackground#f9f1e1
  • editorInlayHint.parameterForeground#8ca6a6
  • editorInlayHint.typeBackground#f9f1e1
  • editorInlayHint.typeForeground#8ca6a6
  • editorLineNumber.activeForeground#0099ad
  • editorLineNumber.foreground#a0abac
  • editorLink.activeForeground#14a5ff
  • editorMarkerNavigation.background#3a3a5e29
  • editorMarkerNavigationError.background#ff4000
  • editorMarkerNavigationWarning.background#e69533
  • editorOverviewRuler.border#fef8ec
  • editorOverviewRuler.commonContentForeground#ffc18055
  • editorOverviewRuler.currentContentForeground#33e7ff55
  • editorOverviewRuler.incomingContentForeground#9d92f255
  • editorRuler.foreground#f1e6d0
  • editorSuggestWidget.background#f2edde
  • editorSuggestWidget.border#ece2c600
  • editorSuggestWidget.foreground#6a7a7c
  • editorSuggestWidget.highlightForeground#0099ad
  • editorSuggestWidget.selectedBackground#dbfaff
  • editorWarning.border#fef8ec
  • editorWarning.foreground#e69533
  • editorWhitespace.foreground#d3cec5bb
  • editorWidget.background#f2edde
  • editorWidget.border#ece2c600
  • errorForeground#ff4000
  • extensionButton.prominentBackground#099
  • extensionButton.prominentForeground#e5f5f5
  • extensionButton.prominentHoverBackground#0cc
  • focusBorder#f2edde
  • foreground#005661
  • gitDecoration.addedResourceForeground#009456
  • gitDecoration.conflictingResourceForeground#e9a149
  • gitDecoration.deletedResourceForeground#ff4000
  • gitDecoration.ignoredResourceForeground#a8a28faa
  • gitDecoration.modifiedResourceForeground#14b832
  • gitDecoration.untrackedResourceForeground#00c6e0
  • input.background#fef8ec
  • input.border#f2edde
  • input.foreground#6a7a7c
  • input.placeholderForeground#9fabad
  • inputOption.activeBorder#0099ad
  • inputValidation.errorBackground#ff400041
  • inputValidation.errorBorder#ff4000
  • inputValidation.infoBackground#00c6e0cc
  • inputValidation.infoBorder#00c6e0
  • inputValidation.warningBackground#ffa587cc
  • inputValidation.warningBorder#ffa487
  • list.activeSelectionBackground#b6e1e7
  • list.activeSelectionForeground#005661
  • list.dropBackground#cdcbb2
  • list.errorForeground#c9481d
  • list.focusBackground#bee3ea
  • list.focusForeground#005661
  • list.highlightForeground#0099ad
  • list.hoverBackground#d2f3f9
  • list.hoverForeground#005661
  • list.inactiveFocusBackground#c9eaed
  • list.inactiveSelectionBackground#d5eef1
  • list.inactiveSelectionForeground#949384
  • list.warningForeground#e07a52
  • listFilterWidget.background#d5eef1
  • listFilterWidget.noMatchesOutline#ff4000
  • listFilterWidget.outline#14b832
  • menu.background#f2edde
  • menu.foreground#888477
  • menu.selectionBackground#d2f3f9
  • menu.selectionBorder#d2f3f9
  • menu.selectionForeground#0099ad
  • menubar.selectionBackground#d2f3f9
  • menubar.selectionBorder#d2f3f9
  • menubar.selectionForeground#0099ad
  • merge.border#fef8ec00
  • merge.commonContentBackground#ffc18033
  • merge.commonHeaderBackground#ffc18055
  • merge.currentContentBackground#33e7ff33
  • merge.currentHeaderBackground#33e7ff55
  • merge.incomingContentBackground#9d92f233
  • merge.incomingHeaderBackground#9d92f255
  • minimap.background#fef8ec99
  • minimap.errorHighlight#ff4000ee
  • minimap.findMatchHighlight#0099adaa
  • minimap.warningHighlight#e69533ee
  • minimapGutter.addedBackground#009456
  • minimapGutter.deletedBackground#ff4000
  • minimapGutter.modifiedBackground#14b832
  • notificationCenter.border#f2edde
  • notificationCenterHeader.background#f2edde
  • notificationCenterHeader.foreground#005661
  • notificationLink.foreground#005661
  • notifications.background#f2edde
  • notifications.border#f2edde
  • notifications.foreground#005661
  • notificationToast.border#f2edde
  • panel.background#f6edda
  • panel.border#00c6e0
  • panelTitle.activeBorder#00c6e0
  • panelTitle.activeForeground#0099ad
  • panelTitle.inactiveForeground#888477
  • peekView.border#0099ad
  • peekViewEditor.background#fff7e5
  • peekViewEditor.matchHighlightBackground#148f9f33
  • peekViewEditor.matchHighlightBorder#148f9f79
  • peekViewEditorGutter.background#fff7e5
  • peekViewResult.background#f9f1e1
  • peekViewResult.fileForeground#e9a149
  • peekViewResult.lineForeground#87a7ab
  • peekViewResult.matchHighlightBackground#f2edde
  • peekViewResult.selectionBackground#f2edde
  • peekViewResult.selectionForeground#6a7a7c
  • peekViewTitle.background#f9f1e1
  • peekViewTitleDescription.foreground#87a7ab
  • peekViewTitleLabel.foreground#e9a149
  • pickerGroup.border#00c6e0
  • pickerGroup.foreground#0099ad
  • progressBar.background#00c6e0
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#0099adad
  • scrollbarSlider.background#6a90955b
  • scrollbarSlider.hoverBackground#0099ad62
  • selection.background#169fb155
  • settings.checkboxBackground#f2edde
  • settings.checkboxBorder#f2edde
  • settings.checkboxForeground#0bb
  • settings.dropdownBackground#f2edde
  • settings.dropdownBorder#f2edde
  • settings.dropdownForeground#0bb
  • settings.dropdownListBorder#ade2eb88
  • settings.headerForeground#004d57
  • settings.modifiedItemIndicator#00bd23
  • settings.numberInputBackground#f0e7d1
  • settings.numberInputBorder#f0e7d1
  • settings.numberInputForeground#5842ff
  • settings.textInputBackground#f2edde
  • settings.textInputBorder#f2edde
  • settings.textInputForeground#0bb
  • sideBar.background#f9f1e1
  • sideBar.border#ece2c600
  • sideBar.dropBackground#f9f1e1
  • sideBar.foreground#888477
  • sideBarSectionHeader.background#f2e7ca
  • sideBarSectionHeader.foreground#888477
  • sideBarTitle.foreground#888477
  • statusBar.background#f0e9d6
  • statusBar.border#ece2c600
  • statusBar.debuggingBackground#f9f1e1
  • statusBar.debuggingBorder#e94981af
  • statusBar.debuggingForeground#e9498150
  • statusBar.foreground#0099ad
  • statusBar.noFolderBackground#f9f1e1
  • statusBar.noFolderBorder#f9f1e1
  • statusBar.noFolderForeground#87a7ab
  • statusBarItem.activeBackground#dfeff1
  • statusBarItem.hoverBackground#d1e8eb
  • statusBarItem.prominentBackground#c1d4d7
  • statusBarItem.prominentHoverBackground#bfdee3
  • tab.activeBackground#fef8ec
  • tab.activeBorder#fef8ec
  • tab.activeBorderTop#00c6e0
  • tab.activeForeground#0099ad
  • tab.activeModifiedBorder#00b368
  • tab.border#e6d7b2
  • tab.inactiveBackground#f0e9d6
  • tab.inactiveForeground#888477
  • tab.unfocusedActiveBackground#f7f2e3
  • tab.unfocusedActiveBorder#fef8ec00
  • tab.unfocusedActiveForeground#888477
  • tab.unfocusedHoverBackground#0099ad21
  • tab.unfocusedInactiveForeground#888477
  • terminal.ansiBlack#8ca6a6
  • terminal.ansiBlue#0095a8
  • terminal.ansiBrightBlack#8ca6a6
  • terminal.ansiBrightBlue#0094f0
  • terminal.ansiBrightCyan#00bdd6
  • terminal.ansiBrightGreen#00b368
  • terminal.ansiBrightMagenta#ff5792
  • terminal.ansiBrightRed#e5164a
  • terminal.ansiBrightWhite#004d57
  • terminal.ansiBrightYellow#b3694d
  • terminal.ansiCyan#00bdd6
  • terminal.ansiGreen#00b368
  • terminal.ansiMagenta#ff5792
  • terminal.ansiRed#e64100
  • terminal.ansiWhite#005661
  • terminal.ansiYellow#fa8900
  • terminal.background#fef8ec
  • terminal.foreground#005661
  • terminalCursor.background#f6edda
  • terminalCursor.foreground#005661
  • textBlockQuote.background#f9f1e1
  • textBlockQuote.border#00899e
  • textCodeBlock.background#f9f1e1
  • textLink.activeForeground#00c6e0
  • textLink.foreground#00c6e0
  • textPreformat.foreground#e9a149
  • textSeparator.foreground#f9f1e1
  • titleBar.activeBackground#f9f1e1
  • titleBar.activeForeground#005661
  • titleBar.inactiveBackground#f9f1e1
  • titleBar.inactiveForeground#888477
  • tree.indentGuidesStroke#d3cec5
  • walkThrough.embeddedEditorBackground#f9f1e1
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#005661—
invalid, invalid.illegal#e5164a—
invalid.deprecated#b3694d—
*url*, *link*, *uri*—underline
storage.modifier.pointer, storage.modifier.reference#0094f0—
punctuation.separator.pointer-access#0094f0—
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#00bdd6—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#b3694d—
source.css variable#004d57—
source.css support.type.property-name#005661—
comment, punctuation.definition.comment, string.quoted.docstring#8ca6a6italic
keyword.type, entity.name.tag, meta.tag.sgml, entity.name.type.struct, support.type, support.class, support.type.sys-types, support.type.built-in#e64100—
string, constant.other.symbol#00b368—
entity.name, entity.other.attribute-name#fa8900—
entity.name.function, variable.function#0095a8—
keyword, storage#ff5792bold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable#00bdd6—
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder#005661—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#e5164a—
string.other.link#00b368—
entity.name.type.parameter, entity.name.type.type-parameter, variable.other.generic-type#b3694d—
keyword.operator, support.function#0094f0—
keyword.other#ff5792—
punctuation.definition.tag, punctuation.definition, punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.separator#00bdd6—
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field#004d57—
markup.inserted#00b368—
markup.deleted#e64100—
markup.changed#fa8900—
markup.deleted.git_gutter#e64100—
markup.inserted.git_gutter#00b368—
markup.changed.git_gutter#fa8900—
markup.untracked.git_gutter#e5164a—
markup.ignored.git_gutter#8ca6a6—
constant.other.haskell#e64100—
storage.type.haskell#fa8900
source.js storage, source.js keyword.declaration#fa8900—
constant.other.key meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#00b368
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#00bdd6—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#00bdd6italic
source.json meta.structure.dictionary.json support.type.property-name.json#e64100—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fa8900—
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#b3694d—
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#00b368—
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#0095a8—
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#00bdd6—
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#ff5792—
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#005661—
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#004d57—
markup.bold, markup.bold string#e64100bold
markup.italic#ff5792italic
markup.underline#00b368underline
markup.strike#8ca6a6strike
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e5164abold
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.setext#e64100bold
constant.other.reference.link.markdown, string.other.link.title.markdown#fa8900—
markup.raw, markup.fenced_code, markup.inline.raw#0095a8—
string.other.link.description.title.markdown#ff5792—
markup.table#00bdd6—
markup.quote#00bdd6italic
text.html.markdown, punctuation.definition.list_item.markdown#005661—
variable.language.fenced.markdown#004d57—
source.purescript entity.name.type#fa8900—
source.purescript entity.name.class#b3694d—
storage.type.string.python#00bdd6—
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime#b3694d—