Grayscale

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#555555
• activityBar.activeBorder#eeeeee
• activityBar.background#333333
• activityBar.foreground#eeeeee
• activityBar.inactiveForeground#777777
• activityBarBadge.background#eeeeee
• activityBarBadge.foreground#333333
• activityBarItem.settingsProfilesBackground#4d4d4d
• badge.background#333333
• badge.foreground#eeeeee
• breadcrumb.activeSelectionForeground#333333
• breadcrumb.background#dddddd
• breadcrumb.focusForeground#555555
• breadcrumb.foreground#999999
• breadcrumbPicker.background#dddddd
• button.background#333333
• button.border#bbbbbb
• button.foreground#eeeeee
• button.hoverBackground#555555
• contrastBorder#bbbbbb
• debugIcon.breakpointDisabledForeground#999999
• debugIcon.breakpointForeground#333333
• disabledForeground#999999
• editor.background#dddddd
• editor.findMatchBackground#eeeeee
• editor.findMatchBorder#eeeeee
• editor.findMatchHighlightBackground#bbbbbb
• editor.findMatchHighlightBorder#bbbbbb
• editor.foldBackground#bbbbbb
• editor.foreground#333333
• editor.hoverHighlightBackground#eeeeee
• editor.inactiveSelectionBackground#eeeeee
• editor.lineHighlightBackground#cccccc
• editor.lineHighlightBorder#cccccc
• editor.selectionBackground#bbbbbb
• editor.selectionForeground#eeeeee
• editor.selectionHighlightBackground#cccccc
• editor.selectionHighlightBorder#cccccc
• editorIndentGuide.activeBackground#bbbbbb
• editorIndentGuide.background#bbbbbb
• editorLineNumber.activeForeground#333333
• editorLineNumber.foreground#999999
• editorSuggestWidget.background#cccccc
• editorSuggestWidget.border#bbbbbb
• editorSuggestWidget.focusHighlightForeground#333333
• editorSuggestWidget.foreground#333333
• editorSuggestWidget.highlightForeground#333333
• editorSuggestWidget.selectedBackground#eeeeee
• editorSuggestWidget.selectedForeground#333333
• editorSuggestWidget.selectedIconForeground#333333
• editorWidget.background#dddddd
• editorWidget.border#bbbbbb
• editorWidget.foreground#333333
• focusBorder#bbbbbb
• foreground#333333
• icon.foreground#bbbbbb
• input.background#eeeeee
• input.border#bbbbbb
• input.foreground#333333
• input.placeholderForeground#999999
• list.activeSelectionBackground#777777
• list.activeSelectionForeground#eeeeee
• list.activeSelectionIconForeground#eeeeee
• list.focusAndSelectionOutline#777777
• list.focusBackground#777777
• list.focusForeground#eeeeee
• list.focusHighlightForeground#eeeeee
• list.focusOutline#eeeeee
• list.highlightForeground#333333
• list.hoverBackground#999999
• list.hoverForeground#eeeeee
• list.inactiveFocusBackground#777777
• list.inactiveFocusOutline#777777
• list.inactiveSelectionBackground#777777
• list.inactiveSelectionForeground#eeeeee
• list.inactiveSelectionIconForeground#eeeeee
• menu.background#333333
• menu.border#777777
• menu.foreground#eeeeee
• menu.selectionBackground#777777
• menu.selectionBorder#777777
• menu.selectionForeground#eeeeee
• menu.separatorBackground#777777
• menubar.selectionBackground#333333
• menubar.selectionBorder#777777
• menubar.selectionForeground#eeeeee
• minimap.background#bbbbbb
• minimap.selectionHighlight#777777
• notebook.cellBorderColor#e8e8e8
• notebook.selectedCellBackground#c8ddf150
• notificationCenter.border#777777
• notificationCenterHeader.background#dddddd
• notificationCenterHeader.foreground#333333
• notificationLink.foreground#333333
• notifications.background#dddddd
• notifications.border#777777
• notifications.foreground#333333
• notificationsErrorIcon.foreground#333333
• notificationsInfoIcon.foreground#333333
• notificationsWarningIcon.foreground#333333
• panel.background#dddddd
• panelTitle.activeBorder#333333
• panelTitle.activeForeground#333333
• panelTitle.inactiveForeground#333333
• peekView.border#bbbbbb
• peekViewEditor.background#cccccc
• peekViewEditor.matchHighlightBackground#eeeeee
• peekViewEditor.matchHighlightBorder#eeeeee
• peekViewEditorGutter.background#bbbbbb
• peekViewResult.background#cccccc
• peekViewResult.fileForeground#333333
• peekViewResult.lineForeground#333333
• peekViewResult.matchHighlightBackground#eeeeee
• peekViewResult.selectionBackground#bbbbbb
• peekViewResult.selectionForeground#333333
• peekViewTitle.background#333333
• peekViewTitleDescription.foreground#eeeeee
• peekViewTitleLabel.foreground#eeeeee
• problemsErrorIcon.foreground#333333
• problemsInfoIcon.foreground#333333
• problemsWarningIcon.foreground#333333
• scrollbar.shadow#777777
• scrollbarSlider.activeBackground#555555
• scrollbarSlider.background#333333
• scrollbarSlider.hoverBackground#555555
• searchEditor.textInputBorder#cecece
• settings.numberInputBorder#cecece
• settings.textInputBorder#cecece
• sideBar.background#bbbbbb
• sideBar.border#777777
• sideBar.foreground#333333
• sideBarSectionHeader.background#333333
• sideBarSectionHeader.border#777777
• sideBarSectionHeader.foreground#eeeeee
• sideBarTitle.foreground#333333
• statusBar.background#333333
• statusBar.border#777777
• statusBar.foreground#eeeeee
• statusBarItem.remoteForeground#ffffff
• tab.activeBackground#cccccc
• tab.activeForeground#333333
• tab.border#bbbbbb
• tab.hoverBackground#dddddd
• tab.hoverForeground#333333
• tab.inactiveBackground#eeeeee
• tab.inactiveForeground#333333
• tab.lastPinnedBorder#61616130
• terminal.background#333333
• terminal.foreground#eeeeee
• terminal.inactiveSelectionBackground#e5ebf1
• terminal.selectionBackground#bbbbbb
• titleBar.activeBackground#333333
• titleBar.activeForeground#eeeeee
• toolbar.activeBackground#bbbbbb
• toolbar.hoverBackground#dddddd
• toolbar.hoverOutline#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).