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#030616
  • activityBar.border#03061660
  • activityBar.foreground#a9a9a9
  • activityBarBadge.background#F1F1F1
  • activityBarBadge.foreground#030616
  • badge.background#03061630
  • badge.foreground#BF16D8
  • breadcrumb.activeSelectionForeground#BF16D8
  • breadcrumb.background#030616
  • breadcrumb.focusForeground#0ECCCD
  • breadcrumb.foreground#E04210
  • breadcrumbPicker.background#030616
  • button.background#BF16D850
  • contrastBorder#BF16D840
  • debugToolBar.background#030616
  • diffEditor.insertedTextBackground#159AB615
  • diffEditor.removedTextBackground#FF000020
  • dropdown.background#030616
  • dropdown.border#53AEFF10
  • editor.background#030616
  • editor.findMatchBackground#030616
  • editor.findMatchBorder#BF16D8
  • editor.findMatchHighlightBackground#BF16D893
  • editor.findMatchHighlightBorder#53AEFF30
  • editor.foreground#0ECCCD
  • editor.lineHighlightBackground#03061650
  • editor.selectionBackground#F1F1F130
  • editor.selectionHighlightBackground#BF16D86b
  • editor.selectionHighlightBorder#F1F1F1f0
  • editorBracketMatch.background#030616
  • editorBracketMatch.border#F6107B7f
  • editorCursor.foreground#F6107B
  • editorError.foreground#FF000070
  • editorGroup.border#03061630
  • editorGroupHeader.tabsBackground#030616
  • editorGutter.addedBackground#159AB660
  • editorGutter.deletedBackground#FF000060
  • editorGutter.modifiedBackground#F1F1F160
  • editorHoverWidget.background#030616
  • editorHoverWidget.border#53AEFF10
  • editorIndentGuide.activeBackground#050A25
  • editorIndentGuide.background#050A2570
  • editorInfo.foreground#F1F1F170
  • editorLineNumber.activeForeground#F1F1F1
  • editorLineNumber.foreground#BF16D8c0
  • editorLink.activeForeground#0ECCCD
  • editorMarkerNavigation.background#0ECCCD05
  • editorOverviewRuler.border#030616
  • editorOverviewRuler.errorForeground#FF000040
  • editorOverviewRuler.findMatchForeground#BF16D8
  • editorOverviewRuler.infoForeground#F1F1F140
  • editorOverviewRuler.warningForeground#F6107B70
  • editorRuler.foreground#050A25
  • editorSuggestWidget.background#030616
  • editorSuggestWidget.border#53AEFF10
  • editorSuggestWidget.foreground#0ECCCD
  • editorSuggestWidget.highlightForeground#F6107B
  • editorSuggestWidget.selectedBackground#BF16D820
  • editorWarning.foreground#159AB6
  • editorWhitespace.foreground#0ECCCD40
  • editorWidget.background#030616
  • editorWidget.border#F6107B
  • editorWidget.resizeBorder#BF16D8
  • extensionButton.prominentBackground#159AB690
  • extensionButton.prominentHoverBackground#FF0000
  • focusBorder#53AEFF00
  • gitDecoration.conflictingResourceForeground#F6107B
  • gitDecoration.deletedResourceForeground#FF0000
  • gitDecoration.ignoredResourceForeground#BF16D8
  • gitDecoration.modifiedResourceForeground#E04210
  • gitDecoration.untrackedResourceForeground#F1F1F1
  • input.background#04081E
  • input.border#53AEFF10
  • input.foreground#0ECCCD
  • input.placeholderForeground#0ECCCD60
  • inputOption.activeBackground#0ECCCD30
  • inputOption.activeBorder#0ECCCD30
  • inputValidation.errorBorder#FF000050
  • inputValidation.infoBorder#F1F1F150
  • inputValidation.warningBorder#F6107B50
  • list.activeSelectionBackground#030616
  • list.activeSelectionForeground#BF16D8
  • list.focusBackground#04081E
  • list.focusForeground#F1F1F1
  • list.highlightForeground#BF16D8
  • list.hoverBackground#050A25
  • list.hoverForeground#53AEFF
  • list.inactiveSelectionBackground#03061630
  • list.inactiveSelectionForeground#BF16D8
  • list.warningForeground#F6107B
  • listFilterWidget.background#03061630
  • listFilterWidget.noMatchesOutline#03061630
  • listFilterWidget.outline#03061630
  • menu.background#030616f8
  • menu.border#BF16D850
  • menu.foreground#0ECCCD
  • menu.selectionBackground#04081E
  • menu.selectionBorder#03061630
  • menu.selectionForeground#0ECCCD
  • menu.separatorBackground#0ECCCD
  • menubar.selectionBackground#04081E
  • menubar.selectionBorder#BF16D850
  • menubar.selectionForeground#0ECCCD
  • minimap.background#030616
  • minimapGutter.addedBackground#FF0000
  • minimapGutter.deletedBackground#F6107B
  • minimapGutter.modifiedBackground#159AB6
  • minimapSlider.activeBackground#159bb648
  • minimapSlider.background#159AB680
  • minimapSlider.hoverBackground#159bb637
  • notificationLink.foreground#BF16D8
  • notifications.background#030616
  • notifications.foreground#0ECCCD
  • panel.background#030616
  • panel.border#03061660
  • panelTitle.activeBorder#BF16D8
  • panelTitle.activeForeground#53AEFF
  • panelTitle.inactiveForeground#0ECCCD
  • peekView.border#03061630
  • peekViewEditor.background#0ECCCD05
  • peekViewEditor.matchHighlightBackground#BF16D850
  • peekViewEditorGutter.background#0ECCCD05
  • peekViewResult.background#0ECCCD05
  • peekViewResult.matchHighlightBackground#BF16D850
  • peekViewResult.selectionBackground#BF16D870
  • peekViewTitle.background#0ECCCD05
  • peekViewTitleDescription.foreground#0ECCCD60
  • pickerGroup.foreground#BF16D8
  • progressBar.background#BF16D8
  • scrollbar.shadow#03061600
  • scrollbarSlider.activeBackground#BF16D8cc
  • scrollbarSlider.background#BF16D8bb
  • scrollbarSlider.hoverBackground#BF16D8ee
  • selection.background#BF16D8
  • settings.checkboxBackground#030616
  • settings.checkboxForeground#0ECCCD
  • settings.dropdownBackground#030616
  • settings.dropdownForeground#0ECCCD
  • settings.headerForeground#BF16D8
  • settings.modifiedItemIndicator#BF16D8
  • settings.numberInputBackground#030616
  • settings.numberInputForeground#0ECCCD
  • settings.textInputBackground#030616
  • settings.textInputForeground#0ECCCD
  • sideBar.background#030616
  • sideBar.border#BF16D850
  • sideBar.foreground#f6f6f6
  • sideBarSectionHeader.background#030616
  • sideBarSectionHeader.border#03061660
  • sideBarSectionHeader.foreground#F1F1F1
  • sideBarTitle.foreground#0ECCCD
  • statusBar.background#000000
  • statusBar.border#03061660
  • statusBar.debuggingBackground#F6107B
  • statusBar.debuggingForeground#53AEFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#030616
  • statusBarItem.hoverBackground#BF16D820
  • statusBarItem.remoteBackground#BF16D8
  • statusBarItem.remoteForeground#030616
  • tab.activeBackground#000000
  • tab.activeBorder#d701df
  • tab.activeForeground#fcfeff
  • tab.activeModifiedBorder#BF16D8
  • tab.border#030616
  • tab.inactiveBackground#BF16D820
  • tab.inactiveForeground#0ECCCDaf
  • tab.unfocusedActiveBackground#BF16D840
  • tab.unfocusedActiveBorder#BF16D8
  • tab.unfocusedActiveForeground#0ECCCD
  • tab.unfocusedInactiveBackground#BF16D810
  • tab.unfocusedInactiveForeground#0ECCCD7f
  • terminal.ansiBlack#030616
  • terminal.ansiBlue#F1F1F1
  • terminal.ansiBrightBlack#BF16D8
  • terminal.ansiBrightBlue#F1F1F1
  • terminal.ansiBrightCyan#DD0303
  • terminal.ansiBrightGreen#159AB6
  • terminal.ansiBrightMagenta#F6107B
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#53AEFF
  • terminal.ansiBrightYellow#F6107B
  • terminal.ansiCyan#DD0303
  • terminal.ansiGreen#159AB6
  • terminal.ansiMagenta#F6107B
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#53AEFF
  • terminal.ansiYellow#F6107B
  • terminalCursor.background#030616
  • terminalCursor.foreground#F6107B
  • textLink.activeForeground#0ECCCD
  • textLink.foreground#BF16D8
  • titleBar.activeBackground#030616
  • titleBar.activeForeground#0ECCCD
  • titleBar.border#03061660
  • titleBar.inactiveBackground#030616
  • titleBar.inactiveForeground#BF16D8
  • tree.indentGuidesStroke#050A25
  • widget.shadow#03061630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#008cffitalic bold
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#159AB6
constant.other.php#F6107B
constant.other.color#53AEFF
invalid, invalid.illegal#FF0000
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#fd0000
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#E04210
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#0ECCCD
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#0ECCCD
entity.name.tag.html#ff067ecditalic bold
variable.parameter.js, variable.parameter.keyframe-list.css#F6107B
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#E04210
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#F1F1F1
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#DD0303
support.other.variable, string.other.link, markup.table#0ECCCD
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#F6107B
variable.parameter.function.language.special, variable.parameter#FF0000
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#159AB6
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#b510f6
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#E04210
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF0000
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, variable.other.local.cpp#ff2200italic
entity.other.attribute-name, support.function#b110f6
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#7c7c7c
source.scss keyword.control#F6107B
markup.inserted#159AB6
markup.deleted#FF0000
markup.changed#F6107B
string.regexp#DD0303
constant.character.escape#DD0303
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#0ECCCDitalic
support.type.property-name.json#0ECCCD
text.html.markdown, punctuation.definition.list_item.markdown#0ECCCD
text.html.markdown markup.inline.raw.markdown#F6107B
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#BF16D850
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#E04210bold
markup.underline#F1F1F1underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#BF16D850
markup.quoteitalic
string.other.link.description.title.markdown#F6107B
constant.other.reference.link.markdown#F6107B
markup.raw.block#F6107B
punctuation.definition.raw.markdown, punctuation.definition.markdown#DD0303
variable.language.fenced.markdown#BF16D8
meta.separator#A7A8AFbold
token.info-token#BF16D8
token.warn-token#F6107B
token.error-token#FF293B
token.debug-token#DD0303