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.

  • actionBar.toggledBackground#2a2b2e
  • activityBar.activeBorder#d9dadd
  • activityBar.background#1c1d1f
  • activityBar.border#1c1d1f
  • activityBar.foreground#71767fcc
  • activityBar.inactiveForeground#71767f99
  • activityBarBadge.background#d9dadd
  • activityBarBadge.foreground#5e6270
  • activityBarTop.activeBorder#d9dadd
  • activityBarTop.foreground#80858d
  • badge.background#d9dadd33
  • badge.foreground#d9dadd
  • button.background#d9dadd
  • button.border#5e62701a
  • button.foreground#5e6270
  • button.hoverBackground#d2d3d7
  • button.secondaryBackground#71767f33
  • button.secondaryForeground#c0c3c8
  • button.secondaryHoverBackground#71767f80
  • button.separator#5e62704d
  • chat.checkpointSeparator#606d80
  • chat.editedFileForeground#80bfff
  • chat.requestBackground#1c1d1f
  • chat.requestBorder#2a2b2e
  • chat.requestBubbleBackground#252629
  • chat.requestBubbleHoverBackground#2a2b2e
  • chat.slashCommandBackground#cacacd33
  • chat.slashCommandForeground#cacacd
  • commandCenter.activeBackground#71767f0d
  • commandCenter.activeBorder#2a2b2e00
  • commandCenter.activeForeground#71767f
  • commandCenter.background#1c1d1f
  • commandCenter.border#1c1d1f
  • commandCenter.foreground#71767f
  • commandCenter.inactiveBorder#1c1d1f
  • debugConsoleInputIcon.foreground#d9dadd
  • debugExceptionWidget.background#232426
  • debugExceptionWidget.border#1c1d1f
  • debugIcon.breakpointDisabledForeground#c0c3c880
  • debugIcon.breakpointForeground#c0c3c882
  • debugToolBar.background#232426
  • descriptionForeground#71767f
  • diffEditor.diagonalFill#1c1d1f
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.removedTextBackground#f279831f
  • disabledForeground#71767f80
  • dropdown.background#232426
  • dropdown.border#1c1d1f
  • dropdown.foreground#71767f
  • editor.background#1c1d1f
  • editor.findMatchBackground#656565
  • editor.findMatchHighlightBackground#2a2b2e
  • editor.foreground#c0c3c8
  • editor.inactiveSelectionBackground#252629
  • editor.lineHighlightBackground#1b1e1e
  • editor.rangeHighlightBackground#65656533
  • editor.selectionBackground#2a2b2e
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.wordHighlightBackground#80bfff14
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#71767f4d
  • editorBracketMatch.border#71767f4d
  • editorCodeLens.foreground#606d80
  • editorCursor.foreground#d9dadd
  • editorError.foreground#ff5542
  • editorGroup.background#232426
  • editorGroup.border#1c1d1f
  • editorGroupHeader.noTabsBackground#1c1d1f
  • editorGroupHeader.tabsBackground#1c1d1f
  • editorGroupHeader.tabsBorder#1c1d1f
  • editorGutter.addedBackground#87d96c
  • editorGutter.deletedBackground#f27983
  • editorGutter.modifiedBackground#80bfff
  • editorHoverWidget.background#232426
  • editorHoverWidget.border#1c1d1f
  • editorIndentGuide.activeBackground#71767f70
  • editorIndentGuide.background#71767f3b
  • editorInlayHint.foreground#c0c3c880
  • editorLineNumber.activeForeground#71767f
  • editorLineNumber.foreground#71767f80
  • editorLink.activeForeground#d9dadd
  • editorMarkerNavigation.background#232426
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#1c1d1f
  • editorOverviewRuler.bracketMatchForeground#71767fb3
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff5542
  • editorOverviewRuler.findMatchForeground#656565
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#d9dadd
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#71767f3b
  • editorStickyScroll.border#1c1d1f
  • editorStickyScroll.shadow#00000033
  • editorStickyScrollHover.background#252629
  • editorSuggestWidget.background#232426
  • editorSuggestWidget.border#1c1d1f
  • editorSuggestWidget.highlightForeground#d9dadd
  • editorSuggestWidget.selectedBackground#2a2b2e
  • editorWarning.foreground#d9dadd
  • editorWhitespace.foreground#71767f80
  • editorWidget.background#232426
  • editorWidget.border#1c1d1f
  • editorWidget.resizeBorder#232426
  • errorForeground#ff5542
  • extensionButton.prominentBackground#d9dadd
  • extensionButton.prominentForeground#5e6270
  • extensionButton.prominentHoverBackground#d6d7da
  • focusBorder#d9dadd
  • foreground#71767f
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983
  • gitDecoration.ignoredResourceForeground#71767f80
  • gitDecoration.modifiedResourceForeground#80bfff
  • gitDecoration.submoduleResourceForeground#c0c3c8
  • gitDecoration.untrackedResourceForeground#87d96c
  • icon.foreground#71767f
  • inlineChat.background#232426
  • inlineChat.border#1c1d1f
  • inlineChat.foreground#c0c3c8
  • inlineChat.shadow#00000033
  • inlineChatDiff.inserted#87d96c33
  • inlineChatDiff.removed#f2798333
  • inlineChatInput.background#1c1d1f
  • inlineChatInput.border#1c1d1f
  • inlineChatInput.focusBorder#d9daddb3
  • inlineChatInput.placeholderForeground#71767f80
  • inlineEdit.gutterIndicator.background#1c1d1f
  • inlineEdit.gutterIndicator.primaryBackground#d9dadd1a
  • inlineEdit.gutterIndicator.primaryBorder#d9dadd
  • inlineEdit.gutterIndicator.primaryForeground#d9dadd
  • inlineEdit.gutterIndicator.secondaryBackground#71767f1a
  • inlineEdit.gutterIndicator.secondaryBorder#71767f80
  • inlineEdit.gutterIndicator.secondaryForeground#71767f
  • inlineEdit.gutterIndicator.successfulBackground#87d96c1a
  • inlineEdit.gutterIndicator.successfulBorder#87d96c
  • inlineEdit.gutterIndicator.successfulForeground#87d96c
  • inlineEdit.modifiedBackground#87d96c1a
  • inlineEdit.modifiedBorder#87d96c80
  • inlineEdit.modifiedChangedLineBackground#87d96c26
  • inlineEdit.modifiedChangedTextBackground#87d96c40
  • inlineEdit.originalBackground#f279831a
  • inlineEdit.originalBorder#f2798380
  • inlineEdit.originalChangedLineBackground#f2798326
  • inlineEdit.originalChangedTextBackground#f2798340
  • input.background#1c1d1f
  • input.border#71767f33
  • input.foreground#c0c3c8
  • input.placeholderForeground#71767f80
  • inputOption.activeBackground#d9dadd1a
  • inputOption.activeBorder#d9dadd33
  • inputOption.activeForeground#d9dadd
  • inputOption.hoverBackground#71767f33
  • inputValidation.errorBackground#1c1d1f
  • inputValidation.errorBorder#ff5542
  • inputValidation.infoBackground#1c1d1f
  • inputValidation.infoBorder#cacacd
  • inputValidation.warningBackground#1c1d1f
  • inputValidation.warningBorder#cce73a
  • keybindingLabel.background#71767f1a
  • keybindingLabel.border#c0c3c81a
  • keybindingLabel.bottomBorder#c0c3c81a
  • keybindingLabel.foreground#c0c3c8
  • list.activeSelectionBackground#2a2b2e
  • list.activeSelectionForeground#c0c3c8
  • list.deemphasizedForeground#ff5542
  • list.errorForeground#ff5542
  • list.filterMatchBackground#232426
  • list.filterMatchBorder#2a2b2e
  • list.focusBackground#2a2b2e
  • list.focusForeground#c0c3c8
  • list.focusOutline#2a2b2e
  • list.highlightForeground#d9dadd
  • list.hoverBackground#2a2b2e
  • list.inactiveSelectionBackground#252629
  • list.inactiveSelectionForeground#71767f
  • list.invalidItemForeground#71767f4d
  • listFilterWidget.background#232426
  • listFilterWidget.noMatchesOutline#ff5542
  • listFilterWidget.outline#1c1d1f
  • menu.background#232426
  • menu.border#1c1d1f
  • menu.foreground#71767f
  • menu.selectionBackground#252629
  • menu.selectionBorder#2a2b2e
  • menu.separatorBackground#1c1d1f
  • minimap.background#1c1d1f
  • minimap.errorHighlight#ff5542
  • minimap.findMatchHighlight#656565
  • minimap.selectionHighlight#2a2b2e
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • multiDiffEditor.background#1c1d1f
  • multiDiffEditor.border#1c1d1f
  • multiDiffEditor.headerBackground#232426
  • panel.background#1c1d1f
  • panel.border#1c1d1f
  • panelStickyScroll.border#1c1d1f
  • panelStickyScroll.shadow#00000033
  • panelTitle.activeBorder#d9dadd
  • panelTitle.activeForeground#c0c3c8
  • panelTitle.inactiveForeground#71767f
  • peekView.border#2a2b2e
  • peekViewEditor.background#232426
  • peekViewEditor.matchHighlightBackground#2a2b2e
  • peekViewEditor.matchHighlightBorder#232426
  • peekViewResult.background#232426
  • peekViewResult.fileForeground#c0c3c8
  • peekViewResult.lineForeground#71767f
  • peekViewResult.matchHighlightBackground#2a2b2e
  • peekViewResult.selectionBackground#2a2b2e
  • peekViewTitle.background#2a2b2e
  • peekViewTitleDescription.foreground#71767f
  • peekViewTitleLabel.foreground#c0c3c8
  • pickerGroup.border#1c1d1f
  • pickerGroup.foreground#71767f80
  • profileBadge.background#d9dadd
  • profileBadge.foreground#5e6270
  • progressBar.background#d9dadd
  • scrollbar.shadow#1c1d1f00
  • scrollbarSlider.activeBackground#71767fb3
  • scrollbarSlider.background#71767f66
  • scrollbarSlider.hoverBackground#71767f99
  • selection.background#2a2b2e
  • settings.headerForeground#c0c3c8
  • settings.modifiedItemIndicator#80bfff
  • sideBar.background#1c1d1f
  • sideBar.border#1c1d1f
  • sideBarSectionHeader.background#1c1d1f
  • sideBarSectionHeader.border#1c1d1f
  • sideBarSectionHeader.foreground#71767f
  • sideBarStickyScroll.border#1c1d1f
  • sideBarStickyScroll.shadow#00000033
  • sideBarTitle.foreground#71767f
  • statusBar.background#1c1d1f
  • statusBar.border#1c1d1f
  • statusBar.debuggingBackground#968efa
  • statusBar.debuggingForeground#c0c3c8
  • statusBar.foreground#71767f
  • statusBar.noFolderBackground#232426
  • statusBarItem.activeBackground#71767f33
  • statusBarItem.hoverBackground#71767f33
  • statusBarItem.prominentBackground#1c1d1f
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#d9dadd
  • statusBarItem.remoteForeground#5e6270
  • symbolIcon.arrayForeground#968efa
  • symbolIcon.booleanForeground#c0c3c8
  • symbolIcon.classForeground#968efa
  • symbolIcon.colorForeground#d9be98
  • symbolIcon.constantForeground#c0c3c8
  • symbolIcon.constructorForeground#cce73a
  • symbolIcon.enumeratorForeground#968efa
  • symbolIcon.enumeratorMemberForeground#c0c3c8
  • symbolIcon.eventForeground#d9be98
  • symbolIcon.fieldForeground#828282
  • symbolIcon.fileForeground#71767f
  • symbolIcon.folderForeground#71767f
  • symbolIcon.functionForeground#cce73a
  • symbolIcon.interfaceForeground#968efa
  • symbolIcon.keyForeground#cacacd
  • symbolIcon.keywordForeground#968efa
  • symbolIcon.methodForeground#cce73a
  • symbolIcon.moduleForeground#daf462
  • symbolIcon.namespaceForeground#daf462
  • symbolIcon.nullForeground#c0c3c8
  • symbolIcon.numberForeground#c0c3c8
  • symbolIcon.objectForeground#968efa
  • symbolIcon.operatorForeground#c0c3c882
  • symbolIcon.packageForeground#daf462
  • symbolIcon.propertyForeground#828282
  • symbolIcon.referenceForeground#968efa
  • symbolIcon.snippetForeground#d9be98
  • symbolIcon.stringForeground#daf462
  • symbolIcon.structForeground#968efa
  • symbolIcon.textForeground#c0c3c8
  • symbolIcon.typeParameterForeground#968efa
  • symbolIcon.unitForeground#c0c3c8
  • symbolIcon.variableForeground#c0c3c8
  • tab.activeBackground#1c1d1f
  • tab.activeBorder#d9dadd
  • tab.activeForeground#c0c3c8
  • tab.border#1c1d1f
  • tab.inactiveBackground#1c1d1f
  • tab.inactiveForeground#71767f
  • tab.unfocusedActiveBorder#71767f
  • tab.unfocusedActiveForeground#71767f
  • tab.unfocusedInactiveForeground#71767f
  • terminal.ansiBlack#1c1d1f
  • terminal.ansiBlue#938afa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#968efa
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#daf462
  • terminal.ansiBrightMagenta#c0c3c8
  • terminal.ansiBrightRed#828282
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#cce73a
  • terminal.ansiCyan#93e2c8
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#bdc0c5
  • terminal.ansiRed#7f7f7f
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#c9e439
  • terminal.background#1c1d1f
  • terminal.foreground#c0c3c8
  • terminalCommandGuide.foreground#71767f4d
  • terminalStickyScroll.border#1c1d1f
  • terminalStickyScroll.shadow#00000033
  • terminalStickyScrollHover.background#252629
  • textBlockQuote.background#232426
  • textLink.activeForeground#d9dadd
  • textLink.foreground#d9dadd
  • textPreformat.foreground#c0c3c8
  • titleBar.activeBackground#1c1d1f
  • titleBar.activeForeground#71767f
  • titleBar.border#1c1d1f
  • titleBar.inactiveBackground#1c1d1f
  • titleBar.inactiveForeground#71767fb3
  • toolbar.hoverBackground#2a2b2e
  • tree.indentGuidesStroke#71767f70
  • walkThrough.embeddedEditorBackground#232426
  • welcomePage.buttonBackground#d9dadd66
  • welcomePage.progress.background#1b1e1e
  • welcomePage.tileBackground#1c1d1f
  • welcomePage.tileShadow#00000033
  • widget.border#1c1d1f
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c0c3c8
comment#606d80italic
string, constant.other.symbol#daf462
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#c0c3c8
constant.language#c0c3c8
variable, variable.parameter.function-call#c0c3c8
variable.member#828282
variable.language#cacacditalic
storage#968efa
keyword#968efa
keyword.operator#c0c3c882
punctuation.separator, punctuation.terminator#c0c3c8b3
punctuation.section#c0c3c8
punctuation.accessor#c0c3c882
punctuation.definition.template-expression#968efa
punctuation.section.embedded#968efa
meta.embedded#c0c3c8
source.java storage.type, source.haskell storage.type, source.c storage.type#968efa
entity.other.inherited-class#cacacd
storage.type.function#968efa
source.java storage.type.primitive#cacacd
entity.name.function#cce73a
variable.parameter, meta.parameter#c0c3c8
variable.function, variable.annotation, meta.function-call.generic, support.function.go#cce73a
support.function, support.macro#828282
entity.name.import, entity.name.package#daf462
entity.name#968efa
entity.name.tag, meta.tag.sgml#cacacd
support.class.component#968efa
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#cacacd80
entity.other.attribute-name#cce73a
entity.other.attribute-name.pseudo-class#95e6cb
support.constant#c0c3c882italic
support.type, support.class, source.go storage.type#cacacd
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator#d9be98
invalid#ff5542
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#cce73a
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#968efa
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#606d80
support.type.property-name#cacacdnormal
constant.numeric.line-number.find-in-files - match#606d80
constant.numeric.line-number.match#968efa
entity.name.filename.find-in-files#daf462
message.error#ff5542
markup.heading, markup.heading entity.name#daf462bold
markup.underline.link, string.other.link#cacacd
markup.italic, emphasis#828282italic
markup.bold#828282bold
markup.underlineunderline
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#606d80bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#cce73a
markup.inserted#87d96c
markup.changed#80bfff
markup.deleted#f27983
markup.strike#d9be98
markup.strongbold
markup.table#cacacd
text.html.markdown markup.inline.raw#c0c3c882
text.html.markdown meta.dummy.line-break#606d80
punctuation.definition.markdown#606d80