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#37EBF3
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#E455AE
  • activityBarBadge.foreground#000000
  • badge.background#E455AE
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#E455AE
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#37EBF3
  • breadcrumb.foreground#D1C5C0
  • breadcrumbPicker.background#000000
  • button.background#E455AE
  • button.foreground#000000
  • button.hoverBackground#CB1DCD
  • button.secondaryBackground#1AC5B0
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#00FF9F
  • dropdown.background#000000
  • dropdown.border#1AC5B0
  • dropdown.foreground#37EBF3
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#FDF50055
  • editor.findMatchBorder#FDF500
  • editor.findMatchHighlightBackground#FDF50044
  • editor.findRangeHighlightBackground#FDF50044
  • editor.foreground#37EBF3
  • editor.inactiveSelectionBackground#E455AE22
  • editor.lineHighlightBackground#37EBF311
  • editor.selectionBackground#E455AE55
  • editor.selectionForeground#FDF500
  • editor.selectionHighlightBackground#E455AE33
  • editorBracketMatch.background#E455AE33
  • editorBracketMatch.border#E455AE
  • editorCursor.background#000000
  • editorCursor.foreground#E455AE
  • editorError.foreground#710000
  • editorGroup.border#1AC5B0
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#1AC5B0
  • editorGutter.background#000000
  • editorGutter.deletedBackground#710000
  • editorGutter.foldingControlForeground#666666
  • editorGutter.modifiedBackground#FDF500
  • editorHint.foreground#1AC5B0
  • editorIndentGuide.activeBackground1#E455AE
  • editorIndentGuide.background1#444444
  • editorInfo.foreground#37EBF3
  • editorLineNumber.activeForeground#E455AE
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.addedForeground#1AC5B0
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.bracketMatchForeground#E455AE
  • editorOverviewRuler.currentContentForeground#1AC5B0
  • editorOverviewRuler.deletedForeground#710000
  • editorOverviewRuler.errorForeground#710000
  • editorOverviewRuler.findMatchForeground#FDF50055
  • editorOverviewRuler.incomingContentForeground#37EBF3
  • editorOverviewRuler.infoForeground#37EBF3
  • editorOverviewRuler.modifiedForeground#FDF500
  • editorOverviewRuler.rangeHighlightForeground#37EBF355
  • editorOverviewRuler.selectionHighlightForeground#E455AE55
  • editorOverviewRuler.warningForeground#FDF500
  • editorOverviewRuler.wordHighlightForeground#77777755
  • editorOverviewRuler.wordHighlightStrongForeground#99999955
  • editorRuler.foreground#444444
  • editorWarning.foreground#FDF500
  • editorWhitespace.foreground#555555
  • errorForeground#710000
  • extensionButton.prominentBackground#E455AE
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#CB1DCD
  • focusBorder#E455AE77
  • foreground#37EBF3
  • icon.foreground#37EBF3
  • input.background#000000
  • input.border#1AC5B044
  • input.foreground#37EBF3
  • input.placeholderForeground#666666
  • inputOption.activeBackground#E455AE33
  • inputOption.activeBorder#E455AE
  • inputOption.activeForeground#FDF500
  • inputValidation.errorBackground#71000033
  • inputValidation.errorBorder#710000
  • inputValidation.errorForeground#FDF500
  • inputValidation.infoBackground#37EBF333
  • inputValidation.infoBorder#37EBF3
  • inputValidation.infoForeground#000000
  • inputValidation.warningBackground#FDF50033
  • inputValidation.warningBorder#FDF500
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#E455AE55
  • list.activeSelectionForeground#FDF500
  • list.dropBackground#E455AE33
  • list.errorForeground#710000
  • list.focusBackground#E455AE33
  • list.focusForeground#FDF500
  • list.focusOutline#E455AE88
  • list.highlightForeground#E455AE
  • list.hoverBackground#33333344
  • list.hoverForeground#37EBF3
  • list.inactiveSelectionBackground#44444444
  • list.inactiveSelectionForeground#E455AE
  • list.invalidItemForeground#710000
  • list.warningForeground#FDF500
  • menu.background#000000
  • menu.border#1AC5B0
  • menu.foreground#37EBF3
  • menu.selectionBackground#E455AE
  • menu.selectionBorder#E455AE
  • menu.selectionForeground#000000
  • menu.separatorBackground#555555
  • menubar.selectionBackground#E455AE55
  • menubar.selectionBorder#E455AE
  • menubar.selectionForeground#FDF500
  • merge.border#666666
  • merge.commonContentBackground#66666633
  • merge.commonHeaderBackground#66666655
  • merge.currentContentBackground#1AC5B033
  • merge.currentHeaderBackground#1AC5B055
  • merge.incomingContentBackground#37EBF333
  • merge.incomingHeaderBackground#37EBF355
  • minimap.background#000000
  • minimap.errorHighlight#710000
  • minimap.findMatchHighlight#FDF50055
  • minimap.selectionHighlight#E455AE55
  • minimap.warningHighlight#FDF500
  • minimapSlider.activeBackground#99999988
  • minimapSlider.background#55555544
  • minimapSlider.hoverBackground#77777766
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#37EBF3
  • notificationLink.foreground#E455AE
  • notifications.background#1a1a1a
  • notifications.border#1AC5B0
  • notifications.foreground#37EBF3
  • panel.background#000000
  • panel.border#1AC5B0
  • panelTitle.activeBorder#E455AE
  • panelTitle.activeForeground#E455AE
  • panelTitle.inactiveForeground#666666
  • peekView.border#E455AE
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#FDF50055
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#FDF50055
  • peekViewResult.selectionBackground#E455AE55
  • peekViewResult.selectionForeground#FDF500
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#D1C5C0
  • peekViewTitleLabel.foreground#37EBF3
  • problemsErrorIcon.foreground#710000
  • problemsInfoIcon.foreground#37EBF3
  • problemsWarningIcon.foreground#FDF500
  • progressBar.background#E455AE
  • quickInput.background#000000
  • quickInput.foreground#37EBF3
  • quickInputList.focusBackground#E455AE55
  • quickInputList.focusForeground#FDF500
  • quickInputTitle.background#000000
  • sash.hoverBorder#E455AE55
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#99999988
  • scrollbarSlider.background#55555588
  • scrollbarSlider.hoverBackground#77777788
  • selection.background#E455AE55
  • sideBar.background#000000
  • sideBar.border#111111
  • sideBar.foreground#D1C5C0
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#E455AE
  • sideBarSectionHeader.foreground#37EBF3
  • sideBarTitle.foreground#FDF500
  • statusBar.background#000000
  • statusBar.border#111111
  • statusBar.debuggingBackground#710000
  • statusBar.debuggingForeground#FDF500
  • statusBar.foreground#37EBF3
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#37EBF3
  • tab.activeBackground#000000
  • tab.activeBorder#E455AE
  • tab.activeForeground#FDF500
  • tab.border#000000
  • tab.hoverBackground#000000
  • tab.hoverForeground#37EBF3
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#D1C5C0
  • tab.lastPinnedBorder#000000
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveForeground#D1C5C0
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#37EBF3
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#00BFFF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#00FF9F
  • terminal.ansiBrightMagenta#CB1DCD
  • terminal.ansiBrightRed#FF0040
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#1AC5B0
  • terminal.ansiGreen#1AC5B0
  • terminal.ansiMagenta#9370DB
  • terminal.ansiRed#710000
  • terminal.ansiWhite#D1C5C0
  • terminal.ansiYellow#FDF500
  • terminal.background#000000
  • terminal.foreground#37EBF3
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#37EBF3
  • 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#D1C5C0
