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#283141ff
  • activityBar.dropBackground#222b3cff
  • activityBar.foreground#cd9ae2ff
  • activityBar.inactiveForeground#5c6270ff
  • activityBarBadge.background#cd9ae2bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#cd9ae2bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#222b3cff
  • breadcrumb.focusForeground#efeff1ff
  • breadcrumb.foreground#787d89ff
  • breadcrumbPicker.background#283141ff
  • button.background#9b6bb0ff
  • button.foreground#ffffffff
  • button.hoverBackground#ab7ac0ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#283141ff
  • debugToolBar.background#222b3cff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#283141ff
  • dropdown.border#283141ff
  • dropdown.foreground#efeff1ff
  • editor.background#222b3cff
  • editor.findMatchBackground#5f7fb540
  • editor.findMatchHighlightBackground#5f7fb540
  • editor.findRangeHighlightBackground#5f7fb540
  • editor.focusedStackFrameHighlightBackground#5f7fb540
  • editor.foreground#dedfe2ff
  • editor.hoverHighlightBackground#5f7fb540
  • editor.inactiveSelectionBackground#5f7fb520
  • editor.lineHighlightBackground#283141ff
  • editor.lineHighlightBorder#283141ff
  • editor.rangeHighlightBackground#5f7fb540
  • editor.selectionBackground#5f7fb540
  • editor.selectionHighlightBackground#5f7fb520
  • editor.snippetFinalTabstopHighlightBorder#5f7fb540
  • editor.snippetTabstopHighlightBackground#5f7fb540
  • editor.stackFrameHighlightBackground#5f7fb540
  • editor.wordHighlightBackground#5f7fb520
  • editor.wordHighlightStrongBackground#5f7fb520
  • editorActiveLineNumber.foreground#787d89ff
  • editorBracketMatch.background#5f7fb520
  • editorBracketMatch.border#8faee8ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a9acb4ff
  • editorError.foreground#cd7073ff
  • editorGroup.border#283141ff
  • editorGroup.dropBackground#222b3cff
  • editorGroupHeader.noTabsBackground#222b3cff
  • editorGroupHeader.tabsBackground#283141ff
  • editorGutter.addedBackground#004d26ff
  • editorGutter.background#222b3cff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#75202bff
  • editorGutter.modifiedBackground#194273ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#283141ff
  • editorHoverWidget.border#283141ff
  • editorIndentGuide.activeBackground#394151ff
  • editorIndentGuide.background#303848ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#787d89ff
  • editorLineNumber.foreground#5c6270ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cd7073ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#007146ff
  • editorOverviewRuler.border#283141ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9d444aff
  • editorOverviewRuler.errorForeground#cd7073bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#426398ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#222b3cff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#283141ff
  • editorSuggestWidget.border#283141ff
  • editorSuggestWidget.foreground#efeff1ff
  • editorSuggestWidget.highlightForeground#efeff1ff
  • editorSuggestWidget.selectedBackground#303848ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#283141ff
  • editorWidget.border#283141ff
  • errorForeground#cd7073ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5f7fb5ff
  • foreground#dedfe2ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#787d89ff
  • gitDecoration.modifiedResourceForeground#d6a167ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#60be8eff
  • input.background#222b3cff
  • input.foreground#efeff1ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#cd9ae2ff
  • inputValidation.errorBackground#5a0117ff
  • inputValidation.errorBorder#812c34ff
  • inputValidation.infoBackground#222b3cff
  • inputValidation.infoBorder#434a5aff
  • inputValidation.warningBackground#462000ff
  • inputValidation.warningBorder#6a4008ff
  • list.activeSelectionBackground#303848ff
  • list.activeSelectionForeground#efeff1ff
  • list.dropBackground#222b3cff
  • list.errorForeground#cd7073ff
  • list.focusBackground#303848ff
  • list.highlightForeground#efeff1ff
  • list.hoverBackground#303848ff
  • list.inactiveFocusBackground#303848ff
  • list.inactiveSelectionBackground#303848ff
  • list.inactiveSelectionForeground#efeff1ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#283141ff
  • menu.foreground#babdc3ff
  • menu.selectionBackground#303848ff
  • menu.selectionForeground#efeff1ff
  • menu.separatorBackground#434a5aff
  • menubar.selectionBackground#303848ff
  • menubar.selectionForeground#efeff1ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#283141ff
  • notificationLink.foreground#cd9ae2ff
  • notifications.background#283141ff
  • notifications.border#283141ff
  • panel.background#283141ff
  • panel.border#283141ff
  • panel.dropBackground#222b3cff
  • panelTitle.activeBorder#cd9ae2ff
  • panelTitle.activeForeground#efeff1ff
  • panelTitle.inactiveForeground#a9acb4ff
  • peekView.border#283141ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#283141ff
  • 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#283141ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#0d1626ff
  • scrollbarSlider.activeBackground#5c6270bf
  • scrollbarSlider.background#434a5abf
  • scrollbarSlider.hoverBackground#4f5664bf
  • settings.checkboxBackground#222b3cff
  • settings.checkboxBorder#5c6270ff
  • settings.checkboxForeground#efeff1ff
  • settings.dropdownBackground#283141ff
  • settings.dropdownBorder#283141ff
  • settings.dropdownForeground#efeff1ff
  • settings.dropdownListBorder#394151ff
  • settings.headerForeground#d3f1ffff
  • settings.modifiedItemIndicator#5f7fb5ff
  • settings.numberInputBackground#283141ff
  • settings.numberInputForeground#efeff1ff
  • settings.textInputBackground#283141ff
  • settings.textInputForeground#efeff1ff
  • sideBar.background#283141ff
  • sideBar.dropBackground#222b3cff
  • sideBar.foreground#a9acb4ff
  • sideBarSectionHeader.background#283141ff
  • sideBarSectionHeader.foreground#5c6270ff
  • sideBarTitle.foreground#5c6270ff
  • statusBar.background#303848ff
  • statusBar.debuggingBackground#89550fff
  • statusBar.debuggingForeground#a9acb4ff
  • statusBar.foreground#a9acb4ff
  • statusBar.noFolderBackground#693382ff
  • statusBar.noFolderForeground#a9acb4ff
  • tab.activeBackground#283141ff
  • tab.activeBorder#cd9ae2ff
  • tab.activeForeground#efeff1ff
  • tab.activeModifiedBorder#cd9ae2bf
  • tab.border#283141ff
  • tab.inactiveBackground#283141ff
  • tab.inactiveForeground#a9acb4ff
  • tab.inactiveModifiedBorder#cd9ae2bf
  • tab.unfocusedActiveForeground#efeff1ff
  • tab.unfocusedActiveModifiedBorder#cd9ae280
  • tab.unfocusedInactiveForeground#a9acb4ff
  • tab.unfocusedInactiveModifiedBorder#cd9ae280
  • terminal.ansiBlack#222b3cff
  • terminal.ansiBlue#a0bff9ff
  • terminal.ansiBrightBlack#5c6270ff
  • terminal.ansiBrightBlue#a0bff9ff
  • terminal.ansiBrightCyan#47cef1ff
  • terminal.ansiBrightGreen#71d09eff
  • terminal.ansiBrightMagenta#d8afe8ff
  • terminal.ansiBrightRed#ffa1a2ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e8b177ff
  • terminal.ansiCyan#47cef1ff
  • terminal.ansiGreen#007146ff
  • terminal.ansiMagenta#d8afe8ff
  • terminal.ansiRed#9d444aff
  • terminal.ansiWhite#dedfe2ff
  • terminal.ansiYellow#e8b177ff
  • terminal.background#222b3cff
  • terminal.border#283141ff
  • terminal.foreground#dedfe2ff
  • terminal.selectionBackground#5f7fb540
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#283141ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#cd9ae2ff
  • textLink.foreground#cd9ae2ff
  • textPreformat.foreground#d8afe8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#283141ff
  • titleBar.activeForeground#a9acb4ff
  • titleBar.inactiveBackground#283141ff
  • titleBar.inactiveForeground#5c6270ff
  • widget.shadow#172031ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...