Skip to main content
CodingTheme

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#2b303dff
  • activityBar.dropBackground#252b37ff
  • activityBar.foreground#cb9cddff
  • activityBar.inactiveForeground#5e626aff
  • activityBarBadge.background#cb9cddbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#cb9cddbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#252b37ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#7b7d83ff
  • breadcrumbPicker.background#2b303dff
  • button.background#996dacff
  • button.foreground#ffffffff
  • button.hoverBackground#a97cbbff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2b303dff
  • debugToolBar.background#252b37ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2b303dff
  • dropdown.border#2b303dff
  • dropdown.foreground#efefefff
  • editor.background#252b37ff
  • editor.findMatchBackground#637fb040
  • editor.findMatchHighlightBackground#637fb040
  • editor.findRangeHighlightBackground#637fb040
  • editor.focusedStackFrameHighlightBackground#637fb040
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#637fb040
  • editor.inactiveSelectionBackground#637fb020
  • editor.lineHighlightBackground#2b303dff
  • editor.lineHighlightBorder#2b303dff
  • editor.rangeHighlightBackground#637fb040
  • editor.selectionBackground#637fb040
  • editor.selectionHighlightBackground#637fb020
  • editor.snippetFinalTabstopHighlightBorder#637fb040
  • editor.snippetTabstopHighlightBackground#637fb040
  • editor.stackFrameHighlightBackground#637fb040
  • editor.wordHighlightBackground#637fb020
  • editor.wordHighlightStrongBackground#637fb020
  • editorActiveLineNumber.foreground#7b7d83ff
  • editorBracketMatch.background#637fb020
  • editorBracketMatch.border#93aee2ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#abacaeff
  • editorError.foreground#c97375ff
  • editorGroup.border#2b303dff
  • editorGroup.dropBackground#252b37ff
  • editorGroupHeader.noTabsBackground#252b37ff
  • editorGroupHeader.tabsBackground#2b303dff
  • editorGutter.addedBackground#004c28ff
  • editorGutter.background#252b37ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#71242cff
  • editorGutter.modifiedBackground#21426dff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2b303dff
  • editorHoverWidget.border#2b303dff
  • editorIndentGuide.activeBackground#3b404cff
  • editorIndentGuide.background#323843ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7b7d83ff
  • editorLineNumber.foreground#5e626aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c97375ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#117048ff
  • editorOverviewRuler.border#2b303dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#99484cff
  • editorOverviewRuler.errorForeground#c97375bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#476392ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#252b37ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2b303dff
  • editorSuggestWidget.border#2b303dff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#323843ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2b303dff
  • editorWidget.border#2b303dff
  • errorForeground#c97375ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#637fb0ff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7b7d83ff
  • gitDecoration.modifiedResourceForeground#d4a26dff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#68bd90ff
  • input.background#252b37ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#cb9cddff
  • inputValidation.errorBackground#570918ff
  • inputValidation.errorBorder#7d2f36ff
  • inputValidation.infoBackground#252b37ff
  • inputValidation.infoBorder#464a55ff
  • inputValidation.warningBackground#442100ff
  • inputValidation.warningBorder#684110ff
  • list.activeSelectionBackground#323843ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#252b37ff
  • list.errorForeground#c97375ff
  • list.focusBackground#323843ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#323843ff
  • list.inactiveFocusBackground#323843ff
  • list.inactiveSelectionBackground#323843ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2b303dff
  • menu.foreground#bdbdbdff
  • menu.selectionBackground#323843ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#464a55ff
  • menubar.selectionBackground#323843ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2b303dff
  • notificationLink.foreground#cb9cddff
  • notifications.background#2b303dff
  • notifications.border#2b303dff
  • panel.background#2b303dff
  • panel.border#2b303dff
  • panel.dropBackground#252b37ff
  • panelTitle.activeBorder#cb9cddff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#abacaeff
  • peekView.border#2b303dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2b303dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#252b37ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2b303dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#101622ff
  • scrollbarSlider.activeBackground#5e626abf
  • scrollbarSlider.background#464a55bf
  • scrollbarSlider.hoverBackground#51555fbf
  • settings.checkboxBackground#252b37ff
  • settings.checkboxBorder#5e626aff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#2b303dff
  • settings.dropdownBorder#2b303dff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#3b404cff
  • settings.headerForeground#d7f1ffff
  • settings.modifiedItemIndicator#637fb0ff
  • settings.numberInputBackground#2b303dff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#2b303dff
  • settings.textInputForeground#efefefff
  • sideBar.background#2b303dff
  • sideBar.dropBackground#252b37ff
  • sideBar.foreground#abacaeff
  • sideBarSectionHeader.background#2b303dff
  • sideBarSectionHeader.foreground#5e626aff
  • sideBarTitle.foreground#5e626aff
  • statusBar.background#323843ff
  • statusBar.debuggingBackground#885617ff
  • statusBar.debuggingForeground#abacaeff
  • statusBar.foreground#abacaeff
  • statusBar.noFolderBackground#67357eff
  • statusBar.noFolderForeground#abacaeff
  • tab.activeBackground#2b303dff
  • tab.activeBorder#cb9cddff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#cb9cddbf
  • tab.border#2b303dff
  • tab.inactiveBackground#2b303dff
  • tab.inactiveForeground#abacaeff
  • tab.inactiveModifiedBorder#cb9cddbf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#cb9cdd80
  • tab.unfocusedInactiveForeground#abacaeff
  • tab.unfocusedInactiveModifiedBorder#cb9cdd80
  • terminal.ansiBlack#252b37ff
  • terminal.ansiBlue#a4bef3ff
  • terminal.ansiBrightBlack#5e626aff
  • terminal.ansiBrightBlue#a4bef3ff
  • terminal.ansiBrightCyan#59ccedff
  • terminal.ansiBrightGreen#79cea0ff
  • terminal.ansiBrightMagenta#d6b0e4ff
  • terminal.ansiBrightRed#ffa3a4ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e6b27dff
  • terminal.ansiCyan#59ccedff
  • terminal.ansiGreen#117048ff
  • terminal.ansiMagenta#d6b0e4ff
  • terminal.ansiRed#99484cff
  • terminal.ansiWhite#dfdfdfff
  • terminal.ansiYellow#e6b27dff
  • terminal.background#252b37ff
  • terminal.border#2b303dff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#637fb040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2b303dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#cb9cddff
  • textLink.foreground#cb9cddff
  • textPreformat.foreground#d6b0e4ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2b303dff
  • titleBar.activeForeground#abacaeff
  • titleBar.inactiveBackground#2b303dff
  • titleBar.inactiveForeground#5e626aff
  • widget.shadow#1a202cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dfdfdfff
