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#fafafa
  • activityBar.border#fafafa
  • activityBar.foreground#8a9199cc
  • activityBar.inactiveForeground#8a919999
  • activityBarBadge.background#1bb6cc
  • activityBarBadge.foreground#fafafa
  • badge.background#1bb6cc33
  • badge.foreground#f48f36
  • button.background#1bb6cc
  • button.foreground#f9fafa
  • button.hoverBackground#f9943b
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#8a91991a
  • debugToolBar.background#ffffff
  • descriptionForeground#8a9199
  • diffEditor.insertedTextBackground#86b30026
  • diffEditor.removedTextBackground#ed936626
  • dropdown.background#ffffff
  • dropdown.border#dddfe1
  • dropdown.foreground#8a9199
  • editor.background#fafafa
  • editor.findMatchBackground#1bb6cc0d
  • editor.findMatchBorder#1bb6cc
  • editor.findMatchHighlightBackground#1bb6cc0d
  • editor.findMatchHighlightBorder#1bb6cc59
  • editor.findRangeHighlightBackground#e7e8e9
  • editor.findRangeHighlightBorder#fafafa00
  • editor.foreground#575f66
  • editor.inactiveSelectionBackground#e7e8e9
  • editor.lineHighlightBackground#8a91991a
  • editor.rangeHighlightBackground#8a91991a
  • editor.selectionBackground#d1e4f4
  • editor.selectionHighlightBackground#e7e8e9
  • editor.selectionHighlightBorder#e1e1e2
  • editor.wordHighlightBackground#709ecc12
  • editor.wordHighlightBorder#709ecc80
  • editor.wordHighlightStrongBackground#99bf4d12
  • editor.wordHighlightStrongBorder#99bf4d80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a919999
  • editorCodeLens.foreground#abb0b6
  • editorCursor.foreground#1bb6cc
  • editorError.foreground#f51818
  • editorGroup.background#ffffff
  • editorGroup.border#8a91991a
  • editorGroupHeader.noTabsBackground#fafafa
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#fafafa
  • editorGutter.addedBackground#99bf4d99
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#709ecc99
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#f0f0f0
  • editorIndentGuide.activeBackground#8a919959
  • editorIndentGuide.background#8a91992e
  • editorLineNumber.activeForeground#8a9199cc
  • editorLineNumber.foreground#8a919966
  • editorLink.activeForeground#1bb6cc
  • editorMarkerNavigation.background#ffffff
  • editorOverviewRuler.addedForeground#99bf4d99
  • editorOverviewRuler.border#8a91991a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#f51818
  • editorOverviewRuler.modifiedForeground#709ecc99
  • editorOverviewRuler.warningForeground#1bb6cc
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#f0f0f0
  • editorSuggestWidget.highlightForeground#1bb6cc
  • editorSuggestWidget.selectedBackground#8a91991a
  • editorWarning.foreground#1bb6cc
  • editorWhitespace.foreground#8a919966
  • editorWidget.background#ffffff
  • errorForeground#f51818
  • extensionButton.prominentBackground#1bb6cc
  • extensionButton.prominentForeground#f9fafa
  • extensionButton.prominentHoverBackground#f9943b
  • focusBorder#bec1c6
  • foreground#8a9199
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#c9cccf
  • gitDecoration.modifiedResourceForeground#709eccb3
  • gitDecoration.submoduleResourceForeground#a37accb3
  • gitDecoration.untrackedResourceForeground#99bf4db3
  • icon.foreground#8a9199
  • input.background#f7f7f7
  • input.border#dddfe1
  • input.foreground#575f66
  • input.placeholderForeground#b2b7bb
  • inputOption.activeBorder#1bb6cc
  • inputValidation.errorBackground#fafafa
  • inputValidation.errorBorder#f51818
  • inputValidation.infoBackground#fafafa
  • inputValidation.infoBorder#55b4d4
  • inputValidation.warningBackground#fafafa
  • inputValidation.warningBorder#f2ae49
  • list.activeSelectionBackground#8a91991a
  • list.activeSelectionForeground#8a9199
  • list.errorForeground#f27983
  • list.filterMatchBackground#1bb6cc0d
  • list.filterMatchBorder#1bb6cc
  • list.focusBackground#8a91991a
  • list.focusForeground#8a9199
  • list.highlightForeground#1bb6cc
  • list.hoverBackground#8a91991a
  • list.hoverForeground#8a9199
  • list.inactiveSelectionBackground#8a91991a
  • list.inactiveSelectionForeground#8a9199
  • list.invalidItemForeground#b2b7bb
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#f51818
  • listFilterWidget.outline#1bb6cc
  • panel.background#fafafa
  • panel.border#8a91991a
  • panelTitle.activeBorder#1bb6cc
  • panelTitle.activeForeground#575f66
  • panelTitle.inactiveForeground#8a9199
  • peekView.border#8a91991a
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#1bb6cc33
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#8a9199
  • peekViewResult.matchHighlightBackground#1bb6cc33
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#8a9199
  • peekViewTitleLabel.foreground#8a9199
  • pickerGroup.border#8a91991a
  • pickerGroup.foreground#c9cccf
  • progressBar.background#1bb6cc
  • scrollbar.shadow#8a91991a
  • scrollbarSlider.activeBackground#8a9199b3
  • scrollbarSlider.background#8a919966
  • scrollbarSlider.hoverBackground#8a919999
  • selection.background#d1e4f4fd
  • settings.headerForeground#575f66
  • settings.modifiedItemIndicator#709ecc
  • sideBar.background#fafafa
  • sideBar.border#fafafa
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.border#fafafa
  • sideBarSectionHeader.foreground#8a9199
  • sideBarTitle.foreground#8a9199
  • statusBar.background#fafafa
  • statusBar.border#fafafa
  • statusBar.debuggingBackground#ed9366
  • statusBar.debuggingForeground#f9fafa
  • statusBar.foreground#8a9199
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.activeBackground#8a91991a
  • statusBarItem.hoverBackground#8a91991a
  • statusBarItem.prominentBackground#8a91991a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#fafafa
  • tab.activeBorder#1bb6cc
  • tab.activeForeground#575f66
  • tab.border#fafafa
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#8a9199
  • tab.unfocusedActiveBorder#8a9199
  • tab.unfocusedActiveForeground#8a9199
  • tab.unfocusedInactiveForeground#8a9199
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3199e1
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#399ee6
  • terminal.ansiBrightCyan#4cbf99
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#f2ae49
  • terminal.ansiCyan#46ba94
  • terminal.ansiGreen#99bf4d
  • terminal.ansiMagenta#9e75c7
  • terminal.ansiRed#ea6c6d
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#eca944
  • terminal.background#fafafa
  • terminal.foreground#575f66
  • textBlockQuote.background#ffffff
  • textLink.activeForeground#1bb6cc
  • textLink.foreground#1bb6cc
  • textPreformat.foreground#575f66
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#575f66
  • titleBar.border#fafafa
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#8a9199
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#ffffff
  • widget.shadow#424a5040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#575f66
