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.activeBorder#c0973f
  • activityBar.background#16161a
  • activityBar.border#292858
  • activityBar.foreground#9d9ca5
  • activityBar.inactiveForeground#464458
  • activityBarBadge.background#4744e7
  • activityBarBadge.foreground#f7e8d7
  • badge.background#4744e7
  • badge.foreground#f7e8d7
  • breadcrumb.activeSelectionForeground#ffac30
  • breadcrumb.background#18181b
  • breadcrumb.focusForeground#f7e8d7
  • breadcrumb.foreground#9d9ca5
  • breadcrumbPicker.background#18181b
  • button.background#3532db
  • button.foreground#fffce8
  • button.hoverBackground#4744e7
  • checkbox.background#3532db
  • checkbox.border#3f3e64
  • checkbox.foreground#fffce8
  • descriptionForeground#9296ca
  • diffEditor.insertedTextBackground#3d71ff66
  • diffEditor.insertedTextBorder#3d71ff
  • diffEditor.removedTextBackground#d84e2466
  • diffEditor.removedTextBorder#c54c27
  • dropdown.background#1c1c1f
  • dropdown.border#292858
  • dropdown.foreground#bebee0
  • dropdown.listBackground#1c1c1f
  • editor.background#0e0e13
  • editor.findMatchBackground#4744e7ee
  • editor.findMatchBorder#515083cc
  • editor.findMatchHighlightBackground#2d2b83
  • editor.findMatchHighlightBorder#4744e7
  • editor.findRangeHighlightBackground#4744e7
  • editor.findRangeHighlightBorder#4744e766
  • editor.foreground#9798a5
  • editor.lineHighlightBackground#050533
  • editor.lineHighlightBorder#1d1852
  • editor.selectionBackground#4744e766
  • editor.selectionForeground#ffac30
  • editor.selectionHighlightBackground#4744e755
  • editor.selectionHighlightBorder#4744e7
  • editor.snippetFinalTabstopHighlightBackground#26dad123
  • editor.snippetFinalTabstopHighlightBorder#26dad155
  • editor.snippetTabstopHighlightBackground#26dad122
  • editor.snippetTabstopHighlightBorder#26dad155
  • editor.wordHighlightBackground#2d2b83
  • editorBracketMatch.background#0e0e13
  • editorBracketMatch.border#d8c2a0
  • editorCodeLens.foreground#4744e7ee
  • editorCursor.background#ffac30
  • editorCursor.foreground#706ee0cc
  • editorError.border#c54c27
  • editorError.foreground#c54c27
  • editorGroup.border#292858
  • editorGroup.dropBackground#3e3cc798
  • editorGroupHeader.noTabsBackground#0b0b0c
  • editorGroupHeader.tabsBackground#0a0a11
  • editorGroupHeader.tabsBorder#292858ad
  • editorGutter.addedBackground#378dff
  • editorGutter.background#121212
  • editorGutter.deletedBackground#c54c27
  • editorGutter.modifiedBackground#26dad1
  • editorHint.border#d8c2a0
  • editorHint.foreground#f3f3f7
  • editorIndentGuide.activeBackground#4744e7ee
  • editorIndentGuide.background#4744e789
  • editorInfo.border#d8c2a0
  • editorInfo.foreground#f3f3f7
  • editorLightBulb.foreground#d8c2a0
  • editorLightBulbAutoFix.foreground#d8c2a0
  • editorLineNumber.activeForeground#d8c2a0
  • editorLineNumber.foreground#7d7999
  • editorOverviewRuler.addedForeground#26dad1
  • editorOverviewRuler.border#4744e798
  • editorOverviewRuler.bracketMatchForeground#d8c2a0
  • editorOverviewRuler.deletedForeground#c54c27
  • editorOverviewRuler.errorForeground#c54c27
  • editorOverviewRuler.findMatchForeground#378dff
  • editorOverviewRuler.infoForeground#f3f3f7
  • editorOverviewRuler.modifiedForeground#26dad1
  • editorOverviewRuler.rangeHighlightForeground#378dff
  • editorOverviewRuler.selectionHighlightForeground#378dff
  • editorOverviewRuler.warningForeground#eee12a
  • editorOverviewRuler.wordHighlightForeground#378dff
  • editorOverviewRuler.wordHighlightStrongForeground#378dff
  • editorRuler.foreground#4744e789
  • editorUnnecessaryCode.opacity#000000c7
  • editorWarning.border#eee12a
  • editorWarning.foreground#eee12a
  • editorWidget.background#18181b
  • errorForeground#cf4015
  • focusBorder#3f3e64
  • gitDecoration.addedResourceForeground#378dff
  • gitDecoration.conflictingResourceForeground#eee12a
  • gitDecoration.deletedResourceForeground#c54c27
  • gitDecoration.ignoredResourceForeground#7d7999
  • gitDecoration.modifiedResourceForeground#26dad1
  • gitDecoration.submoduleResourceForeground#d8c2a0
  • gitDecoration.untrackedResourceForeground#7d7999
  • icon.foreground#9296ca
  • imagePreview.border#2f2f2faa
  • input.background#1c1c1f
  • input.border#06060a
  • input.foreground#d2d2e4
  • input.placeholderForeground#a59c9c
  • inputOption.activeBackground#0e0e13
  • inputOption.activeBorder#c0973f
  • inputValidation.errorBackground#1c1c1f
  • inputValidation.errorBorder#d43200
  • inputValidation.errorForeground#d43200
  • inputValidation.infoBackground#1c1c1f
  • inputValidation.infoBorder#4744e7
  • inputValidation.infoForeground#1c1c1f
  • inputValidation.warningBackground#1c1c1f
  • inputValidation.warningBorder#ffac30
  • inputValidation.warningForeground#ffac30
  • list.activeSelectionBackground#4744e755
  • list.activeSelectionForeground#d8c2a0
  • list.dropBackground#3e3cc798
  • list.errorForeground#c54c27
  • list.focusBackground#3e3cc798
  • list.focusForeground#d8c2a0
  • list.highlightForeground#3e3cc798
  • list.hoverBackground#3e3cc7dd
  • list.hoverForeground#d8c2a0
  • list.inactiveFocusBackground#4744e755
  • list.inactiveSelectionBackground#4744e755
  • list.inactiveSelectionForeground#9798a5
  • list.invalidItemForeground#c54c27
  • list.warningForeground#3d71ff
  • menu.background#161616
  • menu.border#292858
  • menu.foreground#a5a5a5
  • menu.selectionBackground#4744e788
  • menu.selectionBorder#4744e7ee
  • menu.selectionForeground#f7e8d7
  • menu.separatorBackground#4b49aa
  • menubar.selectionBackground#292858
  • menubar.selectionBorder#292858
  • menubar.selectionForeground#f5ebe1
  • minimap.errorHighlight#d43200
  • minimap.findMatchHighlight#378dff
  • minimap.selectionHighlight#9594e7
  • minimap.warningHighlight#eee12a
  • minimapGutter.addedBackground#3d71ff
  • minimapGutter.deletedBackground#d43200
  • minimapGutter.modifiedBackground#26dad1
  • notificationCenter.border#4744e7ee
  • notificationCenterHeader.background#101029
  • notificationCenterHeader.foreground#f7e8d7
  • notificationLink.foreground#d8c2a0
  • notifications.background#101029
  • notifications.border#4744e7ee
  • notifications.foreground#a5a5a5
  • notificationsErrorIcon.foreground#cf4015
  • notificationsInfoIcon.foreground#f3f3f7ee
  • notificationsWarningIcon.foreground#ffac30
  • notificationToast.border#4744e7ee
  • panel.background#18181b
  • panel.border#292858
  • panelTitle.activeForeground#d8c2a0
  • panelTitle.inactiveForeground#a5a5a5
  • peekView.border#292858
  • peekViewEditor.background#18181b
  • peekViewEditor.matchHighlightBackground#050533
  • peekViewEditor.matchHighlightBorder#1d1852
  • peekViewEditorGutter.background#121212
  • peekViewResult.background#121212
  • peekViewResult.matchHighlightBackground#050533
  • peekViewResult.selectionBackground#050533
  • peekViewTitle.background#0e0e13
  • peekViewTitleDescription.foreground#9798a5
  • peekViewTitleLabel.foreground#f7e8d7
  • problemsErrorIcon.foreground#c54c27
  • problemsInfoIcon.foreground#f3f3f7
  • problemsWarningIcon.foreground#eee12a
  • progressBar.background#4744e7
  • scrollbar.shadow#131e4d
  • scrollbarSlider.activeBackground#4744e798
  • scrollbarSlider.hoverBackground#3e3cc7
  • selection.background#acbcff
  • settings.checkboxBackground#3532db
  • settings.checkboxBorder#292858
  • settings.checkboxForeground#fffce8
  • settings.dropdownBackground#1c1c1f
  • settings.dropdownBorder#292858
  • settings.dropdownForeground#bebee0
  • settings.dropdownListBorder#1c1c1f
  • settings.headerForeground#9d9ca5
  • settings.modifiedItemIndicator#26dad1
  • settings.numberInputBackground#1c1c1f
  • settings.numberInputBorder#292858
  • settings.numberInputForeground#d2d2e4
  • settings.textInputBackground#1c1c1f
  • settings.textInputBorder#292858
  • settings.textInputForeground#d2d2e4
  • sideBar.background#161616
  • sideBar.border#292858
  • sideBar.dropBackground#3e3cc798
  • sideBar.foreground#bcbbc5
  • sideBarSectionHeader.background#1a1936
  • sideBarSectionHeader.border#414169
  • sideBarSectionHeader.foreground#bcbbc5
  • sideBarTitle.foreground#c0c4ff
  • statusBar.background#1a1936
  • statusBar.debuggingBackground#4744e7
  • statusBar.debuggingForeground#f7e8d7
  • statusBar.foreground#9d9ca5
  • statusBarItem.activeBackground#4744e7
  • statusBarItem.hoverBackground#3e3cc7aa
  • symbolIcon.classForeground#c79f72
  • symbolIcon.constructorForeground#c79f72
  • symbolIcon.enumeratorForeground#9296ca
  • symbolIcon.enumeratorMemberForeground#9296ca
  • symbolIcon.fieldForeground#9296ca
  • symbolIcon.functionForeground#706ee0cc
  • symbolIcon.interfaceForeground#706ee0cc
  • symbolIcon.methodForeground#706ee0cc
  • symbolIcon.namespaceForeground#9296ca
  • symbolIcon.propertyForeground#3d71ff
  • symbolIcon.textForeground#ff0000
  • tab.activeBackground#292858
  • tab.activeBorder#292858
  • tab.activeBorderTop#414169
  • tab.activeForeground#f7e8d7
  • tab.border#292858
  • tab.hoverBorder#ffac30
  • tab.inactiveBackground#1a1936
  • tab.inactiveForeground#9d9ca5
  • tab.unfocusedActiveBackground#1a1936
  • tab.unfocusedActiveBorderTop#292858
  • tab.unfocusedHoverBorder#ffac30
  • tab.unfocusedInactiveForeground#9d9ca5
  • terminal.ansiBlack#929292
  • terminal.ansiBlue#5285f3
  • terminal.ansiBrightBlack#b1b1b1
  • terminal.ansiBrightBlue#789be6
  • terminal.ansiBrightCyan#6ccdeb
  • terminal.ansiBrightGreen#7de0ba
  • terminal.ansiBrightMagenta#d469e7
  • terminal.ansiBrightRed#c54c27
  • terminal.ansiBrightWhite#eeeeee
  • terminal.ansiBrightYellow#e6ba78
  • terminal.ansiCyan#20beee
  • terminal.ansiGreen#26da95
  • terminal.ansiMagenta#c126dd
  • terminal.ansiRed#c54c2766
  • terminal.ansiWhite#cacaca
  • terminal.ansiYellow#eea02c
  • terminal.background#0e0e13
  • terminal.border#292858
  • terminal.foreground#9798a5
  • terminal.selectionBackground#4744e766
  • terminalCursor.background#ffac30
  • terminalCursor.foreground#706ee0cc
  • textBlockQuote.border#4744e7
  • textLink.activeForeground#bdbcff
  • textLink.foreground#726fff
  • textPreformat.foreground#ffac30
  • textSeparator.foreground#ff0000
  • titleBar.activeBackground#101029
  • titleBar.activeForeground#9d9ca5
  • titleBar.border#292858
  • titleBar.inactiveBackground#1c1c1d
  • titleBar.inactiveForeground#464458
  • tree.indentGuidesStroke#4744e7ee
  • widget.shadow#1a1a58
  • window.activeBorder#1a195c
  • window.inactiveBorder#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9d9ca5italic
