buby

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#cec6e433
• activityBar.activeBorder#9988c8
• activityBar.activeFocusBorder#4d358b
• activityBar.background#d9d2e9
• activityBar.border#d9d2e9
• activityBar.dropBorder#5c4497
• activityBar.foreground#a395ce
• activityBar.inactiveForeground#aea1d3
• activityBarBadge.background#4d358b
• activityBarBadge.foreground#d9d2e9
• badge.background#4d358b
• badge.foreground#d9d2e9
• breadcrumb.activeSelectionForeground#8e7cc3
• breadcrumb.background#d9d2e9
• breadcrumb.focusForeground#9988c8
• breadcrumb.foreground#a395ce
• breadcrumbPicker.background#d9d2e9
• button.background#5c4497
• button.foreground#d9d2e9
• button.hoverBackground#7a62b7
• button.secondaryBackground#9988c8
• button.secondaryForeground#d9d2e9
• button.secondaryHoverBackground#a395ce
• charts.blue#5c4497
• charts.foreground#9988c8
• charts.green#594197
• charts.lines#b9add9
• charts.orange#7767a4
• charts.purple#4d358b
• charts.red#b4a7d6
• charts.yellow#674ea7
• checkbox.background#5c4497
• checkbox.border#cec6e4
• checkbox.foreground#d9d2e9
• debugConsole.errorForeground#b4a7d6
• debugConsole.infoForeground#5c4497
• debugConsole.sourceForeground#4d358b
• debugConsole.warningForeground#7767a4
• debugConsoleInputIcon.foreground#aea1d3
• debugExceptionWidget.background#cec6e4
• debugExceptionWidget.border#cec6e4
• debugIcon.breakpointCurrentStackframeForeground#594197
• debugIcon.breakpointDisabledForeground#aea1d3
• debugIcon.breakpointForeground#b4a7d6
• debugIcon.breakpointStackframeForeground#674ea7
• debugIcon.breakpointUnverifiedForeground#a395ce
• debugIcon.continueForeground#594197
• debugIcon.disconnectForeground#7767a4
• debugIcon.pauseForeground#5c4497
• debugIcon.restartForeground#351c75
• debugIcon.startForeground#594197
• debugIcon.stepBackForeground#8e7cc3
• debugIcon.stepIntoForeground#8e7cc3
• debugIcon.stepOutForeground#8e7cc3
• debugIcon.stepOverForeground#8e7cc3
• debugIcon.stopForeground#b4a7d6
• debugTokenExpression.boolean#4d358b
• debugTokenExpression.error#b4a7d6
• debugTokenExpression.name#5c4497
• debugTokenExpression.number#351c75
• debugTokenExpression.string#594197
• debugTokenExpression.value#8e7cc3
• debugToolBar.background#cec6e4
• debugToolBar.border#c4b9de
• debugView.exceptionLabelBackground#cec6e4
• debugView.exceptionLabelForeground#674ea7
• debugView.stateLabelBackground#cec6e4
• debugView.stateLabelForeground#5c4497
• debugView.valueChangedHighlight#674ea733
• descriptionForeground#9988c8
• diffEditor.border#cec6e4
• diffEditor.diagonalFill#cec6e47f
• diffEditor.insertedTextBackground#59419720
• diffEditor.removedTextBackground#b4a7d620
• dropdown.background#cec6e4
• dropdown.border#cec6e4
• dropdown.foreground#9988c8
• dropdown.listBackground#cec6e4
• editor.background#d9d2e9
• editor.findMatchBackground#674ea73f
• editor.findMatchHighlightBackground#674ea733
• editor.findRangeHighlightBackground#cec6e4
• editor.focusedStackFrameHighlightBackground#5941973f
• editor.foldBackground#cec6e466
• editor.foreground#8e7cc3
• editor.hoverHighlightBackground#c4b9de7f
• editor.inactiveSelectionBackground#5c449733
• editor.lineHighlightBackground#d9d2e9
• editor.lineHighlightBorder#cec6e4
• editor.rangeHighlightBackground#674ea733
• editor.selectionBackground#5c449733
• editor.selectionForeground#8e7cc3
• editor.selectionHighlightBackground#cec6e4
• editor.snippetFinalTabstopHighlightBackground#c4b9de7f
• editor.snippetTabstopHighlightBackground#cec6e47f
• editor.stackFrameHighlightBackground#7a62b73f
• editor.symbolHighlightBackground#4d358b33
• editor.wordHighlightBackground#4d358b33
• editor.wordHighlightStrongBackground#351c7533
• editorBracketHighlight.foreground1#8e7cc3
• editorBracketHighlight.foreground2#674ea7
• editorBracketHighlight.foreground3#7a62b7
• editorBracketHighlight.foreground4#4d358b
• editorBracketHighlight.foreground5#594197
• editorBracketHighlight.foreground6#5c4497
• editorBracketHighlight.unexpectedBracket#b4a7d6
• editorBracketMatch.background#cec6e4
• editorBracketMatch.border#c4b9de
• editorCodeLens.foreground#a395ce
• editorCursor.background#d9d2e9
• editorCursor.foreground#4d358b
• editorError.border#8e7cc3
• editorError.foreground#b4a7d6
• editorGroup.border#cec6e4
• editorGroup.dropBackground#c4b9de7f
• editorGroup.emptyBackground#d9d2e9
• editorGroup.focusedEmptyBorder#cec6e4
• editorGroupHeader.border#d9d2e9
• editorGroupHeader.noTabsBackground#d9d2e9
• editorGroupHeader.tabsBackground#d9d2e9
• editorGroupHeader.tabsBorder#d9d2e9
• editorGutter.addedBackground#594197
• editorGutter.background#d9d2e9
• editorGutter.commentRangeForeground#b9add9
• editorGutter.deletedBackground#b4a7d6
• editorGutter.foldingControlForeground#a395ce
• editorGutter.modifiedBackground#674ea7
• editorHint.border#aea1d3
• editorHint.foreground#351c75
• editorHoverWidget.background#cec6e4
• editorHoverWidget.border#cec6e4
• editorHoverWidget.foreground#9988c8
• editorHoverWidget.statusBarBackground#5c449733
• editorIndentGuide.activeBackground#c4b9de
• editorIndentGuide.background#cec6e4
• editorInfo.border#a395ce
• editorInfo.foreground#5c4497
• editorLightBulb.foreground#674ea7
• editorLightBulbAutoFix.foreground#5c4497
• editorLineNumber.activeForeground#aea1d3
• editorLineNumber.foreground#c4b9de
• editorLink.activeForeground#7a62b7
• editorMarkerNavigation.background#cec6e4
• editorMarkerNavigationError.background#b4a7d6
• editorMarkerNavigationInfo.background#5c4497
• editorMarkerNavigationWarning.background#7767a4
• editorOverviewRuler.addedForeground#5941977f
• editorOverviewRuler.border#cec6e4
• editorOverviewRuler.bracketMatchForeground#b9add9
• editorOverviewRuler.commonContentForeground#4d358b
• editorOverviewRuler.currentContentForeground#7a62b7
• editorOverviewRuler.deletedForeground#b4a7d67f
• editorOverviewRuler.errorForeground#b4a7d67f
• editorOverviewRuler.findMatchForeground#674ea7bf
• editorOverviewRuler.incomingContentForeground#5c4497
• editorOverviewRuler.infoForeground#5c44977f
• editorOverviewRuler.modifiedForeground#674ea77f
• editorOverviewRuler.rangeHighlightForeground#c4b9debf
• editorOverviewRuler.selectionHighlightForeground#cec6e4bf
• editorOverviewRuler.warningForeground#7767a47f
• editorOverviewRuler.wordHighlightForeground#c4b9debf
• editorOverviewRuler.wordHighlightStrongForeground#b9add9bf
• editorPane.background#d9d2e9
• editorRuler.foreground#cec6e4
• editorSuggestWidget.background#cec6e4
• editorSuggestWidget.border#cec6e4
• editorSuggestWidget.foreground#9988c8
• editorSuggestWidget.highlightForeground#351c75
• editorSuggestWidget.selectedBackground#c4b9de
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#9988c8
• editorWarning.foreground#7767a4
• editorWhitespace.foreground#cec6e4
• editorWidget.background#cec6e4
• editorWidget.border#cec6e4
• editorWidget.foreground#9988c8
• editorWidget.resizeBorder#5c4497
• errorForeground#b4a7d6
• extensionBadge.remoteBackground#351c75
• extensionBadge.remoteForeground#d9d2e9
• extensionButton.prominentBackground#5c4497
• extensionButton.prominentForeground#d9d2e9
• extensionButton.prominentHoverBackground#7a62b7
• focusBorder#4d358b
• foreground#8e7cc3
• gitDecoration.addedResourceForeground#594197
• gitDecoration.conflictingResourceForeground#7a62b7
• gitDecoration.deletedResourceForeground#b4a7d6
• gitDecoration.ignoredResourceForeground#b9add9
• gitDecoration.modifiedResourceForeground#674ea7
• gitDecoration.stageDeletedResourceForeground#b4a7d6
• gitDecoration.stageModifiedResourceForeground#7a62b7
• gitDecoration.submoduleResourceForeground#351c75
• gitDecoration.untrackedResourceForeground#4d358b
• icon.foreground#9988c8
• imagePreview.border#cec6e4
• input.background#cec6e4
• input.border#cec6e4
• input.foreground#9988c8
• input.placeholderForeground#c4b9de
• inputOption.activeBackground#c4b9de
• inputOption.activeBorder#7a62b7
• inputOption.activeForeground#8e7cc3
• inputValidation.errorBackground#cec6e4
• inputValidation.errorBorder#b4a7d6
• inputValidation.errorForeground#b4a7d6
• inputValidation.infoBackground#cec6e4
• inputValidation.infoBorder#5c4497
• inputValidation.infoForeground#5c4497
• inputValidation.warningBackground#cec6e4
• inputValidation.warningBorder#7767a4
• inputValidation.warningForeground#7767a4
• list.activeSelectionBackground#4d358b33
• list.activeSelectionForeground#8e7cc3
• list.deemphasizedForeground#aea1d3
• list.dropBackground#cec6e4
• list.errorForeground#b4a7d6
• list.filterMatchBackground#674ea733
• list.filterMatchBorder#674ea733
• list.focusBackground#b9add93f
• list.focusForeground#8e7cc3
• list.highlightForeground#674ea7
• list.hoverBackground#cec6e433
• list.hoverForeground#8e7cc3
• list.inactiveFocusBackground#cec6e43f
• list.inactiveSelectionBackground#c4b9de3f
• list.inactiveSelectionForeground#9988c8
• list.invalidItemForeground#b4a7d6
• list.warningForeground#674ea7
• listFilterWidget.background#cec6e4
• listFilterWidget.noMatchesOutline#b4a7d6
• listFilterWidget.outline#5c4497
• menu.background#d9d2e9
• menu.foreground#9988c8
• menu.selectionBackground#cec6e4
• menu.selectionForeground#8e7cc3
• menu.separatorBackground#c4b9de
• menubar.selectionBackground#cec6e4
• menubar.selectionForeground#8e7cc3
• merge.border#aea1d3
• merge.commonContentBackground#4d358b4c
• merge.commonHeaderBackground#4d358b4c
• merge.currentContentBackground#7a62b74c
• merge.currentHeaderBackground#7a62b74c
• merge.incomingContentBackground#5c44974c
• merge.incomingHeaderBackground#5c44974c
• minimap.background#d9d2e9
• minimap.errorHighlight#b4a7d680
• minimap.findMatchHighlight#674ea7
• minimap.selectionHighlight#5c449780
• minimap.warningHighlight#7767a480
• minimapGutter.addedBackground#59419780
• minimapGutter.deletedBackground#b4a7d680
• minimapGutter.modifiedBackground#674ea780
• minimapSlider.activeBackground#b9add933
• minimapSlider.background#cec6e433
• minimapSlider.hoverBackground#c4b9de33
• notebook.cellBorderColor#cec6e43f
• notebook.cellHoverBackground#cec6e43f
• notebook.cellInsertionIndicator#594197
• notebook.cellStatusBarItemHoverBackground#cec6e43f
• notebook.cellToolbarSeparator#cec6e43f
• notebook.focusedCellBackground#cec6e47f
• notebook.focusedCellBorder#4d358b
• notebook.focusedCellShadow#0000003f
• notebook.focusedEditorBorder#cec6e4
• notebook.focusedRowBorder#4d358b
• notebook.inactiveFocusedCellBorder#a395ce
• notebook.outputContainerBackgroundColor#d9d2e9
• notebook.rowHoverBackground#cec6e47f
• notebook.selectedCellBorder#aea1d3
• notebook.symbolHighlightBackground#4d358b3f
• notebookScrollbarSlider.activeBackground#a395ce7f
• notebookScrollbarSlider.background#b9add97f
• notebookScrollbarSlider.hoverBackground#aea1d37f
• notebookStatusErrorIcon.foreground#b4a7d6
• notebookStatusRunningIcon.foreground#5c4497
• notebookStatusSuccessIcon.foreground#594197
• notificationCenterHeader.background#c4b9de
• notificationCenterHeader.foreground#9988c8
• notificationLink.foreground#5c4497
• notifications.background#cec6e4
• notifications.border#b9add9
• notifications.foreground#8e7cc3
• notificationsErrorIcon.foreground#b4a7d6
• notificationsInfoIcon.foreground#5c4497
• notificationsWarningIcon.foreground#7767a4
• notificationToast.border#b9add9
• panel.background#d9d2e9
• panel.border#cec6e4
• panel.dropBorder#5c4497
• panelSection.border#cec6e4
• panelSection.dropBackground#cec6e43f
• panelSectionHeader.background#c4b9de
• panelSectionHeader.border#d9d2e9
• panelSectionHeader.foreground#9988c8
• panelTitle.activeBorder#b9add9
• panelTitle.activeForeground#9988c8
• panelTitle.inactiveForeground#aea1d3
• peekView.border#351c75
• peekViewEditor.background#cec6e47f
• peekViewEditor.matchHighlightBackground#674ea77f
• peekViewEditorGutter.background#cec6e47f
• peekViewResult.background#cec6e4
• peekViewResult.fileForeground#9988c8
• peekViewResult.lineForeground#c4b9de
• peekViewResult.matchHighlightBackground#674ea7
• peekViewResult.selectionBackground#b9add9
• peekViewResult.selectionForeground#8e7cc3
• peekViewTitle.background#cec6e4
• peekViewTitleDescription.foreground#a395ce
• peekViewTitleLabel.foreground#8e7cc3
• pickerGroup.border#c4b9de
• pickerGroup.foreground#aea1d3
• problemsErrorIcon.foreground#b4a7d6
• problemsInfoIcon.foreground#5c4497
• problemsWarningIcon.foreground#7767a4
• progressBar.background#594197
• quickInput.background#cec6e4
• quickInput.foreground#8e7cc3
• quickInputTitle.background#c4b9de
• sash.hoverBorder#5c4497
• scm.providerBorder#c4b9de
• scrollbar.shadow#d9d2e9
• scrollbarSlider.activeBackground#a395ce7f
• scrollbarSlider.background#b9add97f
• scrollbarSlider.hoverBackground#aea1d37f
• selection.background#c4b9de
• settings.checkboxBackground#5c4497
• settings.checkboxBorder#5c4497
• settings.checkboxForeground#d9d2e9
• settings.dropdownBackground#cec6e4
• settings.dropdownForeground#9988c8
• settings.dropdownListBorder#c4b9de
• settings.focusedRowBackground#d9d2e9
• settings.headerForeground#8e7cc3
• settings.modifiedItemIndicator#7a62b7
• settings.numberInputBackground#cec6e4
• settings.numberInputForeground#9988c8
• settings.textInputBackground#cec6e4
• settings.textInputForeground#9988c8
• sideBar.background#d9d2e9
• sideBar.border#cec6e4
• sideBar.dropBackground#cec6e43f
• sideBar.foreground#9988c8
• sideBarSectionHeader.background#c4b9de
• sideBarSectionHeader.border#d9d2e9
• sideBarSectionHeader.foreground#9988c8
• sideBarTitle.foreground#a395ce
• statusBar.background#5c4497
• statusBar.border#d9d2e9
• statusBar.debuggingBackground#7767a4
• statusBar.debuggingBorder#d9d2e9
• statusBar.debuggingForeground#d9d2e9
• statusBar.foreground#d9d2e9
• statusBar.noFolderBackground#4d358b
• statusBar.noFolderBorder#d9d2e9
• statusBar.noFolderForeground#d9d2e9
• statusBarItem.activeBackground#7a62b7
• statusBarItem.errorBackground#b4a7d6
• statusBarItem.errorForeground#d9d2e9
• statusBarItem.hoverBackground#594197
• statusBarItem.prominentBackground#7a62b7
• statusBarItem.prominentHoverBackground#594197
• statusBarItem.remoteBackground#7a62b7
• statusBarItem.remoteForeground#d9d2e9
• symbolIcon.arrayForeground#351c75
• symbolIcon.booleanForeground#4d358b
• symbolIcon.classForeground#5c4497
• symbolIcon.colorForeground#7a62b7
• symbolIcon.constantForeground#594197
• symbolIcon.constructorForeground#4d358b
• symbolIcon.enumeratorForeground#7a62b7
• symbolIcon.enumeratorMemberForeground#5c4497
• symbolIcon.eventForeground#7767a4
• symbolIcon.fieldForeground#b4a7d6
• symbolIcon.fileForeground#9988c8
• symbolIcon.folderForeground#a395ce
• symbolIcon.functionForeground#4d358b
• symbolIcon.interfaceForeground#b4a7d6
• symbolIcon.keyForeground#674ea7
• symbolIcon.keywordForeground#5c4497
• symbolIcon.methodForeground#7a62b7
• symbolIcon.moduleForeground#7a62b7
• symbolIcon.namespaceForeground#5c4497
• symbolIcon.nullForeground#b4a7d6
• symbolIcon.numberForeground#7767a4
• symbolIcon.objectForeground#8e7cc3
• symbolIcon.operatorForeground#b4a7d6
• symbolIcon.packageForeground#7767a4
• symbolIcon.propertyForeground#7a62b7
• symbolIcon.referenceForeground#7767a4
• symbolIcon.snippetForeground#a395ce
• symbolIcon.stringForeground#594197
• symbolIcon.structForeground#5c4497
• symbolIcon.textForeground#8e7cc3
• symbolIcon.typeParameterForeground#5c4497
• symbolIcon.unitForeground#674ea7
• symbolIcon.variableForeground#7767a4
• tab.activeBackground#d9d2e9
• tab.activeForeground#9988c8
• tab.activeModifiedBorder#674ea7
• tab.border#d9d2e9
• tab.hoverBackground#cec6e480
• tab.hoverForeground#a395ce
• tab.inactiveBackground#cec6e4
• tab.inactiveForeground#b9add9
• tab.inactiveModifiedBorder#674ea7
• tab.lastPinnedBorder#351c75
• tab.unfocusedActiveBackground#d9d2e9
• tab.unfocusedActiveForeground#b9add9
• tab.unfocusedActiveModifiedBorder#674ea7
• tab.unfocusedHoverBackground#cec6e480
• tab.unfocusedHoverForeground#aea1d3
• tab.unfocusedInactiveBackground#cec6e4
• tab.unfocusedInactiveForeground#c4b9de
• tab.unfocusedInactiveModifiedBorder#674ea7
• terminal.ansiBlack#d9d2e9
• terminal.ansiBlue#5c4497
• terminal.ansiBrightBlack#cec6e4
• terminal.ansiBrightBlue#5c4497
• terminal.ansiBrightCyan#7a62b7
• terminal.ansiBrightGreen#7a62b7
• terminal.ansiBrightMagenta#351c75
• terminal.ansiBrightRed#7767a4
• terminal.ansiBrightWhite#8e7cc3
• terminal.ansiBrightYellow#674ea7
• terminal.ansiCyan#7a62b7
• terminal.ansiGreen#594197
• terminal.ansiMagenta#351c75
• terminal.ansiRed#b4a7d6
• terminal.ansiWhite#9988c8
• terminal.ansiYellow#674ea7
• terminal.background#d9d2e9
• terminal.foreground#9988c8
• terminal.selectionBackground#5c44977f
• terminalCursor.background#cec6e4
• terminalCursor.foreground#a395ce
• testing.iconErrored#b4a7d6
• testing.iconFailed#7767a4
• testing.iconPassed#594197
• testing.iconQueued#7a62b7
• testing.iconSkipped#aea1d3
• testing.iconUnset#a395ce
• testing.message.error.decorationForeground#b4a7d6
• testing.message.error.lineBackground#b4a7d63f
• testing.message.hint.decorationForeground#351c75
• testing.message.hint.lineBackground#351c753f
• testing.message.info.decorationForeground#5c4497
• testing.message.info.lineBackground#5c44973f
• testing.message.warning.decorationForeground#7767a4
• testing.message.warning.lineBackground#7767a43f
• testing.peekBorder#b9add9
• testing.runAction#5c4497
• textBlockQuote.background#cec6e4
• textBlockQuote.border#cec6e4
• textCodeBlock.background#d9d2e9
• textLink.activeForeground#7a62b7
• textLink.foreground#5c4497
• textPreformat.foreground#7767a4
• textSeparator.foreground#aea1d3
• titleBar.activeBackground#d9d2e9
• titleBar.activeForeground#a395ce
• titleBar.inactiveBackground#d9d2e9
• titleBar.inactiveForeground#b9add9
• tree.indentGuidesStroke#cec6e4
• walkThrough.embeddedEditorBackground#d9d2e9
• welcomePage.background#d9d2e9
• welcomePage.buttonBackground#cec6e4
• welcomePage.buttonHoverBackground#c4b9de
• welcomePage.progress.background#5c4497
• welcomePage.progress.foreground#d9d2e9
• widget.shadow#d9d2e9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).