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#0d1017
  • activityBar.border#333D3D
  • activityBar.dropBackground#0d1117
  • activityBar.foreground#e0dfd0
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#ff0055
  • activityBarBadge.foreground#e0dfd0
  • badge.background#333D3D
  • badge.foreground#e0dfd0
  • breadcrumb.activeSelectionForeground#ff0055
  • breadcrumb.background#0d1017
  • breadcrumb.focusForeground#ff0055
  • breadcrumb.foreground#e0dfd0
  • breadcrumbPicker.background#0d1117
  • button.background#ff0055
  • button.foreground#0d1017
  • debugExceptionWidget.background#0d1117
  • debugExceptionWidget.border#333D3D
  • descriptionForeground#808080
  • diffEditor.insertedTextBackground#3D4F3B
  • diffEditor.insertedTextBorder#FFFFFF4D
  • diffEditor.removedTextBackground#5E2629
  • diffEditor.removedTextBorder#FFFFFF4D
  • dropdown.background#0d1117
  • dropdown.border#333D3D
  • dropdown.foreground#e0dfd0
  • dropdown.listBackground#0d1117
  • editor.background#0d1017
  • editor.findMatchBackground#ff00553D
  • editor.findMatchHighlightBackground#ff00551F
  • editor.foreground#e0dfd0
  • editor.hoverHighlightBackground#8080801F
  • editor.inactiveSelectionBackground#ff00551F
  • editor.lineHighlightBackground#8080800F
  • editor.rangeHighlightBackground#333D3D
  • editor.selectionBackground#ff00553D
  • editor.wordHighlightBackground#FFFFFF00
  • editor.wordHighlightStrongBackground#FFFFFF00
  • editorBracketMatch.background#FFFFFF00
  • editorBracketMatch.border#8080804D
  • editorCodeLens.foreground#808080
  • editorCursor.foreground#ff0055
  • editorError.border#0d1017
  • editorError.foreground#E15A60
  • editorGroup.border#333D3D
  • editorGroup.dropBackground#333D3D
  • editorGroup.emptyBackground#0d1017
  • editorGroup.focusedEmptyBorder#ff0055
  • editorGroupHeader.noTabsBackground#333D3D
  • editorGroupHeader.tabsBackground#0d1117
  • editorGroupHeader.tabsBorder#333D3D
  • editorGutter.addedBackground#4aff97
  • editorGutter.background#0d1017
  • editorGutter.deletedBackground#E15A60
  • editorGutter.modifiedBackground#3691ff
  • editorHoverWidget.background#0d1117
  • editorHoverWidget.border#333D3D
  • editorIndentGuide.activeBackground#808080
  • editorIndentGuide.background#8080801F
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#808080
  • editorLink.activeForeground#3691ff
  • editorMarkerNavigation.background#0d1117
  • editorMarkerNavigationError.background#E15A60
  • editorMarkerNavigationWarning.background#ede84e
  • editorOverviewRuler.addedForeground#4aff97
  • editorOverviewRuler.border#333D3D
  • editorOverviewRuler.currentContentForeground#A94348
  • editorOverviewRuler.deletedForeground#E15A60
  • editorOverviewRuler.errorForeground#E15A60
  • editorOverviewRuler.findMatchForeground#ff00550F
  • editorOverviewRuler.incomingContentForeground#A94348
  • editorOverviewRuler.infoForeground#3691ff
  • editorOverviewRuler.modifiedForeground#3691ff
  • editorOverviewRuler.rangeHighlightForeground#ff00550F
  • editorOverviewRuler.selectionHighlightForeground#ff00550F
  • editorOverviewRuler.warningForeground#ede84e
  • editorOverviewRuler.wordHighlightForeground#ff00550F
  • editorOverviewRuler.wordHighlightStrongForeground#ff00550F
  • editorRuler.foreground#8080801F
  • editorSuggestWidget.background#0d1117
  • editorSuggestWidget.border#333D3D
  • editorSuggestWidget.foreground#e0dfd0
  • editorSuggestWidget.selectedBackground#333D3D
  • editorWarning.border#0d1017
  • editorWarning.foreground#ede84e
  • editorWhitespace.foreground#808080
  • editorWidget.background#0d1117
  • editorWidget.border#333D3D
  • errorForeground#E15A60
  • extensionButton.prominentBackground#A94348
  • extensionButton.prominentForeground#e0dfd0
  • extensionButton.prominentHoverBackground#A94348
  • focusBorder#333D3D
  • foreground#e0dfd0
  • gitDecoration.conflictingResourceForeground#E15A60
  • gitDecoration.deletedResourceForeground#E15A60
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#3691ff
  • gitDecoration.untrackedResourceForeground#4aff97
  • input.background#0d1017
  • input.border#333D3D
  • input.foreground#e0dfd0
  • input.placeholderForeground#808080
  • inputOption.activeBorder#808080
  • inputValidation.errorBackground#E15A60
  • inputValidation.errorBorder#E15A60
  • inputValidation.errorForeground#e0dfd0
  • inputValidation.infoBackground#3691ff
  • inputValidation.infoBorder#3691ff
  • inputValidation.infoForeground#e0dfd0
  • inputValidation.warningBackground#ede84e
  • inputValidation.warningBorder#ede84e
  • inputValidation.warningForeground#0d1017
  • list.activeSelectionBackground#333D3D
  • list.activeSelectionForeground#e0dfd0
  • list.dropBackground#333D3D
  • list.errorForeground#E15A60
  • list.focusBackground#333D3D
  • list.focusForeground#e0dfd0
  • list.highlightForeground#e0dfd0
  • list.hoverBackground#333D3D
  • list.hoverForeground#e0dfd0
  • list.inactiveFocusBackground#333D3D
  • list.inactiveSelectionBackground#333D3D
  • list.inactiveSelectionForeground#e0dfd0
  • list.invalidItemForeground#E15A60
  • list.warningForeground#ede84e
  • listFilterWidget.background#0d1017
  • listFilterWidget.noMatchesOutline#E15A60
  • listFilterWidget.outline#333D3D
  • merge.border#30373A
  • merge.currentContentBackground#0d1117
  • merge.currentHeaderBackground#0d1117
  • merge.incomingContentBackground#0d1117
  • merge.incomingHeaderBackground#0d1117
  • notificationCenter.border#333D3D
  • notificationCenterHeader.background#0d1117
  • notificationCenterHeader.foreground#e0dfd0
  • notificationLink.foreground#3691ff
  • notifications.background#0d1117
  • notifications.border#333D3D
  • notifications.foreground#e0dfd0
  • notificationToast.border#333D3D
  • panel.background#0d1017
  • panel.border#30373A
  • panelTitle.activeBorder#30373A
  • panelTitle.activeForeground#e0dfd0
  • panelTitle.inactiveForeground#808080
  • peekView.border#30373A
  • peekViewEditor.background#0d1117
  • peekViewEditor.matchHighlightBackground#FFFFFF1F
  • peekViewEditorGutter.background#0d1117
  • peekViewResult.background#0d1117
  • peekViewResult.fileForeground#e0dfd0
  • peekViewResult.lineForeground#e0dfd0
  • peekViewResult.matchHighlightBackground#FFFFFF1F
  • peekViewResult.selectionBackground#30373A
  • peekViewResult.selectionForeground#e0dfd0
  • peekViewTitle.background#0d1117
  • peekViewTitleDescription.foreground#808080
  • peekViewTitleLabel.foreground#e0dfd0
  • pickerGroup.border#30373A
  • pickerGroup.foreground#808080
  • progressBar.background#ede84e
  • scrollbar.shadow#FFFFFF00
  • scrollbarSlider.activeBackground#333D3D
  • scrollbarSlider.background#FFFFFF0F
  • scrollbarSlider.hoverBackground#FFFFFF1F
  • selection.background#ff0055
  • settings.checkboxBackground#0d1117
  • settings.checkboxBorder#30373A
  • settings.checkboxForeground#e0dfd0
  • settings.dropdownBackground#0d1117
  • settings.dropdownBorder#30373A
  • settings.dropdownForeground#e0dfd0
  • settings.headerForeground#e0dfd0
  • settings.modifiedItemIndicator#3691ff
  • settings.numberInputBackground#0d1117
  • settings.numberInputBorder#30373A
  • settings.numberInputForeground#e0dfd0
  • settings.textInputBackground#0d1117
  • settings.textInputBorder#30373A
  • settings.textInputForeground#e0dfd0
  • sideBar.background#0d1117
  • sideBar.border#333D3D
  • sideBar.dropBackground#333D3D
  • sideBar.foreground#e0dfd0
  • sideBarSectionHeader.background#0d1017
  • sideBarSectionHeader.border#FFFFFF00
  • sideBarSectionHeader.foreground#e0dfd0
  • sideBarTitle.foreground#e0dfd0
  • statusBar.background#0d1017
  • statusBar.border#30373A
  • statusBar.debuggingBackground#0d1017
  • statusBar.debuggingForeground#e0dfd0
  • statusBar.foreground#808080
  • statusBar.noFolderBackground#0d1017
  • statusBar.noFolderForeground#808080
  • statusBarItem.activeBackground#0d1017
  • statusBarItem.hoverBackground#0d1017
  • statusBarItem.prominentBackground#0d1017
  • statusBarItem.prominentHoverBackground#0d1017
  • tab.activeBackground#0d1017
  • tab.activeForeground#e0dfd0
  • tab.activeModifiedBorder#3691ff
  • tab.border#333D3D
  • tab.hoverBackground#333D3D
  • tab.inactiveBackground#0d1117
  • tab.inactiveForeground#808080
  • tab.inactiveModifiedBorder#3691ff
  • tab.unfocusedActiveForeground#e0dfd0
  • tab.unfocusedActiveModifiedBorder#3691ff
  • tab.unfocusedHoverBackground#333D3D
  • tab.unfocusedInactiveForeground#808080
  • tab.unfocusedInactiveModifiedBorder#3691ff
  • terminal.ansiBlack#808080
  • terminal.ansiBlue#3691ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#3691ff
  • terminal.ansiBrightCyan#10b1fe
  • terminal.ansiBrightGreen#4aff97
  • terminal.ansiBrightMagenta#ff22aa
  • terminal.ansiBrightRed#E15A60
  • terminal.ansiBrightWhite#e0dfd0
  • terminal.ansiBrightYellow#ede84e
  • terminal.ansiCyan#10b1fe
  • terminal.ansiGreen#4aff97
  • terminal.ansiMagenta#ff22aa
  • terminal.ansiRed#E15A60
  • terminal.ansiWhite#e0dfd0
  • terminal.ansiYellow#ede84e
  • terminal.border#30373A
  • textBlockQuote.background#0d1117
  • textBlockQuote.border#333D3D
  • textCodeBlock.background#f00
  • textLink.activeForeground#3691ff
  • textLink.foreground#3691ff
  • textPreformat.foreground#10b1fe
  • textSeparator.foreground#f00
  • titleBar.activeBackground#0d1017
  • titleBar.activeForeground#808080
  • titleBar.border#30373A
  • titleBar.inactiveBackground#0d1017
  • titleBar.inactiveForeground#808080
  • tree.indentGuidesStroke#333D3D
  • walkThrough.embeddedEditorBackground#0d1117
  • welcomePage.buttonBackground#0d1117
  • welcomePage.buttonHoverBackground#30373A
  • widget.shadow#FFFFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
