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#ffd35c13
  • activityBar.activeBorder#ffd35c
  • activityBar.activeFocusBorder#ffd35c
  • activityBar.background#0a0911
  • activityBar.dropBorder#ffd35c
  • activityBar.inactiveForeground#bdbdbd
  • activityBarBadge.background#3dffb5
  • activityBarBadge.foreground#000000
  • badge.background#3dffb5
  • badge.foreground#000000
  • button.background#5cb8ff
  • button.foreground#000000
  • button.hoverBackground#4e9cd9
  • checkbox.background#1a172b
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#1a172b
  • dropdown.border#201c35
  • editor.background#12101e
  • editor.findMatchBorder#ffd35c
  • editor.findMatchHighlightBackground#f0f0f030
  • editor.foldBackground#3df5a530
  • editor.foreground#f0f0f0
  • editor.lineHighlightBackground#1a172b
  • editor.selectionBackground#ffd35c30
  • editorBracketMatch.background#0f0d19
  • editorBracketMatch.border#cca94a
  • editorCursor.background#000000
  • editorCursor.foreground#ffd35c
  • editorError.foreground#F07171
  • editorGroup.border#0a0911
  • editorGroup.dropBackground#ffd35c30
  • editorGroupHeader.noTabsBackground#1a172b
  • editorGroupHeader.tabsBackground#1a172b
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#211e37
  • editorIndentGuide.activeBackground#ffd35c
  • editorIndentGuide.background#211e37
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#8077b6
  • editorLineNumber.foreground#3a3361
  • editorLink.activeForeground#ffd35c
  • editorMarkerNavigation.background#12101e
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#211e37
  • editorOverviewRuler.bracketMatchForeground#ffd35c
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#ffd35c
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#0c0b14
  • editorRuler.foreground#211e37
  • editorSuggestWidget.background#1a172b
  • editorSuggestWidget.border#211e37
  • editorSuggestWidget.highlightForeground#F07171
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#312b51
  • editorWidget.background#12101e
  • editorWidget.resizeBorder#211e37
  • errorForeground#F07171
  • extensionButton.prominentBackground#5cb8ff
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#4a93cc
  • focusBorder#ffd35c
  • foreground#f0f0f0
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • input.background#1a172b
  • input.border#201c35
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#000000
  • inputValidation.infoBackground#399EE690
  • inputValidation.infoBorder#399EE6
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#EF7C2A90
  • inputValidation.warningBorder#EF7C2A
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#ffd35c20
  • list.errorForeground#F07171
  • list.focusBackground#ffd35c30
  • list.highlightForeground#F07171
  • list.hoverBackground#1c192f
  • list.inactiveSelectionBackground#ffd35c25
  • list.warningForeground#EF7C2A
  • menu.background#12101e
  • menu.foreground#f0f0f0
  • menu.selectionBackground#ffd35cDD
  • menu.selectionForeground#000000
  • menu.separatorBackground#312b51
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#ffd35c80
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notebook.focusedRowBorder#ffd35c
  • notifications.background#12101e
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#ffd35c
  • panelTitle.activeBorder#ffd35c
  • peekViewResult.background#1a172b
  • peekViewTitle.background#0a0911
  • pickerGroup.border#030204
  • pickerGroup.foreground#ffd35c
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#ffd35c
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#312b5140
  • scrollbarSlider.background#40396a50
  • scrollbarSlider.hoverBackground#4f468440
  • selection.background#ffd35c80
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#0e0d18
  • sideBarSectionHeader.background#151425
  • statusBar.background#0a0911
  • statusBarItem.hoverBackground#19172b
  • statusBarItem.prominentBackground#ffd35c
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#e6be53
  • tab.activeBackground#12101e
  • tab.activeBorder#ffd35c
  • tab.activeModifiedBorder#399EE6
  • tab.border#211e37
  • tab.hoverBackground#211e37
  • tab.inactiveBackground#1a172b
  • tab.lastPinnedBorder#ffd35c50
  • terminal.selectionBackground#ffd35c
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffd35c
  • textLink.activeForeground#3df5a5
  • textLink.foreground#fb7eaa
  • textPreformat.foreground#ffd429
  • textSeparator.foreground#030204
  • titleBar.activeBackground#1a172b
  • titleBar.border#1d1a30
  • titleBar.inactiveBackground#12101e
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#f0f0f0
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#f0f0f0
comment, punctuation.definition.comment#474077
string, punctuation.definition.string#ffd429
constant.character.escape#fb7eaa
keyword, constant.language.import-export-all#ffd35c
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#3dffb5
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#fb7eaa
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#3df5a5
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#F07171
constant#3dffb5
constant.numeric, constant.language#5cb8ff
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#5cb8ff
punctuation, meta.brace#979797
comment.block.documentation entity.name.type#F07171
variable.language.this, variable.language.special.self#fb7eaa
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#979797
entity.name.tag#fb7eaa
meta.tag string#ffd429
meta.attribute punctuation.definition.string#979797
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#ffd35c
constant.character.entity, punctuation.definition.entity#5cb8ff
entity.name.section.markdown, markup.heading.setext#ffd35c
punctuation.definition.list#ffd35c
meta.separator.markdown#ffd35c
markup.inline.raw#fb7eaa
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#979797
link, markup.underline.link, constant.other.reference.link.markdown#3df5a5
markup.quote#5cb8ff
entity.name.tag.css, entity.name.tag.wildcard#ffd429
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#ffd35c
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#fb7eaa
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#3df5a5
source.css constant.numeric#ffd429
meta.property-name, support.type.property-name#5cb8ff
meta.property-value, meta.property-value constant.other, support.constant.property-value#3df5a5
variable.parameter.url#5cb8ff
punctuation.definition.variable#f0f0f0
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ffd35c
entity.name.section#3df5a5
support.type.property-name.json#ffd35c
markup.inserted#78BD65
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6italic
meta.diff.range#fb7eaa