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#283142ff
  • activityBar.dropBackground#222b3cff
  • activityBar.foreground#dba7f0ff
  • activityBar.inactiveForeground#636876ff
  • activityBarBadge.background#dba7f0bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#dba7f0bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#222b3cff
  • breadcrumb.focusForeground#f4f5f6ff
  • breadcrumb.foreground#838893ff
  • breadcrumbPicker.background#283142ff
  • button.background#a675bbff
  • button.foreground#ffffffff
  • button.hoverBackground#b886ccff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#283142ff
  • debugToolBar.background#222b3cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#283142ff
  • dropdown.border#283142ff
  • dropdown.foreground#f4f5f6ff
  • editor.background#222b3cff
  • editor.findMatchBackground#6a89c040
  • editor.findMatchHighlightBackground#6a89c040
  • editor.findRangeHighlightBackground#6a89c040
  • editor.focusedStackFrameHighlightBackground#6a89c040
  • editor.foreground#e7e8eaff
  • editor.hoverHighlightBackground#6a89c040
  • editor.inactiveSelectionBackground#6a89c020
  • editor.lineHighlightBackground#283142ff
  • editor.lineHighlightBorder#283142ff
  • editor.rangeHighlightBackground#6a89c040
  • editor.selectionBackground#6a89c040
  • editor.selectionHighlightBackground#6a89c020
  • editor.snippetFinalTabstopHighlightBorder#6a89c040
  • editor.snippetTabstopHighlightBackground#6a89c040
  • editor.stackFrameHighlightBackground#6a89c040
  • editor.wordHighlightBackground#6a89c020
  • editor.wordHighlightStrongBackground#6a89c020
  • editorActiveLineNumber.foreground#838893ff
  • editorBracketMatch.background#6a89c020
  • editorBracketMatch.border#9dbbf6ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b7bac0ff
  • editorError.foreground#db7c7eff
  • editorGroup.border#283142ff
  • editorGroup.dropBackground#222b3cff
  • editorGroupHeader.noTabsBackground#222b3cff
  • editorGroupHeader.tabsBackground#283142ff
  • editorGutter.addedBackground#004f28ff
  • editorGutter.background#222b3cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#77222cff
  • editorGutter.modifiedBackground#1c4475ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#283142ff
  • editorHoverWidget.border#283142ff
  • editorIndentGuide.activeBackground#3b4252ff
  • editorIndentGuide.background#313949ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#838893ff
  • editorLineNumber.foreground#636876ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#db7c7eff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#07784cff
  • editorOverviewRuler.border#283142ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a44b50ff
  • editorOverviewRuler.errorForeground#db7c7ebf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#496a9fff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#222b3cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#283142ff
  • editorSuggestWidget.border#283142ff
  • editorSuggestWidget.foreground#f4f5f6ff
  • editorSuggestWidget.highlightForeground#f4f5f6ff
  • editorSuggestWidget.selectedBackground#313949ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#283142ff
  • editorWidget.border#283142ff
  • errorForeground#db7c7eff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6a89c0ff
  • foreground#e7e8eaff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#838893ff
  • gitDecoration.modifiedResourceForeground#e5ae74ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#6ecc9bff
  • input.background#222b3cff
  • input.foreground#f4f5f6ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#dba7f0ff
  • inputValidation.errorBackground#5a0117ff
  • inputValidation.errorBorder#852f37ff
  • inputValidation.infoBackground#222b3cff
  • inputValidation.infoBorder#474e5dff
  • inputValidation.warningBackground#462000ff
  • inputValidation.warningBorder#6d430cff
  • list.activeSelectionBackground#313949ff
  • list.activeSelectionForeground#f4f5f6ff
  • list.dropBackground#222b3cff
  • list.errorForeground#db7c7eff
  • list.focusBackground#313949ff
  • list.highlightForeground#f4f5f6ff
  • list.hoverBackground#313949ff
  • list.inactiveFocusBackground#313949ff
  • list.inactiveSelectionBackground#313949ff
  • list.inactiveSelectionForeground#f4f5f6ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#283142ff
  • menu.foreground#c8cacfff
  • menu.selectionBackground#313949ff
  • menu.selectionForeground#f4f5f6ff
  • menu.separatorBackground#474e5dff
  • menubar.selectionBackground#313949ff
  • menubar.selectionForeground#f4f5f6ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#283142ff
  • notificationLink.foreground#dba7f0ff
  • notifications.background#283142ff
  • notifications.border#283142ff
  • panel.background#283142ff
  • panel.border#283142ff
  • panel.dropBackground#222b3cff
  • panelTitle.activeBorder#dba7f0ff
  • panelTitle.activeForeground#f4f5f6ff
  • panelTitle.inactiveForeground#b7bac0ff
  • peekView.border#283142ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#283142ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#222b3cff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#283142ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0d1626ff
  • scrollbarSlider.activeBackground#636876bf
  • scrollbarSlider.background#474e5dbf
  • scrollbarSlider.hoverBackground#545a69bf
  • settings.checkboxBackground#222b3cff
  • settings.checkboxBorder#636876ff
  • settings.checkboxForeground#f4f5f6ff
  • settings.dropdownBackground#283142ff
  • settings.dropdownBorder#283142ff
  • settings.dropdownForeground#f4f5f6ff
  • settings.dropdownListBorder#3b4252ff
  • settings.headerForeground#d8f6ffff
  • settings.modifiedItemIndicator#6a89c0ff
  • settings.numberInputBackground#283142ff
  • settings.numberInputForeground#f4f5f6ff
  • settings.textInputBackground#283142ff
  • settings.textInputForeground#f4f5f6ff
  • sideBar.background#283142ff
  • sideBar.dropBackground#222b3cff
  • sideBar.foreground#b7bac0ff
  • sideBarSectionHeader.background#283142ff
  • sideBarSectionHeader.foreground#636876ff
  • sideBarTitle.foreground#636876ff
  • statusBar.background#313949ff
  • statusBar.debuggingBackground#915b17ff
  • statusBar.debuggingForeground#b7bac0ff
  • statusBar.foreground#b7bac0ff
  • statusBar.noFolderBackground#6c3685ff
  • statusBar.noFolderForeground#b7bac0ff
  • tab.activeBackground#283142ff
  • tab.activeBorder#dba7f0ff
  • tab.activeForeground#f4f5f6ff
  • tab.activeModifiedBorder#dba7f0bf
  • tab.border#283142ff
  • tab.inactiveBackground#283142ff
  • tab.inactiveForeground#b7bac0ff
  • tab.inactiveModifiedBorder#dba7f0bf
  • tab.unfocusedActiveForeground#f4f5f6ff
  • tab.unfocusedActiveModifiedBorder#dba7f080
  • tab.unfocusedInactiveForeground#b7bac0ff
  • tab.unfocusedInactiveModifiedBorder#dba7f080
  • terminal.ansiBlack#222b3cff
  • terminal.ansiBlue#aeccffff
  • terminal.ansiBrightBlack#636876ff
  • terminal.ansiBrightBlue#aeccffff
  • terminal.ansiBrightCyan#59dbffff
  • terminal.ansiBrightGreen#7fddabff
  • terminal.ansiBrightMagenta#e6bcf6ff
  • terminal.ansiBrightRed#ffaeafff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f7be84ff
  • terminal.ansiCyan#59dbffff
  • terminal.ansiGreen#07784cff
  • terminal.ansiMagenta#e6bcf6ff
  • terminal.ansiRed#a44b50ff
  • terminal.ansiWhite#e7e8eaff
  • terminal.ansiYellow#f7be84ff
  • terminal.background#222b3cff
  • terminal.border#283142ff
  • terminal.foreground#e7e8eaff
  • terminal.selectionBackground#6a89c040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#283142ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#dba7f0ff
  • textLink.foreground#dba7f0ff
  • textPreformat.foreground#e6bcf6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#283142ff
  • titleBar.activeForeground#b7bac0ff
  • titleBar.inactiveBackground#283142ff
  • titleBar.inactiveForeground#636876ff
  • widget.shadow#172031ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...