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#900048
  • activityBar.foreground#00ffb7
  • activityBar.inactiveForeground#c79bff
  • activityBarBadge.background#00ffb7
  • activityBarBadge.foreground#19002e
  • button.background#900048
  • button.foreground#ffffff
  • button.secondaryBackground#c79bff
  • button.secondaryForeground#19002e
  • debugExceptionWidget.background#900048
  • dropdown.background#19002e
  • dropdown.border#c79bff
  • dropdown.foreground#c79bff
  • dropdown.listBackground#240041
  • editor.background#19002e
  • editor.foreground#ff0e82
  • editorCursor.foreground#00ffb7
  • editorGroupHeader.tabsBackground#240041
  • editorLineNumber.activeForeground#00ffb7
  • editorLineNumber.foreground#c79bff
  • editorWidget.background#240041
  • editorWidget.foreground#c79bff
  • editorWidget.resizeBorder#ff0e82
  • gitDecoration.addedResourceForeground#00ffb7
  • gitDecoration.conflictingResourceForeground#399ee6
  • gitDecoration.deletedResourceForeground#d70040
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#ffd700
  • input.background#19002e
  • input.border#c79bff
  • inputOption.hoverBackground#900048
  • list.activeSelectionBackground#900048cd
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#900048cd
  • list.focusBackground#900048cd
  • list.focusForeground#cccccc
  • list.highlightForeground#00ffb7
  • list.hoverBackground#19002e
  • list.hoverForeground#c79bff
  • list.inactiveSelectionBackground#c79bff80
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#900048cd
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#240041
  • menu.background#240041
  • menu.selectionBackground#c79bff
  • menu.selectionForeground#19002e
  • menu.separatorBackground#c79bff80
  • menubar.selectionBackground#c79bff80
  • menubar.selectionForeground#19002e
  • notificationCenter.border#19002e
  • notificationCenterHeader.background#19002e
  • notificationCenterHeader.foreground#ff0e82
  • notifications.background#e7e7e7
  • notifications.border#c79bff80
  • notifications.foreground#240041
  • notificationsErrorIcon.foreground#d70040
  • notificationsInfoIcon.foreground#399ee6
  • notificationsWarningIcon.foreground#ffd700
  • notificationToast.border#19002e
  • scrollbar.shadow#900048
  • selection.background#ac6aff9b
  • sideBar.background#240041
  • sideBarSectionHeader.background#19002e
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#c79bff
  • sideBarTitle.foreground#ff0e82
  • statusBar.background#c79bff
  • statusBar.foreground#19002e
  • statusBarItem.remoteBackground#00ffb7
  • statusBarItem.remoteForeground#19002e
  • tab.inactiveBackground#2f0b4b
  • titleBar.activeBackground#240041
  • titleBar.activeForeground#c79bff
  • titleBar.inactiveBackground#19002e
  • tree.indentGuidesStroke#c79bff80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#f07171
meta.embedded, source.groovy.embedded, meta.template.expression#ff0e82
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#ff0e82
comment, punctuation.definition.comment#490087
string, punctuation.definition.string#a470d8
constant.character.escape#399ee6
keyword, constant.language.import-export-all#fa8d3e
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#4cbf99
keyword.control, storage, support.type, keyword.operator.expression, keyword.operator.new#399ee6
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#00ffb7
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#f07171
constant#4cbf99
constant.numeric, constant.language#fc798a
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#fc798a
punctuation, meta.brace#a60954
comment.block.documentation entity.name.type#f07171
variable.language.this, variable.language.special.self#399ee6
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#a60954
entity.name.tag#399ee6
meta.tag string#a470d8
meta.attribute punctuation.definition.string#a60954
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#fa8d3e
constant.character.entity, punctuation.definition.entity#fc798a
entity.name.section.markdown, markup.heading.setext#fa8d3e
punctuation.definition.list#fa8d3e
meta.separator.markdown#fa8d3e
markup.inline.raw#399ee6
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#a60954
link, markup.underline.link, constant.other.reference.link.markdown#00ffb7
markup.quote#fc798a
entity.name.tag.css, entity.name.tag.wildcard#a470d8
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#fa8d3e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#399ee6
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#00ffb7
source.css constant.numeric#a470d8
meta.property-name, support.type.property-name#fc798a
meta.property-value, meta.property-value constant.other, support.constant.property-value#00ffb7
variable.parameter.url#fc798a
punctuation.definition.variable#ff0e82
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#fa8d3e
entity.name.section#00ffb7
support.type.property-name.json#fa8d3e
markup.inserted#78bd65
markup.changed#399ee6
markup.deleted#f07171
meta.diff.header#399ee6italic
meta.diff.range#399ee6