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#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorBracketMatch.background#00000000
  • 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#00000000
  • 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#00000000
  • 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#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e0dfd0
meta.embedded, source.groovy.embedded#e0dfd0
comment#7c7c7citalic
string#ede84e
punctuation.definition.template-expression, punctuation.section.embedded#ff0055
meta.template.expression#e0dfd0
constant.numeric#d38efc
constant.language#d38efc
constant.character, constant.other#d38efc
variable#e0dfd0
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#e0dfd0
invalid.deprecated#e0dfd0
meta.structure.dictionary.json string.quoted.double.json#808080
meta.diff, meta.diff.header#7c7c7c
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#ff22aaitalic 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#10b1fe
keyword.control.php#ff22aaitalic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#ffffff
entity.name.tag.html#ff22aabold
entity.other.attribute-name.html#10b1feitalic
string.quoted.double.html#ede84e
comment.block.html#7c7c7citalic
entity.name.tag.css, entity.name.tag.scss, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#4aff97bold
support.type.property-name.css, support.type.property-name.scss#10b1feitalic
support.constant.property-value.css, support.constant.property-value.scss#ffac60
variable.scss, variable.parameter.scss, variable.other.scss, punctuation.definition.variable.scss#d38efc
keyword.control.at-rule#ff22aaitalic
storage.type.js, storage.type.ts, keyword.control.js, keyword.control.ts, keyword.operator.new.js, keyword.operator.new.ts#ff22aaitalic
entity.name.function.js, entity.name.function.ts, support.function.dom.js, support.function.dom.ts#3691ff
variable.language.this#ffac60bold
entity.name.tag.pug, storage.type.pug#ff22aabold
entity.other.attribute-name.tag.pug#10b1feitalic
comment.line.pug, comment.block.pug#7c7c7citalic
string.interpolated.pug#ffac60
Pirulug Theme by Pirulug - VS Code Theme