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#1B1B1D
  • activityBar.border#3C3C3D
  • activityBar.dropBackground#204E8A
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#B1B1B3
  • activityBarBadge.background#0A84FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6B89FF
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#75BFFF
  • breadcrumb.background#2A2A2E
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#B1B1B3
  • breadcrumbPicker.background#4A4A4F
  • button.background#252526
  • button.foreground#B1B1B3
  • button.hoverBackground#353B48
  • contrastBorder#3C3C3D
  • debugExceptionWidget.background#402325
  • debugExceptionWidget.border#3C3C3D
  • debugToolBar.background#0C0C0D
  • descriptionForeground#FFFFFF
  • diffEditor.insertedTextBackground#86DE7422
  • diffEditor.removedTextBackground#402325AA
  • dropdown.background#4A4A4F
  • dropdown.border#3C3C3D
  • dropdown.foreground#F9F9FA
  • dropdown.listBackground#5C5C61
  • editor.background#2A2A2E
  • editor.findMatchBackground#204E8A
  • editor.findMatchBorder#696D71
  • editor.findMatchHighlightBackground#42381F
  • editor.findMatchHighlightBorder#696D71
  • editor.findRangeHighlightBackground#252526
  • editor.findRangeHighlightBorder#696D71
  • editor.foreground#B1B1B3
  • editor.hoverHighlightBackground#353B48
  • editor.inactiveSelectionBackground#353B48
  • editor.lineHighlightBorder#40444D
  • editor.rangeHighlightBorder#3C3C3D
  • editor.selectionBackground#204E8A
  • editor.selectionForeground#B1B1B3
  • editor.selectionHighlightBackground#353B48
  • editor.selectionHighlightBorder#696D71
  • editor.wordHighlightBackground#204E8A55
  • editor.wordHighlightBorder#696D71
  • editor.wordHighlightStrongBackground#204E8A55
  • editor.wordHighlightStrongBorder#696D71
  • editorBracketMatch.background#40444D
  • editorBracketMatch.border#70737A
  • editorCodeLens.foreground#515151
  • editorCursor.foreground#B1B1B3
  • editorError.foreground#CC3D3D
  • editorGroup.background#0C0C0D
  • editorGroup.border#0C0C0D
  • editorGroup.dropBackground#204E8A55
  • editorGroup.emptyBackground#2A2A2E
  • editorGroup.focusedEmptyBorder#696D71
  • editorGroupHeader.noTabsBackground#2A2A2E
  • editorGroupHeader.tabsBackground#0C0C0D
  • editorGroupHeader.tabsBorder#0C0C0D
  • editorGutter.addedBackground#0A84FF
  • editorGutter.background#2A2A2E
  • editorGutter.deletedBackground#CC3D3D
  • editorGutter.modifiedBackground#D99F2B
  • editorHint.foreground#86DE74
  • editorHoverWidget.background#353B48
  • editorHoverWidget.border#696D71
  • editorIndentGuide.activeBackground#B1B1B3
  • editorIndentGuide.background#40444D
  • editorInfo.foreground#0A84FF
  • editorLightBulb.foreground#D99F2B
  • editorLightBulbAutoFix.foreground#D99F2B
  • editorLineNumber.activeForeground#B1B1B3
  • editorLineNumber.foreground#B1B1B3
  • editorLink.activeForeground#75BFFF
  • editorMarkerNavigation.background#0C0C0D
  • editorMarkerNavigationError.background#4B3137
  • editorMarkerNavigationInfo.background#204E8A
  • editorMarkerNavigationWarning.background#42381F
  • editorOverviewRuler.addedForeground#0A84FF
  • editorOverviewRuler.border#3C3C3D
  • editorOverviewRuler.bracketMatchForeground#00BB00
  • editorOverviewRuler.commonContentForeground#00000000
  • editorOverviewRuler.currentContentForeground#86DE74
  • editorOverviewRuler.deletedForeground#CC3D3D
  • editorOverviewRuler.errorForeground#CC3D3D
  • editorOverviewRuler.findMatchForeground#6B89FF
  • editorOverviewRuler.incomingContentForeground#6B89FF
  • editorOverviewRuler.infoForeground#0A84FF
  • editorOverviewRuler.modifiedForeground#86DE74
  • editorOverviewRuler.rangeHighlightForeground#6B89FF
  • editorOverviewRuler.selectionHighlightForeground#0A84FF
  • editorOverviewRuler.warningForeground#D99F2B
  • editorOverviewRuler.wordHighlightForeground#6B89FF
  • editorOverviewRuler.wordHighlightStrongForeground#0A84FF
  • editorRuler.foreground#40444D
  • editorSuggestWidget.background#0F171F
  • editorSuggestWidget.border#27272B
  • editorSuggestWidget.foreground#B1B1B3
  • editorSuggestWidget.highlightForeground#FFFFFF
  • editorSuggestWidget.selectedBackground#204E8A
  • editorWarning.foreground#D99F2B
  • editorWhitespace.foreground#40444D
  • editorWidget.background#0C0C0D
  • editorWidget.border#696D71
  • editorWidget.resizeBorder#0A84FF
  • errorForeground#CC3D3D
  • extensionButton.prominentBackground#252526
  • extensionButton.prominentForeground#B1B1B3
  • extensionButton.prominentHoverBackground#353B48
  • focusBorder#0A84FF
  • foreground#B1B1B3
  • gitDecoration.addedResourceForeground#0A84FF
  • gitDecoration.conflictingResourceForeground#6657A6
  • gitDecoration.deletedResourceForeground#CC3D3D
  • gitDecoration.ignoredResourceForeground#939393
  • gitDecoration.modifiedResourceForeground#86DE74
  • gitDecoration.untrackedResourceForeground#D99F2B
  • input.background#141416
  • input.border#3C3C3D
  • input.foreground#FFFFFF
  • input.placeholderForeground#B1B1B3
  • inputOption.activeBorder#0A84FF
  • inputValidation.errorBackground#4B3137
  • inputValidation.errorBorder#4B3137
  • inputValidation.errorForeground#FF9494
  • inputValidation.infoBackground#204E8A
  • inputValidation.infoBorder#204E8A
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#42381F
  • inputValidation.warningBorder#42381F
  • inputValidation.warningForeground#FCE2A1
  • list.activeSelectionBackground#204E8A
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#353B48
  • list.errorForeground#CC3D3D
  • list.focusBackground#204E8A
  • list.focusForeground#FFFFFF
  • list.highlightForeground#6B89FF
  • list.hoverBackground#353B48
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#353B48
  • list.inactiveFocusForeground#B1B1B3
  • list.inactiveSelectionBackground#353B48
  • list.inactiveSelectionForeground#B1B1B3
  • list.invalidItemForeground#CC3D3D
  • list.warningForeground#BDCA00
  • merge.border#696D71
  • merge.commonContentBackground#2A2A2E
  • merge.commonHeaderBackground#0C0C0D
  • merge.currentContentBackground#86DE7444
  • merge.currentHeaderBackground#31512B
  • merge.incomingContentBackground#6B89FF44
  • merge.incomingHeaderBackground#204E8A
  • notificationCenter.border#696D71
  • notificationCenterHeader.background#0C0C0D
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#1b1b1d
  • notifications.border#696D71
  • notifications.foreground#B1B1B3
  • notificationToast.border#696D71
  • panel.background#1B1B1D
  • panel.border#3C3C3D
  • panel.dropBackground#2A2A2E
  • panelTitle.activeBorder#0A84FF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#B1B1B3
  • peekView.border#696D71
  • peekViewEditor.background#252526
  • peekViewEditorGutter.background#252526
  • peekViewResult.background#1B1B1D
  • peekViewResult.fileForeground#B1B1B3
  • peekViewResult.lineForeground#B1B1B3
  • peekViewResult.matchHighlightBackground#73764A
  • peekViewResult.selectionBackground#204E8A
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#4A4A4F
  • peekViewTitleDescription.foreground#B1B1B3
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#696D71
  • pickerGroup.foreground#B1B1B3
  • progressBar.background#0A84FF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#737373
  • scrollbarSlider.background#73737355
  • scrollbarSlider.hoverBackground#737373
  • selection.background#204E8A
  • sideBar.background#1B1B1D
  • sideBar.border#696D71
  • sideBar.dropBackground#204E8A
  • sideBar.foreground#B1B1B3
  • sideBarSectionHeader.background#222225
  • sideBarSectionHeader.border#3C3C3D
  • sideBarSectionHeader.foreground#B1B1B3
  • sideBarTitle.foreground#B1B1B3
  • statusBar.background#0C0C0D
  • statusBar.border#3C3C3D
  • statusBar.debuggingBackground#6657A6
  • statusBar.debuggingBorder#3C3C3D
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#B1B1B3
  • statusBar.noFolderBackground#0C0C0D
  • statusBar.noFolderBorder#3C3C3D
  • statusBar.noFolderForeground#B1B1B3
  • statusBarItem.activeBackground#204E8A
  • statusBarItem.hoverBackground#353B48
  • statusBarItem.prominentBackground#252526
  • statusBarItem.prominentHoverBackground#353B48
  • tab.activeBackground#0C0C0D
  • tab.activeBorder#0A84FF
  • tab.activeForeground#FFFFFF
  • tab.border#0C0C0D
  • tab.hoverBackground#252526
  • tab.hoverBorder#515151
  • tab.inactiveBackground#0C0C0D
  • tab.inactiveForeground#B1B1B3
  • tab.unfocusedActiveBorder#0A84FF
  • tab.unfocusedActiveForeground#FFFFFF
  • tab.unfocusedHoverBackground#252526
  • tab.unfocusedHoverBorder#515151
  • tab.unfocusedInactiveForeground#FFFFFF
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#009DDC
  • terminal.ansiBrightBlack#737171
  • terminal.ansiBrightBlue#009DDC
  • terminal.ansiBrightCyan#85CEBC
  • terminal.ansiBrightGreen#00853E
  • terminal.ansiBrightMagenta#98005D
  • terminal.ansiBrightRed#EE2E24
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD204
  • terminal.ansiCyan#85CEBC
  • terminal.ansiGreen#00853E
  • terminal.ansiMagenta#98005D
  • terminal.ansiRed#EE2E24
  • terminal.ansiWhite#D9D8D8
  • terminal.ansiYellow#FFD204
  • terminal.background#000000
  • terminal.foreground#e0e0e0
  • terminal.selectionBackground#204E8A66
  • terminalCursor.background#E0E0E0
  • terminalCursor.foreground#1be91b
  • textBlockQuote.background#353B48
  • textBlockQuote.border#0A84FF
  • textCodeBlock.background#353B48
  • textLink.activeForeground#75BFFF
  • textLink.foreground#75BFFF
  • textPreformat.foreground#D7BA7D
  • textSeparator.foreground#3C3C3D
  • titleBar.activeBackground#1B1B1D
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#3C3C3D
  • titleBar.inactiveBackground#0C0C0D
  • titleBar.inactiveForeground#B1B1B3
  • walkThrough.embeddedEditorBackground#2A2A2E
  • welcomePage.buttonBackground#252526
  • welcomePage.buttonHoverBackground#353B48
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#B1B1B3
comment, punctuation.definition.comment#939393
string#6B89FF
constant.character.escape.backslash.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, string.regexp#6B89FF
constant.numeric#6B89FF
meta.definition.variable.name, support.variable, variable, variable.language#75BFFF
keyword#FF7DE9
storage#FF7DE9
entity.name.class, entity.name.type#B98EFF
meta.function-call#B98EFF
meta.definition.function#75BFFF
punctuation.section.embedded.begin, punctuation.section.embedded.end#E9F4FE
constant.language#E9F4FE
constant.character, constant.other#FFFFB4
entity.other.inherited-class#B98EFF
variable.parameter#75BFFF
storage.type#FF7DE9
support.function#B98EFF
support.constant#6B89FF
support.type, support.class#B98EFF
entity.name.function, support.variable.property.dom, variable.other.property#86DE74
meta.object-literal.key#86DE74
meta.brace.round, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.comma, punctuation.separator.key-value, punctuation.terminator.statement#D7D7DB
storage.type.function.arrow.js#B98EFF
variable.language.this#FF7DE9
entity.name.type.class#75BFFF
keyword.operator.assignment#B1B1B3
entity.name.tag#75BFFF
meta.tag.metadata.doctype.html, meta.tag.sgml.doctype.html#909090
punctuation.definition.tag#767578
meta.tag.structure.any.html
entity.other.attribute.name, entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.js#FF7DE9
comment.block.html#86DE74AA
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#909090
meta.selector.css, entity.name.tag.css, keyword.control.at-rule.media.css
meta.function.url.css, meta.property-value.css, support.constant.property-value.css, support.function.url.css, support.function.misc.css, keyword.other.unit.px.css, keyword.other.unit.pt.css, keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.ch.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.s.css, keyword.other.unit.deg.css, keyword.other.unit.scss, keyword.other.unit.dppx.css, support.constant.media.css, constant.numeric.css, string.quoted.single.css, string.quoted.double.css#6B89FF
constant.other.color.rgb-value.hex.css, variable.parameter.url.css, support.function.transform.css, support.function.calc.css, entity.other.attribute-name.pseudo-class.css, meta.function.gradient.css, support.function.gradient.css, variable.parameter.url.scss, entity.name.tag.scss"#E9F4FE
punctuation.terminator.rule.css, punctuation.separator.key-value.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.separator.list.comma.css, keyword.operator.pattern.css
support.type.property-name.css, support.type.property-name.media.css, support.type.vendored.property-name.media.css#86DE74
support.type.vendored.property-name.css, entity.other.attribute-name.pseudo-element.css#939393
keyword.operator.combinator.css#D7D7DB
support.type.property-name.css#86DE74
support.type.property-name.json#75BFFF
string.quoted.double.json#FF7DE9
constant.numeric.json, constant.language.json#86DE74
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#75BFFF
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#B1B1B3
variable.other.object#B98EFF
variable.other.constant.property#86DE74
constant.language.null, constant.language.undefined#909090
constant.language.boolean.true#75BFFF
constant.language.boolean.false#FF9494
meta.attribute.name, string.quoted.double.html, string.quoted.double.xml#B98EFF
markup.heading#86DE74bold
markup.underline#75BFFFunderline
markup.boldbold
markup.italicitalic
markup.inserted#86DE74
markup.deleted#CC3D3D
markup.changed#0A84FF
punctuation.definition.quote.begin.markdown#FF7DE9
punctuation.definition.list.begin.markdown#75BFFF
markup.inline.raw#B98EFF
meta.paragraph.markdown#B1B1B3
punctuation.definition.list.begin.markdown#B1B1B3
string.other.link.title.markdown, string.other.link.description.markdown#E9F4FE
markup.underline.link.markdown, markup.underline.link.image.markdown#75BFFFitalic
source.env, constant.numeric.env#B1B1B3

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...