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#000000ff
  • activityBar.border#3c3c3caf
  • activityBar.foreground#b7b7b7ff
  • activityBarBadge.background#009a00ff
  • breadcrumb.background#000000ff
  • breadcrumb.focusForeground#b7b7b7ff
  • breadcrumb.foreground#5f5f5fff
  • button.background#5f5f5fff
  • button.foreground#f8f8f8ff
  • button.secondaryBackground#3a3a3aff
  • button.secondaryForeground#f8f8f8ff
  • commandCenter.background#000000ff
  • commandCenter.foreground#5f5f5fff
  • editor.background#000000ff
  • editor.findMatchBackground#ff004777
  • editor.findMatchHighlightBackground#3a3a3a77
  • editor.foldBackground#3a3a3a77
  • editor.foreground#f8f8f8ff
  • editor.selectionBackground#3a3a3abf
  • editorBracketHighlight.foreground1#00ccd1ff
  • editorBracketHighlight.foreground2#ff00dbff
  • editorBracketHighlight.foreground3#ff6c75ff
  • editorError.foreground#F83379
  • editorGroup.emptyBackground#000000ff
  • editorGroupHeader.noTabsBackground#000000ff
  • editorGroupHeader.tabsBackground#000000ff
  • editorGutter.addedBackground#00df00ff
  • editorGutter.background#000000ff
  • editorGutter.deletedBackground#ff0047ff
  • editorGutter.modifiedBackground#00ccd1ff
  • editorHoverWidget.background#000000ff
  • editorHoverWidget.border#3c3c3caf
  • editorIndentGuide.activeBackground1#3c3c3caf
  • editorIndentGuide.background1#191919ff
  • editorInfo.foreground#00B5B5
  • editorLineNumber.activeForeground#00df00ff
  • editorLineNumber.foreground#3c3c3caf
  • editorLink.activeForeground#ff0047ff
  • editorLink.foreground#ff0047ff
  • editorOverviewRuler.errorForeground#F83379
  • editorOverviewRuler.findMatchForeground#ff004777
  • editorOverviewRuler.infoForeground#00B5B5
  • editorOverviewRuler.warningForeground#D3B857
  • editorSuggestWidget.background#000000ff
  • editorSuggestWidget.border#3c3c3caf
  • editorSuggestWidget.focusHighlightForeground#00df00ff
  • editorSuggestWidget.foreground#f8f8f8ff
  • editorSuggestWidget.highlightForeground#00df00ff
  • editorSuggestWidget.selectedBackground#3a3a3a77
  • editorSuggestWidget.selectedForeground#00df00ff
  • editorSuggestWidget.selectedIconForeground#00df00ff
  • editorWarning.foreground#D3B857
  • editorWidget.background#000000ff
  • editorWidget.border#3c3c3caf
  • editorWidget.foreground#00ccd1ff
  • editorWidget.resizeBorder#3c3c3caf
  • focusBorder#00df00ff
  • gitDecoration.addedResourceForeground#00ccd1ff
  • gitDecoration.conflictingResourceForeground#ff00dbff
  • gitDecoration.deletedResourceForeground#ff0047ff
  • gitDecoration.ignoredResourceForeground#5f5f5fff
  • gitDecoration.modifiedResourceForeground#00ccd1ff
  • gitDecoration.submoduleResourceForeground#00fbfeff
  • gitDecoration.untrackedResourceForeground#d69a00ff
  • input.background#000000ff
  • input.border#3a3a3aff
  • input.foreground#f8f8f8ff
  • list.activeSelectionBackground#3a3a3a77
  • list.activeSelectionForeground#f8f8f8ff
  • list.deemphasizedForeground#5f5f5fff
  • list.errorForeground#F83379
  • list.focusBackground#b7b7b7ff
  • list.focusOutline#00df00ff
  • list.highlightForeground#00df00ff
  • list.hoverBackground#191919ff
  • list.inactiveFocusBackground#5f5f5fff
  • list.inactiveSelectionBackground#191919ff
  • list.infoForeground#00B5B5
  • list.warningForeground#D3B857
  • menu.background#000000ff
  • menu.border#3a3a3aff
  • menu.foreground#f8f8f8ff
  • menu.selectionBackground#3a3a3aff
  • menu.separatorBackground#3a3a3aff
  • minimap.errorHighlight#F83379
  • minimap.infoHighlight#00B5B5
  • minimap.warningHighlight#D3B857
  • notificationsErrorIcon.foreground#F83379
  • notificationsInfoIcon.foreground#00B5B5
  • notificationsWarningIcon.foreground#D3B857
  • panel.background#000000ff
  • panel.border#3c3c3caf
  • sideBar.background#000000ff
  • sideBar.border#3c3c3caf
  • sideBarSectionHeader.background#000000ff
  • sideBarTitle.foreground#5f5f5fff
  • statusBar.background#000000ff
  • statusBar.border#3c3c3caf
  • statusBar.foreground#5f5f5fff
  • tab.activeBorderTop#5f5f5fff
  • tab.border#000000ff
  • tab.inactiveBackground#000000ff
  • tab.unfocusedActiveBackground#191919ff
  • textLink.activeForeground#ff0047ff
  • textLink.foreground#ff0047ff
  • titleBar.activeBackground#000000ff
  • titleBar.border#3c3c3caf
  • titleBar.inactiveBackground#000000ff
  • titleBar.inactiveForeground#5f5f5fff
  • tree.indentGuidesStroke#5f5f5fff
  • welcomePage.background#000000ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, meta.bracket, meta.brace, punctuation.section.braces, punctuation.section.brackets, meta.parenthesis, punctuation.section.parens#b7b7b7ff
keyword.operator, storage.type, meta.link#00df00ff
keyword.operator.namespace#b7b7b7ff
comment#7d7d7dff
entity.name.type, entity.name.class, support.class, entity.name.type.alias, support.type, entity.name.struct, support.type.struct, markup.inline.raw#ff6c75ff
entity.name.tag#009a00ff
meta.tag.attributes, support.type.property-name.toml, support.type.property-name.array, support.type.property-name.table#f8f8f8ff
support.class.component, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#ff6c75ff
entity.name.function, support.function, variable.function, entity.name.macro, entity.other.attribute-name.class, heading#00fbfeffbold
variable.other.enummember, constant.numeric, support.constant.property-value, markup.bold, constant.language.json#ff00dbff
keyword, keyword.operator#00df00ff
support.type.property-name#b7b7b7ff
variable.annotation, meta.decorator, punctuation.definition.string, string.quoted, string.template, entity.name.function.call, support.function.call#00ccd1ff
comment.documentation#7d7d7dff
storage.modifierbold