variable, string constant.other.placeholder, punctuation.definition.comment#ebb272
constant.other.color#c79f72
invalid, invalid.illegal#cf4015
keyword, storage.type, storage.modifier#6884c0
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#c2c2c2
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#dcdcdc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#c79f72
meta.block variable.other#ebb272
support.other.variable, string.other.link#ebb272
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#dd8359
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ebb272
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ebb272
support.type#c79f72
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#ffcb90
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffcb90
variable.language#ffcb90italic
entity.name.method.js#c79f72italic
meta.class-method.js entity.name.function.js, variable.function.constructor#c79f72
entity.other.attribute-name#7e90df
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7e90dfitalic
entity.other.attribute-name.class#ffcb90
source.sass keyword.control#7e90df
markup.inserted#7e90df
markup.deleted#c84c26
markup.changed#503faf
string.regexp#47ffa9
constant.character.escape#47ffa9
*url*, *link*, *uri*#26b4b9underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#a79075italic
source.json meta.structure.dictionary.json support.type.property-name.json#a79075
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a79075
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#a79075
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#a79075
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#a79075
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#a79075
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#a79075
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#a79075
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#a79075
text.html.markdown, punctuation.definition.list_item.markdown#9798a5
text.html.markdown markup.inline.raw.markdown#a79075
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#a79075
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#47548d
markup.italic#a79075italic
markup.bold, markup.bold string#a79075bold
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#a79075bold
markup.underline#a79075underline
markup.quote punctuation.definition.blockquote.markdown#a79075
markup.quote#a79075italic
string.other.link.title.markdown#26b4b9
string.other.link.description.title.markdown#9d9ca5
constant.other.reference.link.markdown#9d9ca5
markup.raw.block#c79f72
markup.raw.block.fenced.markdown#a79075
punctuation.definition.fenced.markdown#a79075
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#a79075
variable.language.fenced.markdown#a79075
meta.separator#7e90dfbold
markup.table#a79075