Skip to main content
Coding Theme

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#ff79c6
  • activityBar.activeFocusBorder#ff79c6
  • activityBar.background#2f2e3e
  • activityBar.foreground#82aaff
  • activityBar.inactiveForeground#c0caf5
  • activityBarBadge.background#ff79c6
  • activityBarBadge.foreground#1e1e2e
  • badge.background#ff79c6
  • badge.foreground#1e1e2e
  • breadcrumb.activeSelectionForeground#bd93f9
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#282a36
  • button.background#ff79c6
  • checkbox.foreground#ff79c6
  • descriptionForeground#a9b1d6
  • diffEditor.insertedTextBackground#3e4451
  • dropdown.background#2e2e4e
  • dropdown.listBackground#2e2e4e
  • editor.background#1e1e2e
  • editor.findMatchHighlightBackground#555577
  • editor.findRangeHighlightBackground#44475a
  • editor.foreground#cdd6f4
  • editor.selectionBackground#2a2a40
  • editor.selectionHighlightBackground#454566
  • editor.wordHighlightBackground#44475a
  • editor.wordHighlightStrongBackground#ff79c6
  • editorCursor.foreground#f38ba8
  • editorError.foreground#f7768e
  • editorGroupHeader.tabsBackground#2f2e3e
  • editorInfo.border#a9b1d6
  • editorLineNumber.activeForeground#c0caf5
  • editorLineNumber.foreground#565f89
  • editorWarning.foreground#ff9e64
  • editorWidget.background#2e2e4e
  • extensionButton.prominentBackground#ff79c6
  • extensionButton.prominentForeground#c0caf5
  • extensionButton.prominentHoverBackground#ff79c6
  • focusBorder#3e4451
  • gitDecoration.addedResourceForeground#50fa7b
  • gitDecoration.stageModifiedResourceForeground#bd93f9
  • gitDecoration.untrackedResourceForeground#50fa7b
  • icon.foreground#ff79c6
  • input.background#2e2e4e
  • list.activeSelectionBackground#555577
  • list.activeSelectionForeground#ff79c6
  • list.errorForeground#f7768e
  • list.focusForeground#ff79c6
  • list.hoverBackground#44475a
  • list.hoverForeground#ff79c6
  • list.inactiveFocusBackground#2e2e4e
  • list.inactiveSelectionForeground#c0caf5
  • menu.background#1e1e2e
  • menu.border#3e4451
  • menu.selectionBackground#bd93f9
  • menubar.selectionBackground#44475a
  • minimap.findMatchHighlight#bd93f9
  • minimap.selectionHighlight#44475a
  • minimapGutter.addedBackground#50fa7b
  • minimapGutter.deletedBackground#f7768e
  • minimapGutter.modifiedBackground#ff79c6
  • minimapSlider.activeBackground#ff79c6
  • minimapSlider.hoverBackground#bd93f9
  • notificationCenter.border#ff79c6
  • notificationCenterHeader.background#2e2e4e
  • notificationLink.foreground#82aaff
  • notifications.background#2e2e4e
  • notificationsErrorIcon.foreground#f7768e
  • notificationsInfoIcon.foreground#a9b1d6
  • notificationsWarningIcon.foreground#ff9e64
  • panel.background#1e1e2e
  • panel.border#3e4451
  • panel.dropBorder#ff79c6
  • panelTitle.activeBorder#bd93f9
  • panelTitle.activeForeground#ff9e64
  • panelTitle.inactiveForeground#c0caf5
  • peekViewResult.selectionBackground#2e2e4e
  • progressBar.background#ff79c6
  • sideBar.background#2e2e4e
  • sideBar.foreground#a9b1d6
  • sideBarSectionHeader.background#44475a
  • sideBarTitle.foreground#c0caf5
  • statusBar.background#1e1e2e
  • statusBar.debuggingBackground#ff79c6
  • statusBar.debuggingForeground#c0caf5
  • statusBar.foreground#a9b1d6
  • statusBarItem.activeBackground#44475a
  • tab.activeBackground#282a36
  • tab.activeBorderTop#ff79c6
  • tab.border#3e4451
  • tab.hoverBackground#44475a
  • tab.hoverBorder#ff79c6
  • tab.inactiveBackground#2e2e4e
  • tab.unfocusedActiveBorderTop#82aaff
  • terminal.foreground#ff79c6
  • terminal.selectionBackground#555577
  • terminalCursor.foreground#f38ba8
  • textBlockQuote.background#2e2e4e
  • textBlockQuote.border#ff79c6
  • textCodeBlock.background#2e2e4e
  • textLink.activeForeground#82aaff
  • textLink.foreground#82aaff
  • titleBar.activeBackground#1e1e2e
  • titleBar.activeForeground#c0caf5
  • titleBar.inactiveForeground#a9b1d6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272a4italic
