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#313743ff
  • activityBar.dropBackground#2b313eff
  • activityBar.foreground#ce9fe1ff
  • activityBar.inactiveForeground#646770ff
  • activityBarBadge.background#ce9fe1bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#ce9fe1bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2b313eff
  • breadcrumb.focusForeground#f0f0f0ff
  • breadcrumb.foreground#7f8288ff
  • breadcrumbPicker.background#313743ff
  • button.background#9e71b0ff
  • button.foreground#ffffffff
  • button.hoverBackground#ad80c0ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#313743ff
  • debugToolBar.background#2b313eff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#313743ff
  • dropdown.border#313743ff
  • dropdown.foreground#f0f0f0ff
  • editor.background#2b313eff
  • editor.findMatchBackground#6883b540
  • editor.findMatchHighlightBackground#6883b540
  • editor.findRangeHighlightBackground#6883b540
  • editor.focusedStackFrameHighlightBackground#6883b540
  • editor.foreground#e0e0e0ff
  • editor.hoverHighlightBackground#6883b540
  • editor.inactiveSelectionBackground#6883b520
  • editor.lineHighlightBackground#313743ff
  • editor.lineHighlightBorder#313743ff
  • editor.rangeHighlightBackground#6883b540
  • editor.selectionBackground#6883b540
  • editor.selectionHighlightBackground#6883b520
  • editor.snippetFinalTabstopHighlightBorder#6883b540
  • editor.snippetTabstopHighlightBackground#6883b540
  • editor.stackFrameHighlightBackground#6883b540
  • editor.wordHighlightBackground#6883b520
  • editor.wordHighlightStrongBackground#6883b520
  • editorActiveLineNumber.foreground#7f8288ff
  • editorBracketMatch.background#6883b520
  • editorBracketMatch.border#96b1e5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#aeafb1ff
  • editorError.foreground#cd7779ff
  • editorGroup.border#313743ff
  • editorGroup.dropBackground#2b313eff
  • editorGroupHeader.noTabsBackground#2b313eff
  • editorGroupHeader.tabsBackground#313743ff
  • editorGutter.addedBackground#00532eff
  • editorGutter.background#2b313eff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#792b32ff
  • editorGutter.modifiedBackground#294874ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#313743ff
  • editorHoverWidget.border#313743ff
  • editorIndentGuide.activeBackground#424752ff
  • editorIndentGuide.background#393e4aff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7f8288ff
  • editorLineNumber.foreground#646770ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cd7779ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#1a754dff
  • editorOverviewRuler.border#313743ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9f4d51ff
  • editorOverviewRuler.errorForeground#cd7779bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#4d6898ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#2b313eff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#313743ff
  • editorSuggestWidget.border#313743ff
  • editorSuggestWidget.foreground#f0f0f0ff
  • editorSuggestWidget.highlightForeground#f0f0f0ff
  • editorSuggestWidget.selectedBackground#393e4aff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#313743ff
  • editorWidget.border#313743ff
  • errorForeground#cd7779ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6883b5ff
  • foreground#e0e0e0ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7f8288ff
  • gitDecoration.modifiedResourceForeground#d7a570ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6bc093ff
  • input.background#2b313eff
  • input.foreground#f0f0f0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#ce9fe1ff
  • inputValidation.errorBackground#5f121eff
  • inputValidation.errorBorder#84363bff
  • inputValidation.infoBackground#2b313eff
  • inputValidation.infoBorder#4c505bff
  • inputValidation.warningBackground#4b2800ff
  • inputValidation.warningBorder#6f4716ff
  • list.activeSelectionBackground#393e4aff
  • list.activeSelectionForeground#f0f0f0ff
  • list.dropBackground#2b313eff
  • list.errorForeground#cd7779ff
  • list.focusBackground#393e4aff
  • list.highlightForeground#f0f0f0ff
  • list.hoverBackground#393e4aff
  • list.inactiveFocusBackground#393e4aff
  • list.inactiveSelectionBackground#393e4aff
  • list.inactiveSelectionForeground#f0f0f0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#313743ff
  • menu.foreground#bfbfc0ff
  • menu.selectionBackground#393e4aff
  • menu.selectionForeground#f0f0f0ff
  • menu.separatorBackground#4c505bff
  • menubar.selectionBackground#393e4aff
  • menubar.selectionForeground#f0f0f0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#313743ff
  • notificationLink.foreground#ce9fe1ff
  • notifications.background#313743ff
  • notifications.border#313743ff
  • panel.background#313743ff
  • panel.border#313743ff
  • panel.dropBackground#2b313eff
  • panelTitle.activeBorder#ce9fe1ff
  • panelTitle.activeForeground#f0f0f0ff
  • panelTitle.inactiveForeground#aeafb1ff
  • peekView.border#313743ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#313743ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2b313eff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#313743ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#161c28ff
  • scrollbarSlider.activeBackground#646770bf
  • scrollbarSlider.background#4c505bbf
  • scrollbarSlider.hoverBackground#575b65bf
  • settings.checkboxBackground#2b313eff
  • settings.checkboxBorder#646770ff
  • settings.checkboxForeground#f0f0f0ff
  • settings.dropdownBackground#313743ff
  • settings.dropdownBorder#313743ff
  • settings.dropdownForeground#f0f0f0ff
  • settings.dropdownListBorder#424752ff
  • settings.headerForeground#d7f1ffff
  • settings.modifiedItemIndicator#6883b5ff
  • settings.numberInputBackground#313743ff
  • settings.numberInputForeground#f0f0f0ff
  • settings.textInputBackground#313743ff
  • settings.textInputForeground#f0f0f0ff
  • sideBar.background#313743ff
  • sideBar.dropBackground#2b313eff
  • sideBar.foreground#aeafb1ff
  • sideBarSectionHeader.background#313743ff
  • sideBarSectionHeader.foreground#646770ff
  • sideBarTitle.foreground#646770ff
  • statusBar.background#393e4aff
  • statusBar.debuggingBackground#8e5b1dff
  • statusBar.debuggingForeground#aeafb1ff
  • statusBar.foreground#aeafb1ff
  • statusBar.noFolderBackground#6e3b85ff
  • statusBar.noFolderForeground#aeafb1ff
  • tab.activeBackground#313743ff
  • tab.activeBorder#ce9fe1ff
  • tab.activeForeground#f0f0f0ff
  • tab.activeModifiedBorder#ce9fe1bf
  • tab.border#313743ff
  • tab.inactiveBackground#313743ff
  • tab.inactiveForeground#aeafb1ff
  • tab.inactiveModifiedBorder#ce9fe1bf
  • tab.unfocusedActiveForeground#f0f0f0ff
  • tab.unfocusedActiveModifiedBorder#ce9fe180
  • tab.unfocusedInactiveForeground#aeafb1ff
  • tab.unfocusedInactiveModifiedBorder#ce9fe180
  • terminal.ansiBlack#2b313eff
  • terminal.ansiBlue#a6c1f6ff
  • terminal.ansiBrightBlack#646770ff
  • terminal.ansiBrightBlue#a6c1f6ff
  • terminal.ansiBrightCyan#5bcff0ff
  • terminal.ansiBrightGreen#7bd1a3ff
  • terminal.ansiBrightMagenta#d8b3e7ff
  • terminal.ansiBrightRed#ffa6a7ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e8b57fff
  • terminal.ansiCyan#5bcff0ff
  • terminal.ansiGreen#1a754dff
  • terminal.ansiMagenta#d8b3e7ff
  • terminal.ansiRed#9f4d51ff
  • terminal.ansiWhite#e0e0e0ff
  • terminal.ansiYellow#e8b57fff
  • terminal.background#2b313eff
  • terminal.border#313743ff
  • terminal.foreground#e0e0e0ff
  • terminal.selectionBackground#6883b540
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#313743ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#ce9fe1ff
  • textLink.foreground#ce9fe1ff
  • textPreformat.foreground#d8b3e7ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#313743ff
  • titleBar.activeForeground#aeafb1ff
  • titleBar.inactiveBackground#313743ff
  • titleBar.inactiveForeground#646770ff
  • widget.shadow#212733ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...