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#0f1827ff
  • activityBar.dropBackground#061121ff
  • activityBar.foreground#c08ed5ff
  • activityBar.inactiveForeground#474d5aff
  • activityBarBadge.background#c08ed5bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c08ed5bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#061121ff
  • breadcrumb.focusForeground#ecedefff
  • breadcrumb.foreground#676b77ff
  • breadcrumbPicker.background#0f1827ff
  • button.background#88599cff
  • button.foreground#ffffffff
  • button.hoverBackground#9a6aaeff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#0f1827ff
  • debugToolBar.background#061121ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#0f1827ff
  • dropdown.border#0f1827ff
  • dropdown.foreground#ecedefff
  • editor.background#061121ff
  • editor.findMatchBackground#4c6da240
  • editor.findMatchHighlightBackground#4c6da240
  • editor.findRangeHighlightBackground#4c6da240
  • editor.focusedStackFrameHighlightBackground#4c6da240
  • editor.foreground#d9daddff
  • editor.hoverHighlightBackground#4c6da240
  • editor.inactiveSelectionBackground#4c6da220
  • editor.lineHighlightBackground#0f1827ff
  • editor.lineHighlightBorder#0f1827ff
  • editor.rangeHighlightBackground#4c6da240
  • editor.selectionBackground#4c6da240
  • editor.selectionHighlightBackground#4c6da220
  • editor.snippetFinalTabstopHighlightBorder#4c6da240
  • editor.snippetTabstopHighlightBackground#4c6da240
  • editor.stackFrameHighlightBackground#4c6da240
  • editor.wordHighlightBackground#4c6da220
  • editor.wordHighlightStrongBackground#4c6da220
  • editorActiveLineNumber.foreground#676b77ff
  • editorBracketMatch.background#4c6da220
  • editorBracketMatch.border#83a2dbff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9da0a8ff
  • editorError.foreground#bb5f63ff
  • editorGroup.border#0f1827ff
  • editorGroup.dropBackground#061121ff
  • editorGroupHeader.noTabsBackground#061121ff
  • editorGroupHeader.tabsBackground#0f1827ff
  • editorGutter.addedBackground#00330fff
  • editorGutter.background#061121ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#570014ff
  • editorGutter.modifiedBackground#002a57ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#0f1827ff
  • editorHoverWidget.border#0f1827ff
  • editorIndentGuide.activeBackground#212837ff
  • editorIndentGuide.background#171f2eff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#676b77ff
  • editorLineNumber.foreground#474d5aff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#bb5f63ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005a32ff
  • editorOverviewRuler.border#0f1827ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#842e36ff
  • editorOverviewRuler.errorForeground#bb5f63bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2a4e80ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#061121ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#0f1827ff
  • editorSuggestWidget.border#0f1827ff
  • editorSuggestWidget.foreground#ecedefff
  • editorSuggestWidget.highlightForeground#ecedefff
  • editorSuggestWidget.selectedBackground#171f2eff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0f1827ff
  • editorWidget.border#0f1827ff
  • errorForeground#bb5f63ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4c6da2ff
  • foreground#d9daddff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#676b77ff
  • gitDecoration.modifiedResourceForeground#c9955cff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#53b282ff
  • input.background#061121ff
  • input.foreground#ecedefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c08ed5ff
  • inputValidation.errorBackground#3b0000ff
  • inputValidation.errorBorder#640f1eff
  • inputValidation.infoBackground#061121ff
  • inputValidation.infoBorder#2c3342ff
  • inputValidation.warningBackground#2e0200ff
  • inputValidation.warningBorder#4f2900ff
  • list.activeSelectionBackground#171f2eff
  • list.activeSelectionForeground#ecedefff
  • list.dropBackground#061121ff
  • list.errorForeground#bb5f63ff
  • list.focusBackground#171f2eff
  • list.highlightForeground#ecedefff
  • list.hoverBackground#171f2eff
  • list.inactiveFocusBackground#171f2eff
  • list.inactiveSelectionBackground#171f2eff
  • list.inactiveSelectionForeground#ecedefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#0f1827ff
  • menu.foreground#b1b3baff
  • menu.selectionBackground#171f2eff
  • menu.selectionForeground#ecedefff
  • menu.separatorBackground#2c3342ff
  • menubar.selectionBackground#171f2eff
  • menubar.selectionForeground#ecedefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#0f1827ff
  • notificationLink.foreground#c08ed5ff
  • notifications.background#0f1827ff
  • notifications.border#0f1827ff
  • panel.background#0f1827ff
  • panel.border#0f1827ff
  • panel.dropBackground#061121ff
  • panelTitle.activeBorder#c08ed5ff
  • panelTitle.activeForeground#ecedefff
  • panelTitle.inactiveForeground#9da0a8ff
  • peekView.border#0f1827ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#0f1827ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#061121ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#0f1827ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000118ff
  • scrollbarSlider.activeBackground#474d5abf
  • scrollbarSlider.background#2c3342bf
  • scrollbarSlider.hoverBackground#393f4dbf
  • settings.checkboxBackground#061121ff
  • settings.checkboxBorder#474d5aff
  • settings.checkboxForeground#ecedefff
  • settings.dropdownBackground#0f1827ff
  • settings.dropdownBorder#0f1827ff
  • settings.dropdownForeground#ecedefff
  • settings.dropdownListBorder#212837ff
  • settings.headerForeground#d1efffff
  • settings.modifiedItemIndicator#4c6da2ff
  • settings.numberInputBackground#0f1827ff
  • settings.numberInputForeground#ecedefff
  • settings.textInputBackground#0f1827ff
  • settings.textInputForeground#ecedefff
  • sideBar.background#0f1827ff
  • sideBar.dropBackground#061121ff
  • sideBar.foreground#9da0a8ff
  • sideBarSectionHeader.background#0f1827ff
  • sideBarSectionHeader.foreground#474d5aff
  • sideBarTitle.foreground#474d5aff
  • statusBar.background#171f2eff
  • statusBar.debuggingBackground#714000ff
  • statusBar.debuggingForeground#9da0a8ff
  • statusBar.foreground#9da0a8ff
  • statusBar.noFolderBackground#4e1a67ff
  • statusBar.noFolderForeground#9da0a8ff
  • tab.activeBackground#0f1827ff
  • tab.activeBorder#c08ed5ff
  • tab.activeForeground#ecedefff
  • tab.activeModifiedBorder#c08ed5bf
  • tab.border#0f1827ff
  • tab.inactiveBackground#0f1827ff
  • tab.inactiveForeground#9da0a8ff
  • tab.inactiveModifiedBorder#c08ed5bf
  • tab.unfocusedActiveForeground#ecedefff
  • tab.unfocusedActiveModifiedBorder#c08ed580
  • tab.unfocusedInactiveForeground#9da0a8ff
  • tab.unfocusedInactiveModifiedBorder#c08ed580
  • terminal.ansiBlack#061121ff
  • terminal.ansiBlue#97b5efff
  • terminal.ansiBrightBlack#474d5aff
  • terminal.ansiBrightBlue#97b5efff
  • terminal.ansiBrightCyan#39c4e7ff
  • terminal.ansiBrightGreen#67c695ff
  • terminal.ansiBrightMagenta#cea5deff
  • terminal.ansiBrightRed#f99799ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#dea86eff
  • terminal.ansiCyan#39c4e7ff
  • terminal.ansiGreen#005a32ff
  • terminal.ansiMagenta#cea5deff
  • terminal.ansiRed#842e36ff
  • terminal.ansiWhite#d9daddff
  • terminal.ansiYellow#dea86eff
  • terminal.background#061121ff
  • terminal.border#0f1827ff
  • terminal.foreground#d9daddff
  • terminal.selectionBackground#4c6da240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#0f1827ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c08ed5ff
  • textLink.foreground#c08ed5ff
  • textPreformat.foreground#cea5deff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#0f1827ff
  • titleBar.activeForeground#9da0a8ff
  • titleBar.inactiveBackground#0f1827ff
  • titleBar.inactiveForeground#474d5aff
  • widget.shadow#000118ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...