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.activeBorder#ee9c22b3
  • activityBar.background#fcfcfc
  • activityBar.border#6b7d8f1f
  • activityBar.foreground#8a9199cc
  • activityBar.inactiveForeground#8a919999
  • activityBarBadge.background#ee9c22
  • activityBarBadge.foreground#f8f9fa
  • badge.background#ee9c2233
  • badge.foreground#e39214
  • button.background#ee9c22
  • button.foreground#f8f9fa
  • button.hoverBackground#e8971c
  • button.secondaryBackground#8a919933
  • button.secondaryForeground#5c6166
  • button.secondaryHoverBackground#8a919980
  • debugConsoleInputIcon.foreground#ee9c22
  • debugExceptionWidget.background#f3f4f5
  • debugExceptionWidget.border#6b7d8f1f
  • debugIcon.breakpointDisabledForeground#ed936680
  • debugIcon.breakpointForeground#ed9366
  • debugToolBar.background#f3f4f5
  • descriptionForeground#8a9199
  • diffEditor.diagonalFill#6b7d8f1f
  • diffEditor.insertedTextBackground#6cbf431f
  • diffEditor.removedTextBackground#ff73831f
  • dropdown.background#fcfcfc
  • dropdown.border#8a919945
  • dropdown.foreground#8a9199
  • editor.background#fcfcfc
  • editor.findMatchBackground#9f40ff2b
  • editor.findMatchBorder#9f40ff2b
  • editor.findMatchHighlightBackground#9f40ffcc
  • editor.findMatchHighlightBorder#8f30efcc
  • editor.findRangeHighlightBackground#9f40ff40
  • editor.foreground#5c6166
  • editor.inactiveSelectionBackground#035bd612
  • editor.lineHighlightBackground#8a91991a
  • editor.rangeHighlightBackground#9f40ff33
  • editor.selectionBackground#035bd626
  • editor.selectionHighlightBackground#6cbf4326
  • editor.selectionHighlightBorder#6cbf4300
  • editor.snippetTabstopHighlightBackground#6cbf4333
  • editor.wordHighlightBackground#478acc14
  • editor.wordHighlightBorder#478acc80
  • editor.wordHighlightStrongBackground#6cbf4314
  • editor.wordHighlightStrongBorder#6cbf4380
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#62656999
  • editorCursor.foreground#ee9c22
  • editorError.foreground#e65050
  • editorGroup.background#f3f4f5
  • editorGroup.border#6b7d8f1f
  • editorGroupHeader.noTabsBackground#f8f9fa
  • editorGroupHeader.tabsBackground#f8f9fa
  • editorGroupHeader.tabsBorder#6b7d8f1f
  • editorGutter.addedBackground#6cbf43cc
  • editorGutter.deletedBackground#ff7383cc
  • editorGutter.modifiedBackground#478acccc
  • editorHoverWidget.background#f8f9fa
  • editorHoverWidget.border#6b7d8f1f
  • editorIndentGuide.activeBackground#8a919959
  • editorIndentGuide.background#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#ee9c22
  • editorMarkerNavigation.background#f3f4f5
  • editorOverviewRuler.addedForeground#6cbf43
  • editorOverviewRuler.border#6b7d8f1f
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.deletedForeground#ff7383
  • editorOverviewRuler.errorForeground#e65050
  • editorOverviewRuler.findMatchForeground#9f40ff2b
  • editorOverviewRuler.modifiedForeground#478acc
  • editorOverviewRuler.warningForeground#ee9c22
  • editorOverviewRuler.wordHighlightForeground#478acc66
  • editorOverviewRuler.wordHighlightStrongForeground#6cbf4366
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#f3f4f5
  • editorSuggestWidget.border#6b7d8f1f
  • editorSuggestWidget.highlightForeground#ee9c22
  • editorSuggestWidget.selectedBackground#56728f1f
  • editorWarning.foreground#ee9c22
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#f8f9fa
  • editorWidget.border#6b7d8f1f
  • errorForeground#e65050
  • extensionButton.prominentBackground#ee9c22
  • extensionButton.prominentForeground#fcfcfc
  • extensionButton.prominentHoverBackground#e8971c
  • focusBorder#ee9c22b3
  • foreground#8a9199
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#ff7383b3
  • gitDecoration.ignoredResourceForeground#8a919980
  • gitDecoration.modifiedResourceForeground#478accb3
  • gitDecoration.submoduleResourceForeground#9971c2b3
  • gitDecoration.untrackedResourceForeground#6cbf43b3
  • icon.foreground#8a9199
  • input.background#fcfcfc
  • input.border#8a919945
  • input.foreground#5c6166
  • input.placeholderForeground#8a919980
  • inputOption.activeBackground#ee9c2233
  • inputOption.activeBorder#e392144d
  • inputOption.activeForeground#e39214
  • inputValidation.errorBackground#fcfcfc
  • inputValidation.errorBorder#e65050
  • inputValidation.infoBackground#f8f9fa
  • inputValidation.infoBorder#379cbb
  • inputValidation.warningBackground#f8f9fa
  • inputValidation.warningBorder#cc8d27
  • keybindingLabel.background#8a91991a
  • keybindingLabel.border#5c61661a
  • keybindingLabel.bottomBorder#5c61661a
  • keybindingLabel.foreground#5c6166
  • list.activeSelectionBackground#56728f1f
  • list.activeSelectionForeground#5c6166
  • list.deemphasizedForeground#e65050
  • list.errorForeground#e65050
  • list.filterMatchBackground#8f30efcc
  • list.filterMatchBorder#9f40ffcc
  • list.focusBackground#56728f1f
  • list.focusForeground#5c6166
  • list.focusOutline#56728f1f
  • list.highlightForeground#ee9c22
  • list.hoverBackground#56728f1f
  • list.inactiveSelectionBackground#6b7d8f1f
  • list.inactiveSelectionForeground#8a9199
  • list.invalidItemForeground#8a91994d
  • listFilterWidget.background#f3f4f5
  • listFilterWidget.noMatchesOutline#e65050
  • listFilterWidget.outline#ee9c22
  • minimap.background#fcfcfc
  • minimap.errorHighlight#e65050
  • minimap.findMatchHighlight#9f40ff2b
  • minimap.selectionHighlight#035bd626
  • minimapGutter.addedBackground#6cbf43
  • minimapGutter.deletedBackground#ff7383
  • minimapGutter.modifiedBackground#478acc
  • panel.background#f8f9fa
  • panel.border#6b7d8f1f
  • panelTitle.activeBorder#ee9c22
  • panelTitle.activeForeground#5c6166
  • panelTitle.inactiveForeground#8a9199
  • peekView.border#56728f1f
  • peekViewEditor.background#f8f9fa
  • peekViewEditor.matchHighlightBackground#9f40ffcc
  • peekViewEditor.matchHighlightBorder#8f30efcc
  • peekViewResult.background#f8f9fa
  • peekViewResult.fileForeground#5c6166
  • peekViewResult.lineForeground#8a9199
  • peekViewResult.matchHighlightBackground#9f40ffcc
  • peekViewResult.selectionBackground#56728f1f
  • peekViewTitle.background#56728f1f
  • peekViewTitleDescription.foreground#8a9199
  • peekViewTitleLabel.foreground#5c6166
  • pickerGroup.border#6b7d8f1f
  • pickerGroup.foreground#8a919980
  • progressBar.background#ee9c22
  • scrollbar.shadow#6b7d8f00
  • scrollbarSlider.activeBackground#8a9199b3
  • scrollbarSlider.background#8a919966
  • scrollbarSlider.hoverBackground#8a919999
  • selection.background#035bd626
  • settings.headerForeground#5c6166
  • settings.modifiedItemIndicator#478acc
  • sideBar.background#f8f9fa
  • sideBar.border#6b7d8f1f
  • sideBarSectionHeader.background#f8f9fa
  • sideBarSectionHeader.border#6b7d8f1f
  • sideBarSectionHeader.foreground#8a9199
  • sideBarTitle.foreground#8a9199
  • statusBar.background#f8f9fa
  • statusBar.border#6b7d8f1f
  • statusBar.debuggingBackground#ed9366
  • statusBar.debuggingForeground#fcfcfc
  • statusBar.foreground#8a9199
  • statusBar.noFolderBackground#f3f4f5
  • statusBarItem.activeBackground#8a919933
  • statusBarItem.hoverBackground#8a919933
  • statusBarItem.prominentBackground#6b7d8f1f
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#ee9c22
  • statusBarItem.remoteForeground#fcfcfc
  • tab.activeBackground#fcfcfc
  • tab.activeBorder#fcfcfc
  • tab.activeBorderTop#ee9c22
  • tab.activeForeground#5c6166
  • tab.border#6b7d8f1f
  • tab.inactiveBackground#f8f9fa
  • tab.inactiveForeground#8a9199
  • tab.unfocusedActiveBorderTop#8a9199
  • tab.unfocusedActiveForeground#8a9199
  • tab.unfocusedInactiveForeground#8a9199
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0082c7
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#0087cc
  • terminal.ansiBrightCyan#1f9c78
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#9971c2
  • terminal.ansiBrightRed#bf464a
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#cc8d27
  • terminal.ansiCyan#169874
  • terminal.ansiGreen#6cbf43
  • terminal.ansiMagenta#946cbd
  • terminal.ansiRed#b94146
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#c68821
  • terminal.background#f8f9fa
  • terminal.foreground#5c6166
  • textBlockQuote.background#f3f4f5
  • textLink.activeForeground#ee9c22
  • textLink.foreground#ee9c22
  • textPreformat.foreground#5c6166
  • titleBar.activeBackground#f8f9fa
  • titleBar.activeForeground#5c6166
  • titleBar.border#6b7d8f1f
  • titleBar.inactiveBackground#f8f9fa
  • titleBar.inactiveForeground#8a9199
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#f3f4f5
  • welcomePage.buttonBackground#ee9c2266
  • welcomePage.progress.background#8a91991a
  • welcomePage.tileBackground#f8f9fa
  • welcomePage.tileShadow#00000026
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#5c6166
comment#62656999italic
string, constant.other.symbol#6d9b00
string.regexp, constant.character, constant.other#1f9c78
constant.numeric#9971c2
constant.language#9971c2
variable, variable.parameter.function-call#5c6166
variable.member#bf464a
variable.language#379cbbitalic
storage#de7526
keyword#de7526
keyword.operator#ed9366
punctuation.separator, punctuation.terminator#5c6166b3
punctuation.section#5c6166
punctuation.accessor#ed9366
punctuation.definition.template-expression#de7526
punctuation.section.embedded#de7526
meta.embedded#5c6166
source.java storage.type, source.haskell storage.type, source.c storage.type#0087cc
entity.other.inherited-class#379cbb
storage.type.function#de7526
source.java storage.type.primitive#379cbb
entity.name.function#cc8d27
variable.parameter, meta.parameter#9971c2
variable.function, variable.annotation, meta.function-call.generic, support.function.go#cc8d27
support.function, support.macro#bf464a
entity.name.import, entity.name.package#86b300
entity.name#0087cc
entity.name.tag, meta.tag.sgml#379cbb
support.class.component#0087cc
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#379cbbcc
entity.other.attribute-name#cc8d27
support.constant#ed9366italic
support.type, support.class, source.go storage.type#379cbb
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#cca267
invalid#e65050
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#cc8d27
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#0087cc
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#62656999
support.type.property-name#379cbbnormal
constant.numeric.line-number.find-in-files - match#62656999
constant.numeric.line-number.match#de7526
entity.name.filename.find-in-files#86b300
message.error#e65050
markup.heading, markup.heading entity.name#86b300bold
markup.underline.link, string.other.link#379cbb
markup.italic#bf464aitalic
markup.bold#bf464abold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#62656999bold
markup.quote#1f9c78italic
markup.list punctuation.definition.list.begin#cc8d27
markup.inserted#6cbf43
markup.changed#478acc
markup.deleted#ff7383
markup.strike#cca267
markup.table#379cbb
text.html.markdown markup.inline.raw#ed9366
text.html.markdown meta.dummy.line-break#62656999
punctuation.definition.markdown#62656999