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#151515
  • activityBar.border#15151560
  • activityBar.foreground#909090
  • activityBarBadge.background#909090
  • activityBarBadge.foreground#151515
  • badge.background#15151530
  • badge.foreground#606060
  • breadcrumb.activeSelectionForeground#606060
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#909090
  • breadcrumb.foreground#707070
  • breadcrumbPicker.background#151515
  • button.background#60606050
  • contrastBorder#60606040
  • debugToolBar.background#151515
  • diffEditor.insertedTextBackground#FFBA0815
  • diffEditor.removedTextBackground#B8030020
  • dropdown.background#151515
  • dropdown.border#90909010
  • editor.background#151515
  • editor.findMatchBackground#151515
  • editor.findMatchBorder#606060
  • editor.findMatchHighlightBackground#60606093
  • editor.findMatchHighlightBorder#90909030
  • editor.foreground#909090
  • editor.lineHighlightBackground#15151550
  • editor.selectionBackground#90909030
  • editor.selectionHighlightBackground#6060606b
  • editor.selectionHighlightBorder#909090f0
  • editorBracketMatch.background#151515
  • editorBracketMatch.border#6060607f
  • editorCursor.foreground#606060
  • editorError.foreground#B8030070
  • editorGroup.border#15151530
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#FFBA0860
  • editorGutter.deletedBackground#B8030060
  • editorGutter.modifiedBackground#90909060
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#90909010
  • editorIndentGuide.activeBackground1#606060
  • editorIndentGuide.background1#60606070
  • editorInfo.foreground#90909070
  • editorLineNumber.activeForeground#909090
  • editorLineNumber.foreground#606060c0
  • editorLink.activeForeground#909090
  • editorMarkerNavigation.background#90909005
  • editorOverviewRuler.border#151515
  • editorOverviewRuler.errorForeground#B8030040
  • editorOverviewRuler.findMatchForeground#606060bd
  • editorOverviewRuler.infoForeground#90909040
  • editorOverviewRuler.warningForeground#60606070
  • editorRuler.foreground#606060
  • editorSuggestWidget.background#151515
  • editorSuggestWidget.border#90909010
  • editorSuggestWidget.foreground#909090
  • editorSuggestWidget.highlightForeground#606060
  • editorSuggestWidget.selectedBackground#60606020
  • editorWarning.foreground#FFBA08
  • editorWhitespace.foreground#90909040
  • editorWidget.background#151515
  • editorWidget.border#606060
  • editorWidget.resizeBorder#606060
  • extensionButton.prominentBackground#FFBA0890
  • extensionButton.prominentHoverBackground#B80300
  • focusBorder#90909000
  • gitDecoration.conflictingResourceForeground#606060
  • gitDecoration.deletedResourceForeground#B80300
  • gitDecoration.ignoredResourceForeground#606060
  • gitDecoration.modifiedResourceForeground#707070
  • gitDecoration.untrackedResourceForeground#909090
  • input.background#303030
  • input.border#90909010
  • input.foreground#909090
  • input.placeholderForeground#90909060
  • inputOption.activeBackground#90909030
  • inputOption.activeBorder#90909030
  • inputValidation.errorBorder#B8030050
  • inputValidation.infoBorder#90909050
  • inputValidation.warningBorder#60606050
  • list.activeSelectionBackground#151515
  • list.activeSelectionForeground#606060
  • list.focusBackground#303030
  • list.focusForeground#909090
  • list.highlightForeground#606060
  • list.hoverBackground#606060
  • list.hoverForeground#909090
  • list.inactiveSelectionBackground#15151530
  • list.inactiveSelectionForeground#606060
  • list.warningForeground#606060
  • listFilterWidget.background#15151530
  • listFilterWidget.noMatchesOutline#15151530
  • listFilterWidget.outline#15151530
  • menu.background#151515f8
  • menu.border#60606050
  • menu.foreground#909090
  • menu.selectionBackground#303030
  • menu.selectionBorder#15151530
  • menu.selectionForeground#909090
  • menu.separatorBackground#909090
  • menubar.selectionBackground#303030
  • menubar.selectionBorder#60606050
  • menubar.selectionForeground#909090
  • minimap.background#151515
  • minimapGutter.addedBackground#B80300
  • minimapGutter.deletedBackground#606060
  • minimapGutter.modifiedBackground#FFBA08
  • minimapSlider.activeBackground#FFBA08b0
  • minimapSlider.background#FFBA0880
  • minimapSlider.hoverBackground#FFBA08a0
  • notificationLink.foreground#606060
  • notifications.background#151515
  • notifications.foreground#909090
  • panel.background#151515
  • panel.border#15151560
  • panelTitle.activeBorder#606060
  • panelTitle.activeForeground#909090
  • panelTitle.inactiveForeground#909090
  • peekView.border#15151530
  • peekViewEditor.background#90909005
  • peekViewEditor.matchHighlightBackground#60606050
  • peekViewEditorGutter.background#90909005
  • peekViewResult.background#90909005
  • peekViewResult.matchHighlightBackground#60606050
  • peekViewResult.selectionBackground#60606070
  • peekViewTitle.background#90909005
  • peekViewTitleDescription.foreground#90909060
  • pickerGroup.foreground#606060
  • progressBar.background#606060
  • scrollbar.shadow#15151500
  • scrollbarSlider.activeBackground#606060cc
  • scrollbarSlider.background#606060bb
  • scrollbarSlider.hoverBackground#606060ee
  • selection.background#606060
  • settings.checkboxBackground#151515
  • settings.checkboxForeground#909090
  • settings.dropdownBackground#151515
  • settings.dropdownForeground#909090
  • settings.headerForeground#606060
  • settings.modifiedItemIndicator#606060
  • settings.numberInputBackground#151515
  • settings.numberInputForeground#909090
  • settings.textInputBackground#151515
  • settings.textInputForeground#909090
  • sideBar.background#151515
  • sideBar.border#60606050
  • sideBar.foreground#909090
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#15151560
  • sideBarSectionHeader.foreground#909090
  • sideBarTitle.foreground#909090
  • statusBar.background#151515
  • statusBar.border#15151560
  • statusBar.debuggingBackground#606060
  • statusBar.debuggingForeground#909090
  • statusBar.foreground#606060
  • statusBar.noFolderBackground#151515
  • statusBarItem.hoverBackground#60606020
  • statusBarItem.remoteBackground#606060
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#60606050
  • tab.activeBorder#606060
  • tab.activeForeground#909090
  • tab.activeModifiedBorder#606060
  • tab.border#151515
  • tab.inactiveBackground#60606020
  • tab.inactiveForeground#909090af
  • tab.unfocusedActiveBackground#60606040
  • tab.unfocusedActiveBorder#606060
  • tab.unfocusedActiveForeground#909090
  • tab.unfocusedInactiveBackground#60606010
  • tab.unfocusedInactiveForeground#9090907f
  • terminal.ansiBlack#151515
  • terminal.ansiBlue#909090
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#909090
  • terminal.ansiBrightCyan#B80300
  • terminal.ansiBrightGreen#FFBA08
  • terminal.ansiBrightMagenta#606060
  • terminal.ansiBrightRed#B80300
  • terminal.ansiBrightWhite#909090
  • terminal.ansiBrightYellow#606060
  • terminal.ansiCyan#B80300
  • terminal.ansiGreen#FFBA08
  • terminal.ansiMagenta#606060
  • terminal.ansiRed#B80300
  • terminal.ansiWhite#909090
  • terminal.ansiYellow#606060
  • terminalCursor.background#151515
  • terminalCursor.foreground#606060
  • textLink.activeForeground#909090
  • textLink.foreground#606060
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#909090
  • titleBar.border#15151560
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#606060
  • tree.indentGuidesStroke#606060
  • widget.shadow#15151530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#606060A0