emphasisitalic
strongbold
header#000080
comment#dfdfdfff
constant.language#e7c1f6ff
constant.numeric#9af1c1ff
constant.regexp#f9d2ffff
entity.name.tag#e7c1f6ff
entity.name.tag.css#f9d2ffff
entity.other.attribute-name#b5cfffff
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#b5cfffff
invalid#f44747
markup.underlineunderline
markup.bold#e7c1f6ffbold
markup.heading#e7c1f6ffbold
markup.italicitalic
markup.inserted#9af1c1ff
markup.deleted#ffd49dff
markup.changed#e7c1f6ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#ffd49dff
punctuation.definition.tag#9a9c9fff
meta.preprocessor#e7c1f6ff
meta.preprocessor.string#ffd49dff
meta.preprocessor.numeric#9af1c1ff
meta.structure.dictionary.key.python#dfdfdfff
meta.diff.header#e7c1f6ff
storage#e7c1f6ff
storage.type#e7c1f6ff
storage.modifier#e7c1f6ff
string#ffd49dff
string.tag#ffd49dff
string.value#ffd49dff
string.regexp#ffd49dff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#bdbdbdff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#dfdfdfff
keyword#e7c1f6ff
keyword.control#e7c1f6ff
keyword.operator#bdbdbdff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#e7c1f6ff
keyword.other.unit#9af1c1ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#e7c1f6ff
support.function.git-rebase#b5cfffff
constant.sha.git-rebase#9af1c1ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#e7c1f6ff
entity.name.function, support.function, support.constant.handlebars#b5cfffff
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#b5cfffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#b5cfffff
keyword.control#e7c1f6ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dfdfdfff
meta.object-literal.key#dfdfdfff
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#ffd49dff
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#9a9c9fff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#f9d2ffff
keyword.operator.or.regexp, keyword.control.anchor.regexp#bdbdbdff
keyword.operator.quantifier.regexp#9af1c1ff
constant.character#e7c1f6ff
constant.character.escape#9a9c9fff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#ffd49dff
string.template#ffd49dff
storage.type.function#e7c1f6ff
support.class.component.js#e7c1f6ff
variable.parameter#dfdfdfff
variable.other.property#dfdfdfff
support.function, support.constant.handlebars#b5cfffff
support.type, support.class, support.constant.math#e7c1f6ff
support.type.vendored.property-name, support.type.property-name#dfdfdfff
support.function#b5cfffff
variable.other.constant#dfdfdfff
meta.brace.round.js, meta.brace.square.js, punctuation#9a9c9fff
support.type.property-name.json#dfdfdfff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#bdbdbdff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#e7c1f6ff
entity.name.type.class, entity.name.type.module#b5cfffff
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#dfdfdfff
markup.headingnormal

Shiki preview

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

Loading...