Sunset Graphite

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#00000000
• activityBar.activeBorder#ffffff
• activityBar.activeFocusBorder#ffffff
• activityBar.background#1e2428
• activityBar.border#0f1519
• activityBar.dropBorder#4e5255
• activityBar.foreground#ffffff
• activityBar.inactiveForeground#bcbdbe
• activityBarBadge.background#4e5255
• activityBarBadge.foreground#ffffff
• badge.background#3e4246
• badge.foreground#dcdcdc
• breadcrumb.activeSelectionForeground#dcdcdc
• breadcrumb.background#0f1519
• breadcrumb.focusForeground#dcdcdc
• breadcrumb.foreground#bcbdbe
• breadcrumbPicker.background#0f1519
• button.background#ffcc66
• button.border#00000000
• button.foreground#1e2428
• button.hoverBackground#ffff80
• button.secondaryBackground#ffcc66
• button.secondaryForeground#1e2428
• button.secondaryHoverBackground#ffff80
• contrastActiveBorder#00000000
• contrastBorder#00000000
• debugConsole.errorForeground#e54545
• debugConsole.infoForeground#45e545
• debugConsole.sourceForeground#4545e5
• debugConsole.warningForeground#e5e545
• debugConsoleInputIcon.foreground#acaeaf
• debugExceptionWidget.background#1e2428
• debugExceptionWidget.border#dcdcdc
• debugIcon.breakpointCurrentStackframeForeground#ffcc66
• debugIcon.breakpointDisabledForeground#4e5255
• debugIcon.breakpointForeground#e54545
• debugIcon.breakpointStackframeForeground#ffcc66
• debugIcon.breakpointUnverifiedForeground#e54545
• debugToolBar.background#1e2428
• debugToolBar.border#80ff80
• descriptionForeground#dcdcdc
• diffEditor.border#00000000
• diffEditor.diagonalFill#1e2428
• diffEditor.insertedTextBackground#45e54525
• diffEditor.insertedTextBorder#45e54540
• diffEditor.removedTextBackground#e5454525
• diffEditor.removedTextBorder#e5454540
• dropdown.background#0f1519
• dropdown.border#0f1519
• dropdown.foreground#dcdcdc
• dropdown.listBackground#0f1519
• editor.background#0f1519
• editor.findMatchBackground#4545e590
• editor.findMatchBorder#00000000
• editor.findMatchHighlightBackground#4545e550
• editor.findMatchHighlightBorder#00000000
• editor.findRangeHighlightBackground#4545e550
• editor.findRangeHighlightBorder#00000000
• editor.focusedStackFrameHighlightBackground#e5454520
• editor.foldBackground#00000000
• editor.foreground#dcdcdc
• editor.hoverHighlightBackground#4e525550
• editor.inactiveSelectionBackground#1e242880
• editor.lineHighlightBackground#4e525550
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBackground#4e525515
• editor.rangeHighlightBorder#ffcc66
• editor.selectionBackground#4e525550
• editor.selectionForeground#dcdcdc
• editor.selectionHighlightBackground#4e525550
• editor.selectionHighlightBorder#00000000
• editor.snippetFinalTabstopHighlightBackground#00000000
• editor.snippetFinalTabstopHighlightBorder#00000000
• editor.snippetTabstopHighlightBackground#00000000
• editor.snippetTabstopHighlightBorder#80ff80
• editor.stackFrameHighlightBackground#e5454520
• editor.symbolHighlightBackground#00000000
• editor.symbolHighlightBorder#80ff80
• editor.wordHighlightBackground#ffcc6630
• editor.wordHighlightBorder#00000000
• editor.wordHighlightStrongBackground#00000000
• editor.wordHighlightStrongBorder#00000000
• editorBracketMatch.background#ffcc6650
• editorBracketMatch.border#00000000
• editorCodeLens.foreground#dcdcdc
• editorCursor.background#0f1519
• editorCursor.foreground#ffcc66
• editorError.border#00000000
• editorError.foreground#e54545
• editorGroup.border#000000
• editorGroup.dropBackground#3e4246
• editorGroup.emptyBackground#0f1519
• editorGroup.focusedEmptyBorder#ffcc66
• editorGroupHeader.border#3e4246
• editorGroupHeader.noTabsBackground#1e2428
• editorGroupHeader.tabsBackground#1e2428
• editorGroupHeader.tabsBorder#3e4246
• editorGutter.addedBackground#45e545
• editorGutter.background#1e2428
• editorGutter.commentRangeForeground#8080ff
• editorGutter.deletedBackground#e54545
• editorGutter.foldingControlForeground#ffffff
• editorGutter.modifiedBackground#e5e545
• editorHint.border#8080ff
• editorHint.foreground#8080ff
• editorHoverWidget.background#1e2428
• editorHoverWidget.border#3e4246
• editorHoverWidget.foreground#dcdcdc
• editorHoverWidget.statusBarBackground#1e2428
• editorInfo.border#00000000
• editorInfo.foreground#8080ff
• editorLineNumber.activeForeground#dcdcdc
• editorLineNumber.foreground#4e5255
• editorLink.activeForeground#ffcc66
• editorMarkerNavigation.background#1e2428
• editorMarkerNavigationError.background#ff8080
• editorMarkerNavigationInfo.background#8080ff
• editorMarkerNavigationWarning.background#ffff80
• editorOverviewRuler.addedForeground#45e545
• editorOverviewRuler.background#1e2428
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#ffcc66
• editorOverviewRuler.commonContentForeground#ffcc66
• editorOverviewRuler.currentContentForeground#ffcc66
• editorOverviewRuler.deletedForeground#ffcc66
• editorOverviewRuler.errorForeground#e54545
• editorOverviewRuler.findMatchForeground#4545e590
• editorOverviewRuler.incomingContentForeground#ffcc66
• editorOverviewRuler.infoForeground#00000000
• editorOverviewRuler.modifiedForeground#ffcc66
• editorOverviewRuler.rangeHighlightForeground#00000000
• editorOverviewRuler.selectionHighlightForeground#00000000
• editorOverviewRuler.warningForeground#e54545
• editorOverviewRuler.wordHighlightForeground#00000000
• editorOverviewRuler.wordHighlightStrongForeground#00000000
• editorPane.background#1e2428
• editorRuler.foreground#4e5255
• editorSuggestWidget.background#1e2428
• editorSuggestWidget.border#0f1519
• editorSuggestWidget.foreground#dcdcdc
• editorSuggestWidget.highlightForeground#ffcc66
• editorSuggestWidget.selectedBackground#3e4246
• editorUnnecessaryCode.border#8080ff
• editorUnnecessaryCode.opacity#8080ff
• editorWarning.border#00000000
• editorWarning.foreground#ffcc66
• editorWhitespace.foreground#4e5255
• editorWidget.background#1e2428
• editorWidget.border#3e4246
• editorWidget.foreground#bcbdbe
• editorWidget.resizeBorder#ffcc66
• errorForeground#e54545
• extensionBadge.remoteBackground#4e5255
• extensionBadge.remoteForeground#ffffff
• extensionButton.prominentBackground#ffcc66
• extensionButton.prominentForeground#1e2428
• extensionButton.prominentHoverBackground#ffff80
• extensionIcon.starForeground#ffcc66
• focusBorder#00000000
• foreground#dcdcdc
• gitDecoration.addedResourceForeground#ffcc66
• gitDecoration.conflictingResourceForeground#ff8080
• gitDecoration.deletedResourceForeground#ff8080
• gitDecoration.ignoredResourceForeground#6d7073
• gitDecoration.modifiedResourceForeground#ffcc66
• gitDecoration.submoduleResourceForeground#cc8f52
• gitDecoration.untrackedResourceForeground#80ffff
• icon.foreground#dcdcdc
• input.background#1e2428
• input.border#3e4246
• input.foreground#dcdcdc
• input.placeholderForeground#dcdcdc
• inputOption.activeBackground#0f1519
• inputOption.activeBorder#ffcc66
• inputOption.activeForeground#dcdcdc
• inputValidation.errorBackground#1e2428
• inputValidation.errorBorder#00000000
• inputValidation.errorForeground#e54545
• inputValidation.infoBackground#1e2428
• inputValidation.infoBorder#00000000
• inputValidation.infoForeground#e54545
• inputValidation.warningBackground#1e2428
• inputValidation.warningBorder#00000000
• inputValidation.warningForeground#e54545
• list.activeSelectionBackground#3e4246
• list.activeSelectionForeground#dcdcdc
• list.deemphasizedForeground#6d7073
• list.dropBackground#3e4246
• list.errorForeground#e54545
• list.filterMatchBackground#4545e590
• list.filterMatchBorder#00000000
• list.focusBackground#3e4246
• list.focusForeground#dcdcdc
• list.highlightForeground#ffcc66
• list.hoverBackground#1e2428
• list.hoverForeground#dcdcdc
• list.inactiveFocusBackground#3e4246
• list.inactiveSelectionBackground#3e4246
• list.inactiveSelectionForeground#dcdcdc
• list.invalidItemForeground#6d7073
• list.warningForeground#e54545
• listFilterWidget.background#0f1519
• listFilterWidget.noMatchesOutline#e54545
• listFilterWidget.outline#45e545
• menu.background#1e2428
• menu.border#1e2428
• menu.foreground#bcbdbe
• menu.selectionBackground#3e4246
• menu.selectionBorder#00000000
• menu.selectionForeground#dcdcdc
• menu.separatorBackground#4e5255
• menubar.selectionBackground#3e4246
• menubar.selectionBorder#00000000
• menubar.selectionForeground#dcdcdc
• merge.border#00000000
• merge.commonContentBackground#00000000
• merge.commonHeaderBackground#00000000
• merge.currentContentBackground#00000000
• merge.currentHeaderBackground#00000000
• merge.incomingContentBackground#00000000
• merge.incomingHeaderBackground#00000000
• minimap.errorHighlight#e54545
• minimap.findMatchHighlight#4545e590
• minimap.selectionHighlight#4e525590
• minimap.warningHighlight#e54545
• minimapGutter.addedBackground#45e545
• minimapGutter.deletedBackground#e54545
• minimapGutter.modifiedBackground#45e545
• notebook.cellBorderColor#1e2428
• notebook.cellEditorBackground#0f1519
• notebook.cellToolbarSeparator#6d7073
• notebook.focusedEditorBorder#1e2428
• notebook.outputContainerBackgroundColor#1e2428
• notebook.outputContainerBorderColor#1e2428
• notificationCenter.border#1e2428
• notificationCenterHeader.background#1e2428
• notificationCenterHeader.foreground#dcdcdc
• notificationLink.foreground#8080ff
• notifications.background#1e2428
• notifications.border#00000000
• notifications.foreground#dcdcdc
• notificationToast.border#1e2428
• panel.background#1e2428
• panel.border#000000
• panel.dropBorder#4e5255
• panelTitle.activeBorder#ffffff
• panelTitle.activeForeground#ffffff
• panelTitle.inactiveForeground#acaeaf
• peekView.border#3e4246
• peekViewEditor.background#0f1519
• peekViewEditor.matchHighlightBackground#1e2428bb
• peekViewEditor.matchHighlightBorder#00000000
• peekViewEditorGutter.background#1e2428
• peekViewResult.background#1e2428
• peekViewResult.fileForeground#dcdcdc
• peekViewResult.lineForeground#ffffff
• peekViewResult.matchHighlightBackground#1e2428
• peekViewResult.selectionBackground#1e2428
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#1e2428
• peekViewTitleDescription.foreground#dcdcdc
• peekViewTitleLabel.foreground#ffcc66
• pickerGroup.border#0f1519
• pickerGroup.foreground#dcdcdc
• progressBar.background#ffcc66
• quickInput.background#1e2428
• quickInput.foreground#dcdcdc
• quickInputTitle.background#1e2428
• sash.hoverBorder#bcbdbe
• scrollbar.shadow#0f1519
• scrollbarSlider.activeBackground#dcdcdc
• scrollbarSlider.background#6d7073
• scrollbarSlider.hoverBackground#dcdcdc
• searchEditor.findMatchBackground#4545e590
• searchEditor.findMatchBorder#00000000
• searchEditor.textInputBorder#3e4246
• selection.background#6d7073
• settings.checkboxBackground#1e2428
• settings.checkboxBorder#3e4246
• settings.checkboxForeground#dcdcdc
• settings.dropdownBackground#1e2428
• settings.dropdownBorder#3e4246
• settings.dropdownForeground#dcdcdc
• settings.headerForeground#ffcc66
• settings.modifiedItemIndicator#cc8f52
• settings.numberInputBackground#1e2428
• settings.numberInputBorder#3e4246
• settings.numberInputForeground#dcdcdc
• settings.textInputBackground#1e2428
• settings.textInputBorder#3e4246
• settings.textInputForeground#dcdcdc
• sideBar.background#0f1519
• sideBar.border#000000
• sideBar.dropBackground#dcdcdc75
• sideBar.foreground#dcdcdc
• sideBarSectionHeader.background#1e2428
• sideBarSectionHeader.border#00000000
• sideBarSectionHeader.foreground#dcdcdc
• sideBarTitle.foreground#dcdcdc
• statusBar.background#1e2428
• statusBar.border#0f1519
• statusBar.debuggingBackground#1e2428
• statusBar.debuggingBorder#ffcc66
• statusBar.debuggingForeground#dcdcdc
• statusBar.foreground#dcdcdc
• statusBar.noFolderBackground#1e2428
• statusBar.noFolderBorder#3e4246
• statusBar.noFolderForeground#dcdcdc
• statusBarItem.activeBackground#0f1519
• statusBarItem.hoverBackground#3e4246
• statusBarItem.prominentBackground#1e2428
• statusBarItem.prominentForeground#bcbdbe
• statusBarItem.prominentHoverBackground#3e4246
• statusBarItem.remoteBackground#1e2428
• statusBarItem.remoteForeground#bcbdbe
• tab.activeBackground#0f1519
• tab.activeBorder#dcdcdc
• tab.activeBorderTop#00000000
• tab.activeForeground#dcdcdc
• tab.border#0f1519
• tab.hoverBackground#3e4246
• tab.hoverBorder#00000000
• tab.hoverForeground#ffffff
• tab.inactiveBackground#1e2428
• tab.inactiveForeground#dcdcdc
• tab.unfocusedActiveBackground#0f1519
• tab.unfocusedActiveBorder#dcdcdc
• tab.unfocusedActiveBorderTop#00000000
• tab.unfocusedActiveForeground#ffffff
• tab.unfocusedHoverBackground#3e4246
• tab.unfocusedHoverBorder#dcdcdc
• tab.unfocusedHoverForeground#ffffff
• tab.unfocusedInactiveBackground#1e2428
• tab.unfocusedInactiveForeground#dcdcdc
• terminal.ansiBlack#0f1519
• terminal.ansiBlue#4545e5
• terminal.ansiBrightBlack#808080
• terminal.ansiBrightBlue#8080ff
• terminal.ansiBrightCyan#80ffff
• terminal.ansiBrightGreen#80ff80
• terminal.ansiBrightMagenta#ff80ff
• terminal.ansiBrightRed#ff8080
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffff80
• terminal.ansiCyan#45e5e5
• terminal.ansiGreen#45e545
• terminal.ansiMagenta#e545e5
• terminal.ansiRed#e54545
• terminal.ansiWhite#dcdcdc
• terminal.ansiYellow#e5e545
• terminal.background#1e2428
• terminal.border#dcdcdc
• terminal.foreground#dcdcdc
• terminal.selectionBackground#4e525550
• terminalCursor.background#0f1519
• terminalCursor.foreground#ffcc66
• textBlockQuote.background#1e2428
• textBlockQuote.border#ffcc66
• textCodeBlock.background#1e2428
• textLink.activeForeground#80ff80
• textLink.foreground#8080ff
• textPreformat.foreground#ffcc66
• textSeparator.foreground#ffcc66
• titleBar.activeBackground#1e2428
• titleBar.activeForeground#dcdcdc
• titleBar.border#0f1519
• titleBar.inactiveBackground#1e2428
• titleBar.inactiveForeground#dcdcdc
• tree.indentGuidesStroke#4e5255
• walkThrough.embeddedEditorBackground#1e2428
• welcomePage.background#0f1519
• widget.shadow#0f1519

tokenColors

TextMate scopes and font styles (syntax highlighting rules).