Darkened

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.background#000000
• activityBar.border#333333
• activityBar.foreground#875FAF
• activityBarBadge.background#875FAF
• activityBarBadge.foreground#000000
• badge.background#875FAF
• badge.foreground#000000
• breadcrumb.activeSelectionForeground#bec7d1
• breadcrumb.focusForeground#bec7d1
• breadcrumb.foreground#4e4c78
• breadcrumbPicker.background#000000
• button.background#875FAF
• button.foreground#000000
• button.hoverBackground#a786ff
• dialog.background#000000
• dialog.border#333333
• dialog.foreground#bec7d1
• dropdown.background#000000
• dropdown.border#333333
• dropdown.foreground#bec7d1
• editor.background#000000
• editor.findMatchBackground#000000
• editor.findMatchHighlightBackground#2b2b2b
• editor.findRangeHighlightBackground#1a1a1a
• editor.foreground#bec7d1
• editor.hoverHighlightBackground#1a1a1a
• editor.inactiveSelectionBackground#333333
• editor.lineHighlightBackground#000000
• editor.selectionBackground#262626
• editor.selectionHighlightBackground#333333
• editorCursor.foreground#87FF5F
• editorGroup.border#333333
• editorGroupHeader.tabsBackground#000000
• editorLineNumber.foreground#4e4c78
• editorWidget.background#000000
• editorWidget.border#333333
• input.background#000000
• input.border#333333
• input.foreground#bec7d1
• input.placeholderForeground#4e4c78
• inputOption.activeBorder#875FAF
• list.activeSelectionBackground#875FAF
• list.activeSelectionForeground#000000
• list.focusBackground#000000
• list.focusForeground#9cda7c
• list.highlightForeground#9cda7c
• list.hoverBackground#1a1a1a
• list.inactiveSelectionBackground#333333
• panel.background#000000
• panel.border#333333
• panelTitle.activeBorder#875FAF
• panelTitle.activeForeground#bec7d1
• panelTitle.inactiveForeground#4e4c78
• peekViewEditor.background#000000
• peekViewEditor.matchHighlightBackground#262626
• peekViewResult.background#000000
• peekViewResult.fileForeground#bec7d1
• peekViewResult.lineForeground#bec7d1
• peekViewResult.matchHighlightBackground#262626
• peekViewResult.selectionBackground#875FAF
• peekViewResult.selectionForeground#000000
• peekViewTitle.background#000000
• peekViewTitleDescription.foreground#4e4c78
• peekViewTitleLabel.foreground#bec7d1
• progressBar.background#875FAF
• quickInput.background#000000
• quickInput.foreground#bec7d1
• scrollbar.shadow#000000
• scrollbarSlider.activeBackground#4e4e4e
• scrollbarSlider.background#2b2b2b
• scrollbarSlider.hoverBackground#3c3c3c
• searchEditor.queryMatchBackground#262626
• searchEditor.queryMatchHighlightBackground#1a1a1a
• searchEditor.textInputBorder#333333
• sideBar.background#000000
• sideBar.border#333333
• sideBar.foreground#bec7d1
• sideBarSectionHeader.background#1a1a1a
• sideBarSectionHeader.foreground#bec7d1
• sideBarTitle.foreground#bec7d1
• statusBar.background#000000
• statusBar.border#333333
• statusBar.foreground#9cda7c
• tab.activeBackground#000000
• tab.activeBorder#875FAF
• tab.activeBorderTop#875FAF
• tab.border#333333
• tab.hoverBackground#000000
• tab.inactiveBackground#000000
• tab.unfocusedActiveBackground#000000
• tab.unfocusedHoverBackground#000000
• tab.unfocusedInactiveBackground#000000
• terminal.background#000000
• terminal.foreground#87FF5F
• terminalCursor.background#000000
• terminalCursor.foreground#87FF5F
• titleBar.activeBackground#000000
• titleBar.activeForeground#bec7d1
• titleBar.inactiveBackground#333333
• titleBar.inactiveForeground#4e4c78

tokenColors

TextMate scopes and font styles (syntax highlighting rules).