variable, string constant.other.placeholder, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#B80300C0
entity.name.function#B80300
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#FFBA08
constant.other.php#606060
constant.other.color#909090
invalid, invalid.illegal#B80300
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#707070
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#909090
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.control
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#909090
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#606060
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#707070
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#909090
entity.name.function#B80300
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#B80300
support.other.variable, string.other.link, markup.table#909090
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#606060
variable.parameter.function.language.special, variable.parameter#B80300C0
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#FFBA08
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#606060
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#707070
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#B80300
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#909090italic
entity.other.attribute-name, support.function#606060
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#909090A0
source.scss keyword.control#606060
markup.inserted#FFBA08
markup.deleted#B80300
markup.changed#606060
string.regexp#B80300C0
constant.character.escape#B80300
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#909090italic
support.type.property-name.json#909090
text.html.markdown, punctuation.definition.list_item.markdown#909090
text.html.markdown markup.inline.raw.markdown#606060
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#60606050
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#707070bold
markup.underline#909090underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#60606050
markup.quoteitalic
string.other.link.description.title.markdown#606060
constant.other.reference.link.markdown#606060
markup.raw.block#606060
punctuation.definition.raw.markdown, punctuation.definition.markdown#B80300
variable.language.fenced.markdown#606060
meta.separator#A7A8AFbold
token.info-token#606060
token.warn-token#606060
token.error-token#FF293B
token.debug-token#B80300