meta.embedded, source.groovy.embedded#F8F8F2
comment#7c7c7citalic
string#ede84e
punctuation.definition.template-expression, punctuation.section.embedded#ff0055
meta.template.expression#F8F8F2
constant.numeric#d38efc
constant.language#d38efc
constant.character, constant.other#d38efc
variable#F8F8F2
keyword#ff22aaitalic
storage#ff22aa
storage.type#10b1feitalic
entity.name.type, entity.name.class#4aff97underline
entity.other.inherited-class#4aff97italic underline
entity.name.function#4aff97
variable.parameter#ffac60italic
entity.name.tag#ff22aa
entity.other.attribute-name#4aff97
support.function#10b1fe
support.constant#10b1fe
support.type, support.class#10b1feitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#ff22aa
markup.inserted#4aff97
markup.changed#ede84e
constant.numeric.line-number.find-in-files - match#d38efc
entity.name.filename.find-in-files#ede84e
markup.quote#ff22aa
markup.list#ede84e
markup.bold, markup.italic#10b1fe
markup.inline.raw#ffac60
markup.heading#4aff97
markup.heading.setext#4aff97
token.info-token#3691ff
token.warn-token#ffac60
token.error-token#E15A60
token.debug-token#ffac60
variable.language#ffac60
entity.name.type.class.php, entity.other.inherited-class.php#d38efcitalic bold
entity.name.function.php, support.function.construct.php, support.function.magic.php#3691ffitalic bold
storage.modifier.extends.php, storage.modifier.php#ffac60italic bold
support.function.php, support.function.string.php, support.function.array.php#4aff97italic bold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#d38efcbold
variable.other.php, variable.other.property.php, variable.other.readwrite.php#22ffb0
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ff22aa
entity.other.attribute-name.html#10b1febold
comment.block.html#7c7c7citalic
variable.scss, variable.parameter.scss, variable.other.scss#2de2e6
constant.numeric.scss, keyword.other.unit.scss#f6c177
string.quoted.single.scss, string.quoted.double.scss#f1fa8c
entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss#ff79c6
support.type.property-name.scss#8be9fd
punctuation.definition.variable.scss#caa9fa
support.type.property-name.json, string.quoted.double.json, string.quoted.single.js#8be9fd
support.type.property-name.json#d0525e
entity.other.attribute-name.tag.pug, string.quoted.pug
string.interpolated.pug#E15A60