variable, string constant.other.placeholder#f8f8f2
string constant.other.placeholder#50fa7b
constant.other.color#f8f8f2
invalid, invalid.illegal#ff5555
keyword, storage, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python#ff79c6
keyword.other.unit, constant.other.color.rgb-value, constant.other.color, keyword, meta.preprocessor, meta.tag, meta.block, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, meta.preprocessor.c.include#ff79c6
storage, storage.type, storage.modifier, constant.language, support.type.property-name.json, support.constant.json, punctuation.separator.dictionary.key-value#ff79c6
meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#ff79c6
entity.name.tag, meta.tag.sgml.doctype, meta.tag.metadata.doctype, variable.language, support.class.php, support.type.object.module.js, support.constant, meta.block, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ff79c6
entity.other.attribute-name, entity.other.attribute-name.id, meta.tag.block.any.html, meta.attribute-with-value, meta.block, variable.parameter#50fa7b
support.type, support.class, meta.block entity.name.type, variable.language, support.type.property-name.json, support.constant.json#f1fa8c
text.html.basic entity.other.attribute-name.html, meta.block entity.other.attribute-name, meta.tag.any.html, variable.parameter, support.class, support.constant, support.constant.json#f8f8f2
entity.name.function, meta.block entity.name.function, meta.tag, meta.type, meta.return-type, variable.other.readwrite.alias, meta.return-type.entity.name.type, meta.block variable.function#82aaff
variable, meta.block variable, variable.other, variable.other.readwrite#8be9fd
meta.block variable.parameter.function, variable.parameter, constant.numeric, entity.name.class, entity.name.function, support.function, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.type.property-name, support.constant, meta.block entity.name.class, meta.block entity.name.function, meta.block support.function, meta.block support.constant.property-value, meta.block support.constant.font-name, meta.block support.constant.media-type, meta.block support.type.property-name, meta.block support.constant#8be9fd
entity.name.function, variable.function, meta.block entity.name.function, meta.block variable.function#82aaff
string, constant.other.symbol, entity.name.tag, entity.other.attribute-name, meta.tag, string.other.link, meta.tag.sgml.doctype, meta.tag.metadata.doctype, meta.type, meta.return-type, meta.return-type.entity.name.type, meta.block string#50fa7b
support.class, entity.name.class, meta.block entity.name.class, meta.block support.class#f1fa8c
constant.language, meta.block constant.language, meta.tag.sgml.doctype.html, meta.tag.metadata.doctype.html, meta.tag.block.any, support.constant, meta.block support.constant, entity.name.class constant.language#ff79c6
punctuation.section.embedded, variable.language.embedded, meta.tag.metadata.embedded, meta.tag.block.any.embedded, meta.return-type variable.language.embedded, meta.block punctuation.section.embedded, meta.block variable.language.embedded, meta.block meta.tag.metadata.embedded, meta.block meta.tag.block.any.embedded, meta.block meta.return-type variable.language.embedded#f8f8f2
Shade Theme by Sh Raj - VS Code Theme