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#000909
  • activityBar.border#00090960
  • activityBar.foreground#C0C0C0
  • activityBarBadge.background#487878
  • activityBarBadge.foreground#000909
  • badge.background#00090930
  • badge.foreground#184848
  • breadcrumb.activeSelectionForeground#184848
  • breadcrumb.background#000909
  • breadcrumb.focusForeground#C0C0C0
  • breadcrumb.foreground#787860
  • breadcrumbPicker.background#000909
  • button.background#18484850
  • contrastBorder#18484840
  • debugToolBar.background#000909
  • diffEditor.insertedTextBackground#48607815
  • diffEditor.removedTextBackground#90907820
  • dropdown.background#000909
  • dropdown.border#F0F0F010
  • editor.background#000909
  • editor.findMatchBackground#000909
  • editor.findMatchBorder#184848
  • editor.findMatchHighlightBackground#18484893
  • editor.findMatchHighlightBorder#F0F0F030
  • editor.foreground#C0C0C0
  • editor.lineHighlightBackground#00090950
  • editor.selectionBackground#48787830
  • editor.selectionHighlightBackground#1848486b
  • editor.selectionHighlightBorder#487878f0
  • editorBracketHighlight.foreground1#F0D8D8
  • editorBracketHighlight.foreground2#F0F0D8
  • editorBracketHighlight.foreground3#A89090
  • editorBracketMatch.background#000909
  • editorBracketMatch.border#90A8A87f
  • editorCursor.foreground#90A8A8
  • editorError.foreground#90907870
  • editorGroup.border#00090930
  • editorGroupHeader.tabsBackground#000909
  • editorGutter.addedBackground#48607860
  • editorGutter.deletedBackground#90907860
  • editorGutter.modifiedBackground#48787860
  • editorHoverWidget.background#000909
  • editorHoverWidget.border#F0F0F010
  • editorIndentGuide.activeBackground#003A3A
  • editorIndentGuide.background#003A3A70
  • editorInfo.foreground#48787870
  • editorLineNumber.activeForeground#487878
  • editorLineNumber.foreground#184848c0
  • editorLink.activeForeground#C0C0C0
  • editorMarkerNavigation.background#C0C0C005
  • editorOverviewRuler.border#000909
  • editorOverviewRuler.errorForeground#90907840
  • editorOverviewRuler.findMatchForeground#184848
  • editorOverviewRuler.infoForeground#48787840
  • editorOverviewRuler.warningForeground#90A8A870
  • editorRuler.foreground#003A3A
  • editorSuggestWidget.background#000909
  • editorSuggestWidget.border#F0F0F010
  • editorSuggestWidget.foreground#C0C0C0
  • editorSuggestWidget.highlightForeground#90A8A8
  • editorSuggestWidget.selectedBackground#18484820
  • editorWarning.foreground#486078
  • editorWhitespace.foreground#C0C0C040
  • editorWidget.background#000909
  • editorWidget.border#90A8A8
  • editorWidget.resizeBorder#184848
  • extensionButton.prominentBackground#48607890
  • extensionButton.prominentHoverBackground#909078
  • focusBorder#F0F0F000
  • gitDecoration.conflictingResourceForeground#90A8A8
  • gitDecoration.deletedResourceForeground#909078
  • gitDecoration.ignoredResourceForeground#184848
  • gitDecoration.modifiedResourceForeground#787860
  • gitDecoration.untrackedResourceForeground#487878
  • input.background#002A2A
  • input.border#F0F0F010
  • input.foreground#C0C0C0
  • input.placeholderForeground#C0C0C060
  • inputOption.activeBackground#C0C0C030
  • inputOption.activeBorder#C0C0C030
  • inputValidation.errorBorder#90907850
  • inputValidation.infoBorder#48787850
  • inputValidation.warningBorder#90A8A850
  • list.activeSelectionBackground#000909
  • list.activeSelectionForeground#215555
  • list.focusBackground#002A2A
  • list.focusForeground#487878
  • list.highlightForeground#184848
  • list.hoverBackground#003A3A
  • list.hoverForeground#F0F0F0
  • list.inactiveSelectionBackground#00090930
  • list.inactiveSelectionForeground#184848
  • list.warningForeground#90A8A8
  • listFilterWidget.background#00090930
  • listFilterWidget.noMatchesOutline#00090930
  • listFilterWidget.outline#00090930
  • menu.background#000909f8
  • menu.border#18484850
  • menu.foreground#C0C0C0
  • menu.selectionBackground#002A2A
  • menu.selectionBorder#00090930
  • menu.selectionForeground#C0C0C0
  • menu.separatorBackground#C0C0C0
  • menubar.selectionBackground#002A2A
  • menubar.selectionBorder#18484850
  • menubar.selectionForeground#C0C0C0
  • minimap.background#000909
  • minimapGutter.addedBackground#909078
  • minimapGutter.deletedBackground#90A8A8
  • minimapGutter.modifiedBackground#486078
  • minimapSlider.activeBackground#486078b0
  • minimapSlider.background#48607880
  • minimapSlider.hoverBackground#486078a0
  • notificationLink.foreground#184848
  • notifications.background#000909
  • notifications.foreground#C0C0C0
  • panel.background#000909
  • panel.border#00090960
  • panelTitle.activeBorder#184848
  • panelTitle.activeForeground#F0F0F0
  • panelTitle.inactiveForeground#C0C0C0
  • peekView.border#00090930
  • peekViewEditor.background#C0C0C005
  • peekViewEditor.matchHighlightBackground#18484850
  • peekViewEditorGutter.background#C0C0C005
  • peekViewResult.background#C0C0C005
  • peekViewResult.matchHighlightBackground#18484850
  • peekViewResult.selectionBackground#18484870
  • peekViewTitle.background#C0C0C005
  • peekViewTitleDescription.foreground#C0C0C060
  • pickerGroup.foreground#184848
  • progressBar.background#184848
  • scrollbar.shadow#00090900
  • scrollbarSlider.activeBackground#184848cc
  • scrollbarSlider.background#184848bb
  • scrollbarSlider.hoverBackground#184848ee
  • selection.background#184848
  • settings.checkboxBackground#000909
  • settings.checkboxForeground#C0C0C0
  • settings.dropdownBackground#000909
  • settings.dropdownForeground#C0C0C0
  • settings.headerForeground#184848
  • settings.modifiedItemIndicator#184848
  • settings.numberInputBackground#000909
  • settings.numberInputForeground#C0C0C0
  • settings.textInputBackground#000909
  • settings.textInputForeground#C0C0C0
  • sideBar.background#000909
  • sideBar.border#18484850
  • sideBar.foreground#d1e2e2
  • sideBarSectionHeader.background#000909
  • sideBarSectionHeader.border#00090960
  • sideBarSectionHeader.foreground#487878
  • sideBarTitle.foreground#C0C0C0
  • statusBar.background#001818
  • statusBar.border#00090960
  • statusBar.debuggingBackground#90A8A8
  • statusBar.debuggingForeground#F0F0F0
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#000909
  • statusBarItem.hoverBackground#18484820
  • statusBarItem.remoteBackground#184848
  • statusBarItem.remoteForeground#000909
  • tab.activeBackground#18484850
  • tab.activeBorder#184848
  • tab.activeForeground#F0F0F0
  • tab.activeModifiedBorder#184848
  • tab.border#000909
  • tab.inactiveBackground#18484820
  • tab.inactiveForeground#C0C0C0af
  • tab.unfocusedActiveBackground#18484840
  • tab.unfocusedActiveBorder#184848
  • tab.unfocusedActiveForeground#C0C0C0
  • tab.unfocusedInactiveBackground#18484810
  • tab.unfocusedInactiveForeground#C0C0C07f
  • terminal.ansiBlack#000909
  • terminal.ansiBlue#487878
  • terminal.ansiBrightBlack#184848
  • terminal.ansiBrightBlue#487878
  • terminal.ansiBrightCyan#F0F0D8
  • terminal.ansiBrightGreen#486078
  • terminal.ansiBrightMagenta#90A8A8
  • terminal.ansiBrightRed#909078
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiBrightYellow#90A8A8
  • terminal.ansiCyan#F0F0D8
  • terminal.ansiGreen#486078
  • terminal.ansiMagenta#90A8A8
  • terminal.ansiRed#909078
  • terminal.ansiWhite#F0F0F0
  • terminal.ansiYellow#90A8A8
  • terminalCursor.background#000909
  • terminalCursor.foreground#90A8A8
  • textLink.activeForeground#C0C0C0
  • textLink.foreground#184848
  • titleBar.activeBackground#000909
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#00090960
  • titleBar.inactiveBackground#000909
  • titleBar.inactiveForeground#184848
  • tree.indentGuidesStroke#34645c
  • widget.shadow#00090930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#90A8A8
