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#2F203Fb3
  • activityBar.background#d8cceb
  • activityBar.border#69538066
  • activityBar.foreground#7332b8
  • activityBar.inactiveForeground#1b1b1ba6
  • activityBarBadge.background#604875
  • activityBarBadge.foreground#c7c1ce
  • badge.background#2F203F33
  • badge.foreground#231830
  • breadcrumb.activeSelectionForeground#827a91
  • breadcrumb.focusForeground#6b5980
  • breadcrumb.foreground#5f5d69
  • breadcrumbPicker.background#1a1a1a
  • button.background#745592
  • button.foreground#dcd9e0
  • button.hoverBackground#372b4d
  • button.secondaryBackground#7a708c33
  • button.secondaryForeground#383838
  • button.secondaryHoverBackground#5b526b80
  • checkbox.background#1d1327
  • checkbox.foreground#745592
  • contrastActiveBorder#FFFFFF00
  • contrastBorder#FFFFFF00
  • debugConsoleInputIcon.foreground#2F203F
  • debugExceptionWidget.background#242029
  • debugExceptionWidget.border#1d1d1dbb
  • debugIcon.breakpointDisabledForeground#f29e7480
  • debugIcon.breakpointForeground#f29e74
  • debugIcon.continueForeground#f29e7480
  • debugIcon.disconnectForeground#f29e7480
  • debugIcon.pauseForeground#f29e7480
  • debugIcon.restartForeground#417c2c
  • debugIcon.startForeground#f29e7480
  • debugIcon.stepBackForeground#f29e7480
  • debugIcon.stepIntoForeground#f29e7480
  • debugIcon.stepOutForeground#f29e7480
  • debugIcon.stepOverForeground#f29e7480
  • debugIcon.stopForeground#ac3331f5
  • debugToolBar.background#221c2b
  • descriptionForeground#949dad
  • diffEditor.diagonalFill#69538066
  • diffEditor.insertedTextBackground#87d96c1f
  • diffEditor.insertedTextBorder#4e75411f
  • diffEditor.removedTextBackground#f279831f
  • dropdown.background#cbbce2fa
  • dropdown.border#7d6f9745
  • dropdown.foreground#3b314d
  • editor.background#ebe5f7
  • editor.findMatchBackground#695380
  • editor.findMatchBorder#695380
  • editor.findMatchHighlightBackground#69538066
  • editor.findMatchHighlightBorder#5c467266
  • editor.findRangeHighlightBackground#6953808c
  • editor.foreground#41403f
  • editor.inactiveSelectionBackground#8340ff21
  • editor.lineHighlightBackground#69538033
  • editor.rangeHighlightBackground#69538080
  • editor.selectionBackground#8340ff21
  • editor.selectionHighlightBackground#87d96c26
  • editor.selectionHighlightBorder#87d96c00
  • editor.snippetFinalTabstopHighlightBackground#6943ff62
  • editor.snippetFinalTabstopHighlightBorder#6943ff62
  • editor.snippetTabstopHighlightBackground#87d96c33
  • editor.snippetTabstopHighlightBorder#6943ff62
  • editor.wordHighlightBackground#8340ff21
  • editor.wordHighlightBorder#80bfff80
  • editor.wordHighlightStrongBackground#87d96c14
  • editor.wordHighlightStrongBorder#87d96c80
  • editorBracketMatch.background#8a91994d
  • editorBracketMatch.border#8a91994d
  • editorCodeLens.foreground#c4b8e680
  • editorCursor.foreground#2F203F
  • editorError.foreground#ff6666
  • editorGroup.border#69538066
  • editorGroupHeader.noTabsBackground#b3a2da
  • editorGroupHeader.tabsBackground#bdaee0
  • editorGroupHeader.tabsBorder#0e0e0ec4
  • editorGutter.addedBackground#87d96ccc
  • editorGutter.background#f0eafa
  • editorGutter.deletedBackground#f27983cc
  • editorGutter.modifiedBackground#80bfffcc
  • editorHoverWidget.background#242029
  • editorHoverWidget.border#69538066
  • editorIndentGuide.activeBackground1#8a91999d
  • editorIndentGuide.background1#8a9199a9
  • editorLineNumber.activeForeground#68646ed5
  • editorLineNumber.foreground#68646ed5
  • editorLink.activeForeground#2F203F
  • editorMarkerNavigation.background#af9bc7
  • editorMarkerNavigationError.background#EC3A37F5
  • editorMarkerNavigationWarning.background#92791ef5
  • editorOverviewRuler.addedForeground#87d96c
  • editorOverviewRuler.border#0e0e0e30
  • editorOverviewRuler.bracketMatchForeground#8a9199b3
  • editorOverviewRuler.commonContentForeground#ceaf3fe0
  • editorOverviewRuler.currentContentForeground#ff666655
  • editorOverviewRuler.deletedForeground#f27983
  • editorOverviewRuler.errorForeground#ff6666
  • editorOverviewRuler.findMatchForeground#695380e3
  • editorOverviewRuler.incomingContentForeground#87d96c55
  • editorOverviewRuler.modifiedForeground#80bfff
  • editorOverviewRuler.warningForeground#2F203F
  • editorOverviewRuler.wordHighlightForeground#80bfff66
  • editorOverviewRuler.wordHighlightStrongForeground#87d96c66
  • editorRuler.foreground#8a91992e
  • editorSuggestWidget.background#242029
  • editorSuggestWidget.border#69538066
  • editorSuggestWidget.highlightForeground#2F203F
  • editorSuggestWidget.selectedBackground#7f639926
  • editorWarning.border#352941
  • editorWarning.foreground#2F203F
  • editorWhitespace.foreground#484e55d5
  • editorWidget.background#967eaffb
  • editorWidget.border#69538066
  • editorWidget.foreground#e7e5e7fb
  • errorForeground#f86767
  • extensionButton.prominentBackground#2F203F
  • extensionButton.prominentForeground#1F1F1F
  • extensionButton.prominentHoverBackground#44295f
  • focusBorder#2F203Fb3
  • foreground#48484be0
  • gitDecoration.conflictingResourceForeground#bada55
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#333333f3
  • gitDecoration.modifiedResourceForeground#157a15
  • gitDecoration.submoduleResourceForeground#9684a8c7
  • gitDecoration.untrackedResourceForeground#ac9acc
  • icon.foreground#676d79
  • input.background#bdaee0
  • input.border#7a708c45
  • input.foreground#2d2935
  • input.placeholderForeground#645b75e7
  • inputOption.activeBackground#2F203F33
  • inputOption.activeBorder#2F203F4d
  • inputOption.activeForeground#2F203F
  • inputValidation.errorBackground#bdaee0
  • inputValidation.errorBorder#ff6666
  • inputValidation.infoBackground#271f30
  • inputValidation.infoBorder#35ddff
  • inputValidation.warningBackground#271f30
  • inputValidation.warningBorder#ffd173
  • keybindingLabel.background#666b741a
  • keybindingLabel.border#cccac21a
  • keybindingLabel.bottomBorder#cccac21a
  • keybindingLabel.foreground#dddcd9
  • list.activeSelectionBackground#7f639926
  • list.activeSelectionForeground#3e3b44
  • list.deemphasizedForeground#ff6666
  • list.dropBackground#ad9fca
  • list.errorForeground#ff6666
  • list.filterMatchBackground#5c467266
  • list.filterMatchBorder#69538066
  • list.focusBackground#7f639926
  • list.focusForeground#3e3b44
  • list.focusOutline#7f639926
  • list.highlightForeground#2F203F
  • list.hoverBackground#7f639926
  • list.hoverForeground#413c49
  • list.inactiveSelectionBackground#69758c1f
  • list.inactiveSelectionForeground#7a708c
  • list.invalidItemForeground#7a708c4d
  • listFilterWidget.background#bdaee0
  • listFilterWidget.noMatchesOutline#ff6666
  • listFilterWidget.outline#2F203F
  • menu.separatorBackground#b189d1
  • merge.border#FFFFFF00
  • merge.commonContentBackground#A599E981
  • merge.commonHeaderBackground#A599E981
  • merge.currentContentBackground#3ad90093
  • merge.currentHeaderBackground#3ad90093
  • merge.incomingContentBackground#ff730086
  • merge.incomingHeaderBackground#ff730086
  • minimap.background#ae9bd1d3
  • minimap.errorHighlight#ff6666
  • minimap.findMatchHighlight#69538077
  • minimap.selectionHighlight#55436866
  • minimapGutter.addedBackground#87d96c
  • minimapGutter.deletedBackground#f27983
  • minimapGutter.modifiedBackground#80bfff
  • notificationCenter.border#2a1e3f
  • notificationCenterHeader.background#5d4e97
  • notificationCenterHeader.foreground#3e3b44
  • notificationLink.foreground#3e3b44
  • notifications.background#2a1e3f
  • notifications.border#382b55
  • notifications.foreground#CEC5FF
  • notificationToast.border#5d4e97
  • panel.background#8564a8
  • panel.border#69538066
  • panelTitle.activeBorder#2F203F
  • panelTitle.activeForeground#181818
  • panelTitle.inactiveForeground#3e3b44
  • peekView.border#69538066
  • peekViewEditor.background#0e0e0e30
  • peekViewEditor.matchHighlightBackground#69538066
  • peekViewEditor.matchHighlightBorder#5c467266
  • peekViewEditorGutter.background#392d44
  • peekViewResult.background#0e0e0e30
  • peekViewResult.fileForeground#3e3b44
  • peekViewResult.lineForeground#7a708c
  • peekViewResult.matchHighlightBackground#69538066
  • peekViewResult.selectionBackground#78639926
  • peekViewResult.selectionForeground#3e3b44
  • peekViewTitle.background#69538066
  • peekViewTitleDescription.foreground#7a708c
  • peekViewTitleLabel.foreground#3e3b44
  • pickerGroup.border#0e0e0e30
  • pickerGroup.foreground#7a708cd8
  • progressBar.background#2F203F
  • sash.hoverBorder#c79d5d
  • scrollbar.shadow#0e0e0e30
  • scrollbarSlider.activeBackground#7a708cb3
  • scrollbarSlider.background#7a708c66
  • scrollbarSlider.hoverBackground#7a708c99
  • selection.background#2F203Fb3
  • settings.checkboxBackground#baa8cc
  • settings.checkboxBorder#32253f
  • settings.checkboxForeground#35313d
  • settings.dropdownBackground#baa8cc
  • settings.dropdownBorder#32253f
  • settings.dropdownForeground#433e4e
  • settings.dropdownListBorder#a58dd1
  • settings.headerForeground#222222
  • settings.modifiedItemIndicator#beec67
  • settings.numberInputBackground#baa8cc
  • settings.numberInputBorder#32253f
  • settings.numberInputForeground#312b3d
  • settings.textInputBackground#baa8cc
  • settings.textInputBorder#32253f
  • settings.textInputForeground#34313a
  • sideBar.background#e9e1f8
  • sideBar.border#55436866
  • sideBar.foreground#252525
  • sideBarSectionHeader.background#c2b2e9
  • sideBarSectionHeader.border#55436866
  • sideBarSectionHeader.foreground#202020ec
  • sideBarTitle.foreground#222222ec
  • statusBar.background#604d72
  • statusBar.border#69538066
  • statusBar.debuggingBackground#e79e7a
  • statusBar.debuggingForeground#222222
  • statusBar.foreground#e0e2e6
  • statusBar.noFolderBackground#b577bda6
  • statusBar.noFolderForeground#A599E9
  • statusBarItem.activeBackground#7b708c33
  • statusBarItem.hoverBackground#7b708c33
  • statusBarItem.prominentBackground#2F203F
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#2F203F
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#69538066
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#2F203F
  • tab.activeForeground#424242
  • tab.activeModifiedBorder#A599E9
  • tab.border#0e0e0e30
  • tab.inactiveBackground#bdaee0
  • tab.inactiveForeground#585758
  • tab.inactiveModifiedBorder#A599E966
  • tab.unfocusedActiveBorderTop#7a708c
  • tab.unfocusedActiveForeground#9188a0
  • tab.unfocusedActiveModifiedBorder#A599E966
  • tab.unfocusedInactiveForeground#9188a0
  • tab.unfocusedInactiveModifiedBorder#A599E966
  • terminal.ansiBlack#131313
  • terminal.ansiBlue#3A55AB
  • terminal.ansiBrightBlack#252525
  • terminal.ansiBrightBlue#6171CC
  • terminal.ansiBrightCyan#71FAFA
  • terminal.ansiBrightGreen#6CE856
  • terminal.ansiBrightMagenta#B184FF
  • terminal.ansiBrightRed#E74856
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#FFF783
  • terminal.ansiCyan#1BA39D
  • terminal.ansiGreen#4A8F3A
  • terminal.ansiMagenta#845DA8
  • terminal.ansiRed#9E1A1C
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#caba4f
  • terminal.background#e7ddf7
  • terminal.foreground#1a1a1a
  • terminalCursor.background#2f203f
  • terminalCursor.foreground#2F203F
  • textBlockQuote.background#211c2b
  • textBlockQuote.border#32253f
  • textCodeBlock.background#211c2b
  • textLink.activeForeground#2F203F
  • textLink.foreground#2F203F
  • textPreformat.foreground#929086
  • textSeparator.foreground#6e6c63
  • titleBar.activeBackground#d0bcf1
  • titleBar.activeForeground#2e2e2e
  • titleBar.border#69538066
  • titleBar.inactiveBackground#d0bcf1
  • titleBar.inactiveForeground#2e2e2e
  • tree.indentGuidesStroke#8a919959
  • walkThrough.embeddedEditorBackground#765e8f
  • welcomePage.progress.background#2F203F
  • welcomePage.tileBackground#bdaee0
  • widget.shadow#2f203f23

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7b7c7a—
entity#9561d8—
constant#8ea352ee—
keyword, storage.type.class.js#FF9D00—
meta#a7a6aac4—
invalid#d83c39f5—
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#574264—
punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#929599d0—
punctuation.definition.parameters#6e42a7—
punctuation.definition.template-expression#6e42a7—
storage#6e42a7—
storage.type.function.arrow#6e42a7—
string, punctuation.definition.string#cea07a—
string.template, punctuation.definition.string.template#cea07a—
support#9e80c4—
support.function#8b6e36—
support.variable.property.dom#c884e2de—
variable#512e7e—
source.ini entity, meta.embedded.block.ini, source.ini#6e42a7—
source.ini keyword, keyword.other.definition.ini#9e7ad4de—
source.ini punctuation.definition#d6b7ffee—
source.ini punctuation.separator, punctuation.separator.key-value.ini#6f4c9cee—
source.css entity, source.stylus entity#3AD900—
entity.other.attribute-name.class.css#8da549fa—
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#9ad6acfa—
entity.name.tag#6e42a7—
source.css support, entity.name.tag.css, source.stylus support#d6b7ffee—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#cea07a—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#cea07a—
source.css constant#759142ee—
source.css variable, source.stylus variable#9e7ad4de—
text.html.basic entity.name, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#9e7ad4de—
meta.toc-list.id.html#9e7ad4de—
text.html.basic entity.other#9e7ad4de—
meta.tag.metadata.script.html entity.name.tag.html#9e7ad4de—
source.json string, source.json punctuation.definition.string#cea07a—
entity.other.inherited-class#a79a46—
storage.type.extends.js, storage.type.class.jsdoc#9e7ad4de—
punctuation.definition.block.tag.jsdoc#dadada—
variable.other.jsdoc, entity.name.type.instance.jsdoc#6f4480de—
variable.other.constant#8130a1de—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#c884e2de—
meta.jsx.children.js#FFFFFF—
storage.type, storage.type.class, storage.modifier#070011—
keyword.operator#b8903cf3—
keyword.control#82a818f8—
keyword.control.import.js, keyword.control.from.js, meta.import.js, source.js#9b548ff8—
punctuation.definition.bracket.curly#9e7ad4de—
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#c9c9c9—
keyword.operator.assignment#c9c9c9—
meta.jsx.children.tsx#dfdbdb—
meta.object-literal.key.js#85d3a9—
string.quoted.single.ini, source.ini#6a9447—
source.c, source.cpp#a88cdbde—
meta.preprocessor.include.cpp, meta.body.function.definition.cpp, meta.preprocessor.include.c, meta.body.function.definition.c, keyword.control.directive.include.c, keyword.control.c, keyword.control.directive.include.cpp, keyword.control.cpp, keyword.control.return.cpp#8e5c92e8—
entity.name.function.c, meta.function.definition.parameters.c, meta.function.c, entity.name.function.cpp, meta.function.definition.parameters.cpp, meta.function.cpp#638d41—