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#1D3557
• activityBar.activeBorder#457B9D
• activityBar.background#162A42
• activityBar.border#162A42
• activityBar.foreground#F1FAEE
• activityBar.inactiveForeground#6B728E
• activityBarBadge.background#457B9D
• activityBarBadge.foreground#F1FAEE
• activityBarTop.activeBorder#457B9D
• activityBarTop.foreground#F1FAEE
• activityBarTop.inactiveForeground#6B728E
• badge.background#457B9D
• badge.foreground#F1FAEE
• breadcrumb.activeSelectionForeground#F1FAEE
• breadcrumb.background#1D3557
• breadcrumb.focusForeground#E1E2E7
• breadcrumb.foreground#A0A4B3
• breadcrumbPicker.background#162A42
• button.background#457B9D
• button.foreground#F1FAEE
• button.hoverBackground#5A92B6
• button.secondaryBackground#2A4B6D
• charts.blue#8DB5E0
• charts.foreground#F1FAEE
• charts.green#A8DADC
• charts.lines#6B728E
• charts.orange#F4A261
• charts.purple#B2B5E0
• charts.red#E63946
• charts.yellow#F4A261
• chat.avatarBackground#457B9D
• chat.avatarForeground#F1FAEE
• chat.requestBorder#2A4B6D
• chat.slashCommandBackground#223E5F
• chat.slashCommandForeground#8DB5E0
• debugConsole.errorForeground#E63946
• debugConsole.infoForeground#8DB5E0
• debugConsole.sourceForeground#F1FAEE
• debugConsole.warningForeground#F4A261
• debugConsoleInputIcon.foreground#8DB5E0
• debugExceptionWidget.background#162A42
• debugExceptionWidget.border#E63946
• debugIcon.breakpointDisabledForeground#6B728E
• debugIcon.breakpointForeground#E63946
• debugIcon.breakpointUnverifiedForeground#F4A261
• debugTokenExpression.boolean#F4A261
• debugTokenExpression.error#E63946
• debugTokenExpression.name#8DB5E0
• debugTokenExpression.number#F4A261
• debugTokenExpression.string#A8DADC
• debugTokenExpression.value#F1FAEE
• debugToolBar.background#162A42
• debugView.stateLabelBackground#162A42
• debugView.stateLabelForeground#F1FAEE
• debugView.valueChangedHighlight#8DB5E030
• descriptionForeground#A0A4B3
• diffEditor.diagonalFill#2A4B6D
• diffEditor.insertedLineBackground#A8DADC15
• diffEditor.insertedTextBackground#A8DADC20
• diffEditor.removedLineBackground#E6394615
• diffEditor.removedTextBackground#E6394620
• diffEditor.unchangedCodeBackground#1d3557
• diffEditorGutter.insertedLineBackground#A8DADC40
• diffEditorGutter.removedLineBackground#E6394640
• diffEditorOverview.insertedForeground#A8DADC80
• diffEditorOverview.removedForeground#E6394680
• disabledForeground#6B728E
• dropdown.background#162A42
• dropdown.border#2A4B6D
• dropdown.foreground#E1E2E7
• dropdown.listBackground#1D3557
• editor.background#1D3557
• editor.findMatchBackground#F4A26150
• editor.findMatchBorder#F4A261
• editor.findMatchHighlightBackground#F4A26130
• editor.findRangeHighlightBackground#2C537C
• editor.focusedStackFrameHighlightBackground#A8DADC30
• editor.foldBackground#1D3557
• editor.foreground#F1FAEE
• editor.inactiveSelectionBackground#2C537C80
• editor.lineHighlightBackground#223E5F
• editor.lineHighlightBorder#223E5F
• editor.rangeHighlightBackground#2C537C
• editor.selectionBackground#2C537C
• editor.selectionHighlightBackground#2C537C90
• editor.stackFrameHighlightBackground#F4A26130
• editor.wordHighlightBackground#3B6087
• editor.wordHighlightStrongBackground#457B9D
• editorBracketHighlight.foreground1#A8DADC
• editorBracketHighlight.foreground2#B2B5E0
• editorBracketHighlight.foreground3#F4A261
• editorBracketHighlight.foreground4#A8DADC
• editorBracketHighlight.foreground5#8DB5E0
• editorBracketHighlight.foreground6#E63946
• editorBracketHighlight.unexpectedBracket.foreground#E63946
• editorBracketMatch.background#2C537C
• editorBracketMatch.border#6B728E
• editorBracketPairGuide.activeBackground1#A8DADC50
• editorBracketPairGuide.activeBackground2#B2B5E050
• editorBracketPairGuide.activeBackground3#F4A26150
• editorBracketPairGuide.activeBackground4#A8DADC50
• editorBracketPairGuide.activeBackground5#8DB5E050
• editorBracketPairGuide.activeBackground6#E6394650
• editorBracketPairGuide.background1#2A4B6D
• editorBracketPairGuide.background2#2A4B6D
• editorBracketPairGuide.background3#2A4B6D
• editorBracketPairGuide.background4#2A4B6D
• editorBracketPairGuide.background5#2A4B6D
• editorBracketPairGuide.background6#2A4B6D
• editorCodeLens.foreground#6B728E
• editorCursor.foreground#8DB5E0
• editorError.foreground#E63946
• editorGhostText.foreground#6B728E
• editorGroup.border#162A42
• editorGroup.dropBackground#2A4B6D
• editorGroup.emptyBackground#1D3557
• editorGroupHeader.border#162A42
• editorGroupHeader.noTabsBackground#162A42
• editorGroupHeader.tabsBackground#162A42
• editorGroupHeader.tabsBorder#162A42
• editorGutter.addedBackground#A8DADC80
• editorGutter.deletedBackground#E6394680
• editorGutter.modifiedBackground#8DB5E080
• editorHint.foreground#8DB5E0
• editorHoverWidget.background#162A42
• editorHoverWidget.border#2A4B6D
• editorIndentGuide.activeBackground1#6B728E
• editorIndentGuide.background1#2A4B6D
• editorInfo.foreground#8DB5E0
• editorInlayHint.background#1D355700
• editorInlayHint.foreground#6B728E
• editorLightBulb.foreground#F4A261
• editorLightBulbAutoFix.foreground#F4A261
• editorLineNumber.activeForeground#F1FAEE
• editorLineNumber.foreground#6B728E
• editorLink.activeForeground#8DB5E0
• editorMarkerNavigation.background#1D3557
• editorOverviewRuler.addedForeground#A8DADC80
• editorOverviewRuler.border#162A42
• editorOverviewRuler.bracketMatchForeground#A0A4B3
• editorOverviewRuler.deletedForeground#E6394680
• editorOverviewRuler.errorForeground#E63946
• editorOverviewRuler.findMatchForeground#F4A26150
• editorOverviewRuler.infoForeground#8DB5E0
• editorOverviewRuler.modifiedForeground#8DB5E080
• editorOverviewRuler.rangeHighlightForeground#2C537C
• editorOverviewRuler.selectionHighlightForeground#2C537C
• editorOverviewRuler.warningForeground#F4A261
• editorOverviewRuler.wordHighlightForeground#3B6087
• editorOverviewRuler.wordHighlightStrongForeground#457B9D
• editorPane.background#1D3557
• editorRuler.foreground#2A4B6D
• editorSuggestWidget.background#162A42
• editorSuggestWidget.border#2A4B6D
• editorSuggestWidget.highlightForeground#8DB5E0
• editorSuggestWidget.selectedBackground#223E5F
• editorWarning.foreground#F4A261
• editorWhitespace.foreground#3B6087
• editorWidget.background#162A42
• editorWidget.border#2A4B6D
• editorWidget.foreground#F1FAEE
• editorWidget.resizeBorder#2A4B6D
• errorForeground#E63946
• extensionBadge.remoteBackground#457B9D
• extensionBadge.remoteForeground#F1FAEE
• extensionButton.prominentBackground#457B9D
• extensionButton.prominentForeground#F1FAEE
• extensionButton.prominentHoverBackground#5A92B6
• focusBorder#457B9D
• foreground#E1E2E7
• gitDecoration.addedResourceForeground#A8DADC
• gitDecoration.conflictingResourceForeground#F4A261
• gitDecoration.deletedResourceForeground#E63946
• gitDecoration.ignoredResourceForeground#6B728E
• gitDecoration.modifiedResourceForeground#8DB5E0
• gitDecoration.renamedResourceForeground#A8DADC
• gitDecoration.stageDeletedResourceForeground#E63946
• gitDecoration.stageModifiedResourceForeground#8DB5E0
• gitDecoration.untrackedResourceForeground#A8DADC
• gitlens.gutterBackgroundColor#1D3557
• gitlens.gutterForegroundColor#6B728E
• gitlens.gutterUncommittedForegroundColor#F1FAEE
• gitlens.trailingLineForegroundColor#6B728E
• icon.foreground#A0A4B3
• inlineChat.background#162A42
• inlineChat.foreground#F1FAEE
• inlineChatDiff.inserted#A8DADC20
• inlineChatDiff.removed#E6394620
• input.background#162A42
• input.border#2A4B6D
• input.foreground#E1E2E7
• input.placeholderForeground#6B728E
• inputOption.activeBackground#457B9D55
• inputOption.activeBorder#457B9D
• inputOption.activeForeground#F1FAEE
• inputValidation.errorBackground#E63946
• inputValidation.errorBorder#E63946
• inputValidation.errorForeground#F1FAEE
• inputValidation.infoBackground#2A4B6D
• inputValidation.infoBorder#457B9D
• inputValidation.infoForeground#F1FAEE
• inputValidation.warningBackground#F4A261
• inputValidation.warningBorder#E76F51
• inputValidation.warningForeground#1D3557
• list.activeSelectionBackground#223E5F
• list.activeSelectionForeground#F1FAEE
• list.deemphasizedForeground#A0A4B3
• list.dropBackground#2A4B6D
• list.errorForeground#E63946
• list.focusBackground#2A4B6D
• list.focusForeground#F1FAEE
• list.highlightForeground#457B9D
• list.hoverBackground#223E5F
• list.hoverForeground#E1E2E7
• list.inactiveSelectionBackground#223E5F
• list.inactiveSelectionForeground#E1E2E7
• list.invalidItemForeground#E63946
• list.warningForeground#E76F51
• listFilterWidget.background#1D3557
• listFilterWidget.noMatchesOutline#E63946
• listFilterWidget.outline#457B9D
• menu.background#162A42
• menu.border#2A4B6D
• menu.foreground#F1FAEE
• menu.selectionBackground#223E5F
• menu.selectionForeground#F1FAEE
• menu.separatorBackground#2A4B6D
• menubar.selectionBackground#2A4B6D
• menubar.selectionBorder#2A4B6D
• menubar.selectionForeground#F1FAEE
• merge.currentContentBackground#A8DADC20
• merge.currentHeaderBackground#A8DADC40
• merge.incomingContentBackground#8DB5E020
• merge.incomingHeaderBackground#8DB5E040
• mergeEditor.change.background#2C537C
• mergeEditor.change.word.background#3B6087
• mergeEditor.conflict.handled.minimapOverViewRuler#A8DADC
• mergeEditor.conflict.handledFocused.border#A8DADC
• mergeEditor.conflict.handledUnfocused.border#A8DADC
• mergeEditor.conflict.unhandled.minimapOverViewRuler#F4A261
• mergeEditor.conflict.unhandledFocused.border#F4A261
• mergeEditor.conflict.unhandledUnfocused.border#F4A261
• mergeEditor.conflictingLines.background#F4A26150
• minimap.findMatchHighlight#F4A26150
• minimap.selectionHighlight#2C537C
• minimapGutter.addedBackground#A8DADC
• minimapGutter.deletedBackground#E63946
• minimapGutter.modifiedBackground#8DB5E0
• multiDiffEditor.border#2A4B6D
• multiDiffEditor.headerBackground#162a42
• notebook.cellBorderColor#2A4B6D
• notebook.cellEditorBackground#162A42
• notebook.cellStatusBarItemHoverBackground#223E5F
• notebook.cellToolbarSeparator#2A4B6D
• notebook.editorBackground#1D3557
• notebook.focusedCellBorder#457B9D
• notebook.focusedEditorBorder#162A42
• notificationCenterHeader.background#162A42
• notificationLink.foreground#8DB5E0
• notifications.background#162A42
• notificationsErrorIcon.foreground#E63946
• notificationsInfoIcon.foreground#8DB5E0
• notificationsWarningIcon.foreground#F4A261
• panel.background#162A42
• panel.border#2A4B6D
• panelInput.border#2A4B6D
• panelTitle.activeBorder#457B9D
• panelTitle.activeForeground#F1FAEE
• panelTitle.inactiveForeground#A0A4B3
• peekView.border#2A4B6D
• peekViewEditor.background#1D3557
• peekViewEditor.matchHighlightBackground#F4A26130
• peekViewResult.background#162A42
• peekViewResult.fileForeground#A0A4B3
• peekViewResult.lineForeground#E1E2E7
• peekViewResult.matchHighlightBackground#F4A26130
• peekViewResult.selectionBackground#223E5F
• peekViewResult.selectionForeground#F1FAEE
• peekViewTitle.background#162A42
• peekViewTitleDescription.foreground#A0A4B3
• peekViewTitleLabel.foreground#F1FAEE
• pickerGroup.border#2A4B6D
• pickerGroup.foreground#F1FAEE
• progressBar.background#457B9D
• sash.hoverBorder#457B9D
• scmGraph.foreground1#F4A261
• scmGraph.foreground2#E63946
• scmGraph.foreground3#A8DADC
• scmGraph.foreground4#8DB5E0
• scmGraph.foreground5#B2B5E0
• scmGraph.historyItemBaseRefColor#B2B5E0
• scmGraph.historyItemHoverAdditionsForeground#A8DADC
• scmGraph.historyItemHoverDefaultLabelForeground#F1FAEE
• scmGraph.historyItemHoverDeletionsForeground#E63946
• scmGraph.historyItemHoverLabelForeground#F1FAEE
• scmGraph.historyItemRefColor#8DB5E0
• scmGraph.historyItemRemoteRefColor#A8DADC
• scrollbar.shadow#00000020
• scrollbarSlider.activeBackground#6B8EAE80
• scrollbarSlider.background#4B6B8E80
• scrollbarSlider.hoverBackground#5A7C9D80
• selection.background#2A4B6D
• settings.headerForeground#F1FAEE
• sideBar.background#162A42
• sideBar.border#1D3557
• sideBar.dropBackground#2A4B6D
• sideBar.foreground#E1E2E7
• sideBarSectionHeader.background#1D3557
• sideBarSectionHeader.border#162A42
• sideBarSectionHeader.foreground#F1FAEE
• sideBarTitle.foreground#F1FAEE
• statusBar.background#162A42
• statusBar.border#162A42
• statusBar.debuggingBackground#B2B5E0
• statusBar.debuggingForeground#1D3557
• statusBar.foreground#A0A4B3
• statusBar.noFolderBackground#162A42
• statusBarItem.activeBackground#2A4B6D
• statusBarItem.hoverBackground#223E5F
• statusBarItem.prominentBackground#223E5F
• statusBarItem.prominentHoverBackground#2A4B6D
• statusBarItem.remoteBackground#457B9D
• statusBarItem.remoteForeground#F1FAEE
• tab.activeBackground#1D3557
• tab.activeBorder#457B9D
• tab.activeForeground#F1FAEE
• tab.activeModifiedBorder#F4A261
• tab.border#162A42
• tab.hoverForeground#F1FAEE
• tab.inactiveBackground#162A42
• tab.inactiveForeground#A0A4B3
• tab.inactiveModifiedBorder#A0A4B3
• tab.lastPinnedBorder#2A4B6D
• tab.unfocusedActiveBorder#1D3557
• tab.unfocusedActiveForeground#E1E2E7
• tab.unfocusedHoverForeground#E1E2E7
• tab.unfocusedInactiveForeground#A0A4B3
• terminal.ansiBlack#1D3557
• terminal.ansiBlue#8DB5E0
• terminal.ansiBrightBlack#6B728E
• terminal.ansiBrightBlue#8DB5E0
• terminal.ansiBrightCyan#A8DADC
• terminal.ansiBrightGreen#A8DADC
• terminal.ansiBrightMagenta#B2B5E0
• terminal.ansiBrightRed#E63946
• terminal.ansiBrightWhite#F1FAEE
• terminal.ansiBrightYellow#F4A261
• terminal.ansiCyan#A8DADC
• terminal.ansiGreen#A8DADC
• terminal.ansiMagenta#B2B5E0
• terminal.ansiRed#E63946
• terminal.ansiWhite#F1FAEE
• terminal.ansiYellow#F4A261
• terminal.background#1D3557
• terminal.foreground#F1FAEE
• terminal.selectionBackground#2C537C
• terminalCursor.background#8DB5E0
• terminalCursor.foreground#1D3557
• textBlockQuote.background#162A42
• textBlockQuote.border#2A4B6D
• textCodeBlock.background#162A42
• textLink.activeForeground#A1C4E7
• textLink.foreground#8DB5E0
• textPreformat.foreground#F4A261
• textSeparator.foreground#2A4B6D
• titleBar.activeBackground#162A42
• titleBar.activeForeground#A0A4B3
• titleBar.border#162A42
• titleBar.inactiveBackground#162A42
• titleBar.inactiveForeground#6B728E
• toolbar.activeBackground#1D3557
• toolbar.hoverBackground#2A4B6D
• tree.indentGuidesStroke#2A4B6D
• walkThrough.embeddedEditorBackground#1D3557
• widget.shadow#00000020
• window.activeBorder#1D3557
• window.inactiveBorder#162A42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).