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#172030
  • activityBar.border#1A2335
  • activityBar.foreground#A7ACB9
  • activityBarBadge.background#c6797e
  • activityBarBadge.foreground#fff
  • badge.background#a06468df
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#a7acb9
  • breadcrumb.focusForeground#a7acb9
  • breadcrumb.foreground#64727d
  • breadcrumbPicker.background#172030
  • button.background#75809580
  • button.foreground#fff
  • button.hoverBackground#758095
  • contrastBorder#172030
  • debugToolBar.background#97a38f
  • descriptionForeground#a7acb9
  • diffEditor.insertedTextBackground#9BBA9A40
  • diffEditor.insertedTextBorder#9BBA9A
  • diffEditor.removedTextBackground#CC565E40
  • diffEditor.removedTextBorder#CC565E
  • dropdown.background#172030
  • dropdown.border#a06468df
  • dropdown.foreground#ccc
  • editor.background#172030
  • editor.findMatchBackground#91d1bd40
  • editor.findMatchHighlightBackground#91d1bd40
  • editor.findRangeHighlightBackground#91d1bd40
  • editor.foreground#bbb
  • editor.hoverHighlightBackground#91d1bd40
  • editor.inactiveSelectionBackground#91d1bd26
  • editor.lineHighlightBackground#91d1bd10
  • editor.selectionBackground#91d1bd40
  • editor.selectionForeground#91d1bdff
  • editor.wordHighlightBackground#91d1bd40
  • editor.wordHighlightStrongBackground#91d1bd40
  • editorBracketMatch.background#212e45
  • editorBracketMatch.border#eabe9a80
  • editorCodeLens.foreground#758095
  • editorCursor.background#c6797e
  • editorCursor.foreground#c6797e
  • editorError.foreground#cc565e
  • editorGroup.background#172030
  • editorGroup.border#75809559
  • editorGroup.dropBackground#75809566
  • editorGroupHeader.noTabsBackground#172030
  • editorGroupHeader.tabsBackground#172030
  • editorGutter.addedBackground#9BBA9Acc
  • editorGutter.background#172030
  • editorGutter.deletedBackground#CC565Ecc
  • editorGutter.modifiedBackground#eabe9acc
  • editorHoverWidget.background#1F2A3F
  • editorHoverWidget.border#758095
  • editorIndentGuide.activeBackground#75809580
  • editorIndentGuide.background#75809580
  • editorLineNumber.activeForeground#A4B4D1
  • editorLineNumber.foreground#758095
  • editorLink.activeForeground#758095
  • editorOverviewRuler.addedForeground#9BBA9Acc
  • editorOverviewRuler.border#293a57cc
  • editorOverviewRuler.deletedForeground#CC565E40
  • editorOverviewRuler.errorForeground#CC565Ecc
  • editorOverviewRuler.findMatchForeground#91d1bd66
  • editorOverviewRuler.infoForeground#6e94b9cc
  • editorOverviewRuler.modifiedForeground#eabe9acc
  • editorOverviewRuler.selectionHighlightForeground#91d1bd66
  • editorRuler.foreground#75809580
  • editorSuggestWidget.background#1F2A3F
  • editorSuggestWidget.border#758095
  • editorSuggestWidget.foreground#c6cad2
  • editorSuggestWidget.highlightForeground#eabe9a
  • editorSuggestWidget.selectedBackground#293a57
  • editorWarning.foreground#CC565Edf
  • editorWhitespace.foreground#91d1bd26
  • editorWidget.background#192334
  • editorWidget.border#c6797e
  • errorForeground#c6797e
  • extensionButton.prominentBackground#728069B3
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#728069
  • focusBorder#758095
  • gitDecoration.conflictingResourceForeground#d19498
  • gitDecoration.deletedResourceForeground#b18bb1e6
  • gitDecoration.ignoredResourceForeground#6e94b9e6
  • gitDecoration.modifiedResourceForeground#eabe9a
  • gitDecoration.untrackedResourceForeground#ADB9A4
  • input.background#172030
  • input.border#a06468df
  • input.foreground#A7ACB9
  • input.placeholderForeground#808799
  • inputOption.activeBorder#b8bcc6
  • inputValidation.errorBackground#1A2335
  • inputValidation.errorBorder#CC565Edf
  • inputValidation.infoBackground#1A2335
  • inputValidation.infoBorder#6e94b999
  • inputValidation.warningBackground#1A2335
  • inputValidation.warningBorder#eabe9adf
  • list.activeSelectionBackground#c6797edf
  • list.activeSelectionForeground#fff
  • list.dropBackground#75809566
  • list.errorForeground#CC565E
  • list.focusBackground#293a57
  • list.focusForeground#c6cad2
  • list.highlightForeground#eabe9a
  • list.hoverBackground#293a57
  • list.hoverForeground#c6cad2
  • list.inactiveFocusBackground#293a57
  • list.inactiveFocusForeground#a7acb9
  • list.inactiveSelectionBackground#293a57
  • list.inactiveSelectionForeground#c6cad2
  • list.invalidItemForeground#CC565E
  • list.warningForeground#F9B5ACcc
  • menu.background#172030
  • menu.foreground#a7acb9
  • menu.selectionBackground#293a57
  • menu.selectionForeground#c6cad2
  • menubar.selectionBackground#c6797e
  • menubar.selectionForeground#fff
  • merge.border#A7ACB9
  • merge.currentContentBackground#9BBA9A26
  • merge.currentHeaderBackground#9BBA9A80
  • merge.incomingContentBackground#6e94b966
  • merge.incomingHeaderBackground#6e94b999
  • notificationCenter.border#758095
  • notificationCenterHeader.background#1F2A3F
  • notificationCenterHeader.foreground#A7ACB9
  • notificationLink.foreground#c6cad2
  • notifications.background#1F2A3F
  • notifications.border#75809566
  • notifications.foreground#c6cad2
  • notificationToast.border#758095
  • panel.background#172030
  • panel.border#75809559
  • panelTitle.activeBorder#c6797ecc
  • panelTitle.activeForeground#A7ACB9
  • panelTitle.inactiveForeground#808799b3
  • peekView.border#c6797e
  • peekViewEditor.background#1F2A3F
  • peekViewEditor.matchHighlightBackground#91d1bd40
  • peekViewEditorGutter.background#1F2A3F
  • peekViewResult.background#1B2638
  • peekViewResult.fileForeground##c6cad2
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#91d1bd66
  • peekViewResult.selectionBackground#293a57
  • peekViewResult.selectionForeground#c6cad2
  • peekViewTitle.background#1B2638
  • peekViewTitleDescription.foreground#A7ACB9
  • peekViewTitleLabel.foreground#c6cad2
  • pickerGroup.border#758095
  • pickerGroup.foreground#eabe9acc
  • progressBar.background#97a38f
  • scrollbar.shadow#a0646810
  • scrollbarSlider.activeBackground#c6797ef2
  • scrollbarSlider.background#a06468cc
  • scrollbarSlider.hoverBackground#c6797ecc
  • selection.background#91d1bd40
  • settings.checkboxBackground#75809560
  • settings.checkboxBorder#c6797e80
  • settings.checkboxForeground#758095
  • settings.dropdownBackground#172030
  • settings.dropdownBorder#c6797e80
  • settings.dropdownForeground#A7ACB9
  • settings.headerForeground#c6cad2
  • settings.inactiveSelectedItemBorder#75809559
  • settings.modifiedItemForeground#c6797e
  • settings.numberInputBackground#172030
  • settings.numberInputBorder#c6797e80
  • settings.numberInputForeground#A7ACB9
  • settings.textInputBackground#172030
  • settings.textInputBorder#c6797e80
  • settings.textInputForeground#A7ACB9
  • sideBar.background#172030
  • sideBar.border#1A2335
  • sideBar.dropBackground#c6797edf
  • sideBar.foreground#a7acb9
  • sideBarSectionHeader.background#172030
  • sideBarSectionHeader.foreground#e6e6e6
  • statusBar.background#172030
  • statusBar.debuggingBackground#97a38fe6
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#c6cad2
  • statusBar.noFolderBackground#c6797edf
  • statusBarItem.activeBackground#c6797e
  • statusBarItem.activeForeground#fff
  • statusBarItem.hoverBackground#293a57
  • statusBarItem.prominentBackground#b18bb1cc
  • statusBarItem.prominentHoverBackground#b18bb1
  • tab.activeBackground#c6797edf
  • tab.activeForeground#fff
  • tab.border#172030
  • tab.inactiveBackground#172030
  • tab.inactiveForeground#A7ACB9
  • tab.unfocusedActiveForeground#fff
  • tab.unfocusedInactiveForeground#A7ACB9
  • terminal.ansiBlack#374E73
  • terminal.ansiBlue#6e94b9
  • terminal.ansiBrightBlack#3F5A85
  • terminal.ansiBrightBlue#98b3cd
  • terminal.ansiBrightCyan#abcbd3
  • terminal.ansiBrightGreen#bec8b7
  • terminal.ansiBrightMagenta#ccb3cc
  • terminal.ansiBrightRed#d19498
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#F2EFC7
  • terminal.ansiCyan#8ab6c1
  • terminal.ansiGreen#ADB9A4
  • terminal.ansiMagenta#b18bb1
  • terminal.ansiRed#c6797e
  • terminal.ansiWhite#e3e4e8
  • terminal.ansiYellow#ece7ac
  • terminal.background#172030
  • terminal.foreground#b8bcc6
  • terminalCursor.background#ADB9A4
  • terminalCursor.foreground#ADB9A4
  • textBlockQuote.background#1D293D
  • textBlockQuote.border#c6797e
  • textCodeBlock.background#172030
  • textLink.activeForeground#98b3cd
  • textLink.foreground#6e94b9
  • textPreformat.foreground#bbb
  • textSeparator.foreground#bbb
  • titleBar.activeBackground#172030
  • titleBar.activeForeground#A7ACB9
  • titleBar.inactiveBackground#c6797edf
  • titleBar.inactiveForeground#fff
  • walkThrough.embeddedEditorBackground#1F2A3F
  • welcomePage.buttonBackground#1D293D
  • welcomePage.buttonHoverBackground#293A57
  • widget.shadow#121321

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#bbb—
comment, punctuation.definition.comment, unused.comment, wildcard.comment#64727ditalic
constant#eabe9a—
entity#F7E3AF—
invalid#bbb—
keyword#b18bb1italic
keyword.operator#D0D6B5regular
keyword.operator.new#D0D6B5italic
variable.language.this—italic
meta#DB6E8F—
meta.brace#D0D6B5—
punctuation#D0D6B5—
punctuation.definition.template-expression, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#D0D6B5—
storage#b18bb1italic
storage.type.function.arrow#b18bb1regular
string, punctuation.definition.string#A3B09A—
support#F7E3AF—
support.variable.property#DB6E8F—
support.function, entity.name.function#F9B5AC—
variable#C6878F—
variable.other.property, variable.other.object.property#DB6E8F—
variable.parameter#DB6E8F—
punctuation.definition.string.begin, punctuation.definition.string.end#D0D6B5—
comment.block.documentation storage, comment.block.documentation variable, comment.block.documentation punctuation, comment.block.documentation meta#64727d—
meta.object-literal.key entity, meta.object-literal.key#bbb—
source.css entity, source.stylus entity#eabe9a—
entity.other.attribute-name.id.css, entity.other.attribute-name.id.css punctuation.definition.entity.css#eabe9a—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.css punctuation.definition.entity.css#eabe9a—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css#eabe9a—
entity.name.tag#DB6E8F—
source.css support, source.stylus support#bbb—
source.css support.constant.media, source.stylus support.constant.media#D0D6B5—
entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.class.css punctuation.definition.entity.css#D0D6B5—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#A3B09A—
source.css constant.numeric, source.stylus constant.numeric#F9B5AC—
source.css keyword.other.unit, source.stylus keyword.other.unit#A3B09Aregular
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#A3B09A—
punctuation.definition.keyword#b18bb1—
meta.property-value.css, source.stylus meta.property-value#A3B09A—
source.css variable, source.stylus variable#C6878F—
source.css variable.parameter.url, source.stylus variable.parameter.url#A3B09A—
meta.property-list.scss, meta.property-list.css#bbb—
meta.property-value.scss, meta.property-value.less#A3B09A—
source.css meta.at-rule.keyframes, source.css meta.at-rule.mixin, source.css meta.property-list#D0D6B5—
meta.at-rule.each.scss#D0D6B5—
text.html.basic entity.name, text.html.basic meta.tag.sgml#DB6E8F—
meta.toc-list.id.html#A3B09A—
text.html.basic entity.other#F7E3AFitalic
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.scope.between-tag-pair.html#808080—
text.html.basic meta.tag#bbb—
constant.name.attribute.tag.jade, args.mixin.jade, string.interpolated.jade, text.jade meta.tag.other, text.jade constant#D0D6B5—
entity.other.attribute-name.tag.jade—italic
entity.other.attribute-name.class.jade, entity.other.attribute-name.id.jade#eabe9a—
punctuation.definition.tag.xml, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, meta.scope.between-tag-pair.xml#808080—
meta.tag.xml, meta.tag.preprocessor.xml#bbb—
entity.other.attribute-name.localname.xml—italic
source.js support.class.component, source.jsx support.class.component#DB6E8F—
source.js entity.other.attribute-name, source.jsx entity.other.attribute-name#F7E3AFitalic
source.js meta.jsx.children meta.object-literal.key, source.jsx meta.jsx.children meta.object-literal.key#bbb—
source.js meta.tag variable.other.readwrite, source.jsx meta.tag variable.other.readwrite#C6878F—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#808080—
source.js meta.jsx.children, source.jsx meta.jsx.children#bbb—
keyword.operator.expression.typeof.js, keyword.operator.expression.instanceof.js#D0D6B5italic
meta.embedded.block.json#D0D6B5—
source.json support, support.json#bbb—
support.type.property-name.json#bbb—
source.json string.json, source.json punctuation.definition.string.json#A3B09A—
punctuation.definition.heading.markdown#D0D6B5—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#DB6E8Fbold
meta.paragraph.markdown#bbb—
meta.paragraph.markdown meta.other#bbb—
beginning.punctuation.definition.quote.markdown#D0D6B5—
markup.quote.markdown meta.paragraph.markdown#A3B09Aitalic
meta.separator.markdown#D0D6B5—
markup.fenced_code.block.markdown#bbb—
markup.inline.raw.string.markdown#D0D6B5—
markup.bold.markdown, markup.bold.markdown punctuation.definition.bold.markdown#bbbbold
markup.italic.markdown—italic
beginning.punctuation.definition.list.markdown#DB6E8F—
string.other.link.title.markdown#F9B5AC—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#F9B5AC—
markup.underline.link.markdown, markup.underline.link.image.markdown#7ea9a9—
fenced_code.block.language, markup.inline.raw.markdown#A3B09A—
fenced_code.block.language, markup.inline.raw.markdown#A3B09A—
constant.other.database-name.sql#bbb—
constant.other.table-name.sql#bbb—
markup.error#CC565EDF—
markup.inserted#9BBA9A—
markup.deleted#CC565EDF—
markup.changed#FFB86C—