Petrichor Themes

Color themes

• 

  Petrichor Dark

• 

  Petrichor Light

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.activeBorder#0969DA
• activityBar.background#F6F8FA
• activityBar.border#D0D7DE
• activityBar.foreground#24292E
• activityBar.inactiveForeground#8C959F
• activityBarBadge.background#0969DA
• activityBarBadge.foreground#FFFFFF
• badge.background#0969DA
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#0969DA
• breadcrumb.background#FFFFFF
• breadcrumb.focusForeground#24292E
• breadcrumb.foreground#57606A
• button.background#0969DA
• button.foreground#FFFFFF
• button.hoverBackground#0550AE
• button.secondaryBackground#EAEFF5
• button.secondaryForeground#24292E
• button.secondaryHoverBackground#DFE5EC
• descriptionForeground#57606A
• diffEditor.diagonalFill#D8DEE4
• diffEditor.insertedLineBackground#2DA44E14
• diffEditor.insertedTextBackground#2DA44E20
• diffEditor.removedLineBackground#CF222E14
• diffEditor.removedTextBackground#CF222E20
• disabledForeground#8C959F
• dropdown.background#FFFFFF
• dropdown.border#D0D7DE
• dropdown.foreground#24292E
• dropdown.listBackground#FFFFFF
• editor.background#FFFFFF
• editor.findMatchBackground#FFF8C5
• editor.findMatchBorder#D0B507
• editor.findRangeHighlightBackground#F6F8FA
• editor.foreground#24292E
• editor.hoverHighlightBackground#F1F8FF
• editor.inactiveSelectionBackground#AEDAF780
• editor.lineHighlightBackground#F1F8FF
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBackground#F6F8FA
• editor.selectionBackground#AEDAF7
• editor.selectionHighlightBackground#DDF4FF90
• editor.wordHighlightBackground#FFF8C590
• editor.wordHighlightStrongBackground#FFD33D40
• editorBracketMatch.background#F1F8FF
• editorBracketMatch.border#0969DA
• editorCursor.foreground#24292E
• editorError.foreground#B31D28
• editorGroup.border#D0D7DE
• editorGroupHeader.tabsBackground#F6F8FA
• editorGutter.addedBackground#2DA44E
• editorGutter.background#F6F8FA
• editorGutter.deletedBackground#CF222E
• editorGutter.modifiedBackground#0969DA
• editorHoverWidget.background#FFFFFF
• editorHoverWidget.border#D0D7DE
• editorIndentGuide.activeBackground1#B6BDC6
• editorIndentGuide.background1#E5E7EB
• editorInfo.foreground#0969DA
• editorLineNumber.activeForeground#57606A
• editorLineNumber.foreground#BABBBD
• editorOverviewRuler.addedForeground#2DA44E
• editorOverviewRuler.border#00000000
• editorOverviewRuler.deletedForeground#CF222E
• editorOverviewRuler.findMatchForeground#D0B507
• editorOverviewRuler.modifiedForeground#0969DA
• editorSuggestWidget.background#FFFFFF
• editorSuggestWidget.border#D0D7DE
• editorSuggestWidget.foreground#24292E
• editorSuggestWidget.highlightForeground#0969DA
• editorSuggestWidget.selectedBackground#F1F8FF
• editorWarning.foreground#D0B507
• editorWhitespace.foreground#00000000
• editorWidget.background#FFFFFF
• editorWidget.border#D0D7DE
• errorForeground#B31D28
• focusBorder#0969DA
• foreground#24292E
• gitDecoration.addedResourceForeground#1A7F37
• gitDecoration.conflictingResourceForeground#D0B507
• gitDecoration.deletedResourceForeground#CF222E
• gitDecoration.ignoredResourceForeground#8C959F
• gitDecoration.modifiedResourceForeground#0969DA
• gitDecoration.untrackedResourceForeground#1A7F37
• icon.foreground#57606A
• input.background#FFFFFF
• input.border#D0D7DE
• input.foreground#24292E
• input.placeholderForeground#8C959F
• inputOption.activeBackground#F1F8FF
• inputOption.activeBorder#0969DA
• inputValidation.errorBackground#FFEAEA
• inputValidation.errorBorder#B31D28
• inputValidation.infoBackground#DDF4FF
• inputValidation.infoBorder#0969DA
• inputValidation.warningBackground#FFF8C5
• inputValidation.warningBorder#D0B507
• list.activeSelectionBackground#E7F3FF
• list.activeSelectionForeground#24292E
• list.focusBackground#E7F3FF
• list.focusForeground#24292E
• list.highlightForeground#0969DA
• list.hoverBackground#F6F8FA
• list.hoverForeground#24292E
• list.inactiveFocusBackground#F1F8FF
• list.inactiveSelectionBackground#F1F8FF
• list.inactiveSelectionForeground#24292E
• menu.background#FFFFFF
• menu.border#D0D7DE
• menu.foreground#24292E
• menu.selectionBackground#F1F8FF
• menu.selectionForeground#24292E
• menu.separatorBackground#D0D7DE
• minimap.errorHighlight#B31D28
• minimap.findMatchHighlight#D0B507
• minimap.selectionHighlight#AEDAF7
• minimap.warningHighlight#D0B507
• minimapGutter.addedBackground#2DA44E
• minimapGutter.deletedBackground#CF222E
• minimapGutter.modifiedBackground#0969DA
• notificationCenterHeader.background#F6F8FA
• notificationCenterHeader.foreground#24292E
• notifications.background#FFFFFF
• notifications.border#D0D7DE
• notifications.foreground#24292E
• panel.background#FFFFFF
• panel.border#D0D7DE
• panelTitle.activeBorder#0969DA
• panelTitle.activeForeground#24292E
• panelTitle.inactiveForeground#57606A
• peekView.border#D0D7DE
• peekViewEditor.background#FFFFFF
• peekViewEditor.matchHighlightBackground#FFF8C5
• peekViewResult.background#F6F8FA
• peekViewResult.fileForeground#24292E
• peekViewResult.lineForeground#57606A
• peekViewResult.matchHighlightBackground#FFF8C5
• peekViewTitle.background#F1F8FF
• peekViewTitleDescription.foreground#57606A
• peekViewTitleLabel.foreground#24292E
• pickerGroup.border#D0D7DE
• pickerGroup.foreground#0969DA
• progressBar.background#0969DA
• quickInput.background#FFFFFF
• quickInput.foreground#24292E
• quickInputTitle.background#F6F8FA
• scrollbarSlider.activeBackground#57606A66
• scrollbarSlider.background#8C959F40
• scrollbarSlider.hoverBackground#8C959F66
• selection.background#DDF4FF
• sideBar.background#F6F8FA
• sideBar.border#D0D7DE
• sideBar.foreground#24292E
• sideBarSectionHeader.background#F6F8FA
• sideBarSectionHeader.border#D0D7DE
• sideBarSectionHeader.foreground#24292E
• sideBarTitle.foreground#24292E
• statusBar.background#F6F8FA
• statusBar.border#D0D7DE
• statusBar.debuggingBackground#FFF8C5
• statusBar.debuggingForeground#24292E
• statusBar.foreground#24292E
• statusBar.noFolderBackground#F6F8FA
• statusBar.noFolderForeground#24292E
• statusBarItem.hoverBackground#EAEFF5
• tab.activeBackground#FFFFFF
• tab.activeBorderTop#0969DA
• tab.activeForeground#24292E
• tab.border#D0D7DE
• tab.hoverBackground#FFFFFF
• tab.inactiveBackground#F6F8FA
• tab.inactiveForeground#57606A
• tab.unfocusedActiveForeground#57606A
• tab.unfocusedInactiveForeground#8C959F
• terminal.ansiBlack#24292E
• terminal.ansiBlue#0969DA
• terminal.ansiBrightBlack#8C959F
• terminal.ansiBrightBlue#218BFF
• terminal.ansiBrightCyan#1B7C83
• terminal.ansiBrightGreen#2DA44E
• terminal.ansiBrightMagenta#8244FF
• terminal.ansiBrightRed#CF222E
• terminal.ansiBrightWhite#24292E
• terminal.ansiBrightYellow#E3B341
• terminal.ansiCyan#008070
• terminal.ansiGreen#29BB0F
• terminal.ansiMagenta#A100FF
• terminal.ansiRed#B31D28
• terminal.ansiWhite#57606A
• terminal.ansiYellow#D0B507
• terminal.background#FFFFFF
• terminal.foreground#24292E
• terminal.selectionBackground#AEDAF780
• terminalCursor.background#FFFFFF
• terminalCursor.foreground#24292E
• textLink.activeForeground#0550AE
• textLink.foreground#0969DA
• titleBar.activeBackground#FFFFFF
• titleBar.activeForeground#24292E
• titleBar.inactiveBackground#F6F8FA
• titleBar.inactiveForeground#57606A
• tree.indentGuidesStroke#D8DEE4
• widget.shadow#00000014
• window.activeBorder#D0D7DE
• window.inactiveBorder#D8DEE4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).