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#c4c4c4
  • 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#5ccfe633
  • chat.slashCommandForeground#5ccfe6
  • 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#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • 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#252629
  • editor.foreground#c4c4c4
  • 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#c4c4c480
  • 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#dfbfff
  • gitDecoration.untrackedResourceForeground#87d96c
  • icon.foreground#71767f
  • inlineChat.background#232426
  • inlineChat.border#1c1d1f
  • inlineChat.foreground#c4c4c4
  • 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#c4c4c4
  • 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#5ccfe6
  • inputValidation.warningBackground#1c1d1f
  • inputValidation.warningBorder#eebd55
  • keybindingLabel.background#71767f1a
  • keybindingLabel.border#c4c4c41a
  • keybindingLabel.bottomBorder#c4c4c41a
  • keybindingLabel.foreground#c4c4c4
  • list.activeSelectionBackground#2a2b2e
  • list.activeSelectionForeground#c4c4c4
  • list.deemphasizedForeground#ff5542
  • list.errorForeground#ff5542
  • list.filterMatchBackground#1e1f21
  • list.filterMatchBorder#252629
  • list.focusBackground#2a2b2e
  • list.focusForeground#c4c4c4
  • 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#c4c4c4
  • panelTitle.inactiveForeground#71767f
  • peekView.border#2a2b2e
  • peekViewEditor.background#232426
  • peekViewEditor.matchHighlightBackground#252629
  • peekViewEditor.matchHighlightBorder#1e1f21
  • peekViewResult.background#232426
  • peekViewResult.fileForeground#c4c4c4
  • peekViewResult.lineForeground#71767f
  • peekViewResult.matchHighlightBackground#252629
  • peekViewResult.selectionBackground#2a2b2e
  • peekViewTitle.background#2a2b2e
  • peekViewTitleDescription.foreground#71767f
  • peekViewTitleLabel.foreground#c4c4c4
  • 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#c4c4c4
  • 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#73d0ff
  • statusBar.debuggingForeground#c4c4c4
  • 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#73d0ff
  • symbolIcon.booleanForeground#dfbfff
  • symbolIcon.classForeground#73d0ff
  • symbolIcon.colorForeground#d9be98
  • symbolIcon.constantForeground#dfbfff
  • symbolIcon.constructorForeground#eebd55
  • symbolIcon.enumeratorForeground#73d0ff
  • symbolIcon.enumeratorMemberForeground#dfbfff
  • symbolIcon.eventForeground#d9be98
  • symbolIcon.fieldForeground#f28779
  • symbolIcon.fileForeground#71767f
  • symbolIcon.folderForeground#71767f
  • symbolIcon.functionForeground#eebd55
  • symbolIcon.interfaceForeground#73d0ff
  • symbolIcon.keyForeground#5ccfe6
  • symbolIcon.keywordForeground#eebd55
  • symbolIcon.methodForeground#eebd55
  • symbolIcon.moduleForeground#b1d665
  • symbolIcon.namespaceForeground#b1d665
  • symbolIcon.nullForeground#dfbfff
  • symbolIcon.numberForeground#dfbfff
  • symbolIcon.objectForeground#73d0ff
  • symbolIcon.operatorForeground#f29e74
  • symbolIcon.packageForeground#b1d665
  • symbolIcon.propertyForeground#f28779
  • symbolIcon.referenceForeground#73d0ff
  • symbolIcon.snippetForeground#d9be98
  • symbolIcon.stringForeground#b1d665
  • symbolIcon.structForeground#73d0ff
  • symbolIcon.textForeground#c4c4c4
  • symbolIcon.typeParameterForeground#73d0ff
  • symbolIcon.unitForeground#dfbfff
  • symbolIcon.variableForeground#c4c4c4
  • tab.activeBackground#1c1d1f
  • tab.activeBorder#d9dadd
  • tab.activeForeground#c4c4c4
  • tab.border#1c1d1f
  • tab.inactiveBackground#1c1d1f
  • tab.inactiveForeground#71767f
  • tab.unfocusedActiveBorder#71767f
  • tab.unfocusedActiveForeground#71767f
  • tab.unfocusedInactiveForeground#71767f
  • terminal.ansiBlack#1c1d1f
  • terminal.ansiBlue#6acdff
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#b1d665
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#eebd55
  • terminal.ansiCyan#93e2c8
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#ddbbff
  • terminal.ansiRed#f28273
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#eaba53
  • terminal.background#1c1d1f
  • terminal.foreground#c4c4c4
  • terminalCommandGuide.foreground#71767f4d
  • terminalStickyScroll.border#1c1d1f
  • terminalStickyScroll.shadow#00000033
  • terminalStickyScrollHover.background#252629
  • textBlockQuote.background#232426
  • textLink.activeForeground#d9dadd
  • textLink.foreground#d9dadd
  • textPreformat.foreground#c4c4c4
  • 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
#c4c4c4
comment#606d80italic
string, constant.other.symbol#b1d665
string.regexp, constant.character, constant.other#95e6cb
constant.numeric#dfbfff
constant.language#dfbfff
variable, variable.parameter.function-call#c4c4c4
variable.member#f28779
variable.language#5ccfe6italic
storage#eebd55
keyword#eebd55
keyword.operator#f29e74
punctuation.separator, punctuation.terminator#c4c4c4b3
punctuation.section#c4c4c4
punctuation.accessor#f29e74
punctuation.definition.template-expression#eebd55
punctuation.section.embedded#eebd55
meta.embedded#c4c4c4
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff
entity.other.inherited-class#5ccfe6
storage.type.function#eebd55
source.java storage.type.primitive#5ccfe6
entity.name.function#eebd55
variable.parameter, meta.parameter#dfbfff
variable.function, variable.annotation, meta.function-call.generic, support.function.go#eebd55
support.function, support.macro#f28779
entity.name.import, entity.name.package#b1d665
entity.name#73d0ff
entity.name.tag, meta.tag.sgml#5ccfe6
support.class.component#73d0ff
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5ccfe680
entity.other.attribute-name#eebd55
entity.other.attribute-name.pseudo-class#95e6cb
support.constant#f29e74italic
support.type, support.class, source.go storage.type#5ccfe6
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#eebd55
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#73d0ff
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#5ccfe6normal
constant.numeric.line-number.find-in-files - match#606d80
constant.numeric.line-number.match#eebd55
entity.name.filename.find-in-files#b1d665
message.error#ff5542
markup.heading, markup.heading entity.name#b1d665bold
markup.underline.link, string.other.link#5ccfe6
markup.italic, emphasis#f28779italic
markup.bold#f28779bold
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#eebd55
markup.inserted#87d96c
markup.changed#80bfff
markup.deleted#f27983
markup.strike#d9be98
markup.strongbold
markup.table#5ccfe6
text.html.markdown markup.inline.raw#f29e74
text.html.markdown meta.dummy.line-break#606d80
punctuation.definition.markdown#606d80