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#2f3749ff
  • activityBar.dropBackground#293143ff
  • activityBar.foreground#deaaf3ff
  • activityBar.inactiveForeground#686e7bff
  • activityBarBadge.background#deaaf3bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#deaaf3bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#293143ff
  • breadcrumb.focusForeground#f5f5f6ff
  • breadcrumb.foreground#878c97ff
  • breadcrumbPicker.background#2f3749ff
  • button.background#ab7abfff
  • button.foreground#ffffffff
  • button.hoverBackground#bc8ad0ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2f3749ff
  • debugToolBar.background#293143ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2f3749ff
  • dropdown.border#2f3749ff
  • dropdown.foreground#f5f5f6ff
  • editor.background#293143ff
  • editor.findMatchBackground#6e8dc540
  • editor.findMatchHighlightBackground#6e8dc540
  • editor.findRangeHighlightBackground#6e8dc540
  • editor.focusedStackFrameHighlightBackground#6e8dc540
  • editor.foreground#e8e9ebff
  • editor.hoverHighlightBackground#6e8dc540
  • editor.inactiveSelectionBackground#6e8dc520
  • editor.lineHighlightBackground#2f3749ff
  • editor.lineHighlightBorder#2f3749ff
  • editor.rangeHighlightBackground#6e8dc540
  • editor.selectionBackground#6e8dc540
  • editor.selectionHighlightBackground#6e8dc520
  • editor.snippetFinalTabstopHighlightBorder#6e8dc540
  • editor.snippetTabstopHighlightBackground#6e8dc540
  • editor.stackFrameHighlightBackground#6e8dc540
  • editor.wordHighlightBackground#6e8dc520
  • editor.wordHighlightStrongBackground#6e8dc520
  • editorActiveLineNumber.foreground#878c97ff
  • editorBracketMatch.background#6e8dc520
  • editorBracketMatch.border#a0bef9ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#babcc3ff
  • editorError.foreground#df7f82ff
  • editorGroup.border#2f3749ff
  • editorGroup.dropBackground#293143ff
  • editorGroupHeader.noTabsBackground#293143ff
  • editorGroupHeader.tabsBackground#2f3749ff
  • editorGutter.addedBackground#00562dff
  • editorGutter.background#293143ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#7f2932ff
  • editorGutter.modifiedBackground#244a7bff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2f3749ff
  • editorHoverWidget.border#2f3749ff
  • editorIndentGuide.activeBackground#414859ff
  • editorIndentGuide.background#373f50ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#878c97ff
  • editorLineNumber.foreground#686e7bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#df7f82ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#137d51ff
  • editorOverviewRuler.border#2f3749ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#aa5155ff
  • editorOverviewRuler.errorForeground#df7f82bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#4f6fa4ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#293143ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2f3749ff
  • editorSuggestWidget.border#2f3749ff
  • editorSuggestWidget.foreground#f5f5f6ff
  • editorSuggestWidget.highlightForeground#f5f5f6ff
  • editorSuggestWidget.selectedBackground#373f50ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2f3749ff
  • editorWidget.border#2f3749ff
  • errorForeground#df7f82ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6e8dc5ff
  • foreground#e8e9ebff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#878c97ff
  • gitDecoration.modifiedResourceForeground#e8b176ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#71cf9dff
  • input.background#293143ff
  • input.foreground#f5f5f6ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#deaaf3ff
  • inputValidation.errorBackground#620c1dff
  • inputValidation.errorBorder#8c353cff
  • inputValidation.infoBackground#293143ff
  • inputValidation.infoBorder#4d5363ff
  • inputValidation.warningBackground#4d2700ff
  • inputValidation.warningBorder#744913ff
  • list.activeSelectionBackground#373f50ff
  • list.activeSelectionForeground#f5f5f6ff
  • list.dropBackground#293143ff
  • list.errorForeground#df7f82ff
  • list.focusBackground#373f50ff
  • list.highlightForeground#f5f5f6ff
  • list.hoverBackground#373f50ff
  • list.inactiveFocusBackground#373f50ff
  • list.inactiveSelectionBackground#373f50ff
  • list.inactiveSelectionForeground#f5f5f6ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2f3749ff
  • menu.foreground#caccd1ff
  • menu.selectionBackground#373f50ff
  • menu.selectionForeground#f5f5f6ff
  • menu.separatorBackground#4d5363ff
  • menubar.selectionBackground#373f50ff
  • menubar.selectionForeground#f5f5f6ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2f3749ff
  • notificationLink.foreground#deaaf3ff
  • notifications.background#2f3749ff
  • notifications.border#2f3749ff
  • panel.background#2f3749ff
  • panel.border#2f3749ff
  • panel.dropBackground#293143ff
  • panelTitle.activeBorder#deaaf3ff
  • panelTitle.activeForeground#f5f5f6ff
  • panelTitle.inactiveForeground#babcc3ff
  • peekView.border#2f3749ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2f3749ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#293143ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2f3749ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#131d2dff
  • scrollbarSlider.activeBackground#686e7bbf
  • scrollbarSlider.background#4d5363bf
  • scrollbarSlider.hoverBackground#5a606ebf
  • settings.checkboxBackground#293143ff
  • settings.checkboxBorder#686e7bff
  • settings.checkboxForeground#f5f5f6ff
  • settings.dropdownBackground#2f3749ff
  • settings.dropdownBorder#2f3749ff
  • settings.dropdownForeground#f5f5f6ff
  • settings.dropdownListBorder#414859ff
  • settings.headerForeground#d9f7ffff
  • settings.modifiedItemIndicator#6e8dc5ff
  • settings.numberInputBackground#2f3749ff
  • settings.numberInputForeground#f5f5f6ff
  • settings.textInputBackground#2f3749ff
  • settings.textInputForeground#f5f5f6ff
  • sideBar.background#2f3749ff
  • sideBar.dropBackground#293143ff
  • sideBar.foreground#babcc3ff
  • sideBarSectionHeader.background#2f3749ff
  • sideBarSectionHeader.foreground#686e7bff
  • sideBarTitle.foreground#686e7bff
  • statusBar.background#373f50ff
  • statusBar.debuggingBackground#97601cff
  • statusBar.debuggingForeground#babcc3ff
  • statusBar.foreground#babcc3ff
  • statusBar.noFolderBackground#733c8cff
  • statusBar.noFolderForeground#babcc3ff
  • tab.activeBackground#2f3749ff
  • tab.activeBorder#deaaf3ff
  • tab.activeForeground#f5f5f6ff
  • tab.activeModifiedBorder#deaaf3bf
  • tab.border#2f3749ff
  • tab.inactiveBackground#2f3749ff
  • tab.inactiveForeground#babcc3ff
  • tab.inactiveModifiedBorder#deaaf3bf
  • tab.unfocusedActiveForeground#f5f5f6ff
  • tab.unfocusedActiveModifiedBorder#deaaf380
  • tab.unfocusedInactiveForeground#babcc3ff
  • tab.unfocusedInactiveModifiedBorder#deaaf380
  • terminal.ansiBlack#293143ff
  • terminal.ansiBlue#b0ceffff
  • terminal.ansiBrightBlack#686e7bff
  • terminal.ansiBrightBlue#b0ceffff
  • terminal.ansiBrightCyan#5bddffff
  • terminal.ansiBrightGreen#81dfadff
  • terminal.ansiBrightMagenta#e8bef8ff
  • terminal.ansiBrightRed#ffb0b1ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f9c085ff
  • terminal.ansiCyan#5bddffff
  • terminal.ansiGreen#137d51ff
  • terminal.ansiMagenta#e8bef8ff
  • terminal.ansiRed#aa5155ff
  • terminal.ansiWhite#e8e9ebff
  • terminal.ansiYellow#f9c085ff
  • terminal.background#293143ff
  • terminal.border#2f3749ff
  • terminal.foreground#e8e9ebff
  • terminal.selectionBackground#6e8dc540
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2f3749ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#deaaf3ff
  • textLink.foreground#deaaf3ff
  • textPreformat.foreground#e8bef8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2f3749ff
  • titleBar.activeForeground#babcc3ff
  • titleBar.inactiveBackground#2f3749ff
  • titleBar.inactiveForeground#686e7bff
  • widget.shadow#1e2738ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...