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#253146ff
  • activityBar.dropBackground#1f2b41ff
  • activityBar.foreground#cf98e6ff
  • activityBar.inactiveForeground#596275ff
  • activityBarBadge.background#cf98e6bf
  • activityBarBadge.foreground#fdffffff
  • badge.background#cf98e6bf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1f2b41ff
  • breadcrumb.focusForeground#eceff7ff
  • breadcrumb.foreground#767d8fff
  • breadcrumbPicker.background#253146ff
  • button.background#9d69b4ff
  • button.foreground#fdffffff
  • button.hoverBackground#ad78c4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#253146ff
  • debugToolBar.background#1f2b41ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#253146ff
  • dropdown.border#253146ff
  • dropdown.foreground#eceff7ff
  • editor.background#1f2b41ff
  • editor.findMatchBackground#5a7fbb40
  • editor.findMatchHighlightBackground#5a7fbb40
  • editor.findRangeHighlightBackground#5a7fbb40
  • editor.focusedStackFrameHighlightBackground#5a7fbb40
  • editor.foreground#dbdfe8ff
  • editor.hoverHighlightBackground#5a7fbb40
  • editor.inactiveSelectionBackground#5a7fbb20
  • editor.lineHighlightBackground#253146ff
  • editor.lineHighlightBorder#253146ff
  • editor.rangeHighlightBackground#5a7fbb40
  • editor.selectionBackground#5a7fbb40
  • editor.selectionHighlightBackground#5a7fbb20
  • editor.snippetFinalTabstopHighlightBorder#5a7fbb40
  • editor.snippetTabstopHighlightBackground#5a7fbb40
  • editor.stackFrameHighlightBackground#5a7fbb40
  • editor.wordHighlightBackground#5a7fbb20
  • editor.wordHighlightStrongBackground#5a7fbb20
  • editorActiveLineNumber.foreground#767d8fff
  • editorBracketMatch.background#5a7fbb20
  • editorBracketMatch.border#8baeeeff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a7acbaff
  • editorError.foreground#d26d71ff
  • editorGroup.border#253146ff
  • editorGroup.dropBackground#1f2b41ff
  • editorGroupHeader.noTabsBackground#1f2b41ff
  • editorGroupHeader.tabsBackground#253146ff
  • editorGutter.addedBackground#004e24ff
  • editorGutter.background#1f2b41ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#781b29ff
  • editorGutter.modifiedBackground#0d4278ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#253146ff
  • editorHoverWidget.border#253146ff
  • editorIndentGuide.activeBackground#364156ff
  • editorIndentGuide.background#2d384dff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#767d8fff
  • editorLineNumber.foreground#596275ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d26d71ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007243ff
  • editorOverviewRuler.border#253146ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a14148ff
  • editorOverviewRuler.errorForeground#d26d71bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#3c639dff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1f2b41ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#253146ff
  • editorSuggestWidget.border#253146ff
  • editorSuggestWidget.foreground#eceff7ff
  • editorSuggestWidget.highlightForeground#eceff7ff
  • editorSuggestWidget.selectedBackground#2d384dff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#253146ff
  • editorWidget.border#253146ff
  • errorForeground#d26d71ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5a7fbbff
  • foreground#dbdfe8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#767d8fff
  • gitDecoration.modifiedResourceForeground#d9a062ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#57c08bff
  • input.background#1f2b41ff
  • input.foreground#eceff7ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#cf98e6ff
  • inputValidation.errorBackground#5d0015ff
  • inputValidation.errorBorder#852732ff
  • inputValidation.infoBackground#1f2b41ff
  • inputValidation.infoBorder#414b5fff
  • inputValidation.warningBackground#481f00ff
  • inputValidation.warningBorder#6c3f01ff
  • list.activeSelectionBackground#2d384dff
  • list.activeSelectionForeground#eceff7ff
  • list.dropBackground#1f2b41ff
  • list.errorForeground#d26d71ff
  • list.focusBackground#2d384dff
  • list.highlightForeground#eceff7ff
  • list.hoverBackground#2d384dff
  • list.inactiveFocusBackground#2d384dff
  • list.inactiveSelectionBackground#2d384dff
  • list.inactiveSelectionForeground#eceff7ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#253146ff
  • menu.foreground#b8bdc9ff
  • menu.selectionBackground#2d384dff
  • menu.selectionForeground#eceff7ff
  • menu.separatorBackground#414b5fff
  • menubar.selectionBackground#2d384dff
  • menubar.selectionForeground#eceff7ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#253146ff
  • notificationLink.foreground#cf98e6ff
  • notifications.background#253146ff
  • notifications.border#253146ff
  • panel.background#253146ff
  • panel.border#253146ff
  • panel.dropBackground#1f2b41ff
  • panelTitle.activeBorder#cf98e6ff
  • panelTitle.activeForeground#eceff7ff
  • panelTitle.inactiveForeground#a7acbaff
  • peekView.border#253146ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#253146ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1f2b41ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#253146ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#08172aff
  • scrollbarSlider.activeBackground#596275bf
  • scrollbarSlider.background#414b5fbf
  • scrollbarSlider.hoverBackground#4d566abf
  • settings.checkboxBackground#1f2b41ff
  • settings.checkboxBorder#596275ff
  • settings.checkboxForeground#eceff7ff
  • settings.dropdownBackground#253146ff
  • settings.dropdownBorder#253146ff
  • settings.dropdownForeground#eceff7ff
  • settings.dropdownListBorder#364156ff
  • settings.headerForeground#cff1ffff
  • settings.modifiedItemIndicator#5a7fbbff
  • settings.numberInputBackground#253146ff
  • settings.numberInputForeground#eceff7ff
  • settings.textInputBackground#253146ff
  • settings.textInputForeground#eceff7ff
  • sideBar.background#253146ff
  • sideBar.dropBackground#1f2b41ff
  • sideBar.foreground#a7acbaff
  • sideBarSectionHeader.background#253146ff
  • sideBarSectionHeader.foreground#596275ff
  • sideBarTitle.foreground#596275ff
  • statusBar.background#2d384dff
  • statusBar.debuggingBackground#8b5405ff
  • statusBar.debuggingForeground#a7acbaff
  • statusBar.foreground#a7acbaff
  • statusBar.noFolderBackground#6a3185ff
  • statusBar.noFolderForeground#a7acbaff
  • tab.activeBackground#253146ff
  • tab.activeBorder#cf98e6ff
  • tab.activeForeground#eceff7ff
  • tab.activeModifiedBorder#cf98e6bf
  • tab.border#253146ff
  • tab.inactiveBackground#253146ff
  • tab.inactiveForeground#a7acbaff
  • tab.inactiveModifiedBorder#cf98e6bf
  • tab.unfocusedActiveForeground#eceff7ff
  • tab.unfocusedActiveModifiedBorder#cf98e680
  • tab.unfocusedInactiveForeground#a7acbaff
  • tab.unfocusedInactiveModifiedBorder#cf98e680
  • terminal.ansiBlack#1f2b41ff
  • terminal.ansiBlue#9cbfffff
  • terminal.ansiBrightBlack#596275ff
  • terminal.ansiBrightBlue#9cbfffff
  • terminal.ansiBrightCyan#2ecff6ff
  • terminal.ansiBrightGreen#69d19bff
  • terminal.ansiBrightMagenta#dbadedff
  • terminal.ansiBrightRed#ff9ea0ff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#ebb071ff
  • terminal.ansiCyan#2ecff6ff
  • terminal.ansiGreen#007243ff
  • terminal.ansiMagenta#dbadedff
  • terminal.ansiRed#a14148ff
  • terminal.ansiWhite#dbdfe8ff
  • terminal.ansiYellow#ebb071ff
  • terminal.background#1f2b41ff
  • terminal.border#253146ff
  • terminal.foreground#dbdfe8ff
  • terminal.selectionBackground#5a7fbb40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#253146ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#cf98e6ff
  • textLink.foreground#cf98e6ff
  • textPreformat.foreground#dbadedff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#253146ff
  • titleBar.activeForeground#a7acbaff
  • titleBar.inactiveBackground#253146ff
  • titleBar.inactiveForeground#596275ff
  • widget.shadow#142135ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...