Eclipse Dark

Color themes

• 

  Eclipse Penumbra

• 

  Eclipse Umbra

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#282C34
• activityBar.activeBorder#4D78CC
• activityBar.background#21252B
• activityBar.border#21252B
• activityBar.foreground#D7DAE0
• activityBar.inactiveForeground#5C6370
• activityBarBadge.background#4D78CC
• activityBarBadge.foreground#FFFFFF
• activityBarTop.activeBorder#4D78CC
• activityBarTop.foreground#D7DAE0
• activityBarTop.inactiveForeground#5C6370
• badge.background#4D78CC
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#FFFFFF
• breadcrumb.background#282C34
• breadcrumb.focusForeground#D7DAE0
• breadcrumb.foreground#8F939A
• breadcrumbPicker.background#21252B
• button.background#4D78CC
• button.foreground#FFFFFF
• button.hoverBackground#6189D6
• button.secondaryBackground#3A3F4B
• charts.blue#61AFEF
• charts.foreground#ABB2BF
• charts.green#98C379
• charts.lines#5C6370
• charts.orange#D19A66
• charts.purple#C678DD
• charts.red#E06C75
• charts.yellow#D19A66
• chat.avatarBackground#4D78CC
• chat.avatarForeground#FFFFFF
• chat.requestBorder#3A3F4B
• chat.slashCommandBackground#2C313A
• chat.slashCommandForeground#61AFEF
• debugConsole.errorForeground#F44747
• debugConsole.infoForeground#61AFEF
• debugConsole.sourceForeground#ABB2BF
• debugConsole.warningForeground#D19A66
• debugConsoleInputIcon.foreground#61AFEF
• debugExceptionWidget.background#21252B
• debugExceptionWidget.border#F44747
• debugIcon.breakpointDisabledForeground#5C6370
• debugIcon.breakpointForeground#E06C75
• debugIcon.breakpointUnverifiedForeground#D19A66
• debugTokenExpression.boolean#D19A66
• debugTokenExpression.error#F44747
• debugTokenExpression.name#61AFEF
• debugTokenExpression.number#D19A66
• debugTokenExpression.string#98C379
• debugTokenExpression.value#ABB2BF
• debugToolBar.background#21252B
• debugView.stateLabelBackground#21252B
• debugView.stateLabelForeground#ABB2BF
• debugView.valueChangedHighlight#61AFEF30
• descriptionForeground#8F939A
• diffEditor.diagonalFill#3A3F4B
• diffEditor.insertedLineBackground#98C37915
• diffEditor.insertedTextBackground#98C37920
• diffEditor.removedLineBackground#E06C7515
• diffEditor.removedTextBackground#E06C7520
• diffEditor.unchangedCodeBackground#282c34
• diffEditorGutter.insertedLineBackground#98C37940
• diffEditorGutter.removedLineBackground#E06C7540
• diffEditorOverview.insertedForeground#98C37980
• diffEditorOverview.removedForeground#E06C7580
• disabledForeground#5C6370
• dropdown.background#21252B
• dropdown.border#3A3F4B
• dropdown.foreground#C5C8C6
• dropdown.listBackground#282C34
• editor.background#282C34
• editor.findMatchBackground#D19A6650
• editor.findMatchBorder#D19A66
• editor.findMatchHighlightBackground#D19A6630
• editor.findRangeHighlightBackground#3E4451
• editor.focusedStackFrameHighlightBackground#98C37930
• editor.foldBackground#282C34
• editor.foreground#ABB2BF
• editor.inactiveSelectionBackground#3E445180
• editor.lineHighlightBackground#2C313A
• editor.lineHighlightBorder#2C313A
• editor.rangeHighlightBackground#3E4451
• editor.selectionBackground#3E4451
• editor.selectionHighlightBackground#3E445190
• editor.stackFrameHighlightBackground#D19A6630
• editor.wordHighlightBackground#485261
• editor.wordHighlightStrongBackground#525E71
• editorBracketHighlight.foreground1#56B6C2
• editorBracketHighlight.foreground2#C678DD
• editorBracketHighlight.foreground3#D19A66
• editorBracketHighlight.foreground4#98C379
• editorBracketHighlight.foreground5#61AFEF
• editorBracketHighlight.foreground6#E06C75
• editorBracketHighlight.unexpectedBracket.foreground#F44747
• editorBracketMatch.background#3E4451
• editorBracketMatch.border#5C6370
• editorBracketPairGuide.activeBackground1#56B6C250
• editorBracketPairGuide.activeBackground2#C678DD50
• editorBracketPairGuide.activeBackground3#D19A6650
• editorBracketPairGuide.activeBackground4#98C37950
• editorBracketPairGuide.activeBackground5#61AFEF50
• editorBracketPairGuide.activeBackground6#E06C7550
• editorBracketPairGuide.background1#3A3F4B
• editorBracketPairGuide.background2#3A3F4B
• editorBracketPairGuide.background3#3A3F4B
• editorBracketPairGuide.background4#3A3F4B
• editorBracketPairGuide.background5#3A3F4B
• editorBracketPairGuide.background6#3A3F4B
• editorCodeLens.foreground#5C6370
• editorCursor.foreground#61AFEF
• editorError.foreground#F44747
• editorGhostText.foreground#5C6370
• editorGroup.border#21252B
• editorGroup.dropBackground#3A3F4B
• editorGroup.emptyBackground#282C34
• editorGroupHeader.border#21252B
• editorGroupHeader.noTabsBackground#21252B
• editorGroupHeader.tabsBackground#21252B
• editorGroupHeader.tabsBorder#21252B
• editorGutter.addedBackground#98C37980
• editorGutter.deletedBackground#E06C7580
• editorGutter.modifiedBackground#61AFEF80
• editorHint.foreground#61AFEF
• editorHoverWidget.background#21252B
• editorHoverWidget.border#3A3F4B
• editorIndentGuide.activeBackground1#5C6370
• editorIndentGuide.background1#3A3F4B
• editorInfo.foreground#61AFEF
• editorInlayHint.background#282C3400
• editorInlayHint.foreground#5C6370
• editorLightBulb.foreground#D19A66
• editorLightBulbAutoFix.foreground#D19A66
• editorLineNumber.activeForeground#ABB2BF
• editorLineNumber.foreground#5C6370
• editorLink.activeForeground#61AFEF
• editorMarkerNavigation.background#282C34
• editorOverviewRuler.addedForeground#98C37980
• editorOverviewRuler.border#21252B
• editorOverviewRuler.bracketMatchForeground#A0A8B3
• editorOverviewRuler.deletedForeground#E06C7580
• editorOverviewRuler.errorForeground#F44747
• editorOverviewRuler.findMatchForeground#D19A6650
• editorOverviewRuler.infoForeground#61AFEF
• editorOverviewRuler.modifiedForeground#61AFEF80
• editorOverviewRuler.rangeHighlightForeground#3E4451
• editorOverviewRuler.selectionHighlightForeground#3E4451
• editorOverviewRuler.warningForeground#D19A66
• editorOverviewRuler.wordHighlightForeground#485261
• editorOverviewRuler.wordHighlightStrongForeground#525E71
• editorPane.background#282C34
• editorRuler.foreground#3A3F4B
• editorSuggestWidget.background#21252B
• editorSuggestWidget.border#3A3F4B
• editorSuggestWidget.highlightForeground#61AFEF
• editorSuggestWidget.selectedBackground#2C313A
• editorWarning.foreground#D19A66
• editorWhitespace.foreground#484E5B
• editorWidget.background#21252B
• editorWidget.border#3A3F4B
• editorWidget.foreground#ABB2BF
• editorWidget.resizeBorder#3A3F4B
• errorForeground#F44747
• extensionBadge.remoteBackground#4D78CC
• extensionBadge.remoteForeground#FFFFFF
• extensionButton.prominentBackground#4D78CC
• extensionButton.prominentForeground#FFFFFF
• extensionButton.prominentHoverBackground#6189D6
• focusBorder#4D78CC
• foreground#C5C8C6
• gitDecoration.addedResourceForeground#98C379
• gitDecoration.conflictingResourceForeground#D19A66
• gitDecoration.deletedResourceForeground#E06C75
• gitDecoration.ignoredResourceForeground#5C6370
• gitDecoration.modifiedResourceForeground#61AFEF
• gitDecoration.renamedResourceForeground#56B6C2
• gitDecoration.stageDeletedResourceForeground#E06C75
• gitDecoration.stageModifiedResourceForeground#61AFEF
• gitDecoration.untrackedResourceForeground#98C379
• gitlens.gutterBackgroundColor#282C34
• gitlens.gutterForegroundColor#5C6370
• gitlens.gutterUncommittedForegroundColor#ABB2BF
• gitlens.trailingLineForegroundColor#5C6370
• icon.foreground#A0A8B3
• inlineChat.background#21252B
• inlineChat.foreground#ABB2BF
• inlineChatDiff.inserted#98C37920
• inlineChatDiff.removed#E06C7520
• input.background#21252B
• input.border#3A3F4B
• input.foreground#C5C8C6
• input.placeholderForeground#5C6370
• inputOption.activeBackground#4D78CC55
• inputOption.activeBorder#4D78CC
• inputOption.activeForeground#FFFFFF
• inputValidation.errorBackground#B83A3A
• inputValidation.errorBorder#F44747
• inputValidation.errorForeground#FFFFFF
• inputValidation.infoBackground#3A3F4B
• inputValidation.infoBorder#4D78CC
• inputValidation.infoForeground#FFFFFF
• inputValidation.warningBackground#B88A21
• inputValidation.warningBorder#D19A66
• inputValidation.warningForeground#FFFFFF
• list.activeSelectionBackground#2C313A
• list.activeSelectionForeground#FFFFFF
• list.deemphasizedForeground#8F939A
• list.dropBackground#3A3F4B
• list.errorForeground#F44747
• list.focusBackground#383E4A
• list.focusForeground#FFFFFF
• list.highlightForeground#4D78CC
• list.hoverBackground#2C313A
• list.hoverForeground#D7DAE0
• list.inactiveSelectionBackground#2C313A
• list.inactiveSelectionForeground#D7DAE0
• list.invalidItemForeground#F44747
• list.warningForeground#D19A66
• listFilterWidget.background#282C34
• listFilterWidget.noMatchesOutline#F44747
• listFilterWidget.outline#4D78CC
• menu.background#21252B
• menu.border#3A3F4B
• menu.foreground#ABB2BF
• menu.selectionBackground#2C313A
• menu.selectionForeground#FFFFFF
• menu.separatorBackground#3A3F4B
• menubar.selectionBackground#3A3F4B
• menubar.selectionBorder#3A3F4B
• menubar.selectionForeground#FFFFFF
• merge.currentContentBackground#98C37920
• merge.currentHeaderBackground#98C37940
• merge.incomingContentBackground#61AFEF20
• merge.incomingHeaderBackground#61AFEF40
• mergeEditor.change.background#3E4451
• mergeEditor.change.word.background#485261
• mergeEditor.conflict.handled.minimapOverViewRuler#98C379
• mergeEditor.conflict.handledFocused.border#98C379
• mergeEditor.conflict.handledUnfocused.border#98C379
• mergeEditor.conflict.unhandled.minimapOverViewRuler#D19A66
• mergeEditor.conflict.unhandledFocused.border#D19A66
• mergeEditor.conflict.unhandledUnfocused.border#D19A66
• mergeEditor.conflictingLines.background#D19A6650
• minimap.findMatchHighlight#D19A6650
• minimap.selectionHighlight#3E4451
• minimapGutter.addedBackground#98C379
• minimapGutter.deletedBackground#E06C75
• minimapGutter.modifiedBackground#61AFEF
• multiDiffEditor.border#3A3F4B
• multiDiffEditor.headerBackground#21252b
• notebook.cellBorderColor#3A3F4B
• notebook.cellEditorBackground#21252B
• notebook.cellStatusBarItemHoverBackground#2C313A
• notebook.cellToolbarSeparator#3A3F4B
• notebook.editorBackground#282C34
• notebook.focusedCellBorder#4D78CC
• notebook.focusedEditorBorder#21252B
• notificationCenterHeader.background#21252B
• notificationLink.foreground#61AFEF
• notifications.background#21252B
• notificationsErrorIcon.foreground#E06C75
• notificationsInfoIcon.foreground#61AFEF
• notificationsWarningIcon.foreground#D19A66
• panel.background#21252B
• panel.border#3A3F4B
• panelInput.border#3A3F4B
• panelTitle.activeBorder#4D78CC
• panelTitle.activeForeground#FFFFFF
• panelTitle.inactiveForeground#8F939A
• peekView.border#3A3F4B
• peekViewEditor.background#282C34
• peekViewEditor.matchHighlightBackground#D19A6630
• peekViewResult.background#21252B
• peekViewResult.fileForeground#8F939A
• peekViewResult.lineForeground#D7DAE0
• peekViewResult.matchHighlightBackground#D19A6630
• peekViewResult.selectionBackground#2C313A
• peekViewResult.selectionForeground#FFFFFF
• peekViewTitle.background#21252B
• peekViewTitleDescription.foreground#8F939A
• peekViewTitleLabel.foreground#FFFFFF
• pickerGroup.border#3A3F4B
• pickerGroup.foreground#D7DAE0
• progressBar.background#4D78CC
• sash.hoverBorder#4D78CC
• scmGraph.foreground1#D19A66
• scmGraph.foreground2#E06C75
• scmGraph.foreground3#98C379
• scmGraph.foreground4#61AFEF
• scmGraph.foreground5#C678DD
• scmGraph.historyItemBaseRefColor#C678DD
• scmGraph.historyItemHoverAdditionsForeground#98C379
• scmGraph.historyItemHoverDefaultLabelForeground#ABB2BF
• scmGraph.historyItemHoverDeletionsForeground#E06C75
• scmGraph.historyItemHoverLabelForeground#ABB2BF
• scmGraph.historyItemRefColor#61AFEF
• scmGraph.historyItemRemoteRefColor#56B6C2
• scrollbar.shadow#00000020
• scrollbarSlider.activeBackground#6E7A8F80
• scrollbarSlider.background#4E566680
• scrollbarSlider.hoverBackground#5E687A80
• selection.background#3A3F4B
• settings.headerForeground#FFFFFF
• sideBar.background#21252B
• sideBar.border#282C34
• sideBar.dropBackground#3A3F4B
• sideBar.foreground#C5C8C6
• sideBarSectionHeader.background#282C34
• sideBarSectionHeader.border#21252B
• sideBarSectionHeader.foreground#D7DAE0
• sideBarTitle.foreground#D7DAE0
• statusBar.background#21252B
• statusBar.border#21252B
• statusBar.debuggingBackground#C678DD
• statusBar.debuggingForeground#FFFFFF
• statusBar.foreground#A0A8B3
• statusBar.noFolderBackground#21252B
• statusBarItem.activeBackground#3A3F4B
• statusBarItem.hoverBackground#2C313A
• statusBarItem.prominentBackground#2C313A
• statusBarItem.prominentHoverBackground#3A3F4B
• statusBarItem.remoteBackground#4D78CC
• statusBarItem.remoteForeground#FFFFFF
• tab.activeBackground#282C34
• tab.activeBorder#4D78CC
• tab.activeForeground#FFFFFF
• tab.activeModifiedBorder#D19A66
• tab.border#21252B
• tab.hoverForeground#FFFFFF
• tab.inactiveBackground#21252B
• tab.inactiveForeground#8F939A
• tab.inactiveModifiedBorder#8F939A
• tab.lastPinnedBorder#3A3F4B
• tab.unfocusedActiveBorder#282C34
• tab.unfocusedActiveForeground#D7DAE0
• tab.unfocusedHoverForeground#D7DAE0
• tab.unfocusedInactiveForeground#8F939A
• terminal.ansiBlack#282C34
• terminal.ansiBlue#61AFEF
• terminal.ansiBrightBlack#5C6370
• terminal.ansiBrightBlue#61AFEF
• terminal.ansiBrightCyan#56B6C2
• terminal.ansiBrightGreen#98C379
• terminal.ansiBrightMagenta#C678DD
• terminal.ansiBrightRed#E06C75
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#D19A66
• terminal.ansiCyan#56B6C2
• terminal.ansiGreen#98C379
• terminal.ansiMagenta#C678DD
• terminal.ansiRed#E06C75
• terminal.ansiWhite#ABB2BF
• terminal.ansiYellow#D19A66
• terminal.background#282C34
• terminal.foreground#ABB2BF
• terminal.selectionBackground#3E4451
• terminalCursor.background#61AFEF
• terminalCursor.foreground#FFFFFF
• textBlockQuote.background#21252B
• textBlockQuote.border#3A3F4B
• textCodeBlock.background#21252B
• textLink.activeForeground#79C2FF
• textLink.foreground#61AFEF
• textPreformat.foreground#D19A66
• textSeparator.foreground#3A3F4B
• titleBar.activeBackground#21252B
• titleBar.activeForeground#A0A8B3
• titleBar.border#21252B
• titleBar.inactiveBackground#21252B
• titleBar.inactiveForeground#5C6370
• toolbar.activeBackground#282C34
• toolbar.hoverBackground#3A3F4B
• tree.indentGuidesStroke#3A3F4B
• walkThrough.embeddedEditorBackground#282C34
• widget.shadow#00000020
• window.activeBorder#282C34
• window.inactiveBorder#21252B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).