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#313d63ff
  • activityBar.dropBackground#2b385dff
  • activityBar.foreground#62a2ffff
  • activityBar.inactiveForeground#636c92ff
  • activityBarBadge.background#62a2ffbf
  • activityBarBadge.foreground#f8feffff
  • badge.background#62a2ffbf
  • badge.foreground#f8feffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2b385dff
  • breadcrumb.focusForeground#e9f0ffff
  • breadcrumb.foreground#7d86abff
  • breadcrumbPicker.background#313d63ff
  • button.background#006dd1ff
  • button.foreground#f8feffff
  • button.hoverBackground#307ee5ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#313d63ff
  • debugToolBar.background#2b385dff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#313d63ff
  • dropdown.border#313d63ff
  • dropdown.foreground#e9f0ffff
  • editor.background#2b385dff
  • editor.findMatchBackground#416cb540
  • editor.findMatchHighlightBackground#416cb540
  • editor.findRangeHighlightBackground#416cb540
  • editor.focusedStackFrameHighlightBackground#416cb540
  • editor.foreground#dae0ffff
  • editor.hoverHighlightBackground#416cb540
  • editor.inactiveSelectionBackground#416cb520
  • editor.lineHighlightBackground#313d63ff
  • editor.lineHighlightBorder#313d63ff
  • editor.rangeHighlightBackground#416cb540
  • editor.selectionBackground#416cb540
  • editor.selectionHighlightBackground#416cb520
  • editor.snippetFinalTabstopHighlightBorder#416cb540
  • editor.snippetTabstopHighlightBackground#416cb540
  • editor.stackFrameHighlightBackground#416cb540
  • editor.wordHighlightBackground#416cb520
  • editor.wordHighlightStrongBackground#416cb520
  • editorActiveLineNumber.foreground#7d86abff
  • editorBracketMatch.background#416cb520
  • editorBracketMatch.border#62a2ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffcb00ff
  • editorError.foreground#f20054ff
  • editorGroup.border#313d63ff
  • editorGroup.dropBackground#2b385dff
  • editorGroupHeader.noTabsBackground#2b385dff
  • editorGroupHeader.tabsBackground#313d63ff
  • editorGutter.addedBackground#083200ff
  • editorGutter.background#2b385dff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#810006ff
  • editorGutter.modifiedBackground#002a68ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#313d63ff
  • editorHoverWidget.border#313d63ff
  • editorIndentGuide.activeBackground#424c72ff
  • editorIndentGuide.background#39446aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7d86abff
  • editorLineNumber.foreground#636c92ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f20054ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#265800ff
  • editorOverviewRuler.border#313d63ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#b4002aff
  • editorOverviewRuler.errorForeground#f20054bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#164e93ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2b385dff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#313d63ff
  • editorSuggestWidget.border#313d63ff
  • editorSuggestWidget.foreground#e9f0ffff
  • editorSuggestWidget.highlightForeground#e9f0ffff
  • editorSuggestWidget.selectedBackground#39446aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#313d63ff
  • editorWidget.border#313d63ff
  • errorForeground#f20054ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#416cb5ff
  • foreground#dae0ffff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7d86abff
  • gitDecoration.modifiedResourceForeground#cd9611ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#7eae3bff
  • input.background#2b385dff
  • input.foreground#e9f0ffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#62a2ffff
  • inputValidation.errorBackground#5f0000ff
  • inputValidation.errorBorder#900015ff
  • inputValidation.infoBackground#2b385dff
  • inputValidation.infoBorder#4c567cff
  • inputValidation.warningBackground#340300ff
  • inputValidation.warningBorder#522a00ff
  • list.activeSelectionBackground#39446aff
  • list.activeSelectionForeground#e9f0ffff
  • list.dropBackground#2b385dff
  • list.errorForeground#f20054ff
  • list.focusBackground#39446aff
  • list.highlightForeground#e9f0ffff
  • list.hoverBackground#39446aff
  • list.inactiveFocusBackground#39446aff
  • list.inactiveSelectionBackground#39446aff
  • list.inactiveSelectionForeground#e9f0ffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#313d63ff
  • menu.foreground#bac1e4ff
  • menu.selectionBackground#39446aff
  • menu.selectionForeground#e9f0ffff
  • menu.separatorBackground#4c567cff
  • menubar.selectionBackground#39446aff
  • menubar.selectionForeground#e9f0ffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#313d63ff
  • notificationLink.foreground#62a2ffff
  • notifications.background#313d63ff
  • notifications.border#313d63ff
  • panel.background#313d63ff
  • panel.border#313d63ff
  • panel.dropBackground#2b385dff
  • panelTitle.activeBorder#62a2ffff
  • panelTitle.activeForeground#e9f0ffff
  • panelTitle.inactiveForeground#aab1d5ff
  • peekView.border#313d63ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#313d63ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2b385dff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#313d63ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#132245ff
  • scrollbarSlider.activeBackground#636c92bf
  • scrollbarSlider.background#4c567cbf
  • scrollbarSlider.hoverBackground#576086bf
  • settings.checkboxBackground#2b385dff
  • settings.checkboxBorder#636c92ff
  • settings.checkboxForeground#e9f0ffff
  • settings.dropdownBackground#313d63ff
  • settings.dropdownBorder#313d63ff
  • settings.dropdownForeground#e9f0ffff
  • settings.dropdownListBorder#424c72ff
  • settings.headerForeground#cbeeffff
  • settings.modifiedItemIndicator#416cb5ff
  • settings.numberInputBackground#313d63ff
  • settings.numberInputForeground#e9f0ffff
  • settings.textInputBackground#313d63ff
  • settings.textInputForeground#e9f0ffff
  • sideBar.background#313d63ff
  • sideBar.dropBackground#2b385dff
  • sideBar.foreground#aab1d5ff
  • sideBarSectionHeader.background#313d63ff
  • sideBarSectionHeader.foreground#636c92ff
  • sideBarTitle.foreground#636c92ff
  • statusBar.background#39446aff
  • statusBar.debuggingBackground#9c0100ff
  • statusBar.debuggingForeground#aab1d5ff
  • statusBar.foreground#aab1d5ff
  • statusBar.noFolderBackground#550b76ff
  • statusBar.noFolderForeground#aab1d5ff
  • tab.activeBackground#313d63ff
  • tab.activeBorder#62a2ffff
  • tab.activeForeground#e9f0ffff
  • tab.activeModifiedBorder#62a2ffbf
  • tab.border#313d63ff
  • tab.inactiveBackground#313d63ff
  • tab.inactiveForeground#aab1d5ff
  • tab.inactiveModifiedBorder#62a2ffbf
  • tab.unfocusedActiveForeground#e9f0ffff
  • tab.unfocusedActiveModifiedBorder#62a2ff80
  • tab.unfocusedInactiveForeground#aab1d5ff
  • tab.unfocusedInactiveModifiedBorder#62a2ff80
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#6daaffff
  • terminal.ansiBrightBlack#5e6dabff
  • terminal.ansiBrightBlue#6daaffff
  • terminal.ansiBrightCyan#54e2ffff
  • terminal.ansiBrightGreen#baeb75ff
  • terminal.ansiBrightMagenta#dc98ffff
  • terminal.ansiBrightRed#ff386aff
  • terminal.ansiBrightWhite#f5ffffff
  • terminal.ansiBrightYellow#ffc94eff
  • terminal.ansiCyan#54e2ffff
  • terminal.ansiGreen#baeb75ff
  • terminal.ansiMagenta#dc98ffff
  • terminal.ansiRed#ff386aff
  • terminal.ansiWhite#f5ffffff
  • terminal.ansiYellow#ffc94eff
  • terminal.background#2b385dff
  • terminal.border#313d63ff
  • terminal.foreground#dae0ffff
  • terminal.selectionBackground#416cb540
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#313d63ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#62a2ffff
  • textLink.foreground#62a2ffff
  • textPreformat.foreground#dc98ffff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#313d63ff
  • titleBar.activeForeground#aab1d5ff
  • titleBar.inactiveBackground#313d63ff
  • titleBar.inactiveForeground#636c92ff
  • widget.shadow#1f2d51ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#9fabe5ff
