Dark Petrol

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.activeBackground#4b5553
• activityBar.activeBorder#73c0b4
• activityBar.activeFocusBorder#73c0b4
• activityBar.background#111a18
• activityBar.border#28786e
• activityBar.dropBorder#28786e
• activityBar.foreground#c5c8c6
• activityBar.inactiveForeground#7d807e
• activityBarBadge.background#18211f
• activityBarBadge.foreground#c5c8c6
• activityBarTop.activeBackground#4b5553
• activityBarTop.activeBorder#73c0b4
• activityBarTop.background#111a18
• activityBarTop.dropBorder#28786e
• activityBarTop.foreground#c5c8c6
• activityBarTop.inactiveForeground#00372f
• badge.background#28786e
• badge.foreground#c5c8c6
• breadcrumb.background#2b3e3b
• breadcrumb.foreground#c5c8c6
• button.background#28786e
• button.border#47c6b5
• button.foreground#c5c8c6
• button.hoverBackground#8cd9cd80
• button.secondaryBackground#28786e
• button.secondaryForeground#c5c8c6
• button.secondaryHoverBackground#8cd9cd80
• button.separator#47c6b5
• chat.avatarBackground#18211f
• chat.avatarForeground#c5c8c6
• chat.requestBackground#18211f
• chat.requestBorder#c5c8c6
• chat.slashCommandBackground#18211f
• chat.slashCommandForeground#c5c8c6
• checkbox.background#5f819d
• checkbox.border#5f819d
• checkbox.foreground#c5c8c6
• checkbox.selectBackground#a7c9e7
• checkbox.selectBorder#a7c9e7
• commandCenter.activeBackground#6a7f7c
• commandCenter.activeBorder#98b6b1
• commandCenter.activeForeground#ffffff
• commandCenter.background#2b3e3b
• commandCenter.foreground#c5c8c6
• commandCenter.inactiveForeground#7d807e
• debugConsole.errorForeground#c5c8c6
• debugConsole.infoForeground#c5c8c6
• debugConsole.sourceForeground#c5c8c6
• debugConsole.warningForeground#c5c8c6
• debugConsoleInputIcon.foreground#c5c8c6
• debugExceptionWidget.background#a54242
• debugExceptionWidget.border#cc6666
• debugIcon.continueForeground#c5c8c6
• debugIcon.disconnectForeground#c5c8c6
• debugIcon.pauseForeground#c5c8c6
• debugIcon.restartForeground#c5c8c6
• debugIcon.startForeground#c5c8c6
• debugIcon.stepBackForeground#c5c8c6
• debugIcon.stepIntoForeground#c5c8c6
• debugIcon.stepOutForeground#c5c8c6
• debugIcon.stepOverForeground#c5c8c6
• debugIcon.stopForeground#c5c8c6
• debugTokenExpression.boolean#5f819d
• debugTokenExpression.error#c5c8c6
• debugTokenExpression.name#5e8d87
• debugTokenExpression.number#cfe3e0
• debugTokenExpression.string#d29656
• debugTokenExpression.type#cfe3e0
• debugTokenExpression.value#5e8d87
• debugToolBar.background#845214
• debugView.exceptionLabelBackground#d29656
• debugView.exceptionLabelForeground#c5c8c6
• debugView.stateLabelBackground#a54242
• debugView.stateLabelForeground#c5c8c6
• debugView.valueChangedHighlight#5f819d
• descriptionForeground#c5c8c6
• diffEditor.diagonalFill#141d1b
• diffEditor.insertedLineBackground#c0e2ff33
• diffEditor.insertedTextBackground#c0e2ff40
• diffEditor.removedLineBackground#ffc8c433
• diffEditor.removedTextBackground#ffc8c440
• diffEditorGutter.insertedLineBackground#c0e2ff33
• diffEditorGutter.removedLineBackground#ffc8c433
• disabledForeground#7d807e
• dropdown.background#28786e
• dropdown.border#47c6b5
• dropdown.foreground#c5c8c6
• dropdown.listBackground#28786e
• editor.background#141d1b
• editor.findMatchBackground#28786e59
• editor.findMatchForeground#c5c8c6
• editor.findMatchHighlightBackground#28786e59
• editor.findMatchHighlightForeground#c5c8c6
• editor.findRangeHighlightBackground#c5c8c6
• editor.focusedStackFrameHighlightBackground#5f819df2
• editor.foreground#c5c8c6
• editor.hoverHighlightBackground#c0e2ff59
• editor.inactiveSelectionBackground#00000059
• editor.inlineValuesBackground#d29656
• editor.inlineValuesForeground#cfe3e0
• editor.lineHighlightBackground#5f819d59
• editor.placeholder.foreground#c5c8c6
• editor.rangeHighlightBackground#5f819d59
• editor.selectionBackground#ffffff59
• editor.selectionForeground#ffffff
• editor.selectionHighlightBackground#656f6d59
• editor.selectionHighlightBorder#bef0e959
• editor.stackFrameHighlightBackground#5f819df2
• editor.symbolHighlightBackground#5f819d59
• editor.wordHighlightBackground#5f819d59
• editor.wordHighlightStrongBackground#5f819d59
• editor.wordHighlightTextBackground#5f819d59
• editorActionList.background#28786e
• editorActionList.focusBackground#73c0b4
• editorActionList.focusForeground#ffffff
• editorActionList.foreground#c5c8c6
• editorBracketHighlight.foreground1#c5c8c6
• editorBracketHighlight.foreground2#c5c8c6
• editorBracketHighlight.foreground3#c5c8c6
• editorBracketHighlight.foreground4#c5c8c6
• editorBracketHighlight.foreground5#c5c8c6
• editorBracketHighlight.foreground6#c5c8c6
• editorBracketHighlight.unexpectedBracket.foreground#c5c8c6
• editorBracketMatch.background#5f819d8c
• editorBracketPairGuide.activeBackground1#28786e8c
• editorBracketPairGuide.activeBackground2#5e8d878c
• editorBracketPairGuide.activeBackground3#5f819d8c
• editorBracketPairGuide.activeBackground4#85678f8c
• editorBracketPairGuide.activeBackground5#a542428c
• editorBracketPairGuide.activeBackground6#eb983e8c
• editorBracketPairGuide.background1#28786e59
• editorBracketPairGuide.background2#5e8d8759
• editorBracketPairGuide.background3#5f819d59
• editorBracketPairGuide.background4#85678f59
• editorBracketPairGuide.background5#a5424259
• editorBracketPairGuide.background6#eb983e59
• editorCursor.background#656f6d80
• editorCursor.foreground#ffffff
• editorError.background#a5424259
• editorError.foreground#c5c8c6
• editorGhostText.background#5e8d87
• editorGhostText.border#c5c8c6
• editorGhostText.foreground#c5c8c6
• editorGroup.border#28786e
• editorGroup.dropBackground#111a18
• editorGroup.dropIntoPromptBackground#69747180
• editorGroup.dropIntoPromptBorder#ffffff80
• editorGroup.dropIntoPromptForeground#ffffff
• editorGroup.emptyBackground#18211f
• editorGroup.focusedEmptyBorder#ffffff
• editorGroupHeader.border#c5c8c6
• editorGroupHeader.noTabsBackground#111a18
• editorGroupHeader.tabsBackground#18211f
• editorGroupHeader.tabsBorder#c5c8c6
• editorGutter.background#111a18
• editorHoverWidget.background#18211f
• editorHoverWidget.border#c5c8c6
• editorHoverWidget.foreground#c5c8c6
• editorHoverWidget.highlightForeground#c5c8c6
• editorHoverWidget.statusBarBackground#5f819d
• editorInfo.background#5f819d
• editorInfo.border#5f819d
• editorInfo.foreground#c5c8c6
• editorLineNumber.activeForeground#ffffff
• editorLineNumber.dimmedForeground#7d807e
• editorLineNumber.foreground#c5c8c6
• editorLink.activeForeground#c5c8c6
• editorMarkerNavigation.background#18211f
• editorMarkerNavigationError.background#a54242
• editorMarkerNavigationError.headerBackground#a54242
• editorMarkerNavigationInfo.background#5f819d
• editorMarkerNavigationInfo.headerBackground#5f819d
• editorMarkerNavigationWarning.background#d29656
• editorMarkerNavigationWarning.headerBackground#d29656
• editorMultiCursor.primary.background#656f6d80
• editorMultiCursor.primary.foreground#ffffff
• editorMultiCursor.secondary.background#606b6880
• editorMultiCursor.secondary.foreground#ffffff
• editorOverviewRuler.addedForeground#5f819d
• editorOverviewRuler.background#111a1859
• editorOverviewRuler.bracketMatchForeground#c5c8c6
• editorOverviewRuler.commentForeground#d29656
• editorOverviewRuler.commentUnresolvedForeground#d29656
• editorOverviewRuler.commonContentForeground#c5c8c6
• editorOverviewRuler.currentContentForeground#c5c8c6
• editorOverviewRuler.deletedForeground#cc6666
• editorOverviewRuler.errorForeground#c5c8c6
• editorOverviewRuler.findMatchForeground#c5c8c6
• editorOverviewRuler.incomingContentForeground#c5c8c6
• editorOverviewRuler.infoForeground#c5c8c6
• editorOverviewRuler.inlineChatInserted#5f819d
• editorOverviewRuler.inlineChatRemoved#5f819d
• editorOverviewRuler.modifiedForeground#47c6b5
• editorOverviewRuler.rangeHighlightForeground#c5c8c6
• editorOverviewRuler.selectionHighlightForeground#c5c8c6
• editorOverviewRuler.warningForeground#c5c8c6
• editorOverviewRuler.wordHighlightForeground#c5c8c6
• editorOverviewRuler.wordHighlightStrongForeground#c5c8c6
• editorOverviewRuler.wordHighlightTextForeground#c5c8c6
• editorPane.background#141d1b
• editorStickyScroll.background#111a18
• editorStickyScroll.border#28786e
• editorSuggestWidget.background#2b3e3b
• editorSuggestWidget.border#c5c8c6
• editorSuggestWidget.focusHightlightForeground#ffffff
• editorSuggestWidget.foreground#c5c8c6
• editorSuggestWidget.highlightForeground#ffffff
• editorSuggestWidget.selectedBackground#6a7f7c
• editorSuggestWidget.selectedForeground#ffffff
• editorSuggestWidget.selectedIconForeground#ffffff
• editorSuggestWidgetStatus.foreground#ffffff
• editorUnnecessaryCode.border#eb983e
• editorUnnecessaryCode.opacity#eb983e
• editorWarning.background#d2965659
• editorWarning.foreground#c5c8c6
• editorWidget.background#18211f
• editorWidget.border#c5c8c6
• editorWidget.foreground#c5c8c6
• editorWidget.resizeBorder#c5c8c6
• errorForeground#c5c8c6
• focusBorder#5e8d8700
• foreground#c5c8c6
• gitDecoration.addedResourceForeground#5f819d
• gitDecoration.conflictingResourceForeground#c5c8c6
• gitDecoration.deletedResourceForeground#cc6666
• gitDecoration.ignoredResourceForeground#cfe3e0
• gitDecoration.modifiedResourceForeground#47c6b5
• gitDecoration.renamedResourceForeground#47c6b5
• gitDecoration.stageDeletedResourceForeground#ffaeac
• gitDecoration.stageModifiedResourceForeground#9affff
• gitDecoration.submoduleResourceForeground#c5c8c6
• gitDecoration.untrackedResourceForeground#cfe3e0
• icon.foreground#c5c8c6
• inlineChat.background#2b3e3b
• inlineChat.border#536f6b
• inlineChat.foreground#c5c8c6
• inlineChat.shadow#2b3e3b
• inlineChatDiff.inserted#000000
• inlineChatDiff.removed#000000
• inlineChatInput.background#2b3e3b
• inlineChatInput.border#536f6b
• inlineChatInput.focusBorder#98b6b1
• inlineChatInput.placeholderForeground#c5c8c6
• input.background#28786e
• input.border#47c6b5
• input.foreground#c5c8c6
• input.placeholderForeground#7d807e
• inputOption.activeBackground#a7c9e7
• inputOption.activeBorder:#a7c9e7
• inputOption.activeForeground:#ffffff
• inputOption.hoverBackground:#c0e2ff80
• inputValidation.errorBackground#a54242
• inputValidation.errorBorder#cc6666
• inputValidation.errorForeground#c5c8c6
• inputValidation.infoBackground#5f819d
• inputValidation.infoBorder#5f819d
• inputValidation.infoForeground#c5c8c6
• inputValidation.warningBackground#d29656
• inputValidation.warningBorder#eb983e
• inputValidation.warningForeground#c5c8c6
• interactive.activeCodeBorder#535e5b
• interactive.inactiveCodeBorder#000000
• keybindingLabel.background#28786e
• keybindingLabel.foreground#c5c8c6
• list.activeSelectionBackground#4b5553
• list.activeSelectionForeground#ffffff
• list.activeSelectionIconForeground#ffffff
• list.deemphasizedForeground#5f819d
• list.dropBackground#111a18
• list.dropBetweenBackground#5f819d
• list.errorForeground#c5c8c6
• list.filterMatchBackground#28786e
• list.filterMatchBorder#47c6b5
• list.focusAndSelectionOutline#73c0b4
• list.focusBackground#4b5553
• list.focusForeground#ffffff
• list.focusHighlightForeground#ffffff
• list.focusOutline#8cd9cd80
• list.highlightForeground#ffffff
• list.hoverBackground#606b6880
• list.hoverForeground#ffffff
• list.inactiveFocusBackground#000000
• list.inactiveFocusOutline#00372f
• list.inactiveSelectionBackground#000000
• list.inactiveSelectionForeground#7d807e
• list.inactiveSelectionIconForeground#7d807e
• list.invalidItemForeground#c5c8c6
• list.warningForeground#c5c8c6
• listFilterWidget.background#5f819d
• listFilterWidget.noMatchesOutline#cc6666
• listFilterWidget.outline#5f819d
• listFilterWidget.shadow#5f819d
• menu.background#0b1614
• menu.foreground#c5c8c6
• menu.selectionBackground#5c666480
• menu.selectionForeground#ffffff
• menu.separatorBackground#0b1614
• menubar.selectionBackground#5c666480
• menubar.selectionForeground#ffffff
• merge.commonContentBackground#5f819dbf
• merge.commonHeaderBackground#5f819d8c
• merge.currentContentBackground#5f819df2
• merge.currentHeaderBackground#5f819dbf
• merge.incomingContentBackground#d29656bf
• merge.incomingHeaderBackground#d296568c
• mergeEditor.change.background#000000
• mergeEditor.change.word.background#000000
• mergeEditor.conflict.handled.minimapOverViewRuler#000000
• mergeEditor.conflict.unhandled.minimapOverViewRuler#000000
• mergeEditor.conflictingLines.background#000000
• minimap.background#69747180
• minimap.errorHighlight#ffa19b80
• minimap.findMatchHighlight#8cd9cd80
• minimap.foregroundOpacity#ffffff
• minimap.infoHighlight#ffffff
• minimap.selectionHighlight#c0e2ff80
• minimap.selectionOccurrenceHighlight#c0e2ff80
• minimap.warningHighlight#fffab580
• minimapGutter.addedBackground#55555580
• minimapGutter.deletedBackground#55555580
• minimapGutter.modifiedBackground#55555580
• minimapSlider.activeBackground#535e5b
• minimapSlider.background#535e5b
• minimapSlider.hoverBackground#69747180
• notificationCenterHeader.background#18211f
• notificationCenterHeader.foreground#c5c8c6
• notificationLink.foreground#c5c8c6
• notifications.background#2b3e3b
• notifications.foreground#c5c8c6
• notificationsErrorIcon.foreground#c5c8c6
• notificationsInfoIcon.foreground#c5c8c6
• notificationsWarningIcon.foreground#c5c8c6
• outputView.background#111a18
• outputViewStickyScroll.background#111a18
• panel.background#111a18
• panelSection.dropBackground#0b1614
• panelSectionHeader.background#0b1614
• panelStickyScroll.background#111a18
• peekView.border#c5c8c6
• peekViewEditor.background#18211f
• peekViewEditor.matchHighlightBackground#535e5b
• peekViewEditor.matchHighlightBorder#ffffff
• peekViewEditorGutter.background#18211f
• peekViewEditorStickyScroll.background#18211f
• peekViewResult.background#18211f
• peekViewResult.fileForeground#c5c8c6
• peekViewResult.lineForeground#7d807e
• peekViewResult.matchHighlightBackground#ffffff
• peekViewResult.selectionBackground#535e5b
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#18211f
• peekViewTitleDescription.foreground#c5c8c6
• peekViewTitleLabel.foreground#c5c8c6
• pickerGroup.border#8abeb7
• pickerGroup.foreground#ffffff
• problemsErrorIcon.foreground#c5c8c6
• problemsInfoIcon.foreground#c5c8c6
• problemsWarningIcon.foreground#c5c8c6
• profileBadge.background#18211f
• profileBadge.foreground#c5c8c6
• profiles.sashBorder#c5c8c6
• progressBar.background#5f819d
• quickInput.background#0b1614
• quickInput.foreground#c5c8c6
• quickInputList.focusBackground#47514e
• quickInputList.focusForeground#ffffff
• quickInputList.focusIconForeground#ffffff
• quickInputTitle.background#0b1614
• radio.activeBackground#a7c9e7
• radio.activeBorder#a7c9e7
• radio.activeForeground#ffffff
• radio.inactiveBackground#1a4059
• radio.inactiveBorder#1a4059
• radio.inactiveForeground#7d807e
• radio.inactiveHoverBackground#c0e2ff80
• scmGraph.historyItemGroupBase#c5c8c6
• scmGraph.historyItemGroupLocal#c5c8c6
• scmGraph.historyItemGroupRemote#c5c8c6
• scmGraph.historyItemHoverAdditionsForeground#c0e2ff
• scmGraph.historyItemHoverDeletionsForeground#ffc8c4
• scmGraph.historyItemHoverLabelForeground#c5c8c6
• scrollbar.shadow#18211f
• scrollbarSlider.activeBackground#535e5b
• scrollbarSlider.background#18211f
• scrollbarSlider.hoverBackground#69747180
• search.resultsInfoForeground#c5c8c6
• searchEditor.findMatchBackground#28786e
• selection.background#4f5957
• sideBar.background#0b1614
• sideBar.border#8abeb7
• sideBar.dropBackground#0b1614
• sideBar.foreground#c5c8c6
• sideBarActivityBarTop.border#5e8d87
• sideBarSectionHeader.background#141d1b
• sideBarSectionHeader.border#5e8d87
• sideBarSectionHeader.foreground#c5c8c6
• sideBarStickyScroll.background#5f819d
• sideBarStickyScroll.border#5f819d
• sideBarStickyScroll.shadow#5f819d
• sideBarTitle.background#141d1b
• sideBarTitle.foreground#c5c8c6
• sideBySideEditor.horizontalBorder#5e8d87
• sideBySideEditor.verticalBorder#5e8d87
• statusBar.background#0b1614
• statusBar.debuggingBackground#d29656
• statusBar.debuggingForeground#c5c8c6
• statusBar.foreground#c5c8c6
• statusBarItem.compactHoverBackground#5c666480
• statusBarItem.errorBackground#a54242
• statusBarItem.errorForeground#c5c8c6
• statusBarItem.errorHoverBackground#ffa19b80
• statusBarItem.errorHoverForeground#ffffff
• statusBarItem.hoverBackground#5c666480
• statusBarItem.hoverForeground#ffffff
• statusBarItem.prominentBackground#141d1b
• statusBarItem.prominentForeground#c5c8c6
• statusBarItem.prominentHoverBackground#656f6d80
• statusBarItem.prominentHoverForeground#ffffff
• statusBarItem.remoteBackground#5f819d
• statusBarItem.remoteForeground#c5c8c6
• statusBarItem.remoteHoverBackground#c0e2ff80
• statusBarItem.remoteHoverForeground#ffffff
• statusBarItem.warningBackground#d29656
• statusBarItem.warningForeground#c5c8c6
• statusBarItem.warningHoverBackground#fffab580
• statusBarItem.warningHoverForeground#ffffff
• tab.activeBackground#47514e
• tab.activeBorder#d4ffff
• tab.activeBorderTop#d4ffff
• tab.activeForeground#ffffff
• tab.activeModifiedBorder#9affff
• tab.border#8abeb7
• tab.dragAndDropBorder#eeffff80
• tab.hoverBackground#5c666480
• tab.hoverBorder#eeffff80
• tab.hoverForeground#ffffff
• tab.inactiveBackground#0b1614
• tab.inactiveForeground#7d807e
• tab.inactiveModifiedBorder#007d6f
• tab.lastPinnedBorder#8abeb7
• tab.selectedBackground#47514e
• tab.selectedBorderTop#d4ffff
• tab.selectedForeground#ffffff
• tab.unfocusedActiveBackground#000000
• tab.unfocusedActiveBorder#8abeb7
• tab.unfocusedActiveBorderTop#d4ffff
• tab.unfocusedActiveForeground#ffffff
• tab.unfocusedActiveModifiedBorder#007d6f
• tab.unfocusedHoverBackground#5c666480
• tab.unfocusedHoverBorder#eeffff80
• tab.unfocusedHoverForeground#ffffff
• tab.unfocusedInactiveBackground#0b1614
• tab.unfocusedInactiveForeground#7d807e
• tab.unfocusedInactiveModifiedBorder#007d6f
• terminal.ansiBlack#2b3e3b
• terminal.ansiBlue#5f819d
• terminal.ansiBrightBlack#536f6b
• terminal.ansiBrightBlue#5f819d
• terminal.ansiBrightCyan#8abeb7
• terminal.ansiBrightGreen#47c6b5
• terminal.ansiBrightMagenta#85678f
• terminal.ansiBrightRed#cc6666
• terminal.ansiBrightWhite#cfe3e0
• terminal.ansiBrightYellow#d29656
• terminal.ansiCyan#5e8d87
• terminal.ansiGreen#28786e
• terminal.ansiMagenta#85678f
• terminal.ansiRed#a54242
• terminal.ansiWhite#c5c8c6
• terminal.ansiYellow#eb983e
• terminal.background#0b1614
• terminal.dropBackground#c5c8c6
• terminal.findMatchBackground#7d807e1a
• terminal.findMatchHighlightBackground#ffffff1a
• terminal.foreground#c5c8c6
• terminal.hoverHighlightBackground#ffffff1a
• terminal.inactiveSelectionBackground#7d807e1a
• terminal.initialHintForeground#c5c8c6
• terminal.selectionBackground#ffffff1a
• terminal.tab.activeBorder#47514e
• terminalCommandDecoration.defaultBackground#c5c8c6
• terminalCommandDecoration.errorBackground#c5c8c6
• terminalCommandDecoration.successBackground#c5c8c6
• terminalCommandGuide.foreground#c5c8c6
• terminalCursor.background#0b1614
• terminalCursor.foreground#ffffff
• terminalOverviewRuler.border#c5c8c6
• terminalOverviewRuler.cursorForeground#c5c8c6
• terminalOverviewRuler.findMatchForeground#c5c8c6
• terminalStickyScroll.background#c5c8c6
• terminalStickyScroll.border#c5c8c6
• terminalStickyScrollHover.background#c5c8c6
• textBlockQuote.background#141d1b
• textBlockQuote.border#5e8d87
• textCodeBlock.background#141d1b
• textLink.activeForeground#ffffff
• textLink.foreground#c5c8c6
• textPreformat.background#141d1b
• textPreformat.foreground#c5c8c6
• textSeparator.foreground#c5c8c6
• titleBar.activeBackground#111a18
• titleBar.activeForeground#c5c8c6
• titleBar.inactiveBackground#000000
• titleBar.inactiveForeground#7d807e
• toolbar.activeBackground#a5d6d0
• toolbar.hoverBackground#bef0e980
• toolbar.hoverOutline#8abeb7
• tree.inactiveIndentGuidesStroke#00372f
• tree.indentGuidesStroke#28786e
• tree.tableColumnsBorder#28786e
• tree.tableOddRowsBackground#111a18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).