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—