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#2b313dff
  • activityBar.dropBackground#252b37ff
  • activityBar.foreground#d9a9ecff
  • activityBar.inactiveForeground#656870ff
  • activityBarBadge.background#d9a9ecbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#d9a9ecbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#252b37ff
  • breadcrumb.focusForeground#f5f5f5ff
  • breadcrumb.foreground#85878dff
  • breadcrumbPicker.background#2b313dff
  • button.background#a477b6ff
  • button.foreground#ffffffff
  • button.hoverBackground#b588c8ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2b313dff
  • debugToolBar.background#252b37ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2b313dff
  • dropdown.border#2b313dff
  • dropdown.foreground#f5f5f5ff
  • editor.background#252b37ff
  • editor.findMatchBackground#6e89bb40
  • editor.findMatchHighlightBackground#6e89bb40
  • editor.findRangeHighlightBackground#6e89bb40
  • editor.focusedStackFrameHighlightBackground#6e89bb40
  • editor.foreground#e8e8e8ff
  • editor.hoverHighlightBackground#6e89bb40
  • editor.inactiveSelectionBackground#6e89bb20
  • editor.lineHighlightBackground#2b313dff
  • editor.lineHighlightBorder#2b313dff
  • editor.rangeHighlightBackground#6e89bb40
  • editor.selectionBackground#6e89bb40
  • editor.selectionHighlightBackground#6e89bb20
  • editor.snippetFinalTabstopHighlightBorder#6e89bb40
  • editor.snippetTabstopHighlightBackground#6e89bb40
  • editor.stackFrameHighlightBackground#6e89bb40
  • editor.wordHighlightBackground#6e89bb20
  • editor.wordHighlightStrongBackground#6e89bb20
  • editorActiveLineNumber.foreground#85878dff
  • editorBracketMatch.background#6e89bb20
  • editorBracketMatch.border#a1bbf0ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#b9babaff
  • editorError.foreground#d67f80ff
  • editorGroup.border#2b313dff
  • editorGroup.dropBackground#252b37ff
  • editorGroupHeader.noTabsBackground#252b37ff
  • editorGroupHeader.tabsBackground#2b313dff
  • editorGutter.addedBackground#004e2aff
  • editorGutter.background#252b37ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#73262eff
  • editorGutter.modifiedBackground#23436fff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2b313dff
  • editorHoverWidget.border#2b313dff
  • editorIndentGuide.activeBackground#3d424dff
  • editorIndentGuide.background#333844ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#85878dff
  • editorLineNumber.foreground#656870ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d67f80ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#1c774eff
  • editorOverviewRuler.border#2b313dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#a04e52ff
  • editorOverviewRuler.errorForeground#d67f80bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#4e6a99ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#252b37ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2b313dff
  • editorSuggestWidget.border#2b313dff
  • editorSuggestWidget.foreground#f5f5f5ff
  • editorSuggestWidget.highlightForeground#f5f5f5ff
  • editorSuggestWidget.selectedBackground#333844ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2b313dff
  • editorWidget.border#2b313dff
  • errorForeground#d67f80ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#6e89bbff
  • foreground#e8e8e8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#85878dff
  • gitDecoration.modifiedResourceForeground#e2af7aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#76cb9dff
  • input.background#252b37ff
  • input.foreground#f5f5f5ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#d9a9ecff
  • inputValidation.errorBackground#570918ff
  • inputValidation.errorBorder#813338ff
  • inputValidation.infoBackground#252b37ff
  • inputValidation.infoBorder#494d58ff
  • inputValidation.warningBackground#442100ff
  • inputValidation.warningBorder#6b4413ff
  • list.activeSelectionBackground#333844ff
  • list.activeSelectionForeground#f5f5f5ff
  • list.dropBackground#252b37ff
  • list.errorForeground#d67f80ff
  • list.focusBackground#333844ff
  • list.highlightForeground#f5f5f5ff
  • list.hoverBackground#333844ff
  • list.inactiveFocusBackground#333844ff
  • list.inactiveSelectionBackground#333844ff
  • list.inactiveSelectionForeground#f5f5f5ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2b313dff
  • menu.foreground#cacacaff
  • menu.selectionBackground#333844ff
  • menu.selectionForeground#f5f5f5ff
  • menu.separatorBackground#494d58ff
  • menubar.selectionBackground#333844ff
  • menubar.selectionForeground#f5f5f5ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2b313dff
  • notificationLink.foreground#d9a9ecff
  • notifications.background#2b313dff
  • notifications.border#2b313dff
  • panel.background#2b313dff
  • panel.border#2b313dff
  • panel.dropBackground#252b37ff
  • panelTitle.activeBorder#d9a9ecff
  • panelTitle.activeForeground#f5f5f5ff
  • panelTitle.inactiveForeground#b9babaff
  • peekView.border#2b313dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2b313dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#252b37ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2b313dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#101622ff
  • scrollbarSlider.activeBackground#656870bf
  • scrollbarSlider.background#494d58bf
  • scrollbarSlider.hoverBackground#565a63bf
  • settings.checkboxBackground#252b37ff
  • settings.checkboxBorder#656870ff
  • settings.checkboxForeground#f5f5f5ff
  • settings.dropdownBackground#2b313dff
  • settings.dropdownBorder#2b313dff
  • settings.dropdownForeground#f5f5f5ff
  • settings.dropdownListBorder#3d424dff
  • settings.headerForeground#dcf6ffff
  • settings.modifiedItemIndicator#6e89bbff
  • settings.numberInputBackground#2b313dff
  • settings.numberInputForeground#f5f5f5ff
  • settings.textInputBackground#2b313dff
  • settings.textInputForeground#f5f5f5ff
  • sideBar.background#2b313dff
  • sideBar.dropBackground#252b37ff
  • sideBar.foreground#b9babaff
  • sideBarSectionHeader.background#2b313dff
  • sideBarSectionHeader.foreground#656870ff
  • sideBarTitle.foreground#656870ff
  • statusBar.background#333844ff
  • statusBar.debuggingBackground#8f5c1eff
  • statusBar.debuggingForeground#b9babaff
  • statusBar.foreground#b9babaff
  • statusBar.noFolderBackground#6a3881ff
  • statusBar.noFolderForeground#b9babaff
  • tab.activeBackground#2b313dff
  • tab.activeBorder#d9a9ecff
  • tab.activeForeground#f5f5f5ff
  • tab.activeModifiedBorder#d9a9ecbf
  • tab.border#2b313dff
  • tab.inactiveBackground#2b313dff
  • tab.inactiveForeground#b9babaff
  • tab.inactiveModifiedBorder#d9a9ecbf
  • tab.unfocusedActiveForeground#f5f5f5ff
  • tab.unfocusedActiveModifiedBorder#d9a9ec80
  • tab.unfocusedInactiveForeground#b9babaff
  • tab.unfocusedInactiveModifiedBorder#d9a9ec80
  • terminal.ansiBlack#252b37ff
  • terminal.ansiBlue#b1ccffff
  • terminal.ansiBrightBlack#656870ff
  • terminal.ansiBrightBlue#b1ccffff
  • terminal.ansiBrightCyan#68dafbff
  • terminal.ansiBrightGreen#86dcadff
  • terminal.ansiBrightMagenta#e3bdf2ff
  • terminal.ansiBrightRed#ffb0b1ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f4bf89ff
  • terminal.ansiCyan#68dafbff
  • terminal.ansiGreen#1c774eff
  • terminal.ansiMagenta#e3bdf2ff
  • terminal.ansiRed#a04e52ff
  • terminal.ansiWhite#e8e8e8ff
  • terminal.ansiYellow#f4bf89ff
  • terminal.background#252b37ff
  • terminal.border#2b313dff
  • terminal.foreground#e8e8e8ff
  • terminal.selectionBackground#6e89bb40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2b313dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#d9a9ecff
  • textLink.foreground#d9a9ecff
  • textPreformat.foreground#e3bdf2ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2b313dff
  • titleBar.activeForeground#b9babaff
  • titleBar.inactiveBackground#2b313dff
  • titleBar.inactiveForeground#656870ff
  • widget.shadow#1a202cff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...