entity.name.tag.js.jsx, entity.name.tag.html#78b6b6
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#486078
constant.other.php#90A8A8
constant.other.color#F0F0F0
invalid, invalid.illegal#909078
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#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#787860
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#C0C0C0
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#C0C0C0
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#90A8A8
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#9e9d75
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#487878
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#F0F0D8
support.other.variable, string.other.link, markup.table#C0C0C0
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#90A8A8
variable.parameter.function.language.special, variable.parameter#909078
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#486078
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#90A8A8
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#787860
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#909078
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#487878italic
entity.other.attribute-name, support.function#90A8A8
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#C0C0C0
source.scss keyword.control#90A8A8
markup.inserted#486078
markup.deleted#909078
markup.changed#90A8A8
string.regexp#F0F0D8
constant.character.escape#F0F0D8
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#C0C0C0italic
support.type.property-name.json#C0C0C0
text.html.markdown, punctuation.definition.list_item.markdown#C0C0C0
text.html.markdown markup.inline.raw.markdown#90A8A8
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#18484850
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#787860bold
markup.underline#487878underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#18484850
markup.quoteitalic
string.other.link.description.title.markdown#90A8A8
constant.other.reference.link.markdown#90A8A8
markup.raw.block#90A8A8
punctuation.definition.raw.markdown, punctuation.definition.markdown#F0F0D8
variable.language.fenced.markdown#184848
meta.separator#A7A8AFbold
token.info-token#184848
token.warn-token#90A8A8
token.error-token#FF293B
token.debug-token#F0F0D8