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#20313aff
  • activityBar.dropBackground#1a2b34ff
  • activityBar.foreground#35a0ffff
  • activityBar.inactiveForeground#51636dff
  • activityBarBadge.background#35a0ffbf
  • activityBarBadge.foreground#eeffffff
  • badge.background#35a0ffbf
  • badge.foreground#eeffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1a2b34ff
  • breadcrumb.focusForeground#dff3ffff
  • breadcrumb.foreground#6d7f8aff
  • breadcrumbPicker.background#20313aff
  • button.background#0069d3ff
  • button.foreground#eeffffff
  • button.hoverBackground#007ae7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#20313aff
  • debugToolBar.background#1a2b34ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#20313aff
  • dropdown.border#20313aff
  • dropdown.foreground#dff3ffff
  • editor.background#1a2b34ff
  • editor.findMatchBackground#59657f40
  • editor.findMatchHighlightBackground#59657f40
  • editor.findRangeHighlightBackground#59657f40
  • editor.focusedStackFrameHighlightBackground#59657f40
  • editor.foreground#cee2eeff
  • editor.hoverHighlightBackground#59657f40
  • editor.inactiveSelectionBackground#59657f20
  • editor.lineHighlightBackground#20313aff
  • editor.lineHighlightBorder#20313aff
  • editor.rangeHighlightBackground#59657f40
  • editor.selectionBackground#59657f40
  • editor.selectionHighlightBackground#59657f20
  • editor.snippetFinalTabstopHighlightBorder#59657f40
  • editor.snippetTabstopHighlightBackground#59657f40
  • editor.stackFrameHighlightBackground#59657f40
  • editor.wordHighlightBackground#59657f20
  • editor.wordHighlightStrongBackground#59657f20
  • editorActiveLineNumber.foreground#6d7f8aff
  • editorBracketMatch.background#59657f20
  • editorBracketMatch.border#5fa8a7ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9bafbaff
  • editorError.foreground#cd4448ff
  • editorGroup.border#20313aff
  • editorGroup.dropBackground#1a2b34ff
  • editorGroupHeader.noTabsBackground#1a2b34ff
  • editorGroupHeader.tabsBackground#20313aff
  • editorGutter.addedBackground#002a1fff
  • editorGutter.background#1a2b34ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#5e0000ff
  • editorGutter.modifiedBackground#122036ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#20313aff
  • editorHoverWidget.border#20313aff
  • editorIndentGuide.activeBackground#30414bff
  • editorIndentGuide.background#273842ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6d7f8aff
  • editorLineNumber.foreground#51636dff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#cd4448ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005144ff
  • editorOverviewRuler.border#20313aff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8f001cff
  • editorOverviewRuler.errorForeground#cd4448bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#39455eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#1a2b34ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#20313aff
  • editorSuggestWidget.border#20313aff
  • editorSuggestWidget.foreground#dff3ffff
  • editorSuggestWidget.highlightForeground#dff3ffff
  • editorSuggestWidget.selectedBackground#273842ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#20313aff
  • editorWidget.border#20313aff
  • errorForeground#cd4448ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#59657fff
  • foreground#cee2eeff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6d7f8aff
  • gitDecoration.modifiedResourceForeground#ab9b60ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#4cac9aff
  • input.background#1a2b34ff
  • input.foreground#dff3ffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#35a0ffff
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#063b49
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#352a05
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#273842ff
  • list.activeSelectionForeground#dff3ffff
  • list.dropBackground#1a2b34ff
  • list.errorForeground#cd4448ff
  • list.focusBackground#273842ff
  • list.highlightForeground#dff3ffff
  • list.hoverBackground#273842ff
  • list.inactiveFocusBackground#273842ff
  • list.inactiveSelectionBackground#273842ff
  • list.inactiveSelectionForeground#dff3ffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#20313aff
  • menu.foreground#acc0cbff
  • menu.selectionBackground#273842ff
  • menu.selectionForeground#dff3ffff
  • menu.separatorBackground#3a4b55ff
  • menubar.selectionBackground#273842ff
  • menubar.selectionForeground#dff3ffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#20313aff
  • notificationLink.foreground#35a0ffff
  • notifications.background#20313aff
  • notifications.border#20313aff
  • panel.background#20313aff
  • panel.border#20313aff
  • panel.dropBackground#1a2b34ff
  • panelTitle.activeBorder#35a0ffff
  • panelTitle.activeForeground#dff3ffff
  • panelTitle.inactiveForeground#9bafbaff
  • peekView.border#20313aff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#20313aff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1a2b34ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#20313aff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#03171fff
  • scrollbarSlider.activeBackground#51636dbf
  • scrollbarSlider.background#3a4b55bf
  • scrollbarSlider.hoverBackground#455761bf
  • settings.checkboxBackground#1a2b34ff
  • settings.checkboxBorder#51636dff
  • settings.checkboxForeground#dff3ffff
  • settings.dropdownBackground#20313aff
  • settings.dropdownBorder#20313aff
  • settings.dropdownForeground#dff3ffff
  • settings.dropdownListBorder#30414bff
  • settings.headerForeground#e0edffff
  • settings.modifiedItemIndicator#59657fff
  • settings.numberInputBackground#20313aff
  • settings.numberInputForeground#dff3ffff
  • settings.textInputBackground#20313aff
  • settings.textInputForeground#dff3ffff
  • sideBar.background#20313aff
  • sideBar.dropBackground#1a2b34ff
  • sideBar.foreground#9bafbaff
  • sideBarSectionHeader.background#20313aff
  • sideBarSectionHeader.foreground#51636dff
  • sideBarTitle.foreground#51636dff
  • statusBar.background#273842ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#9bafbaff
  • statusBar.foreground#9bafbaff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#9bafbaff
  • tab.activeBackground#20313aff
  • tab.activeBorder#35a0ffff
  • tab.activeForeground#dff3ffff
  • tab.activeModifiedBorder#35a0ffbf
  • tab.border#20313aff
  • tab.inactiveBackground#20313aff
  • tab.inactiveForeground#9bafbaff
  • tab.inactiveModifiedBorder#35a0ffbf
  • tab.unfocusedActiveForeground#dff3ffff
  • tab.unfocusedActiveModifiedBorder#35a0ff80
  • tab.unfocusedInactiveForeground#9bafbaff
  • tab.unfocusedInactiveModifiedBorder#35a0ff80
  • terminal.ansiBlack#1a2b34ff
  • terminal.ansiBlue#73bdbbff
  • terminal.ansiBrightBlack#51636dff
  • terminal.ansiBrightBlue#73bdbbff
  • terminal.ansiBrightCyan#5ebdd9ff
  • terminal.ansiBrightGreen#61c0aeff
  • terminal.ansiBrightMagenta#cba2d0ff
  • terminal.ansiBrightRed#ff817dff
  • terminal.ansiBrightWhite#eeffffff
  • terminal.ansiBrightYellow#bfae73ff
  • terminal.ansiCyan#5ebdd9ff
  • terminal.ansiGreen#005144ff
  • terminal.ansiMagenta#cba2d0ff
  • terminal.ansiRed#8f001cff
  • terminal.ansiWhite#cee2eeff
  • terminal.ansiYellow#bfae73ff
  • terminal.background#1a2b34ff
  • terminal.border#20313aff
  • terminal.foreground#cee2eeff
  • terminal.selectionBackground#59657f40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#20313aff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#35a0ffff
  • textLink.foreground#35a0ffff
  • textPreformat.foreground#cba2d0ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#20313aff
  • titleBar.activeForeground#9bafbaff
  • titleBar.inactiveBackground#20313aff
  • titleBar.inactiveForeground#51636dff
  • widget.shadow#0f2129ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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