keyword, storage.type, storage.modifier#E455AEbold
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.flow#CB1DCDbold
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#37EBF3
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#1AC5B0bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FDF500bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9370DBbold
meta.method-call.js, meta.function-call.generic.python#00D4FF
meta.block variable.other#FF6B9D
support.other.variable, string.other.link#FF6B9D
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF8C00
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#FDF500
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#FDF500bold
support.type#00BFFF
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#1AC5B0
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#FF69B4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF4500
variable.language#FF1493italic bold
entity.name.method.js#9370DBitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#9370DB
entity.other.attribute-name#00CED1italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FDF500italic
entity.other.attribute-name.class#FF69B4bold
source.sass keyword.control#00BFFF
markup.inserted#00FF80
markup.deleted#FF4500
markup.changed#E455AE
string.regexp#FF6347bold
constant.character.escape#37EBF3
*url*, *link*, *uri*#1AC5B0underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FF1493italic bold
source.js constant.other.object.key.js string.unquoted.label.js#FF4500italic
source.json meta.structure.dictionary.json support.type.property-name.json#E455AE
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FDF500
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#1AC5B0
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#37EBF3
text.html.markdown, punctuation.definition.list_item.markdown#D1C5C0
text.html.markdown markup.inline.raw.markdown#E455AE
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#FDF500bold
markup.italic#FF6B9Ditalic
markup.bold, markup.bold string#FF6B9Dbold
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#FF6B9Dbold italic
markup.underline#1AC5B0underline
markup.quote punctuation.definition.blockquote.markdown#808080
markup.quote#D1C5C0italic
string.other.link.title.markdown#37EBF3
string.other.link.description.title.markdown#E455AE
constant.other.reference.link.markdown#FDF500
markup.raw.block#E455AE
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#D1C5C0
variable.language.fenced.markdown#808080
meta.separator#808080bold
markup.table#D1C5C0