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#000000
  • activityBar.border#00000060
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#7DCFFF
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#555555
  • breadcrumb.activeSelectionForeground#7DCFFF
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#E0E0E0
  • breadcrumb.foreground#6E6E6E
  • breadcrumbPicker.background#000000
  • button.background#7DCFFF20
  • debugToolBar.background#000000
  • diffEditor.insertedLineBackground#9ECE6A10
  • diffEditor.insertedTextBackground#9ECE6A15
  • diffEditor.removedLineBackground#F7768E10
  • diffEditor.removedTextBackground#F7768E20
  • dropdown.background#000000
  • dropdown.border#FFFFFF10
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#7DCFFF
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff30
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#7DCFFF20
  • editor.selectionHighlightBackground#E0AF6820
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#7DCFFF50
  • editorCursor.foreground#7DCFFF
  • editorError.foreground#F7768E70
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#9ECE6A60
  • editorGutter.deletedBackground#F7768E60
  • editorGutter.modifiedBackground#7AA2F760
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#333333
  • editorIndentGuide.background#33333370
  • editorInfo.foreground#7AA2F770
  • editorLineNumber.activeForeground#6E6E6E
  • editorLineNumber.foreground#333333
  • editorLink.activeForeground#E0E0E0
  • editorMarkerNavigation.background#E0E0E005
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.errorForeground#F7768E40
  • editorOverviewRuler.findMatchForeground#7DCFFF
  • editorOverviewRuler.infoForeground#7AA2F740
  • editorOverviewRuler.warningForeground#E0AF6840
  • editorRuler.foreground#333333
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#7DCFFF
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#E0AF6870
  • editorWhitespace.foreground#E0E0E040
  • editorWidget.background#000000
  • editorWidget.border
  • editorWidget.resizeBorder#7DCFFF
  • extensionButton.prominentBackground#9ECE6A90
  • extensionButton.prominentHoverBackground#9ECE6A
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#E0AF6890
  • gitDecoration.deletedResourceForeground#F7768E90
  • gitDecoration.ignoredResourceForeground#6E6E6E90
  • gitDecoration.modifiedResourceForeground#7AA2F790
  • gitDecoration.untrackedResourceForeground#9ECE6A90
  • input.background#111111
  • input.border#FFFFFF10
  • input.foreground#E0E0E0
  • input.placeholderForeground#E0E0E060
  • inputOption.activeBackground#E0E0E030
  • inputOption.activeBorder#E0E0E030
  • inputValidation.errorBorder#F7768E50
  • inputValidation.infoBorder#7AA2F750
  • inputValidation.warningBorder#E0AF6850
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#7DCFFF
  • list.focusBackground#E0E0E020
  • list.focusForeground#E0E0E0
  • list.highlightForeground#7DCFFF
  • list.hoverBackground#000000
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#7DCFFF
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#000000
  • menu.foreground#E0E0E0
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#7DCFFF
  • menu.separatorBackground#E0E0E0
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#7DCFFF
  • notificationLink.foreground#7DCFFF
  • notifications.background#000000
  • notifications.foreground#E0E0E0
  • panel.background#000000
  • panel.border#00000060
  • panel.dropBackground#E0E0E0
  • panelTitle.activeBorder#7DCFFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#E0E0E0
  • peekView.border#00000030
  • peekViewEditor.background#E0E0E005
  • peekViewEditor.matchHighlightBackground#7DCFFF20
  • peekViewEditorGutter.background#E0E0E005
  • peekViewResult.background#E0E0E005
  • peekViewResult.matchHighlightBackground#7DCFFF20
  • peekViewResult.selectionBackground#6E6E6E70
  • peekViewTitle.background#E0E0E005
  • peekViewTitleDescription.foreground#E0E0E060
  • pickerGroup.foreground#7DCFFF
  • progressBar.background#7DCFFF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7DCFFF
  • scrollbarSlider.background#E0E0E020
  • scrollbarSlider.hoverBackground#E0E0E010
  • selection.background#7DCFFF
  • settings.checkboxBackground#000000
  • settings.checkboxForeground#E0E0E0
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#E0E0E0
  • settings.headerForeground#7DCFFF
  • settings.modifiedItemIndicator#7DCFFF
  • settings.numberInputBackground#000000
  • settings.numberInputForeground#E0E0E0
  • settings.textInputBackground#000000
  • settings.textInputForeground#E0E0E0
  • sideBar.background#000000
  • sideBar.border#00000060
  • sideBar.foreground#6E6E6E
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#000000
  • statusBar.border#00000060
  • statusBar.debuggingBackground#BB9AF7
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#555555
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#55555520
  • statusBarItem.remoteBackground#7DCFFF
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#7DCFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#6E6E6E
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6E6E6E
  • tab.unfocusedActiveBorder#555555
  • tab.unfocusedActiveForeground#E0E0E0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#7AA2F7
  • terminal.ansiBrightCyan#7DCFFF
  • terminal.ansiBrightGreen#9ECE6A
  • terminal.ansiBrightMagenta#BB9AF7
  • terminal.ansiBrightRed#F7768E
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E0AF68
  • terminal.ansiCyan#7DCFFF
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#BB9AF7
  • terminal.ansiRed#F7768E
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#E0AF68
  • terminalCursor.background#000000
  • terminalCursor.foreground#E0AF68
  • textLink.activeForeground#E0E0E0
  • textLink.foreground#7DCFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#E0E0E0
  • titleBar.border#00000060
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6E6E6E
  • tree.indentGuidesStroke#333333
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment, punctuation.definition.comment, string.quoted.docstring#555555italic
variable, string constant.other.placeholder#E0E0E0
constant.other.php#E0AF68
constant.other.color#ffffff
invalid, invalid.illegal#F7768E
invalid.deprecated#BB9AF7
keyword, storage.type, storage.modifier#BB9AF7
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7DCFFF
keyword.controlitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#F7768E
entity.name.function, variable.function, support.function, keyword.other.special-method#7AA2F7
source.cpp meta.block variable.other#F7768E
variable.other.constant#F7768E
support.other.variable, string.other.link#F7768E
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#FF9E64
variable.parameter.function.language.special, variable.parameter#F7768E
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#9ECE6Anormal
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#E0AF68
support.type#89B4FA
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#89B4FA
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F7768E
variable.language#F7768Eitalic
entity.name.method.js#7AA2F7italic
meta.class-method.js entity.name.function.js, variable.function.constructor#7AA2F7
entity.other.attribute-name#BB9AF7italic
entity.other.attribute-name.class#E0AF68
source.sass keyword.control#7AA2F7
markup.inserted#9ECE6A
markup.deleted#F7768E
markup.changed#BB9AF7
string.regexp#7DCFFF
constant.character.escape#7DCFFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7AA2F7italic
source.js constant.other.object.key.js string.unquoted.label.js#F7768Eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#BB9AF7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E0AF68
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF9E64
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F7768E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A0855B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7AA2F7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F7768E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BB9AF7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9ECE6A
text.html.markdown, punctuation.definition.list_item.markdown#E0E0E0
text.html.markdown markup.inline.raw.markdown#BB9AF7
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#444444
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9ECE6A
markup.italic#F7768Eitalic
markup.bold, markup.bold string#F7768Ebold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#F7768Ebold
markup.underline#FF9E64underline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#444444
markup.quoteitalic
string.other.link.title.markdown#7AA2F7
string.other.link.description.title.markdown#BB9AF7
constant.other.reference.link.markdown#E0AF68
markup.raw.block#BB9AF7
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#E0E0E090
variable.language.fenced.markdown#444444
meta.separator#444444bold
markup.table#E0E0E0