Boss

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#21252b
• activityBar.border#0d1117
• activityBar.dropBackground#0d1117
• activityBar.foreground#ffffff
• activityBar.inactiveForeground#5f6672
• activityBarBadge.background#E06C75
• activityBarBadge.foreground#ffffff
• badge.background#0d1117
• badge.foreground#ffffff
• button.background#E06C75
• contrastBorder#0d1117
• debugToolBar.background#0d1117
• dropdown.background#141522
• dropdown.border#0d1117
• dropdown.listBackground#141522
• editor.background#141522
• editor.findMatchBackground#292936
• editor.findMatchBorder#292936
• editor.findMatchHighlightBackground#292936
• editor.findMatchHighlightBorder#292936
• editor.foreground#cbd5e7
• editor.lineHighlightBackground#a9b2c31a
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBorder#d4d7d900
• editor.selectionBackground#212F3F
• editor.selectionHighlightBackground#ffffff10
• editor.selectionHighlightBorder#ffffff10
• editor.wordHighlightBackground#ffffff10
• editor.wordHighlightBorder#ffffff00
• editor.wordHighlightStrongBackground#ffffff10
• editor.wordHighlightStrongBorder#ffffff00
• editorActiveLineNumber.foreground#d4d7d9
• editorBracketMatch.background#00000000
• editorBracketMatch.border#61afef
• editorCursor.foreground#a9b2c3
• editorError.foreground#E06C75
• editorGroup.background#181a1f
• editorGroup.border#1d1f2e
• editorGroupHeader.tabsBackground#181a1f
• editorHoverWidget.background#1d1f2e
• editorHoverWidget.border#1d1f2e
• editorHoverWidget.statusBarBackground#1d1f2e
• editorIndentGuide.activeBackground#a9b2c333
• editorIndentGuide.background#a9b2c31a
• editorInfo.foreground#61afef
• editorLineNumber.foreground#5f6672
• editorOverviewRuler.border#0d1117
• editorOverviewRuler.errorForeground#E06C75
• editorOverviewRuler.infoForeground#61afef
• editorOverviewRuler.warningForeground#e9d16c
• editorRuler.foreground#a9b2c31a
• editorSuggestWidget.background#1d1f2e
• editorSuggestWidget.border#1d1f2e
• editorSuggestWidget.selectedBackground#a9b2c31a
• editorWarning.foreground#e9d16c
• editorWhitespace.foreground#a9b2c31a
• editorWidget.background#181a1f
• errorForeground#E06C75
• focusBorder#61afef
• gitDecoration.deletedResourceForeground#e06c75
• gitDecoration.modifiedResourceForeground#d19a66
• gitDecoration.untrackedResourceForeground#6ad78e
• input.background#0d1117
• inputOption.activeBorder#61afef
• inputValidation.errorBackground#E06C75
• inputValidation.errorBorder#E06C75
• inputValidation.infoBackground#61afef
• inputValidation.infoBorder#61afef
• inputValidation.infoForeground#0d1117
• inputValidation.warningBackground#e9d16c
• inputValidation.warningBorder#e9d16c
• inputValidation.warningForeground#0d1117
• list.activeSelectionBackground#a9b2c333
• list.errorForeground#E06C75
• list.focusBackground#a9b2c333
• list.hoverBackground#a9b2c31a
• list.inactiveSelectionBackground#a9b2c333
• list.inactiveSelectionForeground#d4d7d9
• list.warningForeground#e9d16c
• menu.background#141522
• notificationCenterHeader.background#181a1f
• notifications.background#181a1f
• panel.background#141522
• panel.border#0d1117
• panel.dropBackground#141522
• peekView.border#61afef
• peekViewEditor.background#181a1f
• peekViewEditor.matchHighlightBackground#a9b2c333
• peekViewResult.background#181a1f
• peekViewResult.matchHighlightBackground#a9b2c333
• peekViewResult.selectionBackground#a9b2c31a
• peekViewResult.selectionForeground#d4d7d9
• peekViewTitle.background#181a1f
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#a9b2c333
• scrollbarSlider.background#a9b2c31a
• scrollbarSlider.hoverBackground#a9b2c333
• selection.background#1d1f2e
• sideBar.background#1d1f2e
• sideBar.border#0d1117
• sideBar.dropBackground#1d1f2e
• sideBarSectionHeader.background#1d1f2e
• statusBar.background#141522
• statusBar.border#0d1117
• statusBar.debuggingBackground#181a1f
• statusBar.foreground#a9b2c3
• statusBar.noFolderBackground#181a1f
• statusBarItem.hoverBackground#181a1f
• tab.activeBackground#21252b
• tab.activeForeground#d4d7d9
• tab.border#0d1117
• tab.hoverBackground#a9b2c31a
• tab.inactiveBackground#181a1f
• tab.inactiveForeground#5f6672
• terminal.ansiBlack#21252b
• terminal.ansiBlue#61afef
• terminal.ansiBrightBlack#5f6672
• terminal.ansiBrightBlue#007fff
• terminal.ansiBrightCyan#08e8de
• terminal.ansiBrightGreen#66ff00
• terminal.ansiBrightMagenta#8b00ff
• terminal.ansiBrightRed#E06C75
• terminal.ansiBrightWhite#d4d7d9
• terminal.ansiBrightYellow#e5c07b
• terminal.ansiCyan#56b6c2
• terminal.ansiRed#e06c75
• terminal.ansiWhite#a9b2c3
• terminal.ansiYellow#d19a66
• terminal.foreground#a9b2c3
• titleBar.activeBackground#141522
• titleBar.activeForeground#d4d7d9
• titleBar.border#0d1117
• titleBar.inactiveBackground#21252b
• titleBar.inactiveForeground#5f6672
• widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).