Eclipse Dark

Color themes

• 

  Eclipse Dark Darker

• 

  Eclipse Dark Flat

• 

  Eclipse Flare

• 

  Eclipse Optics

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#1F1F1F
• activityBar.activeBorder#FF4081
• activityBar.background#1A1A1A
• activityBar.border#1A1A1A
• activityBar.foreground#F5F5F5
• activityBar.inactiveForeground#757575
• activityBarBadge.background#FF4081
• activityBarBadge.foreground#FFFFFF
• activityBarTop.activeBorder#FF4081
• activityBarTop.foreground#F5F5F5
• activityBarTop.inactiveForeground#757575
• badge.background#FF4081
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#FFFFFF
• breadcrumb.background#1F1F1F
• breadcrumb.focusForeground#F5F5F5
• breadcrumb.foreground#B0B0B0
• breadcrumbPicker.background#1A1A1A
• button.background#FF4081
• button.foreground#FFFFFF
• button.hoverBackground#FF6699
• button.secondaryBackground#303030
• charts.blue#448AFF
• charts.foreground#D4D4D4
• charts.green#76FF03
• charts.lines#757575
• charts.orange#FFAB00
• charts.purple#F50057
• charts.red#FF1744
• charts.yellow#FFAB00
• chat.avatarBackground#FF4081
• chat.avatarForeground#FFFFFF
• chat.requestBorder#303030
• chat.slashCommandBackground#2A2A2A
• chat.slashCommandForeground#448AFF
• debugConsole.errorForeground#FF5252
• debugConsole.infoForeground#448AFF
• debugConsole.sourceForeground#D4D4D4
• debugConsole.warningForeground#FFAB00
• debugConsoleInputIcon.foreground#448AFF
• debugExceptionWidget.background#1A1A1A
• debugExceptionWidget.border#FF5252
• debugIcon.breakpointDisabledForeground#757575
• debugIcon.breakpointForeground#FF1744
• debugIcon.breakpointUnverifiedForeground#FFAB00
• debugTokenExpression.boolean#FFAB00
• debugTokenExpression.error#FF5252
• debugTokenExpression.name#448AFF
• debugTokenExpression.number#FFAB00
• debugTokenExpression.string#76FF03
• debugTokenExpression.value#D4D4D4
• debugToolBar.background#1A1A1A
• debugView.stateLabelBackground#1A1A1A
• debugView.stateLabelForeground#D4D4D4
• debugView.valueChangedHighlight#448AFF30
• descriptionForeground#B0B0B0
• diffEditor.diagonalFill#303030
• diffEditor.insertedLineBackground#76FF0315
• diffEditor.insertedTextBackground#76FF0320
• diffEditor.removedLineBackground#FF174415
• diffEditor.removedTextBackground#FF174420
• diffEditor.unchangedCodeBackground#1f1f1f
• diffEditorGutter.insertedLineBackground#76FF0340
• diffEditorGutter.removedLineBackground#FF174440
• diffEditorOverview.insertedForeground#76FF0380
• diffEditorOverview.removedForeground#FF174480
• disabledForeground#757575
• dropdown.background#1A1A1A
• dropdown.border#303030
• dropdown.foreground#EAEAEA
• dropdown.listBackground#1F1F1F
• editor.background#1F1F1F
• editor.findMatchBackground#FFAB0050
• editor.findMatchBorder#FFAB00
• editor.findMatchHighlightBackground#FFAB0030
• editor.findRangeHighlightBackground#353535
• editor.focusedStackFrameHighlightBackground#76FF0330
• editor.foldBackground#1F1F1F
• editor.foreground#D4D4D4
• editor.inactiveSelectionBackground#35353580
• editor.lineHighlightBackground#2A2A2A
• editor.lineHighlightBorder#2A2A2A
• editor.rangeHighlightBackground#353535
• editor.selectionBackground#353535
• editor.selectionHighlightBackground#35353590
• editor.stackFrameHighlightBackground#FFAB0030
• editor.wordHighlightBackground#404040
• editor.wordHighlightStrongBackground#505050
• editorBracketHighlight.foreground1#00E5FF
• editorBracketHighlight.foreground2#F50057
• editorBracketHighlight.foreground3#FFAB00
• editorBracketHighlight.foreground4#76FF03
• editorBracketHighlight.foreground5#448AFF
• editorBracketHighlight.foreground6#FF1744
• editorBracketHighlight.unexpectedBracket.foreground#FF5252
• editorBracketMatch.background#353535
• editorBracketMatch.border#757575
• editorBracketPairGuide.activeBackground1#00E5FF50
• editorBracketPairGuide.activeBackground2#F5005750
• editorBracketPairGuide.activeBackground3#FFAB0050
• editorBracketPairGuide.activeBackground4#76FF0350
• editorBracketPairGuide.activeBackground5#448AFF50
• editorBracketPairGuide.activeBackground6#FF174450
• editorBracketPairGuide.background1#303030
• editorBracketPairGuide.background2#303030
• editorBracketPairGuide.background3#303030
• editorBracketPairGuide.background4#303030
• editorBracketPairGuide.background5#303030
• editorBracketPairGuide.background6#303030
• editorCodeLens.foreground#757575
• editorCursor.foreground#448AFF
• editorError.foreground#FF5252
• editorGhostText.foreground#757575
• editorGroup.border#1A1A1A
• editorGroup.dropBackground#303030
• editorGroup.emptyBackground#1F1F1F
• editorGroupHeader.border#1A1A1A
• editorGroupHeader.noTabsBackground#1A1A1A
• editorGroupHeader.tabsBackground#1A1A1A
• editorGroupHeader.tabsBorder#1A1A1A
• editorGutter.addedBackground#76FF0380
• editorGutter.deletedBackground#FF174480
• editorGutter.modifiedBackground#448AFF80
• editorHint.foreground#448AFF
• editorHoverWidget.background#1A1A1A
• editorHoverWidget.border#303030
• editorIndentGuide.activeBackground1#757575
• editorIndentGuide.background1#303030
• editorInfo.foreground#448AFF
• editorInlayHint.background#1F1F1F00
• editorInlayHint.foreground#757575
• editorLightBulb.foreground#FFAB00
• editorLightBulbAutoFix.foreground#FFAB00
• editorLineNumber.activeForeground#D4D4D4
• editorLineNumber.foreground#757575
• editorLink.activeForeground#448AFF
• editorMarkerNavigation.background#1F1F1F
• editorOverviewRuler.addedForeground#76FF0380
• editorOverviewRuler.border#1A1A1A
• editorOverviewRuler.bracketMatchForeground#C5C5C5
• editorOverviewRuler.deletedForeground#FF174480
• editorOverviewRuler.errorForeground#FF5252
• editorOverviewRuler.findMatchForeground#FFAB0050
• editorOverviewRuler.infoForeground#448AFF
• editorOverviewRuler.modifiedForeground#448AFF80
• editorOverviewRuler.rangeHighlightForeground#353535
• editorOverviewRuler.selectionHighlightForeground#353535
• editorOverviewRuler.warningForeground#FFAB00
• editorOverviewRuler.wordHighlightForeground#404040
• editorOverviewRuler.wordHighlightStrongForeground#505050
• editorPane.background#1F1F1F
• editorRuler.foreground#303030
• editorSuggestWidget.background#1A1A1A
• editorSuggestWidget.border#303030
• editorSuggestWidget.highlightForeground#448AFF
• editorSuggestWidget.selectedBackground#2A2A2A
• editorWarning.foreground#FFAB00
• editorWhitespace.foreground#404040
• editorWidget.background#1A1A1A
• editorWidget.border#303030
• editorWidget.foreground#D4D4D4
• editorWidget.resizeBorder#303030
• errorForeground#FF5252
• extensionBadge.remoteBackground#FF4081
• extensionBadge.remoteForeground#FFFFFF
• extensionButton.prominentBackground#FF4081
• extensionButton.prominentForeground#FFFFFF
• extensionButton.prominentHoverBackground#FF6699
• focusBorder#FF4081
• foreground#EAEAEA
• gitDecoration.addedResourceForeground#76FF03
• gitDecoration.conflictingResourceForeground#FFAB00
• gitDecoration.deletedResourceForeground#FF1744
• gitDecoration.ignoredResourceForeground#757575
• gitDecoration.modifiedResourceForeground#448AFF
• gitDecoration.renamedResourceForeground#00E5FF
• gitDecoration.stageDeletedResourceForeground#FF1744
• gitDecoration.stageModifiedResourceForeground#448AFF
• gitDecoration.untrackedResourceForeground#76FF03
• gitlens.gutterBackgroundColor#1F1F1F
• gitlens.gutterForegroundColor#757575
• gitlens.gutterUncommittedForegroundColor#D4D4D4
• gitlens.trailingLineForegroundColor#757575
• icon.foreground#C5C5C5
• inlineChat.background#1A1A1A
• inlineChat.foreground#D4D4D4
• inlineChatDiff.inserted#76FF0320
• inlineChatDiff.removed#FF174420
• input.background#1A1A1A
• input.border#303030
• input.foreground#EAEAEA
• input.placeholderForeground#757575
• inputOption.activeBackground#FF408155
• inputOption.activeBorder#FF4081
• inputOption.activeForeground#FFFFFF
• inputValidation.errorBackground#D50000
• inputValidation.errorBorder#FF5252
• inputValidation.errorForeground#FFFFFF
• inputValidation.infoBackground#303030
• inputValidation.infoBorder#FF4081
• inputValidation.infoForeground#FFFFFF
• inputValidation.warningBackground#FFC400
• inputValidation.warningBorder#FFAB00
• inputValidation.warningForeground#000000
• list.activeSelectionBackground#2A2A2A
• list.activeSelectionForeground#FFFFFF
• list.deemphasizedForeground#B0B0B0
• list.dropBackground#303030
• list.errorForeground#FF5252
• list.focusBackground#2F2F2F
• list.focusForeground#FFFFFF
• list.highlightForeground#FF4081
• list.hoverBackground#2A2A2A
• list.hoverForeground#F5F5F5
• list.inactiveSelectionBackground#2A2A2A
• list.inactiveSelectionForeground#F5F5F5
• list.invalidItemForeground#FF5252
• list.warningForeground#FFAB00
• listFilterWidget.background#1F1F1F
• listFilterWidget.noMatchesOutline#FF5252
• listFilterWidget.outline#FF4081
• menu.background#1A1A1A
• menu.border#303030
• menu.foreground#D4D4D4
• menu.selectionBackground#2A2A2A
• menu.selectionForeground#FFFFFF
• menu.separatorBackground#303030
• menubar.selectionBackground#303030
• menubar.selectionBorder#303030
• menubar.selectionForeground#FFFFFF
• merge.currentContentBackground#76FF0320
• merge.currentHeaderBackground#76FF0340
• merge.incomingContentBackground#448AFF20
• merge.incomingHeaderBackground#448AFF40
• mergeEditor.change.background#353535
• mergeEditor.change.word.background#404040
• mergeEditor.conflict.handled.minimapOverViewRuler#76FF03
• mergeEditor.conflict.handledFocused.border#76FF03
• mergeEditor.conflict.handledUnfocused.border#76FF03
• mergeEditor.conflict.unhandled.minimapOverViewRuler#FFAB00
• mergeEditor.conflict.unhandledFocused.border#FFAB00
• mergeEditor.conflict.unhandledUnfocused.border#FFAB00
• mergeEditor.conflictingLines.background#FFAB0050
• minimap.findMatchHighlight#FFAB0050
• minimap.selectionHighlight#353535
• minimapGutter.addedBackground#76FF03
• minimapGutter.deletedBackground#FF1744
• minimapGutter.modifiedBackground#448AFF
• multiDiffEditor.border#303030
• multiDiffEditor.headerBackground#1a1a1a
• notebook.cellBorderColor#303030
• notebook.cellEditorBackground#1A1A1A
• notebook.cellStatusBarItemHoverBackground#2A2A2A
• notebook.cellToolbarSeparator#303030
• notebook.editorBackground#1F1F1F
• notebook.focusedCellBorder#FF4081
• notebook.focusedEditorBorder#1A1A1A
• notificationCenterHeader.background#1A1A1A
• notificationLink.foreground#448AFF
• notifications.background#1A1A1A
• notificationsErrorIcon.foreground#FF1744
• notificationsInfoIcon.foreground#448AFF
• notificationsWarningIcon.foreground#FFAB00
• panel.background#1A1A1A
• panel.border#303030
• panelInput.border#303030
• panelTitle.activeBorder#FF4081
• panelTitle.activeForeground#FFFFFF
• panelTitle.inactiveForeground#B0B0B0
• peekView.border#303030
• peekViewEditor.background#1F1F1F
• peekViewEditor.matchHighlightBackground#FFAB0030
• peekViewResult.background#1A1A1A
• peekViewResult.fileForeground#B0B0B0
• peekViewResult.lineForeground#F5F5F5
• peekViewResult.matchHighlightBackground#FFAB0030
• peekViewResult.selectionBackground#2A2A2A
• peekViewResult.selectionForeground#FFFFFF
• peekViewTitle.background#1A1A1A
• peekViewTitleDescription.foreground#B0B0B0
• peekViewTitleLabel.foreground#FFFFFF
• pickerGroup.border#303030
• pickerGroup.foreground#F5F5F5
• progressBar.background#FF4081
• sash.hoverBorder#FF4081
• scmGraph.foreground1#FFAB00
• scmGraph.foreground2#FF1744
• scmGraph.foreground3#76FF03
• scmGraph.foreground4#448AFF
• scmGraph.foreground5#F50057
• scmGraph.historyItemBaseRefColor#F50057
• scmGraph.historyItemHoverAdditionsForeground#76FF03
• scmGraph.historyItemHoverDefaultLabelForeground#D4D4D4
• scmGraph.historyItemHoverDeletionsForeground#FF1744
• scmGraph.historyItemHoverLabelForeground#D4D4D4
• scmGraph.historyItemRefColor#448AFF
• scmGraph.historyItemRemoteRefColor#00E5FF
• scrollbar.shadow#00000030
• scrollbarSlider.activeBackground#62626280
• scrollbarSlider.background#42424280
• scrollbarSlider.hoverBackground#52525280
• selection.background#303030
• settings.headerForeground#FFFFFF
• sideBar.background#1A1A1A
• sideBar.border#1F1F1F
• sideBar.dropBackground#303030
• sideBar.foreground#EAEAEA
• sideBarSectionHeader.background#1F1F1F
• sideBarSectionHeader.border#1A1A1A
• sideBarSectionHeader.foreground#F5F5F5
• sideBarTitle.foreground#F5F5F5
• statusBar.background#1A1A1A
• statusBar.border#1A1A1A
• statusBar.debuggingBackground#F50057
• statusBar.debuggingForeground#FFFFFF
• statusBar.foreground#C5C5C5
• statusBar.noFolderBackground#1A1A1A
• statusBarItem.activeBackground#303030
• statusBarItem.hoverBackground#2A2A2A
• statusBarItem.prominentBackground#2A2A2A
• statusBarItem.prominentHoverBackground#303030
• statusBarItem.remoteBackground#FF4081
• statusBarItem.remoteForeground#FFFFFF
• tab.activeBackground#1F1F1F
• tab.activeBorder#FF4081
• tab.activeForeground#FFFFFF
• tab.activeModifiedBorder#FFAB00
• tab.border#1A1A1A
• tab.hoverForeground#FFFFFF
• tab.inactiveBackground#1A1A1A
• tab.inactiveForeground#B0B0B0
• tab.inactiveModifiedBorder#B0B0B0
• tab.lastPinnedBorder#303030
• tab.unfocusedActiveBorder#1F1F1F
• tab.unfocusedActiveForeground#F5F5F5
• tab.unfocusedHoverForeground#F5F5F5
• tab.unfocusedInactiveForeground#B0B0B0
• terminal.ansiBlack#1F1F1F
• terminal.ansiBlue#448AFF
• terminal.ansiBrightBlack#757575
• terminal.ansiBrightBlue#448AFF
• terminal.ansiBrightCyan#00E5FF
• terminal.ansiBrightGreen#76FF03
• terminal.ansiBrightMagenta#F50057
• terminal.ansiBrightRed#FF1744
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#FFAB00
• terminal.ansiCyan#00E5FF
• terminal.ansiGreen#76FF03
• terminal.ansiMagenta#F50057
• terminal.ansiRed#FF1744
• terminal.ansiWhite#D4D4D4
• terminal.ansiYellow#FFAB00
• terminal.background#1F1F1F
• terminal.foreground#D4D4D4
• terminal.selectionBackground#353535
• terminalCursor.background#448AFF
• terminalCursor.foreground#FFFFFF
• textBlockQuote.background#1A1A1A
• textBlockQuote.border#303030
• textCodeBlock.background#1A1A1A
• textLink.activeForeground#62AFFF
• textLink.foreground#448AFF
• textPreformat.foreground#FFAB00
• textSeparator.foreground#303030
• titleBar.activeBackground#1A1A1A
• titleBar.activeForeground#C5C5C5
• titleBar.border#1A1A1A
• titleBar.inactiveBackground#1A1A1A
• titleBar.inactiveForeground#757575
• toolbar.activeBackground#1F1F1F
• toolbar.hoverBackground#303030
• tree.indentGuidesStroke#303030
• walkThrough.embeddedEditorBackground#1F1F1F
• widget.shadow#00000030
• window.activeBorder#1F1F1F
• window.inactiveBorder#1A1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).