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#F3F31513
  • activityBar.activeBorder#F3F315
  • activityBar.activeFocusBorder#F3F315
  • activityBar.background#212121
  • activityBar.dropBorder#F3F315
  • activityBar.inactiveForeground#a6a6a6
  • activityBarBadge.background#F3F315
  • activityBarBadge.foreground#000000
  • badge.background#F3F315
  • badge.foreground#000000
  • button.background#00d7d7
  • button.foreground#000000
  • button.hoverBackground#00b0b1
  • checkbox.background#3b3b3b
  • diffEditor.insertedTextBackground#78BD6530
  • diffEditor.removedTextBackground#a9030835
  • dropdown.background#3b3b3b
  • dropdown.border#454545
  • editor.background#2e2e2e
  • editor.findMatchBorder#F3F315
  • editor.findMatchHighlightBackground#D9D9D930
  • editor.foldBackground#ff005e30
  • editor.foreground#D9D9D9
  • editor.lineHighlightBackground#3b3b3b
  • editor.selectionBackground#F3F31530
  • editorBracketMatch.background#292929
  • editorBracketMatch.border#c0c011
  • editorCursor.background#000000
  • editorCursor.foreground#F3F315
  • editorError.foreground#f7022a
  • editorGroup.border#212121
  • editorGroup.dropBackground#F3F31530
  • editorGroupHeader.noTabsBackground#3b3b3b
  • editorGroupHeader.tabsBackground#3b3b3b
  • editorGutter.addedBackground#78BD65
  • editorGutter.deletedBackground#a90308
  • editorGutter.modifiedBackground#30f4f8
  • editorHoverWidget.border#484848
  • editorIndentGuide.activeBackground#F3F315
  • editorIndentGuide.background#484848
  • editorInfo.foreground#536991
  • editorLineNumber.activeForeground#adadad
  • editorLineNumber.foreground#616161
  • editorLink.activeForeground#F3F315
  • editorMarkerNavigation.background#2e2e2e
  • editorMarkerNavigationError.background#f7022a
  • editorMarkerNavigationInfo.background#536991
  • editorMarkerNavigationWarning.background#EF7C2A
  • editorOverviewRuler.addedForeground#30f4f8
  • editorOverviewRuler.border#484848
  • editorOverviewRuler.bracketMatchForeground#F3F315
  • editorOverviewRuler.deletedForeground#30f4f8
  • editorOverviewRuler.errorForeground#f7022a
  • editorOverviewRuler.infoForeground#536991
  • editorOverviewRuler.modifiedForeground#30f4f8
  • editorOverviewRuler.selectionHighlightForeground#F3F315
  • editorOverviewRuler.warningForeground#EF7C2A
  • editorPane.background#242424
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#3b3b3b
  • editorSuggestWidget.border#484848
  • editorSuggestWidget.highlightForeground#ff005e
  • editorWarning.foreground#EF7C2A
  • editorWhitespace.foreground#616161
  • editorWidget.background#2e2e2e
  • editorWidget.resizeBorder#484848
  • errorForeground#f7022a
  • extensionButton.prominentBackground#00d7d7
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#00a3a4
  • focusBorder#F3F315
  • foreground#D9D9D9
  • gitDecoration.addedResourceForeground#78BD65
  • gitDecoration.deletedResourceForeground#a90308
  • gitDecoration.modifiedResourceForeground#30f4f8
  • gitDecoration.stageDeletedResourceForeground#a90308
  • gitDecoration.stageModifiedResourceForeground#30f4f8
  • input.background#3b3b3b
  • input.border#454545
  • inputValidation.errorBackground#f7022a90
  • inputValidation.errorBorder#f7022a
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#53699190
  • inputValidation.infoBorder#536991
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#EF7C2A90
  • inputValidation.warningBorder#EF7C2A
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#F3F31520
  • list.errorForeground#f7022a
  • list.focusBackground#F3F31530
  • list.highlightForeground#ff005e
  • list.hoverBackground#3b3b3b
  • list.inactiveSelectionBackground#F3F31525
  • list.warningForeground#EF7C2A
  • menu.background#2e2e2e
  • menu.foreground#D9D9D9
  • menu.selectionBackground#F3F315DD
  • menu.selectionForeground#000000
  • menu.separatorBackground#616161
  • minimap.errorHighlight#f7022a
  • minimap.selectionHighlight#F3F31580
  • minimap.warningHighlight#EF7C2A
  • minimapGutter.addedBackground#78BD65
  • minimapGutter.deletedBackground#a90308
  • minimapGutter.modifiedBackground#30f4f8
  • notebook.focusedRowBorder#F3F315
  • notifications.background#2e2e2e
  • notificationsErrorIcon.foreground#f7022a
  • notificationsInfoIcon.foreground#536991
  • notificationsWarningIcon.foreground#EF7C2A
  • panel.dropBorder#F3F315
  • panelTitle.activeBorder#F3F315
  • peekViewResult.background#3b3b3b
  • peekViewTitle.background#212121
  • pickerGroup.border#141414
  • pickerGroup.foreground#F3F315
  • problemsErrorIcon.foreground#f7022a
  • problemsInfoIcon.foreground#536991
  • problemsWarningIcon.foreground#EF7C2A
  • progressBar.background#F3F315
  • scrollbar.shadow#141414
  • scrollbarSlider.activeBackground#61616140
  • scrollbarSlider.background#7b7b7b50
  • scrollbarSlider.hoverBackground#94949440
  • selection.background#F3F31580
  • settings.modifiedItemIndicator#30f4f8
  • sideBar.background#282828
  • sideBarSectionHeader.background#353535
  • statusBar.background#212121
  • statusBarItem.hoverBackground#3b3b3b
  • statusBarItem.prominentBackground#F3F315
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#d9d913
  • tab.activeBackground#2e2e2e
  • tab.activeBorder#F3F315
  • tab.activeModifiedBorder#30f4f8
  • tab.border#484848
  • tab.hoverBackground#484848
  • tab.inactiveBackground#3b3b3b
  • tab.lastPinnedBorder#F3F31550
  • terminal.selectionBackground#F3F315
  • terminalCursor.background#000000
  • terminalCursor.foreground#F3F315
  • textLink.activeForeground#ff005e
  • textLink.foreground#00d7d7
  • textPreformat.foreground#4CBF99
  • textSeparator.foreground#141414
  • titleBar.activeBackground#3b3b3b
  • titleBar.border#404040
  • titleBar.inactiveBackground#2e2e2e
  • widget.shadow#141414

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#f7022a
meta.embedded, source.groovy.embedded, meta.template.expression#D9D9D9
variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#D9D9D9
comment, punctuation.definition.comment#878787
string, punctuation.definition.string#b061ff
constant.character.escape#00d7d7
keyword, constant.language.import-export-all#aeff00
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#4CBF99
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#00d7d7
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class#ff005e
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#ff5e00
constant#4CBF99
constant.numeric, constant.language#F3F315
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust#F3F315
punctuation, meta.brace#808080
comment.block.documentation entity.name.type#ff5e00
variable.language.this, variable.language.special.self#00d7d7
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#808080
entity.name.tag#00d7d7
meta.tag string#b061ff
meta.attribute punctuation.definition.string#808080
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#aeff00
constant.character.entity, punctuation.definition.entity#F3F315
entity.name.section.markdown, markup.heading.setext#aeff00
punctuation.definition.list#aeff00
meta.separator.markdown#aeff00
markup.inline.raw#00d7d7
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#808080
link, markup.underline.link, constant.other.reference.link.markdown#ff005e
markup.quote#F3F315
entity.name.tag.css, entity.name.tag.wildcard#b061ff
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#aeff00
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#00d7d7
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#ff005e
source.css constant.numeric#b061ff
meta.property-name, support.type.property-name#F3F315
meta.property-value, meta.property-value constant.other, support.constant.property-value#ff005e
variable.parameter.url#F3F315
punctuation.definition.variable#D9D9D9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#aeff00
entity.name.section#ff005e
support.type.property-name.json#aeff00
markup.inserted#78BD65
markup.changed#30f4f8
markup.deleted#a90308
meta.diff.header#30f4f8italic
meta.diff.range#00d7d7