Blue Vibe

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#19242a
• activityBar.border#61afef55
• activityBar.foreground#61afef
• activityBar.inactiveForeground#78bec7
• button.background#22333b
• button.border#61afef
• button.foreground#61afef
• button.hoverBackground#3f4e64
• dropdown.background#19242a
• dropdown.border#61afef88
• dropdown.foreground#9cdef2
• editor.background#22333b
• editor.findMatchBackground#fab38755
• editor.findMatchBorder#fab387
• editor.findMatchHighlightBackground#61afef33
• editor.foreground#9cdef2
• editor.inactiveSelectionBackground#61afef33
• editor.lineHighlightBackground#3f4e6433
• editor.selectionBackground#61afef55
• editor.wordHighlightBackground#56b6c233
• editor.wordHighlightStrongBackground#fab38733
• editorBracketMatch.background#61afef22
• editorBracketMatch.border#61afef
• editorCursor.foreground#61afef
• editorGroup.border#61afef33
• editorGroupHeader.tabsBackground#19242a
• editorIndentGuide.activeBackground1#61afef88
• editorIndentGuide.background1#61afef22
• editorLineNumber.activeForeground#fab387
• editorLineNumber.foreground#78bec7
• editorWidget.background#1f2d34
• editorWidget.border#61afef88
• editorWidget.foreground#9cdef2
• input.background#19242a
• input.border#61afef88
• input.foreground#9cdef2
• input.placeholderForeground#78bec7
• list.activeSelectionBackground#61afef33
• list.activeSelectionForeground#fab387
• list.focusOutline#61afef
• list.hoverBackground#3f4e64
• list.hoverForeground#61afef
• list.inactiveSelectionBackground#61afef22
• list.inactiveSelectionForeground#9cdef2
• menu.background#1f2d34
• menu.border#61afef55
• menu.foreground#9cdef2
• menu.selectionBackground#3f4e64
• menu.selectionForeground#61afef
• notifications.background#1f2d34
• notifications.border#61afef55
• notifications.foreground#9cdef2
• panel.background#1f2d34
• panel.border#61afef55
• panelTitle.activeForeground#fab387
• panelTitle.inactiveForeground#78bec7
• pickerGroup.border#61afef55
• pickerGroup.foreground#fab387
• quickInput.background#1f2d34
• quickInput.foreground#9cdef2
• quickInputTitle.background#19242a
• scrollbarSlider.activeBackground#61afefaa
• scrollbarSlider.background#61afef55
• scrollbarSlider.hoverBackground#56b6c288
• sideBar.background#1f2d34
• sideBar.border#61afef55
• sideBar.foreground#9cdef2
• sideBarSectionHeader.background#22333b
• sideBarSectionHeader.border#61afef55
• sideBarSectionHeader.foreground#fab387
• sideBarTitle.background#1f2d34
• sideBarTitle.border#61afef55
• sideBarTitle.foreground#9cdef2
• statusBar.background#22333b
• statusBar.border#61afef
• statusBar.debuggingBackground#e06c75
• statusBar.debuggingForeground#1e1e2e
• statusBar.foreground#9cdef2
• statusBar.noFolderBackground#22333b
• tab.activeBackground#22333b
• tab.activeBorder#fab387
• tab.activeBorderTop#61afef
• tab.activeForeground#fab387
• tab.border#61afef33
• tab.hoverBackground#3f4e64
• tab.inactiveBackground#19242a
• tab.inactiveForeground#78bec7
• terminal.ansiBlue#61afef
• terminal.ansiBrightBlue#61afef
• terminal.ansiBrightCyan#56b6c2
• terminal.ansiCyan#56b6c2
• terminal.ansiGreen#98c379
• terminal.ansiRed#e06c75
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#fab387
• terminal.background#19242a
• terminal.foreground#9cdef2
• terminalCursor.foreground#61afef
• titleBar.activeBackground#19242a
• titleBar.activeForeground#9cdef2
• titleBar.border#61afef55
• titleBar.inactiveBackground#19242a
• titleBar.inactiveForeground#78bec7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).