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.activeBackground#f0dc0213
  • activityBar.activeBorder#f0dc02
  • activityBar.activeFocusBorder#f0dc02
  • activityBar.background#020202
  • activityBar.dropBorder#f0dc02
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#F0DC02
  • activityBarBadge.foreground#000000
  • badge.background#F0DC02
  • badge.foreground#000000
  • button.background#F0DC02
  • button.foreground#000000
  • button.hoverBackground#cab902
  • checkbox.background#1c1c1c
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#1c1c1c
  • dropdown.border#262626
  • editor.background#0f0f0f
  • editor.findMatchBorder#f0dc02
  • editor.findMatchHighlightBackground#ffffff30
  • editor.foldBackground#F0DC0230
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#1c1c1c
  • editor.selectionBackground#f0dc0230
  • editorBracketMatch.background#0a0a0a
  • editorBracketMatch.border#bdad02
  • editorCursor.background#000000
  • editorCursor.foreground#f0dc02
  • editorError.foreground#F07171
  • editorGroup.border#020202
  • editorGroup.dropBackground#f0dc0230
  • editorGroupHeader.noTabsBackground#1c1c1c
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#292929
  • editorIndentGuide.activeBackground1#f0dc02
  • editorIndentGuide.background1#292929
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#8f8f8f
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#f0dc02
  • editorMarkerNavigation.background#0f0f0f
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#292929
  • editorOverviewRuler.bracketMatchForeground#f0dc02
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#f0dc02fa
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#050505
  • editorRuler.foreground#292929
  • editorSuggestWidget.background#1c1c1c
  • editorSuggestWidget.border#292929
  • editorSuggestWidget.highlightForeground#9282FA
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#424242
  • editorWidget.background#0f0f0f
  • editorWidget.resizeBorder#292929
  • errorForeground#F07171
  • extensionButton.prominentBackground#F0DC02
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#bdad02
  • focusBorder#f0dc02
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#1c1c1c
  • input.border#262626
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#399EE690
  • inputValidation.infoBorder#399EE6
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FA8D3E90
  • inputValidation.warningBorder#FA8D3E
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#f0dc0220
  • list.errorForeground#F07171
  • list.focusBackground#f0dc0230
  • list.highlightForeground#9282FA
  • list.hoverBackground#1c1c1c
  • list.inactiveSelectionBackground#f0dc0225
  • list.warningForeground#FA8D3E
  • menu.background#0f0f0f
  • menu.foreground#ffffff
  • menu.selectionBackground#f0dc02DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#424242
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#f0dc0280
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notifications.background#0f0f0f
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#f0dc02
  • panelTitle.activeBorder#f0dc02
  • peekViewResult.background#1c1c1c
  • peekViewTitle.background#020202
  • pickerGroup.border#0f0f0f
  • pickerGroup.foreground#f0dc02
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#f0dc02
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#42424240
  • scrollbarSlider.background#5c5c5c50
  • scrollbarSlider.hoverBackground#75757540
  • selection.background#f0dc0280
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#090909
  • sideBarSectionHeader.background#161616
  • statusBar.background#020202
  • statusBarItem.hoverBackground#1c1c1c
  • statusBarItem.prominentBackground#f0dc02
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#d6c502
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#f0dc02
  • tab.activeModifiedBorder#399EE6
  • tab.border#292929
  • tab.hoverBackground#292929
  • tab.inactiveBackground#1c1c1c
  • tab.lastPinnedBorder#f0dc0250
  • terminal.selectionBackground#f0dc02
  • terminalCursor.background#000000
  • terminalCursor.foreground#f0dc02
  • textLink.activeForeground#F0DC02
  • textLink.foreground#9282FA
  • textPreformat.foreground#F0DC02
  • textSeparator.foreground#0f0f0f
  • titleBar.activeBackground#1c1c1c
  • titleBar.border#212121
  • titleBar.inactiveBackground#0f0f0f
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#ffffff
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#ffffff
comment, punctuation.definition.comment#686868
string, punctuation.definition.string#FFFFFF
constant.character.escape#9282FA
keyword, constant.language.import-export-all#9282FA
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#F0DC02
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#9282FA
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#F0DC02
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#F0DC02
constant#F0DC02
constant.numeric, constant.language#F0DC02
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#F0DC02
punctuation, meta.brace#bfbfbf
variable.language.this, variable.language.special.self#9282FA
comment.block.documentation entity.name.type#F0DC02
variable.language.super#F0DC02
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#bfbfbf
entity.name.tag#9282FA
meta.tag string#FFFFFF
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#9282FA
constant.character.entity, punctuation.definition.entity#F0DC02
entity.name.section.markdown, markup.heading.setext#9282FA
punctuation.definition.list#9282FA
meta.separator.markdown#9282FA
markup.inline.raw#9282FA
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#bfbfbf
link, markup.underline.link, constant.other.reference.link.markdown#F0DC02
markup.quote#F0DC02
entity.name.tag.css, entity.name.tag.wildcard#FFFFFF
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#9282FA
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#9282FA
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#F0DC02
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#FFFFFF
meta.property-name, support.type.property-name#F0DC02
meta.property-value, meta.property-value constant.other, support.constant.property-value#F0DC02
variable.parameter.url#F0DC02
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#9282FA
entity.name.section#F0DC02
support.type.property-name.json#9282FA
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6
meta.diff.range#9282FA
DuckDevLabs by DuckDev by Allan Ramos - VS Code Theme