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#041021ff
  • activityBar.dropBackground#00051bff
  • activityBar.foreground#099ceaff
  • activityBar.inactiveForeground#404757ff
  • activityBarBadge.background#099ceabf
  • activityBarBadge.foreground#fcffffff
  • badge.background#099ceabf
  • badge.foreground#fcffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#00051bff
  • breadcrumb.focusForeground#e8edf7ff
  • breadcrumb.foreground#606776ff
  • breadcrumbPicker.background#041021ff
  • button.background#005fa7ff
  • button.foreground#fcffffff
  • button.hoverBackground#0073bcff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#041021ff
  • debugToolBar.background#00051bff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#041021ff
  • dropdown.border#041021ff
  • dropdown.foreground#e8edf7ff
  • editor.background#00051bff
  • editor.findMatchBackground#0059a740
  • editor.findMatchHighlightBackground#0059a740
  • editor.findRangeHighlightBackground#0059a740
  • editor.focusedStackFrameHighlightBackground#0059a740
  • editor.foreground#d4d9e4ff
  • editor.hoverHighlightBackground#0059a740
  • editor.inactiveSelectionBackground#0059a720
  • editor.lineHighlightBackground#041021ff
  • editor.lineHighlightBorder#041021ff
  • editor.rangeHighlightBackground#0059a740
  • editor.selectionBackground#0059a740
  • editor.selectionHighlightBackground#0059a720
  • editor.snippetFinalTabstopHighlightBorder#0059a740
  • editor.snippetTabstopHighlightBackground#0059a740
  • editor.stackFrameHighlightBackground#0059a740
  • editor.wordHighlightBackground#0059a720
  • editor.wordHighlightStrongBackground#0059a720
  • editorActiveLineNumber.foreground#606776ff
  • editorBracketMatch.background#0059a720
  • editorBracketMatch.border#2996ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a6b399ff
  • editorError.foreground#d30021ff
  • editorGroup.border#041021ff
  • editorGroup.dropBackground#00051bff
  • editorGroupHeader.noTabsBackground#00051bff
  • editorGroupHeader.tabsBackground#041021ff
  • editorGutter.addedBackground#002500ff
  • editorGutter.background#00051bff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#570000ff
  • editorGutter.modifiedBackground#001050ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#041021ff
  • editorHoverWidget.border#041021ff
  • editorIndentGuide.activeBackground#192233ff
  • editorIndentGuide.background#0f1929ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#606776ff
  • editorLineNumber.foreground#404757ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d30021ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#004601ff
  • editorOverviewRuler.border#041021ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8c0000ff
  • editorOverviewRuler.errorForeground#d30021bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#00387fff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#00051bff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#041021ff
  • editorSuggestWidget.border#041021ff
  • editorSuggestWidget.foreground#e8edf7ff
  • editorSuggestWidget.highlightForeground#e8edf7ff
  • editorSuggestWidget.selectedBackground#0f1929ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#041021ff
  • editorWidget.border#041021ff
  • errorForeground#d30021ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#0059a7ff
  • foreground#d4d9e4ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#606776ff
  • gitDecoration.modifiedResourceForeground#909900ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ad5dff
  • input.background#00051bff
  • input.foreground#e8edf7ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#099ceaff
  • inputValidation.errorBackground#500000ff
  • inputValidation.errorBorder#660000ff
  • inputValidation.infoBackground#00051bff
  • inputValidation.infoBorder#252d3eff
  • inputValidation.warningBackground#1d0800ff
  • inputValidation.warningBorder#291d00ff
  • list.activeSelectionBackground#0f1929ff
  • list.activeSelectionForeground#e8edf7ff
  • list.dropBackground#00051bff
  • list.errorForeground#d30021ff
  • list.focusBackground#0f1929ff
  • list.highlightForeground#e8edf7ff
  • list.hoverBackground#0f1929ff
  • list.inactiveFocusBackground#0f1929ff
  • list.inactiveSelectionBackground#0f1929ff
  • list.inactiveSelectionForeground#e8edf7ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#041021ff
  • menu.foreground#acb1beff
  • menu.selectionBackground#0f1929ff
  • menu.selectionForeground#e8edf7ff
  • menu.separatorBackground#252d3eff
  • menubar.selectionBackground#0f1929ff
  • menubar.selectionForeground#e8edf7ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#041021ff
  • notificationLink.foreground#099ceaff
  • notifications.background#041021ff
  • notifications.border#041021ff
  • panel.background#041021ff
  • panel.border#041021ff
  • panel.dropBackground#00051bff
  • panelTitle.activeBorder#099ceaff
  • panelTitle.activeForeground#e8edf7ff
  • panelTitle.inactiveForeground#989dabff
  • peekView.border#041021ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#041021ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#00051bff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#041021ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000119ff
  • scrollbarSlider.activeBackground#404757bf
  • scrollbarSlider.background#252d3ebf
  • scrollbarSlider.hoverBackground#32394abf
  • settings.checkboxBackground#00051bff
  • settings.checkboxBorder#404757ff
  • settings.checkboxForeground#e8edf7ff
  • settings.dropdownBackground#041021ff
  • settings.dropdownBorder#041021ff
  • settings.dropdownForeground#e8edf7ff
  • settings.dropdownListBorder#192233ff
  • settings.headerForeground#bbedffff
  • settings.modifiedItemIndicator#0059a7ff
  • settings.numberInputBackground#041021ff
  • settings.numberInputForeground#e8edf7ff
  • settings.textInputBackground#041021ff
  • settings.textInputForeground#e8edf7ff
  • sideBar.background#041021ff
  • sideBar.dropBackground#00051bff
  • sideBar.foreground#989dabff
  • sideBarSectionHeader.background#041021ff
  • sideBarSectionHeader.foreground#404757ff
  • sideBarTitle.foreground#404757ff
  • statusBar.background#0f1929ff
  • statusBar.debuggingBackground#7d0000ff
  • statusBar.debuggingForeground#989dabff
  • statusBar.foreground#989dabff
  • statusBar.noFolderBackground#340057ff
  • statusBar.noFolderForeground#989dabff
  • tab.activeBackground#041021ff
  • tab.activeBorder#099ceaff
  • tab.activeForeground#e8edf7ff
  • tab.activeModifiedBorder#099ceabf
  • tab.border#041021ff
  • tab.inactiveBackground#041021ff
  • tab.inactiveForeground#989dabff
  • tab.inactiveModifiedBorder#099ceabf
  • tab.unfocusedActiveForeground#e8edf7ff
  • tab.unfocusedActiveModifiedBorder#099cea80
  • tab.unfocusedInactiveForeground#989dabff
  • tab.unfocusedInactiveModifiedBorder#099cea80
  • terminal.ansiBlack#000119ff
  • terminal.ansiBlue#0073dfff
  • terminal.ansiBrightBlack#5d677cff
  • terminal.ansiBrightBlue#008fffff
  • terminal.ansiBrightCyan#00bcecff
  • terminal.ansiBrightGreen#00d581ff
  • terminal.ansiBrightMagenta#ff69ffff
  • terminal.ansiBrightRed#ff3442ff
  • terminal.ansiBrightWhite#dbe6feff
  • terminal.ansiBrightYellow#f3f600ff
  • terminal.ansiCyan#00acdeff
  • terminal.ansiGreen#00c06fff
  • terminal.ansiMagenta#ff69ffff
  • terminal.ansiRed#db0726ff
  • terminal.ansiWhite#dbe6feff
  • terminal.ansiYellow#e3e600ff
  • terminal.background#00051bff
  • terminal.border#041021ff
  • terminal.foreground#d4d9e4ff
  • terminal.selectionBackground#0059a740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#041021ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#099ceaff
  • textLink.foreground#099ceaff
  • textPreformat.foreground#ff69ffff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#041021ff
  • titleBar.activeForeground#989dabff
  • titleBar.inactiveBackground#041021ff
  • titleBar.inactiveForeground#404757ff
  • widget.shadow#000119ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...