emphasisitalic
strongbold
header#000080
comment#5e6dabff
constant.language#ff825dff
constant.numeric#ff825dff
constant.regexp#dc98ffff
entity.name.tag#ff6170ff
entity.name.tag.css#ffc94eff
entity.other.attribute-name#ce8bfcff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#ce8bfcff
invalid#f44747
markup.underlineunderline
markup.bold#ce8bfcffbold
markup.heading#ce8bfcffbold
markup.italicitalic
markup.inserted#ff825dff
markup.deleted#baeb75ff
markup.changed#ce8bfcff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#baeb75ff
punctuation.definition.tag#54e2ffff
meta.preprocessor#ce8bfcff
meta.preprocessor.string#baeb75ff
meta.preprocessor.numeric#ff825dff
meta.structure.dictionary.key.python#dae0ffff
meta.diff.header#ce8bfcff
storage#ce8bfcff
storage.type#ce8bfcff
storage.modifier#ce8bfcff
string#baeb75ff
string.tag#baeb75ff
string.value#baeb75ff
string.regexp#baeb75ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#bac1e4ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9fabe5ff
keyword#ce8bfcff
keyword.control#ce8bfcff
keyword.operator#bac1e4ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ce8bfcff
keyword.other.unit#ff825dff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ce8bfcff
support.function.git-rebase#6daaffff
constant.sha.git-rebase#ff825dff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ce8bfcff
entity.name.function, support.function, support.constant.handlebars#6daaffff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#a4c7ffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a4c7ffff
keyword.control#ce8bfcff
variable, meta.definition.variable.name, support.variable, entity.name.variable#9fabe5ff
meta.object-literal.key#dae0ffff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#baeb75ff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#54e2ffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#dc98ffff
keyword.operator.or.regexp, keyword.control.anchor.regexp#bac1e4ff
keyword.operator.quantifier.regexp#ff825dff
constant.character#ce8bfcff
constant.character.escape#54e2ffff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#baeb75ff
string.template#baeb75ff
storage.type.function#ce8bfcff
support.class.component.js#ff6170ff
variable.parameter#ff386aff
variable.other.property#dae0ffff
support.function, support.constant.handlebars#6daaffff
support.type, support.class, support.constant.math#ffc94eff
support.type.vendored.property-name, support.type.property-name#dae0ffff
support.function#6daaffff
variable.other.constant#ff6170ff
meta.brace.round.js, meta.brace.square.js, punctuation#54e2ffff
support.type.property-name.json#dae0ffff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#bac1e4ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ce8bfcff
entity.name.type.class, entity.name.type.module#a4c7ffff
punctuation.definition.comment.python, punctuation.definition.comment.js, punctuation.definition.comment.cpp, punctuation.definition.comment.begin.css, punctuation.definition.comment.end.css, punctuation.definition.list.begin.markdown#5e6dabff
markup.headingnormal

Shiki preview

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

Loading...