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#cccccc
  • activityBar.border#e0e0e0
  • activityBar.foreground#0f0f0f
  • activityBarBadge.background#595959
  • activityBarBadge.foreground#f2f2f2
  • badge.background#595959
  • badge.foreground#f2f2f2
  • breadcrumb.activeSelectionForeground#0f0f0f
  • breadcrumb.background#f2f2f2
  • breadcrumb.focusForeground#595959
  • breadcrumb.foreground#a5a5a5
  • breadcrumbPicker.background#f2f2f2
  • button.background#595959
  • button.foreground#f2f2f2
  • button.hoverBackground#7f7f7f
  • debugExceptionWidget.background#e0e0e0
  • debugExceptionWidget.border#7f7f7f
  • diffEditor.insertedTextBackground#59595920
  • diffEditor.removedTextBackground#a5a5a515
  • dropdown.background#f2f2f2
  • dropdown.border#cccccc
  • dropdown.foreground#595959
  • dropdown.listBackground#e0e0e0
  • editor.background#f2f2f2
  • editor.findMatchBackground#7f7f7f50
  • editor.findMatchHighlightBackground#7f7f7f25
  • editor.foreground#0f0f0f
  • editor.inactiveSelectionBackground#a5a5a540
  • editor.lineHighlightBackground#e0e0e0
  • editor.rangeHighlightBackground#7f7f7f15
  • editor.selectionBackground#a5a5a566
  • editor.selectionHighlightBackground#a5a5a544
  • editor.wordHighlightBackground#a5a5a544
  • editor.wordHighlightStrongBackground#a5a5a566
  • editorBracketMatch.background#7f7f7f20
  • editorBracketMatch.border#7f7f7f
  • editorCodeLens.foreground#a5a5a5
  • editorCursor.foreground#0f0f0f
  • editorError.foreground#f14c4c
  • editorGroup.border#cccccc
  • editorGroup.dropBackground#e0e0e0cc
  • editorGroupHeader.noTabsBackground#f2f2f2
  • editorGroupHeader.tabsBackground#e0e0e0
  • editorGroupHeader.tabsBorder#cccccc
  • editorGutter.addedBackground#595959b3
  • editorGutter.background#f2f2f2
  • editorGutter.deletedBackground#a5a5a5b3
  • editorGutter.modifiedBackground#7f7f7fb3
  • editorHoverWidget.background#e0e0e0
  • editorHoverWidget.border#cccccc
  • editorLineNumber.activeForeground#7f7f7f
  • editorLineNumber.foreground#cccccc
  • editorLink.activeForeground#595959
  • editorMarkerNavigation.background#e0e0e0
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#595959
  • editorOverviewRuler.border#cccccc
  • editorOverviewRuler.currentContentForeground#59595920
  • editorOverviewRuler.deletedForeground#a5a5a5
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#7f7f7f50
  • editorOverviewRuler.incomingContentForeground#a5a5a520
  • editorOverviewRuler.infoForeground#7f7f7f
  • editorOverviewRuler.modifiedForeground#7f7f7f
  • editorOverviewRuler.rangeHighlightForeground#a5a5a544
  • editorOverviewRuler.selectionHighlightForeground#a5a5a544
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#a5a5a544
  • editorOverviewRuler.wordHighlightStrongForeground#a5a5a566
  • editorRuler.foreground#cccccc
  • editorSuggestWidget.background#e0e0e0
  • editorSuggestWidget.border#cccccc
  • editorSuggestWidget.foreground#0f0f0f
  • editorSuggestWidget.highlightForeground#0f0f0f
  • editorSuggestWidget.selectedBackground#a5a5a566
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#cccccc66
  • editorWidget.background#e0e0e0
  • editorWidget.border#cccccc
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#595959
  • extensionButton.prominentForeground#f2f2f2
  • extensionButton.prominentHoverBackground#7f7f7f
  • focusBorder#7f7f7f80
  • foreground#595959
  • gitDecoration.conflictingResourceForeground#7f7f7f
  • gitDecoration.deletedResourceForeground#a5a5a5
  • gitDecoration.ignoredResourceForeground#cccccc
  • gitDecoration.modifiedResourceForeground#595959
  • gitDecoration.untrackedResourceForeground#0f0f0f
  • input.background#e0e0e0
  • input.border#cccccc
  • input.foreground#0f0f0f
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#7f7f7f
  • inputValidation.errorBackground#f2f2f2
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#f2f2f2
  • inputValidation.infoBorder#7f7f7f
  • inputValidation.warningBackground#f2f2f2
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#a5a5a566
  • list.activeSelectionForeground#0f0f0f
  • list.dropBackground#a5a5a544
  • list.focusBackground#a5a5a566
  • list.focusForeground#0f0f0f
  • list.highlightForeground#595959
  • list.hoverBackground#e0e0e0
  • list.hoverForeground#0f0f0f
  • list.inactiveFocusBackground#a5a5a540
  • list.inactiveSelectionBackground#a5a5a544
  • list.inactiveSelectionForeground#0f0f0f
  • list.invalidItemForeground#7f7f7f
  • merge.border#7f7f7f80
  • merge.currentContentBackground#59595920
  • merge.currentHeaderBackground#59595940
  • merge.incomingContentBackground#a5a5a520
  • merge.incomingHeaderBackground#a5a5a540
  • notificationCenter.border#7f7f7f
  • notificationCenterHeader.background#595959
  • notificationCenterHeader.foreground#f2f2f2
  • notificationLink.foreground#595959
  • notifications.background#e0e0e0
  • notifications.border#cccccc
  • notifications.foreground#0f0f0f
  • notificationToast.border#cccccc
  • panel.background#f2f2f2
  • panel.border#cccccc
  • panelTitle.activeBorder#595959
  • panelTitle.activeForeground#0f0f0f
  • panelTitle.inactiveForeground#a5a5a5
  • peekView.border#cccccc
  • peekViewEditor.background#e0e0e0
  • peekViewEditor.matchHighlightBackground#7f7f7f30
  • peekViewEditorGutter.background#e0e0e0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#0f0f0f
  • peekViewResult.lineForeground#595959
  • peekViewResult.matchHighlightBackground#7f7f7f30
  • peekViewResult.selectionBackground#a5a5a566
  • peekViewResult.selectionForeground#0f0f0f
  • peekViewTitle.background#f2f2f2
  • peekViewTitleDescription.foreground#a5a5a5
  • peekViewTitleLabel.foreground#0f0f0f
  • pickerGroup.border#cccccc
  • pickerGroup.foreground#a5a5a5
  • progressBar.background#595959
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#a5a5a566
  • scrollbarSlider.background#a5a5a522
  • scrollbarSlider.hoverBackground#a5a5a544
  • selection.background#a5a5a566
  • sideBar.background#e0e0e0
  • sideBar.border#cccccc
  • sideBar.foreground#262626
  • sideBarSectionHeader.background#cccccc
  • sideBarSectionHeader.foreground#595959
  • sideBarTitle.foreground#595959
  • statusBar.background#cccccc
  • statusBar.border#e0e0e0
  • statusBar.debuggingBackground#595959
  • statusBar.debuggingForeground#f2f2f2
  • statusBar.foreground#262626
  • statusBar.noFolderBackground#e0e0e0
  • statusBar.noFolderForeground#595959
  • statusBarItem.activeBackground#a5a5a566
  • statusBarItem.hoverBackground#a5a5a544
  • statusBarItem.prominentBackground#595959
  • statusBarItem.prominentHoverBackground#7f7f7f
  • tab.activeBackground#f2f2f2
  • tab.activeBorder#595959
  • tab.activeForeground#0f0f0f
  • tab.border#cccccc
  • tab.hoverBackground#e0e0e0
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#a5a5a5
  • tab.unfocusedActiveForeground#595959
  • tab.unfocusedHoverBackground#e0e0e0
  • tab.unfocusedInactiveForeground#a5a5a5
  • terminal.ansiBlack#0f0f0f
  • terminal.ansiBlue#1a4870
  • terminal.ansiBrightBlack#7f7f7f
  • terminal.ansiBrightBlue#595959
  • terminal.ansiBrightCyan#595959
  • terminal.ansiBrightGreen#0f0f0f
  • terminal.ansiBrightMagenta#595959
  • terminal.ansiBrightRed#0f0f0f
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#e0e0e0
  • terminal.ansiCyan#1a5860
  • terminal.ansiGreen#2a6030
  • terminal.ansiMagenta#602880
  • terminal.ansiRed#b03030
  • terminal.ansiWhite#595959
  • terminal.ansiYellow#7a6010
  • terminal.background#f2f2f2
  • terminal.foreground#0f0f0f
  • terminal.selectionBackground#a5a5a566
  • titleBar.activeBackground#cccccc
  • titleBar.activeForeground#0f0f0f
  • titleBar.border#e0e0e0
  • titleBar.inactiveBackground#cccccc
  • titleBar.inactiveForeground#a5a5a5
  • walkThrough.embeddedEditorBackground#f2f2f2
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a5a5a5italic
keyword, storage.type, storage.modifier#7c3aeditalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#595959
keyword.control.import, keyword.control.export, keyword.control.from#7c3aed
string, string.quoted, string.template#166534
punctuation.definition.string.begin, punctuation.definition.string.end#15803d
constant.character.escape, constant.other.placeholder#3f6212italic
entity.name.function, meta.function-call, variable.function, support.function#0369a1
entity.name.label#0369a1
entity.name.type.class, entity.name.type, support.class, support.type#92400eitalic
meta.type.annotation, meta.type.parameters#92400eitalic
entity.name.type.module, meta.import variable.other#92400e
variable, variable.name, variable.other#0f0f0f
variable.parameter#1c1c1c
variable.language#7c3aeditalic
variable.other.property, variable.other.object.property, support.variable.property#c2410c
constant.numeric#be185d
constant.language#7c3aed
constant, constant.other, constant.character#be185d
entity.name.tag, meta.tag.sgml#0369a1
entity.name.tag support.class.component#92400e
meta.tag.attribute, entity.other.attribute-name#c2410citalic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#595959
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#a5a5a5
punctuation.accessor#595959
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#92400e
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#c2410c
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#0369a1
meta.property-value.css, support.constant.property-value.css#166534
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#be185ditalic
meta.object-literal.key#c2410c
source.json meta.structure.dictionary.json support.type.property-name.json#0369a1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c2410c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#92400e
*url*, *link*, *uri*#0369a1underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7c3aeditalic
markup.heading, entity.name.section#0f0f0fbold
markup.italic#595959italic
markup.bold#0f0f0fbold
markup.underline#166534underline
markup.strike#a5a5a5strikethrough
markup.quote#7f7f7fitalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#be185d
markup.deleted, punctuation.definition.deleted#a5a5a5
markup.inserted, punctuation.definition.inserted#166534
markup.changed, punctuation.definition.changed#c2410c
entity.other.inherited-class#92400e
invalid, invalid.illegal#f14c4c
token.info-token#7f7f7f
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#a5a5a5
Silver Lining PS Theme by Pranav S S - VS Code Theme