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