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#111111
  • activityBar.foreground#00FFFF
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#FF0080
  • activityBarBadge.foreground#000000
  • badge.background#FF0080
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#FF0080
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#00FFFF
  • breadcrumb.foreground#E0E0E0
  • breadcrumbPicker.background#000000
  • button.background#FF0080
  • button.foreground#000000
  • button.hoverBackground#FF40A0
  • button.secondaryBackground#00FF80
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#40FF80
  • dropdown.background#000000
  • dropdown.border#00FF80
  • dropdown.foreground#00FFFF
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#FFFF0055
  • editor.findMatchBorder#FFFF00
  • editor.findMatchHighlightBackground#FFFF0044
  • editor.findRangeHighlightBackground#FFFF0044
  • editor.foreground#00FFFF
  • editor.inactiveSelectionBackground#FF008022
  • editor.lineHighlightBackground#00FFFF11
  • editor.selectionBackground#FF008055
  • editor.selectionForeground#FFFF00
  • editor.selectionHighlightBackground#FF008033
  • editorBracketMatch.background#FF008033
  • editorBracketMatch.border#FF0080
  • editorCursor.background#000000
  • editorCursor.foreground#FF0080
  • editorError.foreground#FF0040
  • editorGroup.border#00FF80
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00FF80
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF0040
  • editorGutter.foldingControlForeground#666666
  • editorGutter.modifiedBackground#FFFF00
  • editorHint.foreground#00FF80
  • editorIndentGuide.activeBackground1#FF0080
  • editorIndentGuide.background1#444444
  • editorInfo.foreground#00FFFF
  • editorLineNumber.activeForeground#FF0080
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.addedForeground#00FF80
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.bracketMatchForeground#FF0080
  • editorOverviewRuler.currentContentForeground#00FF80
  • editorOverviewRuler.deletedForeground#FF0040
  • editorOverviewRuler.errorForeground#FF0040
  • editorOverviewRuler.findMatchForeground#FFFF0055
  • editorOverviewRuler.incomingContentForeground#00FFFF
  • editorOverviewRuler.infoForeground#00FFFF
  • editorOverviewRuler.modifiedForeground#FFFF00
  • editorOverviewRuler.rangeHighlightForeground#00FFFF55
  • editorOverviewRuler.selectionHighlightForeground#FF008055
  • editorOverviewRuler.warningForeground#FFFF00
  • editorOverviewRuler.wordHighlightForeground#77777755
  • editorOverviewRuler.wordHighlightStrongForeground#99999955
  • editorRuler.foreground#444444
  • editorWarning.foreground#FFFF00
  • editorWhitespace.foreground#555555
  • errorForeground#FF0040
  • extensionButton.prominentBackground#FF0080
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#FF40A0
  • focusBorder#FF008077
  • foreground#00FFFF
  • icon.foreground#00FFFF
  • input.background#000000
  • input.border#00FF8044
  • input.foreground#00FFFF
  • input.placeholderForeground#666666
  • inputOption.activeBackground#FF008033
  • inputOption.activeBorder#FF0080
  • inputOption.activeForeground#FFFF00
  • inputValidation.errorBackground#FF004033
  • inputValidation.errorBorder#FF0040
  • inputValidation.errorForeground#FFFF00
  • inputValidation.infoBackground#00FFFF33
  • inputValidation.infoBorder#00FFFF
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FFFF0033
  • inputValidation.warningBorder#FFFF00
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#FF008055
  • list.activeSelectionForeground#FFFF00
  • list.dropBackground#FF008033
  • list.errorForeground#FF0040
  • list.focusBackground#FF008033
  • list.focusForeground#FFFF00
  • list.focusOutline#FF008088
  • list.highlightForeground#FF0080
  • list.hoverBackground#33333344
  • list.hoverForeground#00FFFF
  • list.inactiveSelectionBackground#44444444
  • list.inactiveSelectionForeground#FF0080
  • list.invalidItemForeground#FF0040
  • list.warningForeground#FFFF00
  • menu.background#000000
  • menu.border#00FF80
  • menu.foreground#00FFFF
  • menu.selectionBackground#FF0080
  • menu.selectionBorder#FF0080
  • menu.selectionForeground#000000
  • menu.separatorBackground#555555
  • menubar.selectionBackground#FF008055
  • menubar.selectionBorder#FF0080
  • menubar.selectionForeground#FFFF00
  • merge.border#666666
  • merge.commonContentBackground#66666633
  • merge.commonHeaderBackground#66666655
  • merge.currentContentBackground#00FF8033
  • merge.currentHeaderBackground#00FF8055
  • merge.incomingContentBackground#00FFFF33
  • merge.incomingHeaderBackground#00FFFF55
  • minimap.background#000000
  • minimap.errorHighlight#FF0040
  • minimap.findMatchHighlight#FFFF0055
  • minimap.selectionHighlight#FF008055
  • minimap.warningHighlight#FFFF00
  • minimapSlider.activeBackground#99999988
  • minimapSlider.background#55555544
  • minimapSlider.hoverBackground#77777766
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#00FFFF
  • notificationLink.foreground#FF0080
  • notifications.background#1a1a1a
  • notifications.border#00FF80
  • notifications.foreground#00FFFF
  • panel.background#000000
  • panel.border#00FF80
  • panelTitle.activeBorder#FF0080
  • panelTitle.activeForeground#FF0080
  • panelTitle.inactiveForeground#666666
  • peekView.border#FF0080
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#FFFF0055
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#FFFF0055
  • peekViewResult.selectionBackground#FF008055
  • peekViewResult.selectionForeground#FFFF00
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#E0E0E0
  • peekViewTitleLabel.foreground#00FFFF
  • problemsErrorIcon.foreground#FF0040
  • problemsInfoIcon.foreground#00FFFF
  • problemsWarningIcon.foreground#FFFF00
  • progressBar.background#FF0080
  • quickInput.background#000000
  • quickInput.foreground#00FFFF
  • quickInputList.focusBackground#FF008055
  • quickInputList.focusForeground#FFFF00
  • quickInputTitle.background#000000
  • sash.hoverBorder#FF008055
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#99999988
  • scrollbarSlider.background#55555588
  • scrollbarSlider.hoverBackground#77777788
  • selection.background#FF008055
  • sideBar.background#000000
  • sideBar.border#111111
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#FF0080
  • sideBarSectionHeader.foreground#00FFFF
  • sideBarTitle.foreground#FFFF00
  • statusBar.background#000000
  • statusBar.border#111111
  • statusBar.debuggingBackground#FF0040
  • statusBar.debuggingForeground#FFFF00
  • statusBar.foreground#00FFFF
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#00FFFF
  • tab.activeBackground#000000
  • tab.activeBorder#FF0080
  • tab.activeForeground#FFFF00
  • tab.border#000000
  • tab.hoverBackground#000000
  • tab.hoverForeground#00FFFF
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#E0E0E0
  • tab.lastPinnedBorder#000000
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveForeground#E0E0E0
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0080FF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#4080FF
  • terminal.ansiBrightCyan#40FFFF
  • terminal.ansiBrightGreen#40FF80
  • terminal.ansiBrightMagenta#FF40FF
  • terminal.ansiBrightRed#FF4080
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF40
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF80
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0040
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFF00
  • terminal.background#000000
  • terminal.foreground#00FFFF
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00FFFF
  • titleBar.border#111111
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#666666
  • tree.indentGuidesStroke#555555
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
variable, string constant.other.placeholder#E0E0E0
keyword, storage.type, storage.modifier#FF0080bold
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.flow#FF40A0bold
punctuation, punctuation.definition.tag, 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#00FFFF
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#00FF80bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FFFF00bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8080FFbold
meta.method-call.js, meta.function-call.generic.python#80C0FF
meta.block variable.other#FF80C0
support.other.variable, string.other.link#FF80C0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF8000
constant.language.boolean#FF0080bold
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#00FF80
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression#FFFF00
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFFF00bold
support.type#4080FF
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#00FF80
support.constant.property-value.css, support.constant.font-name.css, support.constant.media-type.css, support.constant.media.css, constant.other.color.rgb-value.css, constant.other.rgb-value.css, support.constant.color.w3c-standard-color-name.css#FF80FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8040
variable.language#FF4080italic bold
entity.name.method.js#8080FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#8080FF
entity.other.attribute-name#80FFFFitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFFF00italic
entity.other.attribute-name.class#FF80FFbold
source.sass keyword.control#4080FF
markup.inserted#00FF80
markup.deleted#FF8040
markup.changed#FF0080
string.regexp#FF8080bold
constant.character.escape#00FFFF
*url*, *link*, *uri*#00FF80underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FF4080italic bold
source.js constant.other.object.key.js string.unquoted.label.js#FF8040italic
source.json meta.structure.dictionary.json support.type.property-name.json#FF0080
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFFF00
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#00FF80
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#00FFFF
text.html.markdown, punctuation.definition.list_item.markdown#E0E0E0
text.html.markdown markup.inline.raw.markdown#FF0080
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#808080
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FFFF00bold
markup.italic#FF80C0italic
markup.bold, markup.bold string#FF80C0bold
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#FF80C0bold italic
markup.underline#00FF80underline
markup.quote punctuation.definition.blockquote.markdown#808080
markup.quote#E0E0E0italic
string.other.link.title.markdown#00FFFF
string.other.link.description.title.markdown#FF0080
constant.other.reference.link.markdown#FFFF00
markup.raw.block#FF0080
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E0E0E0
variable.language.fenced.markdown#808080
meta.separator#808080bold
markup.table#E0E0E0