comment#abb0b6italic
string, constant.other.symbol#117a6c
string.regexp, constant.character, constant.other#4cbf99
constant.numeric#58a9df
constant.language#06b38d
variable#000000
variable.member#f07171
variable.language#55b4d4italic
storage#586083
keyword#d11b9a
keyword.operator#d17142
punctuation.separator, punctuation.terminator#575f66b3
punctuation.section#688fb1
punctuation.accessor#ed9366
source.java storage.type, source.haskell storage.type, source.c storage.type#399ee6
entity.other.inherited-class#55b4d4
storage.type.function#5e0c85
source.java storage.type.primitive#55b4d4
entity.name.function#5e0c85
variable.parameter, meta.parameter#000000
variable.function, variable.annotation, meta.function-call.generic, support.function.go#f2ae49
support.function, support.macro#5e0c85
entity.name.import, entity.name.package#86b300
entity.name#a82f8a
entity.name.tag, meta.tag.sgml#55b4d4
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#55b4d480
entity.other.attribute-name#f2ae49
support.constant#ed9366italic
support.type, support.class, source.go storage.type#55b4d4
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#e6ba7e
invalid#f51818
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#f2ae49
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#399ee6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#abb0b6
support.type.property-name#55b4d4normal
constant.numeric.line-number.find-in-files - match#abb0b6
constant.numeric.line-number.match#fa8d3e
entity.name.filename.find-in-files#86b300
message.error#f51818
markup.heading, markup.heading entity.name#86b300bold
markup.underline.link, string.other.link#55b4d4
markup.italic#f07171italic
markup.bold#f07171bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#abb0b6bold
markup.quote#4cbf99italic
markup.list punctuation.definition.list.begin#f2ae49
markup.inserted#99bf4d
markup.changed#709ecc
markup.deleted#f27983
markup.strike#e6ba7e
markup.table#55b4d4
text.html.markdown markup.inline.raw#ed9366
text.html.markdown meta.dummy.line-break#abb0b6
punctuation.definition.markdown#abb0b6