Black Metal

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.activeBorder#486e6f
• activityBar.background#050505
• activityBar.border#404040
• activityBar.foreground#c1c1c1
• activityBar.inactiveForeground#888888
• badge.background#486e6f
• badge.foreground#f0f0f0
• button.background#486e6f
• button.foreground#f0f0f0
• button.hoverBackground#568081
• diffEditor.insertedTextBackground#486e6f22
• diffEditor.removedTextBackground#a0666622
• dropdown.background#0f0f0f
• dropdown.border#404040
• dropdown.foreground#c1c1c1
• editor.background#000000
• editor.findMatchBackground#a0666644
• editor.findMatchHighlightBackground#a0666626
• editor.foreground#c1c1c1
• editor.inactiveSelectionBackground#c1c1c126
• editor.lineHighlightBackground#ffffff08
• editor.selectionBackground#c1c1c140
• editor.selectionHighlightBackground#486e6f22
• editor.wordHighlightBackground#aaaaaa14
• editor.wordHighlightStrongBackground#aaaaaa22
• editorBracketMatch.background#486e6f20
• editorBracketMatch.border#486e6f66
• editorCursor.foreground#c1c1c1
• editorError.foreground#dd9999
• editorGroup.border#404040
• editorGroupHeader.tabsBackground#000000
• editorHoverWidget.background#050505
• editorHoverWidget.border#404040
• editorIndentGuide.activeBackground1#404040
• editorIndentGuide.background1#202020
• editorInfo.foreground#486e6f
• editorLineNumber.activeForeground#999999
• editorLineNumber.foreground#555555
• editorRuler.foreground#202020
• editorWarning.foreground#a06666
• editorWhitespace.foreground#2a2a2a
• focusBorder#486e6f
• foreground#c1c1c1
• input.background#0f0f0f
• input.border#404040
• input.foreground#c1c1c1
• list.activeSelectionBackground#111111
• list.activeSelectionForeground#c1c1c1
• list.focusAndSelectionOutline#486e6f
• list.focusOutline#486e6f
• list.highlightForeground#486e6f
• list.hoverBackground#101010
• list.inactiveFocusOutline#486e6f
• list.inactiveSelectionBackground#171717
• list.inactiveSelectionForeground#f0f0f0
• list.inactiveSelectionIconForeground#c1c1c1
• notificationCenterHeader.background#0f0f0f
• notificationCenterHeader.foreground#c1c1c1
• notifications.background#050505
• notifications.foreground#c1c1c1
• panel.background#050505
• panel.border#404040
• peekView.border#404040
• peekViewEditor.background#050505
• peekViewResult.background#0a0a0a
• peekViewResult.selectionBackground#111111
• peekViewResult.selectionForeground#c1c1c1
• peekViewTitle.background#0f0f0f
• scrollbarSlider.activeBackground#486e6f66
• scrollbarSlider.background#40404066
• scrollbarSlider.hoverBackground#40404099
• sideBar.background#050505
• sideBar.border#404040
• sideBar.foreground#aaaaaa
• sideBarTitle.foreground#c1c1c1
• statusBar.background#0f0f0f
• statusBar.border#404040
• statusBar.foreground#c1c1c1
• tab.activeBackground#101010
• tab.activeBorderTop#486e6f
• tab.activeForeground#c1c1c1
• tab.border#404040
• tab.inactiveBackground#000000
• tab.inactiveForeground#888888
• terminal.ansiBlack#000000
• terminal.ansiBlue#888888
• terminal.ansiBrightBlack#404040
• terminal.ansiBrightBlue#888888
• terminal.ansiBrightCyan#aaaaaa
• terminal.ansiBrightGreen#dd9999
• terminal.ansiBrightMagenta#999999
• terminal.ansiBrightRed#486e6f
• terminal.ansiBrightWhite#c1c1c1
• terminal.ansiBrightYellow#a06666
• terminal.ansiCyan#aaaaaa
• terminal.ansiGreen#dd9999
• terminal.ansiMagenta#999999
• terminal.ansiRed#486e6f
• terminal.ansiWhite#c1c1c1
• terminal.ansiYellow#a06666
• terminal.background#000000
• terminal.foreground#c1c1c1
• titleBar.activeBackground#050505
• titleBar.activeForeground#c1c1c1
• titleBar.inactiveBackground#000000
• titleBar.inactiveForeground#888888
• widget.border#404040
• widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).