Skip to main content
Coding Theme

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#3e3e3eff
  • activityBar.dropBackground#383838ff
  • activityBar.foreground#88a1ddff
  • activityBar.inactiveForeground#6d6d6dff
  • activityBarBadge.background#88a1ddbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#88a1ddbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#383838ff
  • breadcrumb.focusForeground#f1f1f1ff
  • breadcrumb.foreground#878787ff
  • breadcrumbPicker.background#3e3e3eff
  • button.background#516ca4ff
  • button.foreground#ffffffff
  • button.hoverBackground#637db7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#3e3e3eff
  • debugToolBar.background#383838ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#3e3e3eff
  • dropdown.border#3e3e3eff
  • dropdown.foreground#f1f1f1ff
  • editor.background#383838ff
  • editor.findMatchBackground#616c8940
  • editor.findMatchHighlightBackground#616c8940
  • editor.findRangeHighlightBackground#616c8940
  • editor.focusedStackFrameHighlightBackground#616c8940
  • editor.foreground#e1e1e1ff
  • editor.hoverHighlightBackground#616c8940
  • editor.inactiveSelectionBackground#616c8920
  • editor.lineHighlightBackground#3e3e3eff
  • editor.lineHighlightBorder#3e3e3eff
  • editor.rangeHighlightBackground#616c8940
  • editor.selectionBackground#616c8940
  • editor.selectionHighlightBackground#616c8920
  • editor.snippetFinalTabstopHighlightBorder#616c8940
  • editor.snippetTabstopHighlightBackground#616c8940
  • editor.stackFrameHighlightBackground#616c8940
  • editor.wordHighlightBackground#616c8920
  • editor.wordHighlightStrongBackground#616c8920
  • editorActiveLineNumber.foreground#878787ff
  • editorBracketMatch.background#616c8920
  • editorBracketMatch.border#88a1ddff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#fbcd40ff
  • editorError.foreground#d24c60ff
  • editorGroup.border#3e3e3eff
  • editorGroup.dropBackground#383838ff
  • editorGroupHeader.noTabsBackground#383838ff
  • editorGroupHeader.tabsBackground#3e3e3eff
  • editorGutter.addedBackground#192e00ff
  • editorGutter.background#383838ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#680013ff
  • editorGutter.modifiedBackground#1d2942ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#3e3e3eff
  • editorHoverWidget.border#3e3e3eff
  • editorIndentGuide.activeBackground#4d4d4dff
  • editorIndentGuide.background#454545ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#878787ff
  • editorLineNumber.foreground#6d6d6dff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d24c60ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#3c541cff
  • editorOverviewRuler.border#3e3e3eff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#980a34ff
  • editorOverviewRuler.errorForeground#d24c60bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#424d68ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#383838ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#3e3e3eff
  • editorSuggestWidget.border#3e3e3eff
  • editorSuggestWidget.foreground#f1f1f1ff
  • editorSuggestWidget.highlightForeground#f1f1f1ff
  • editorSuggestWidget.selectedBackground#454545ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#3e3e3eff
  • editorWidget.border#3e3e3eff
  • errorForeground#d24c60ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#616c89ff
  • foreground#e1e1e1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#878787ff
  • gitDecoration.modifiedResourceForeground#c09a55ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#90a96bff
  • input.background#383838ff
  • input.foreground#f1f1f1ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#88a1ddff
  • inputValidation.errorBackground#4a0000ff
  • inputValidation.errorBorder#77001cff
  • inputValidation.infoBackground#383838ff
  • inputValidation.infoBorder#575757ff
  • inputValidation.warningBackground#2a0900ff
  • inputValidation.warningBorder#482e00ff
  • list.activeSelectionBackground#454545ff
  • list.activeSelectionForeground#f1f1f1ff
  • list.dropBackground#383838ff
  • list.errorForeground#d24c60ff
  • list.focusBackground#454545ff
  • list.highlightForeground#f1f1f1ff
  • list.hoverBackground#454545ff
  • list.inactiveFocusBackground#454545ff
  • list.inactiveSelectionBackground#454545ff
  • list.inactiveSelectionForeground#f1f1f1ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#3e3e3eff
  • menu.foreground#c2c2c2ff
  • menu.selectionBackground#454545ff
  • menu.selectionForeground#f1f1f1ff
  • menu.separatorBackground#575757ff
  • menubar.selectionBackground#454545ff
  • menubar.selectionForeground#f1f1f1ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#3e3e3eff
  • notificationLink.foreground#88a1ddff
  • notifications.background#3e3e3eff
  • notifications.border#3e3e3eff
  • panel.background#3e3e3eff
  • panel.border#3e3e3eff
  • panel.dropBackground#383838ff
  • panelTitle.activeBorder#88a1ddff
  • panelTitle.activeForeground#f1f1f1ff
  • panelTitle.inactiveForeground#b2b2b2ff
  • peekView.border#3e3e3eff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#3e3e3eff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#383838ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3e3e3eff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#232323ff
  • scrollbarSlider.activeBackground#6d6d6dbf
  • scrollbarSlider.background#575757bf
  • scrollbarSlider.hoverBackground#616161bf
  • settings.checkboxBackground#383838ff
  • settings.checkboxBorder#6d6d6dff
  • settings.checkboxForeground#f1f1f1ff
  • settings.dropdownBackground#3e3e3eff
  • settings.dropdownBorder#3e3e3eff
  • settings.dropdownForeground#f1f1f1ff
  • settings.dropdownListBorder#4d4d4dff
  • settings.headerForeground#e2edffff
  • settings.modifiedItemIndicator#616c89ff
  • settings.numberInputBackground#3e3e3eff
  • settings.numberInputForeground#f1f1f1ff
  • settings.textInputBackground#3e3e3eff
  • settings.textInputForeground#f1f1f1ff
  • sideBar.background#3e3e3eff
  • sideBar.dropBackground#383838ff
  • sideBar.foreground#b2b2b2ff
  • sideBarSectionHeader.background#3e3e3eff
  • sideBarSectionHeader.foreground#6d6d6dff
  • sideBarTitle.foreground#6d6d6dff
  • statusBar.background#454545ff
  • statusBar.debuggingBackground#862f13ff
  • statusBar.debuggingForeground#b2b2b2ff
  • statusBar.foreground#b2b2b2ff
  • statusBar.noFolderBackground#49245aff
  • statusBar.noFolderForeground#b2b2b2ff
  • tab.activeBackground#3e3e3eff
  • tab.activeBorder#88a1ddff
  • tab.activeForeground#f1f1f1ff
  • tab.activeModifiedBorder#88a1ddbf
  • tab.border#3e3e3eff
  • tab.inactiveBackground#3e3e3eff
  • tab.inactiveForeground#b2b2b2ff
  • tab.inactiveModifiedBorder#88a1ddbf
  • tab.unfocusedActiveForeground#f1f1f1ff
  • tab.unfocusedActiveModifiedBorder#88a1dd80
  • tab.unfocusedInactiveForeground#b2b2b2ff
  • tab.unfocusedInactiveModifiedBorder#88a1dd80
  • terminal.ansiBlack#000000ff
  • terminal.ansiBlue#91aae7ff
  • terminal.ansiBrightBlack#6d6f7fff
  • terminal.ansiBrightBlue#91aae7ff
  • terminal.ansiBrightCyan#abd8ecff
  • terminal.ansiBrightGreen#cbe5a4ff
  • terminal.ansiBrightMagenta#cda5e6ff
  • terminal.ansiBrightRed#ee6576ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#f7cd85ff
  • terminal.ansiCyan#abd8ecff
  • terminal.ansiGreen#cbe5a4ff
  • terminal.ansiMagenta#cda5e6ff
  • terminal.ansiRed#ee6576ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#f7cd85ff
  • terminal.background#383838ff
  • terminal.border#3e3e3eff
  • terminal.foreground#e1e1e1ff
  • terminal.selectionBackground#616c8940
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#3e3e3eff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#88a1ddff
  • textLink.foreground#88a1ddff
  • textPreformat.foreground#cda5e6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#3e3e3eff
  • titleBar.activeForeground#b2b2b2ff
  • titleBar.inactiveBackground#3e3e3eff
  • titleBar.inactiveForeground#6d6d6dff
  • widget.shadow#2d2d2dff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...