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#292929ff
  • activityBar.dropBackground#232323ff
  • activityBar.foreground#7e97d3ff
  • activityBar.inactiveForeground#5b5b5bff
  • activityBarBadge.background#7e97d3bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#7e97d3bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#232323ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#787878ff
  • breadcrumbPicker.background#292929ff
  • button.background#425e95ff
  • button.foreground#ffffffff
  • button.hoverBackground#5670a9ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#292929ff
  • debugToolBar.background#232323ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#292929ff
  • dropdown.border#292929ff
  • dropdown.foreground#efefefff
  • editor.background#232323ff
  • editor.findMatchBackground#535e7a40
  • editor.findMatchHighlightBackground#535e7a40
  • editor.findRangeHighlightBackground#535e7a40
  • editor.focusedStackFrameHighlightBackground#535e7a40
  • editor.foreground#ddddddff
  • editor.hoverHighlightBackground#535e7a40
  • editor.inactiveSelectionBackground#535e7a20
  • editor.lineHighlightBackground#292929ff
  • editor.lineHighlightBorder#292929ff
  • editor.rangeHighlightBackground#535e7a40
  • editor.selectionBackground#535e7a40
  • editor.selectionHighlightBackground#535e7a20
  • editor.snippetFinalTabstopHighlightBorder#535e7a40
  • editor.snippetTabstopHighlightBackground#535e7a40
  • editor.stackFrameHighlightBackground#535e7a40
  • editor.wordHighlightBackground#535e7a20
  • editor.wordHighlightStrongBackground#535e7a20
  • editorActiveLineNumber.foreground#787878ff
  • editorBracketMatch.background#535e7a20
  • editorBracketMatch.border#7e97d3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#fbcd40ff
  • editorError.foreground#c33e54ff
  • editorGroup.border#292929ff
  • editorGroup.dropBackground#232323ff
  • editorGroupHeader.noTabsBackground#232323ff
  • editorGroupHeader.tabsBackground#292929ff
  • editorGutter.addedBackground#091d00ff
  • editorGutter.background#232323ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#500000ff
  • editorGutter.modifiedBackground#09172eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#292929ff
  • editorHoverWidget.border#292929ff
  • editorIndentGuide.activeBackground#393939ff
  • editorIndentGuide.background#303030ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#787878ff
  • editorLineNumber.foreground#5b5b5bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c33e54ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#2c430bff
  • editorOverviewRuler.border#292929ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#830025ff
  • editorOverviewRuler.errorForeground#c33e54bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#323d57ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#232323ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#292929ff
  • editorSuggestWidget.border#292929ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#303030ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#292929ff
  • editorWidget.border#292929ff
  • errorForeground#c33e54ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#535e7aff
  • foreground#ddddddff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#787878ff
  • gitDecoration.modifiedResourceForeground#b6904cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#869f62ff
  • input.background#232323ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#7e97d3ff
  • inputValidation.errorBackground#400000ff
  • inputValidation.errorBorder#5f0009ff
  • inputValidation.infoBackground#232323ff
  • inputValidation.infoBorder#434343ff
  • inputValidation.warningBackground#240000ff
  • inputValidation.warningBorder#371c00ff
  • list.activeSelectionBackground#303030ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#232323ff
  • list.errorForeground#c33e54ff
  • list.focusBackground#303030ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#303030ff
  • list.inactiveFocusBackground#303030ff
  • list.inactiveSelectionBackground#303030ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#292929ff
  • menu.foreground#bababaff
  • menu.selectionBackground#303030ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#434343ff
  • menubar.selectionBackground#303030ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#292929ff
  • notificationLink.foreground#7e97d3ff
  • notifications.background#292929ff
  • notifications.border#292929ff
  • panel.background#292929ff
  • panel.border#292929ff
  • panel.dropBackground#232323ff
  • panelTitle.activeBorder#7e97d3ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#a9a9a9ff
  • peekView.border#292929ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#292929ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#232323ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#292929ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0d0d0dff
  • scrollbarSlider.activeBackground#5b5b5bbf
  • scrollbarSlider.background#434343bf
  • scrollbarSlider.hoverBackground#4f4f4fbf
  • settings.checkboxBackground#232323ff
  • settings.checkboxBorder#5b5b5bff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#292929ff
  • settings.dropdownBorder#292929ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#393939ff
  • settings.headerForeground#e0ebffff
  • settings.modifiedItemIndicator#535e7aff
  • settings.numberInputBackground#292929ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#292929ff
  • settings.textInputForeground#efefefff
  • sideBar.background#292929ff
  • sideBar.dropBackground#232323ff
  • sideBar.foreground#a9a9a9ff
  • sideBarSectionHeader.background#292929ff
  • sideBarSectionHeader.foreground#5b5b5bff
  • sideBarTitle.foreground#5b5b5bff
  • statusBar.background#303030ff
  • statusBar.debuggingBackground#721d01ff
  • statusBar.debuggingForeground#a9a9a9ff
  • statusBar.foreground#a9a9a9ff
  • statusBar.noFolderBackground#351146ff
  • statusBar.noFolderForeground#a9a9a9ff
  • tab.activeBackground#292929ff
  • tab.activeBorder#7e97d3ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#7e97d3bf
  • tab.border#292929ff
  • tab.inactiveBackground#292929ff
  • tab.inactiveForeground#a9a9a9ff
  • tab.inactiveModifiedBorder#7e97d3bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#7e97d380
  • tab.unfocusedInactiveForeground#a9a9a9ff
  • tab.unfocusedInactiveModifiedBorder#7e97d380
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#91aae7ff
  • terminal.ansiBrightBlack#6d6f7fff
  • terminal.ansiBrightBlue#91aae7ff
  • terminal.ansiBrightCyan#abd8ecff
  • terminal.ansiBrightGreen#cbe5a4ff
  • terminal.ansiBrightMagenta#c59ddeff
  • terminal.ansiBrightRed#ee6576ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f7cd85ff
  • terminal.ansiCyan#abd8ecff
  • terminal.ansiGreen#cbe5a4ff
  • terminal.ansiMagenta#c59ddeff
  • terminal.ansiRed#ee6576ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#f7cd85ff
  • terminal.background#232323ff
  • terminal.border#292929ff
  • terminal.foreground#ddddddff
  • terminal.selectionBackground#535e7a40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#292929ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#7e97d3ff
  • textLink.foreground#7e97d3ff
  • textPreformat.foreground#c59ddeff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#292929ff
  • titleBar.activeForeground#a9a9a9ff
  • titleBar.inactiveBackground#292929ff
  • titleBar.inactiveForeground#5b5b5bff
  • widget.shadow#191919ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...