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#C9C6C6
  • activityBar.border#C9C6C660
  • activityBar.foreground#236575
  • activityBarBadge.background#FFF
  • activityBarBadge.foreground#C9C6C6
  • badge.background#C9C6C630
  • badge.foreground#236575
  • breadcrumb.activeSelectionForeground#236575
  • breadcrumb.background#C9C6C6
  • breadcrumb.focusForeground#236575
  • breadcrumb.foreground#FFF
  • breadcrumbPicker.background#C9C6C6
  • button.background#23657550
  • contrastBorder#23657540
  • debugToolBar.background#C9C6C6
  • diffEditor.insertedTextBackground#23657515
  • diffEditor.removedTextBackground#30A81820
  • dropdown.background#C9C6C6
  • dropdown.border#A3997710
  • editor.background#C9C6C6
  • editor.findMatchBackground#C9C6C6
  • editor.findMatchBorder#236575
  • editor.findMatchHighlightBackground#23657593
  • editor.findMatchHighlightBorder#A3997730
  • editor.foreground#236575
  • editor.lineHighlightBackground#C9C6C650
  • editor.selectionBackground#23657520
  • editor.selectionHighlightBackground#2365756b
  • editor.selectionHighlightBorder#236575
  • editorBracketMatch.background#C9C6C6
  • editorBracketMatch.border#2365757f
  • editorCursor.foreground#236575
  • editorError.foreground#30A81870
  • editorGroup.border#C9C6C630
  • editorGroupHeader.tabsBackground#C9C6C6
  • editorGutter.addedBackground#23657560
  • editorGutter.deletedBackground#30A81860
  • editorGutter.modifiedBackground#236575
  • editorHoverWidget.background#C9C6C6
  • editorHoverWidget.border#A3997710
  • editorIndentGuide.activeBackground#FFF
  • editorIndentGuide.background#17ADCE50
  • editorInfo.foreground#236575
  • editorLineNumber.activeForeground#FFF
  • editorLineNumber.foreground#236575c0
  • editorLink.activeForeground#236575
  • editorMarkerNavigation.background#23657505
  • editorOverviewRuler.border#C9C6C6
  • editorOverviewRuler.errorForeground#30A81840
  • editorOverviewRuler.findMatchForeground#236575
  • editorOverviewRuler.infoForeground#23657510
  • editorOverviewRuler.warningForeground#23657570
  • editorRuler.foreground#FFF
  • editorSuggestWidget.background#C9C6C6
  • editorSuggestWidget.border#A3997710
  • editorSuggestWidget.foreground#236575
  • editorSuggestWidget.highlightForeground#236575
  • editorSuggestWidget.selectedBackground#23657520
  • editorWarning.foreground#236575
  • editorWhitespace.foreground#23657540
  • editorWidget.background#C9C6C6
  • editorWidget.border#236575
  • editorWidget.resizeBorder#236575
  • extensionButton.prominentBackground#23657590
  • extensionButton.prominentHoverBackground#30A818
  • focusBorder#A3997700
  • gitDecoration.conflictingResourceForeground#236575
  • gitDecoration.deletedResourceForeground#30A818
  • gitDecoration.ignoredResourceForeground#236575
  • gitDecoration.modifiedResourceForeground#FFF
  • gitDecoration.untrackedResourceForeground#FFF
  • input.background#202829
  • input.border#A3997710
  • input.foreground#236575
  • input.placeholderForeground#23657560
  • inputOption.activeBackground#23657530
  • inputOption.activeBorder#23657530
  • inputValidation.errorBorder#30A81850
  • inputValidation.infoBorder#236575
  • inputValidation.warningBorder#23657550
  • list.activeSelectionBackground#C9C6C6
  • list.activeSelectionForeground#236575
  • list.focusBackground#B1CFD1
  • list.focusForeground#FFF
  • list.highlightForeground#236575
  • list.hoverBackground#23657530
  • list.hoverForeground#236575
  • list.inactiveSelectionBackground#C9C6C630
  • list.inactiveSelectionForeground#236575
  • list.warningForeground#236575
  • listFilterWidget.background#C9C6C630
  • listFilterWidget.noMatchesOutline#C9C6C630
  • listFilterWidget.outline#C9C6C630
  • menu.background#C9C6C6f8
  • menu.border#23657550
  • menu.foreground#236575
  • menu.selectionBackground#B1CFD1
  • menu.selectionBorder#C9C6C630
  • menu.selectionForeground#236575
  • menu.separatorBackground#236575
  • menubar.selectionBackground#B1CFD1
  • menubar.selectionBorder#23657550
  • menubar.selectionForeground#236575
  • minimap.background#C9C6C6
  • minimapGutter.addedBackground#236575
  • minimapGutter.deletedBackground#236575
  • minimapGutter.modifiedBackground#236575
  • minimapSlider.activeBackground#236575b0
  • minimapSlider.background#23657580
  • minimapSlider.hoverBackground#236575a0
  • notificationLink.foreground#236575
  • notifications.background#C9C6C6
  • notifications.foreground#236575
  • panel.background#C9C6C6
  • panel.border#C9C6C660
  • panelTitle.activeBorder#236575
  • panelTitle.activeForeground#A39977
  • panelTitle.inactiveForeground#236575
  • peekView.border#C9C6C630
  • peekViewEditor.background#23657505
  • peekViewEditor.matchHighlightBackground#23657550
  • peekViewEditorGutter.background#23657505
  • peekViewResult.background#23657505
  • peekViewResult.matchHighlightBackground#23657550
  • peekViewResult.selectionBackground#23657570
  • peekViewTitle.background#23657505
  • peekViewTitleDescription.foreground#23657560
  • pickerGroup.foreground#236575
  • progressBar.background#236575
  • scrollbar.shadow#C9C6C600
  • scrollbarSlider.activeBackground#236575cc
  • scrollbarSlider.background#236575bb
  • scrollbarSlider.hoverBackground#236575ee
  • selection.background#236575
  • settings.checkboxBackground#C9C6C6
  • settings.checkboxForeground#236575
  • settings.dropdownBackground#C9C6C6
  • settings.dropdownForeground#236575
  • settings.headerForeground#236575
  • settings.modifiedItemIndicator#236575
  • settings.numberInputBackground#C9C6C6
  • settings.numberInputForeground#236575
  • settings.textInputBackground#C9C6C6
  • settings.textInputForeground#236575
  • sideBar.background#C9C6C6
  • sideBar.border#23657550
  • sideBar.foreground#236575
  • sideBarSectionHeader.background#C9C6C6
  • sideBarSectionHeader.border#C9C6C660
  • sideBarSectionHeader.foreground#236575
  • sideBarTitle.foreground#236575
  • statusBar.background#C9C6C6
  • statusBar.border#C9C6C660
  • statusBar.debuggingBackground#236575
  • statusBar.debuggingForeground#A39977
  • statusBar.foreground#236575
  • statusBar.noFolderBackground#C9C6C6
  • statusBarItem.hoverBackground#23657520
  • statusBarItem.remoteBackground#236575
  • statusBarItem.remoteForeground#C9C6C6
  • tab.activeBackground#23657550
  • tab.activeBorder#236575
  • tab.activeForeground#A39977
  • tab.activeModifiedBorder#236575
  • tab.border#C9C6C6
  • tab.inactiveBackground#23657520
  • tab.inactiveForeground#236575af
  • tab.unfocusedActiveBackground#23657510
  • tab.unfocusedActiveBorder#236575
  • tab.unfocusedActiveForeground#236575
  • tab.unfocusedInactiveBackground#236575
  • tab.unfocusedInactiveForeground#2365757f
  • terminal.ansiBlack#C9C6C6
  • terminal.ansiBlue#FFF
  • terminal.ansiBrightBlack#236575
  • terminal.ansiBrightBlue#FFF
  • terminal.ansiBrightCyan#FFF
  • terminal.ansiBrightGreen#236575
  • terminal.ansiBrightMagenta#236575
  • terminal.ansiBrightRed#236575
  • terminal.ansiBrightWhite#A39977
  • terminal.ansiBrightYellow#236575
  • terminal.ansiCyan#FFF
  • terminal.ansiGreen#236575
  • terminal.ansiMagenta#236575
  • terminal.ansiRed#236575
  • terminal.ansiWhite#A39977
  • terminal.ansiYellow#236575
  • terminalCursor.background#C9C6C6
  • terminalCursor.foreground#236575
  • textLink.activeForeground#236575
  • textLink.foreground#236575
  • titleBar.activeBackground#C9C6C6
  • titleBar.activeForeground#236575
  • titleBar.border#C9C6C660
  • titleBar.inactiveBackground#C9C6C6
  • titleBar.inactiveForeground#236575
  • tree.indentGuidesStroke#FFF
  • widget.shadow#C9C6C630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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