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.activeFocusBorder#dba3d8
  • activityBar.background#070008
  • activityBar.foreground#dba3d8
  • activityBarBadge.background#dba3d8
  • activityBarBadge.foreground#000000
  • badge.background#dba3d8
  • badge.foreground#000000
  • banner.background#070008
  • banner.foreground#dba3d8
  • banner.iconForeground#dba3d8
  • breadcrumb.activeSelectionForeground#dba3d8
  • breadcrumb.background#070008
  • breadcrumb.focusForeground#dba3d8
  • breadcrumb.foreground#dba3d8
  • breadcrumbPicker.background#070008
  • button.background#e61bc410
  • button.border#e66fd236
  • button.foreground#dba3d8
  • button.hoverBackground#e61bc425
  • button.secondaryBackground#951be610
  • button.secondaryForeground#bda3db
  • button.secondaryHoverBackground#9b31e21f
  • checkbox.background#070008
  • checkbox.border#e66fd236
  • checkbox.foreground#dba3d8
  • checkbox.selectBackground#dba3d8
  • checkbox.selectBorder#dba3d8
  • commandCenter.activeBackground#dba3d828
  • commandCenter.activeBorder#00000000
  • commandCenter.background#00000000
  • commandCenter.border#00000000
  • commandCenter.inactiveBorder#00000000
  • debugIcon.continueForeground#e963e2
  • debugIcon.disconnectForeground#9606b3
  • debugIcon.pauseForeground#a1419d
  • debugIcon.restartForeground#8523be
  • debugIcon.startForeground#dba3d8
  • debugIcon.stepBackForeground#803e91
  • debugIcon.stepIntoForeground#c03aaa
  • debugIcon.stepOutForeground#9e278a
  • debugIcon.stepOverForeground#9429af
  • debugIcon.stopForeground#c90668
  • debugToolBar.background#070008
  • debugToolBar.border#e61bc491
  • diffEditor.border#e66fd236
  • diffEditor.diagonalFill#7e1c7949
  • diffEditor.insertedTextBackground#02470b1f
  • diffEditor.insertedTextBorder#7a057000
  • diffEditor.removedTextBackground#8d03031f
  • diffEditor.removedTextBorder#8f061b00
  • dropdown.background#070008
  • dropdown.border#e61bc41c
  • dropdown.foreground#dba3d8
  • dropdown.listBackground#070008
  • editor.background#070008
  • editor.findMatchBackground#dd409600
  • editor.findMatchBorder#e36de7
  • editor.findMatchHighlightBackground#df1be648
  • editor.findRangeHighlightBackground#e61bc41c
  • editor.foreground#dba3d8
  • editor.hoverHighlightBackground#e61bc436
  • editor.lineHighlightBackground#e61bc41c
  • editor.lineHighlightBorder#d44ebe00
  • editor.rangeHighlightBackground#e61bc41c
  • editor.selectionBackground#e61bc431
  • editor.wordHighlightBackground#df1be648
  • editor.wordHighlightStrongBackground#df1be67c
  • editorBracketMatch.border#e36de7
  • editorCodeLens.foreground#e36de7
  • editorCursor.foreground#dba3d8
  • editorGroup.border#070008
  • editorGroup.dropBackground#e61bc41c
  • editorGroupHeader.noTabsBackground#8d03031f
  • editorGroupHeader.tabsBackground#070008
  • editorGutter.addedBackground#387a05
  • editorGutter.deletedBackground#8f061a
  • editorGutter.modifiedBackground#db6809
  • editorHoverWidget.background#070008
  • editorHoverWidget.border#e66fd236
  • editorHoverWidget.foreground#dba3d8
  • editorIndentGuide.activeBackground1#E797C6
  • editorIndentGuide.background1#e66fd236
  • editorInlayHint.background#8852b9
  • editorInlayHint.foreground#dba3d8
  • editorLightBulb.foreground#e36de7
  • editorLightBulbAutoFix.foreground#8852b9
  • editorLineNumber.activeForeground#e66bdf
  • editorLineNumber.foreground#7e437b
  • editorLink.activeForeground#ca49bf
  • editorOverviewRuler.border#070008
  • editorRuler.foreground#e66fd236
  • editorSuggestWidget.background#070008
  • editorSuggestWidget.foreground#dba3d8
  • editorSuggestWidget.selectedBackground#e61bc41c
  • editorWhitespace.foreground#e61bc41c
  • editorWidget.background#070008
  • editorWidget.border#dba3d8
  • editorWidget.foreground#dba3d8
  • focusBorder#f07dea
  • foreground#91768f
  • gitDecoration.addedResourceForeground#e079ff
  • gitDecoration.conflictingResourceForeground#d55fde
  • gitDecoration.deletedResourceForeground#771f70
  • gitDecoration.ignoredResourceForeground#8b2b85
  • gitDecoration.modifiedResourceForeground#df7eab
  • gitDecoration.renamedResourceForeground#a179ffc0
  • gitDecoration.stageDeletedResourceForeground#580451
  • gitDecoration.stageModifiedResourceForeground#f14394
  • gitDecoration.untrackedResourceForeground#8852b9
  • icon.foreground#dba3d8
  • input.background#070008
  • input.border#dba3d8
  • input.foreground#dba3d8
  • input.placeholderForeground#dba3d8b0
  • inputOption.activeBackground#df1be648
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#dba3d8
  • inputOption.hoverBackground#e61bc41c
  • inputValidation.errorBackground#5a0512
  • inputValidation.errorBorder#8f061a
  • inputValidation.errorForeground#ff0026
  • inputValidation.warningBackground#7a3a06
  • inputValidation.warningBorder#db6809
  • inputValidation.warningForeground#ff9100
  • keybindingLabel.background#e61bc41c
  • keybindingLabel.border#e61bc41c
  • keybindingLabel.bottomBorder#dba3d8
  • keybindingLabel.foreground#dba3d8
  • list.activeSelectionBackground#e61bc41c
  • list.activeSelectionForeground#dba3d8
  • list.dropBackground#e61bc41c
  • list.focusBackground#e61bc41c
  • list.focusForeground#dba3d8
  • list.focusHighlightForeground#dba3d8
  • list.focusOutline#ff00f200
  • list.highlightForeground#dba3d8
  • list.hoverBackground#e61bc41c
  • list.hoverForeground#dba3d8
  • list.inactiveSelectionBackground#070008
  • list.inactiveSelectionForeground#dba3d8
  • menu.background#070008
  • menu.foreground#dba3d8
  • menu.separatorBackground#dba3d8
  • menubar.selectionBackground#e61bc41c
  • minimap.findMatchHighlight#dba3d8
  • minimap.selectionHighlight#a7118eb9
  • minimapGutter.addedBackground#387a05
  • minimapGutter.deletedBackground#8f061a
  • minimapGutter.modifiedBackground#db6809
  • minimapSlider.activeBackground#e61bc436
  • minimapSlider.background#e61bc411
  • minimapSlider.hoverBackground#e61bc41c
  • notificationCenter.border#dba3d8
  • notificationCenterHeader.background#070008
  • notificationCenterHeader.foreground#dba3d8
  • notificationLink.foreground#dba3d8
  • notifications.background#070008
  • notifications.border#dba3d8
  • notifications.foreground#dba3d8
  • notificationsErrorIcon.foreground#8f061a
  • notificationsInfoIcon.foreground#dba3d8
  • notificationsWarningIcon.foreground#db6809
  • notificationToast.border#dba3d8
  • panel.background#070008
  • panel.border#e61bc41c
  • panelTitle.activeForeground#dba3d8
  • panelTitle.inactiveForeground#91768f
  • peekView.border#e61bc41c
  • peekViewEditor.background#e61bc41c
  • peekViewEditor.matchHighlightBackground#e61bc41c
  • peekViewEditor.matchHighlightBorder#f089dfbe
  • peekViewResult.background#e61bc41c
  • peekViewResult.lineForeground#dba3d8
  • peekViewResult.matchHighlightBackground#e61bc41c
  • peekViewResult.selectionBackground#e61bc41c
  • peekViewTitle.background#e61bc41c
  • peekViewTitleDescription.foreground#dba3d8
  • peekViewTitleLabel.foreground#dba3d8
  • pickerGroup.foreground#dba3d8
  • progressBar.background#dba3d8
  • scrollbarSlider.activeBackground#e61bc43d
  • scrollbarSlider.background#e61bc428
  • scrollbarSlider.hoverBackground#e61bc436
  • selection.background#e61bc470
  • settings.dropdownBackground#e61bc40c
  • settings.focusedRowBackground#e61bc410
  • settings.focusedRowBorder#df51d83b
  • settings.headerForeground#dba3d8
  • settings.modifiedItemIndicator#f071e5
  • settings.rowHoverBackground#e61bc410
  • sideBar.background#070008
  • sideBar.dropBackground#e61bc41c
  • sideBarSectionHeader.background#070008
  • sideBarSectionHeader.foreground#dba3d8
  • sideBarTitle.foreground#dba3d8
  • statusBar.background#070008
  • statusBar.debuggingBackground#e61bc41c
  • statusBar.debuggingForeground#dba3d8
  • statusBar.foreground#dba3d8
  • statusBar.noFolderBackground#e61bc436
  • statusBar.noFolderForeground#dba3d8
  • statusBarItem.activeBackground#e61bc436
  • statusBarItem.hoverBackground#e61bc41c
  • tab.activeBackground#070008
  • tab.activeBorder#dba3d8
  • tab.activeForeground#dba3d8
  • tab.border#cf7dc400
  • tab.hoverBackground#e61bc41c
  • tab.inactiveBackground#070008
  • tab.inactiveForeground#725b70
  • tab.unfocusedActiveBorder#070008
  • textLink.activeForeground#ca49bf
  • textLink.foreground#f071e5
  • titleBar.activeBackground#070008
  • titleBar.activeForeground#dba3d8
  • titleBar.border#e66fd21a
  • titleBar.inactiveBackground#070008
  • titleBar.inactiveForeground#dba3d8
  • toolbar.activeBackground#e61bc436
  • toolbar.hoverBackground#e61bc41c
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#7e68a7
constant.other.color#dba3d8
invalid, invalid.illegal#FF5370
keyword#e90ea7
storage.type#934ec2
storage.modifier#d452ce
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#e671d2
punctuation#df23bf
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ee12ac
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#970884
meta.block variable.other#f071e5
support.other.variable, string.other.link#f071e5
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e797c6
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#ffade6
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#c572e6ef
support.type#8125a5
variable.language#da5d9b
constant.other.caps#d63485
entity.other.attribute-name#C792EA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
source.sass keyword.control#82AAFF
markup.inserted#8cd322
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
text.html.markdown, punctuation.definition.list_item.markdown#f7aef1
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#d305d3
markup.italic#f071e5italic
markup.bold, markup.bold string#f071e5bold
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#f071e5bold
markup.underline#e71accunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#8d0aca
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#f00b89
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fbc8fd
variable.language.fenced.markdown#a369a3
meta.separator#dba3d8bold
markup.table#dba3d8
ThemeDatabase All Themes by enes ozturk - VS Code Theme