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#262626
• activityBar.activeBorder#4C6680
• activityBar.background#1A1A1A
• activityBar.border#1A1A1A
• activityBar.foreground#E6E6E6
• activityBar.inactiveForeground#737373
• activityBarBadge.background#4C6680
• activityBarBadge.foreground#FFFFFF
• activityBarTop.activeBorder#4C6680
• activityBarTop.foreground#E6E6E6
• activityBarTop.inactiveForeground#737373
• badge.background#4C6680
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#FFFFFF
• breadcrumb.background#262626
• breadcrumb.focusForeground#E6E6E6
• breadcrumb.foreground#A6A6A6
• breadcrumbPicker.background#1A1A1A
• button.background#4C6680
• button.foreground#FFFFFF
• button.hoverBackground#668099
• button.secondaryBackground#333333
• charts.blue#668099
• charts.foreground#CCCCCC
• charts.green#8CD9B3
• charts.lines#737373
• charts.orange#B3864D
• charts.purple#B38CD9
• charts.red#D98C8C
• charts.yellow#B3864D
• chat.avatarBackground#4C6680
• chat.avatarForeground#FFFFFF
• chat.requestBorder#333333
• chat.slashCommandBackground#2B2B2B
• chat.slashCommandForeground#668099
• debugConsole.errorForeground#D96666
• debugConsole.infoForeground#668099
• debugConsole.sourceForeground#CCCCCC
• debugConsole.warningForeground#B3864D
• debugConsoleInputIcon.foreground#668099
• debugExceptionWidget.background#1A1A1A
• debugExceptionWidget.border#D96666
• debugIcon.breakpointDisabledForeground#737373
• debugIcon.breakpointForeground#D98C8C
• debugIcon.breakpointUnverifiedForeground#B3864D
• debugTokenExpression.boolean#B3864D
• debugTokenExpression.error#D96666
• debugTokenExpression.name#668099
• debugTokenExpression.number#B3864D
• debugTokenExpression.string#8CD9B3
• debugTokenExpression.value#CCCCCC
• debugToolBar.background#1A1A1A
• debugView.stateLabelBackground#1A1A1A
• debugView.stateLabelForeground#CCCCCC
• debugView.valueChangedHighlight#66809930
• descriptionForeground#A6A6A6
• diffEditor.diagonalFill#333333
• diffEditor.insertedLineBackground#8CD9B315
• diffEditor.insertedTextBackground#8CD9B320
• diffEditor.removedLineBackground#D98C8C15
• diffEditor.removedTextBackground#D98C8C20
• diffEditor.unchangedCodeBackground#262626
• diffEditorGutter.insertedLineBackground#8CD9B340
• diffEditorGutter.removedLineBackground#D98C8C40
• diffEditorOverview.insertedForeground#8CD9B380
• diffEditorOverview.removedForeground#D98C8C80
• disabledForeground#737373
• dropdown.background#1A1A1A
• dropdown.border#333333
• dropdown.foreground#D9D9D9
• dropdown.listBackground#262626
• editor.background#262626
• editor.findMatchBackground#B3864D50
• editor.findMatchBorder#B3864D
• editor.findMatchHighlightBackground#B3864D30
• editor.findRangeHighlightBackground#363636
• editor.focusedStackFrameHighlightBackground#8CD9B330
• editor.foldBackground#262626
• editor.foreground#CCCCCC
• editor.inactiveSelectionBackground#36363680
• editor.lineHighlightBackground#2B2B2B
• editor.lineHighlightBorder#2B2B2B
• editor.rangeHighlightBackground#363636
• editor.selectionBackground#363636
• editor.selectionHighlightBackground#36363690
• editor.stackFrameHighlightBackground#B3864D30
• editor.wordHighlightBackground#404040
• editor.wordHighlightStrongBackground#505050
• editorBracketHighlight.foreground1#8CB3D9
• editorBracketHighlight.foreground2#B38CD9
• editorBracketHighlight.foreground3#D9B38C
• editorBracketHighlight.foreground4#8CD9B3
• editorBracketHighlight.foreground5#668099
• editorBracketHighlight.foreground6#D98C8C
• editorBracketHighlight.unexpectedBracket.foreground#D96666
• editorBracketMatch.background#363636
• editorBracketMatch.border#737373
• editorBracketPairGuide.activeBackground1#8CB3D950
• editorBracketPairGuide.activeBackground2#B38CD950
• editorBracketPairGuide.activeBackground3#D9B38C50
• editorBracketPairGuide.activeBackground4#8CD9B350
• editorBracketPairGuide.activeBackground5#66809950
• editorBracketPairGuide.activeBackground6#D98C8C50
• editorBracketPairGuide.background1#333333
• editorBracketPairGuide.background2#333333
• editorBracketPairGuide.background3#333333
• editorBracketPairGuide.background4#333333
• editorBracketPairGuide.background5#333333
• editorBracketPairGuide.background6#333333
• editorCodeLens.foreground#737373
• editorCursor.foreground#668099
• editorError.foreground#D96666
• editorGhostText.foreground#737373
• editorGroup.border#1A1A1A
• editorGroup.dropBackground#333333
• editorGroup.emptyBackground#262626
• editorGroupHeader.border#1A1A1A
• editorGroupHeader.noTabsBackground#1A1A1A
• editorGroupHeader.tabsBackground#1A1A1A
• editorGroupHeader.tabsBorder#1A1A1A
• editorGutter.addedBackground#8CD9B380
• editorGutter.deletedBackground#D98C8C80
• editorGutter.modifiedBackground#66809980
• editorHint.foreground#668099
• editorHoverWidget.background#1A1A1A
• editorHoverWidget.border#333333
• editorIndentGuide.activeBackground1#737373
• editorIndentGuide.background1#333333
• editorInfo.foreground#668099
• editorInlayHint.background#26262600
• editorInlayHint.foreground#737373
• editorLightBulb.foreground#B3864D
• editorLightBulbAutoFix.foreground#B3864D
• editorLineNumber.activeForeground#CCCCCC
• editorLineNumber.foreground#737373
• editorLink.activeForeground#668099
• editorMarkerNavigation.background#262626
• editorOverviewRuler.addedForeground#8CD9B380
• editorOverviewRuler.border#1A1A1A
• editorOverviewRuler.bracketMatchForeground#B3B3B3
• editorOverviewRuler.deletedForeground#D98C8C80
• editorOverviewRuler.errorForeground#D96666
• editorOverviewRuler.findMatchForeground#B3864D50
• editorOverviewRuler.infoForeground#668099
• editorOverviewRuler.modifiedForeground#66809980
• editorOverviewRuler.rangeHighlightForeground#363636
• editorOverviewRuler.selectionHighlightForeground#363636
• editorOverviewRuler.warningForeground#B3864D
• editorOverviewRuler.wordHighlightForeground#404040
• editorOverviewRuler.wordHighlightStrongForeground#505050
• editorPane.background#262626
• editorRuler.foreground#333333
• editorSuggestWidget.background#1A1A1A
• editorSuggestWidget.border#333333
• editorSuggestWidget.highlightForeground#668099
• editorSuggestWidget.selectedBackground#2B2B2B
• editorWarning.foreground#B3864D
• editorWhitespace.foreground#404040
• editorWidget.background#1A1A1A
• editorWidget.border#333333
• editorWidget.foreground#CCCCCC
• editorWidget.resizeBorder#333333
• errorForeground#D96666
• extensionBadge.remoteBackground#4C6680
• extensionBadge.remoteForeground#FFFFFF
• extensionButton.prominentBackground#4C6680
• extensionButton.prominentForeground#FFFFFF
• extensionButton.prominentHoverBackground#668099
• focusBorder#4C6680
• foreground#D9D9D9
• gitDecoration.addedResourceForeground#8CD9B3
• gitDecoration.conflictingResourceForeground#B3864D
• gitDecoration.deletedResourceForeground#D98C8C
• gitDecoration.ignoredResourceForeground#737373
• gitDecoration.modifiedResourceForeground#668099
• gitDecoration.renamedResourceForeground#8CB3D9
• gitDecoration.stageDeletedResourceForeground#D98C8C
• gitDecoration.stageModifiedResourceForeground#668099
• gitDecoration.untrackedResourceForeground#8CD9B3
• gitlens.gutterBackgroundColor#262626
• gitlens.gutterForegroundColor#737373
• gitlens.gutterUncommittedForegroundColor#CCCCCC
• gitlens.trailingLineForegroundColor#737373
• icon.foreground#B3B3B3
• inlineChat.background#1A1A1A
• inlineChat.foreground#CCCCCC
• inlineChatDiff.inserted#8CD9B320
• inlineChatDiff.removed#D98C8C20
• input.background#1A1A1A
• input.border#333333
• input.foreground#D9D9D9
• input.placeholderForeground#737373
• inputOption.activeBackground#4C668055
• inputOption.activeBorder#4C6680
• inputOption.activeForeground#FFFFFF
• inputValidation.errorBackground#B34D4D
• inputValidation.errorBorder#D96666
• inputValidation.errorForeground#FFFFFF
• inputValidation.infoBackground#333333
• inputValidation.infoBorder#4C6680
• inputValidation.infoForeground#FFFFFF
• inputValidation.warningBackground#B3864D
• inputValidation.warningBorder#996A36
• inputValidation.warningForeground#000000
• list.activeSelectionBackground#2B2B2B
• list.activeSelectionForeground#FFFFFF
• list.deemphasizedForeground#A6A6A6
• list.dropBackground#333333
• list.errorForeground#D96666
• list.focusBackground#303030
• list.focusForeground#FFFFFF
• list.highlightForeground#4C6680
• list.hoverBackground#2B2B2B
• list.hoverForeground#E6E6E6
• list.inactiveSelectionBackground#2B2B2B
• list.inactiveSelectionForeground#E6E6E6
• list.invalidItemForeground#D96666
• list.warningForeground#B3864D
• listFilterWidget.background#262626
• listFilterWidget.noMatchesOutline#D96666
• listFilterWidget.outline#4C6680
• menu.background#1A1A1A
• menu.border#333333
• menu.foreground#CCCCCC
• menu.selectionBackground#2B2B2B
• menu.selectionForeground#FFFFFF
• menu.separatorBackground#333333
• menubar.selectionBackground#333333
• menubar.selectionBorder#333333
• menubar.selectionForeground#FFFFFF
• merge.currentContentBackground#8CD9B320
• merge.currentHeaderBackground#8CD9B340
• merge.incomingContentBackground#66809920
• merge.incomingHeaderBackground#66809940
• mergeEditor.change.background#363636
• mergeEditor.change.word.background#404040
• mergeEditor.conflict.handled.minimapOverViewRuler#8CD9B3
• mergeEditor.conflict.handledFocused.border#8CD9B3
• mergeEditor.conflict.handledUnfocused.border#8CD9B3
• mergeEditor.conflict.unhandled.minimapOverViewRuler#B3864D
• mergeEditor.conflict.unhandledFocused.border#B3864D
• mergeEditor.conflict.unhandledUnfocused.border#B3864D
• mergeEditor.conflictingLines.background#B3864D50
• minimap.findMatchHighlight#B3864D50
• minimap.selectionHighlight#363636
• minimapGutter.addedBackground#8CD9B3
• minimapGutter.deletedBackground#D98C8C
• minimapGutter.modifiedBackground#668099
• multiDiffEditor.border#333333
• multiDiffEditor.headerBackground#1a1a1a
• notebook.cellBorderColor#333333
• notebook.cellEditorBackground#1A1A1A
• notebook.cellStatusBarItemHoverBackground#2B2B2B
• notebook.cellToolbarSeparator#333333
• notebook.editorBackground#262626
• notebook.focusedCellBorder#4C6680
• notebook.focusedEditorBorder#1A1A1A
• notificationCenterHeader.background#1A1A1A
• notificationLink.foreground#668099
• notifications.background#1A1A1A
• notificationsErrorIcon.foreground#D98C8C
• notificationsInfoIcon.foreground#668099
• notificationsWarningIcon.foreground#B3864D
• panel.background#1A1A1A
• panel.border#333333
• panelInput.border#333333
• panelTitle.activeBorder#4C6680
• panelTitle.activeForeground#FFFFFF
• panelTitle.inactiveForeground#A6A6A6
• peekView.border#333333
• peekViewEditor.background#262626
• peekViewEditor.matchHighlightBackground#B3864D30
• peekViewResult.background#1A1A1A
• peekViewResult.fileForeground#A6A6A6
• peekViewResult.lineForeground#E6E6E6
• peekViewResult.matchHighlightBackground#B3864D30
• peekViewResult.selectionBackground#2B2B2B
• peekViewResult.selectionForeground#FFFFFF
• peekViewTitle.background#1A1A1A
• peekViewTitleDescription.foreground#A6A6A6
• peekViewTitleLabel.foreground#FFFFFF
• pickerGroup.border#333333
• pickerGroup.foreground#E6E6E6
• progressBar.background#4C6680
• sash.hoverBorder#4C6680
• scmGraph.foreground1#B3864D
• scmGraph.foreground2#D98C8C
• scmGraph.foreground3#8CD9B3
• scmGraph.foreground4#668099
• scmGraph.foreground5#B38CD9
• scmGraph.historyItemBaseRefColor#B38CD9
• scmGraph.historyItemHoverAdditionsForeground#8CD9B3
• scmGraph.historyItemHoverDefaultLabelForeground#CCCCCC
• scmGraph.historyItemHoverDeletionsForeground#D98C8C
• scmGraph.historyItemHoverLabelForeground#CCCCCC
• scmGraph.historyItemRefColor#668099
• scmGraph.historyItemRemoteRefColor#8CB3D9
• scrollbar.shadow#00000020
• scrollbarSlider.activeBackground#60606080
• scrollbarSlider.background#40404080
• scrollbarSlider.hoverBackground#50505080
• selection.background#333333
• settings.headerForeground#FFFFFF
• sideBar.background#1A1A1A
• sideBar.border#262626
• sideBar.dropBackground#333333
• sideBar.foreground#D9D9D9
• sideBarSectionHeader.background#262626
• sideBarSectionHeader.border#1A1A1A
• sideBarSectionHeader.foreground#E6E6E6
• sideBarTitle.foreground#E6E6E6
• statusBar.background#1A1A1A
• statusBar.border#1A1A1A
• statusBar.debuggingBackground#B38CD9
• statusBar.debuggingForeground#FFFFFF
• statusBar.foreground#B3B3B3
• statusBar.noFolderBackground#1A1A1A
• statusBarItem.activeBackground#333333
• statusBarItem.hoverBackground#2B2B2B
• statusBarItem.prominentBackground#2B2B2B
• statusBarItem.prominentHoverBackground#333333
• statusBarItem.remoteBackground#4C6680
• statusBarItem.remoteForeground#FFFFFF
• tab.activeBackground#262626
• tab.activeBorder#4C6680
• tab.activeForeground#FFFFFF
• tab.activeModifiedBorder#B3864D
• tab.border#1A1A1A
• tab.hoverForeground#FFFFFF
• tab.inactiveBackground#1A1A1A
• tab.inactiveForeground#A6A6A6
• tab.inactiveModifiedBorder#A6A6A6
• tab.lastPinnedBorder#333333
• tab.unfocusedActiveBorder#262626
• tab.unfocusedActiveForeground#E6E6E6
• tab.unfocusedHoverForeground#E6E6E6
• tab.unfocusedInactiveForeground#A6A6A6
• terminal.ansiBlack#262626
• terminal.ansiBlue#668099
• terminal.ansiBrightBlack#737373
• terminal.ansiBrightBlue#668099
• terminal.ansiBrightCyan#8CB3D9
• terminal.ansiBrightGreen#8CD9B3
• terminal.ansiBrightMagenta#B38CD9
• terminal.ansiBrightRed#D98C8C
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#B3864D
• terminal.ansiCyan#8CB3D9
• terminal.ansiGreen#8CD9B3
• terminal.ansiMagenta#B38CD9
• terminal.ansiRed#D98C8C
• terminal.ansiWhite#CCCCCC
• terminal.ansiYellow#B3864D
• terminal.background#262626
• terminal.foreground#CCCCCC
• terminal.selectionBackground#363636
• terminalCursor.background#668099
• terminalCursor.foreground#FFFFFF
• textBlockQuote.background#1A1A1A
• textBlockQuote.border#333333
• textCodeBlock.background#1A1A1A
• textLink.activeForeground#8099B3
• textLink.foreground#668099
• textPreformat.foreground#B3864D
• textSeparator.foreground#333333
• titleBar.activeBackground#1A1A1A
• titleBar.activeForeground#B3B3B3
• titleBar.border#1A1A1A
• titleBar.inactiveBackground#1A1A1A
• titleBar.inactiveForeground#737373
• toolbar.activeBackground#262626
• toolbar.hoverBackground#333333
• tree.indentGuidesStroke#333333
• walkThrough.embeddedEditorBackground#262626
• widget.shadow#00000020
• window.activeBorder#262626
• window.inactiveBorder#1A1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).