brewbox

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#928374
• activityBar.activeFocusBorder#928374
• activityBar.background#32302f
• activityBar.border#292828
• activityBar.foreground#a89984
• activityBar.inactiveForeground#7c6f64
• activityBarBadge.background#a89984
• activityBarBadge.foreground#292828
• badge.background#a89984
• badge.foreground#32302f
• breadcrumb.activeSelectionForeground#d4be98
• breadcrumb.focusForeground#ddc7a1
• breadcrumb.foreground#928374
• button.background#a89984
• button.foreground#292828
• button.hoverBackground#928374
• button.secondaryBackground#3c3836
• button.secondaryForeground#d4be98
• button.secondaryHoverBackground#45403d
• charts.blue#7daea3
• charts.foreground#d4be98
• charts.green#a9b665
• charts.orange#e78a4e
• charts.purple#d3869b
• charts.red#ea6962
• charts.yellow#d8a657
• checkbox.background#292828
• checkbox.border#5a524c
• checkbox.foreground#e78a4e
• debugConsole.errorForeground#ea6962
• debugConsole.infoForeground#a9b665
• debugConsole.sourceForeground#d3869b
• debugConsole.warningForeground#d8a657
• debugConsoleInputIcon.foreground#89b482
• debugIcon.breakpointCurrentStackframeForeground#7daea3
• debugIcon.breakpointDisabledForeground#b85651
• debugIcon.breakpointForeground#ea6962
• debugIcon.breakpointStackframeForeground#ea6962
• debugIcon.breakpointUnverifiedForeground#a89984
• debugIcon.continueForeground#7daea3
• debugIcon.disconnectForeground#d3869b
• debugIcon.pauseForeground#d8a657
• debugIcon.restartForeground#89b482
• debugIcon.startForeground#89b482
• debugIcon.stepBackForeground#7daea3
• debugIcon.stepIntoForeground#7daea3
• debugIcon.stepOutForeground#7daea3
• debugIcon.stepOverForeground#7daea3
• debugIcon.stopForeground#ea6962
• debugTokenExpression.boolean#d3869b
• debugTokenExpression.error#ea6962
• debugTokenExpression.name#7daea3
• debugTokenExpression.number#d3869b
• debugTokenExpression.string#d8a657
• debugTokenExpression.value#a9b665
• debugToolBar.background#292828
• descriptionForeground#928374
• diffEditor.diagonalFill#504945
• diffEditor.insertedTextBackground#72966c40
• diffEditor.removedTextBackground#b8565140
• dropdown.background#32302f
• dropdown.border#45403d
• dropdown.foreground#a89984
• editor.background#32302f
• editor.findMatchBackground#83a59870
• editor.findMatchHighlightBackground#fe801930
• editor.findRangeHighlightBackground#83a59870
• editor.foldBackground#45403d80
• editor.foreground#ebdbb2
• editor.hoverHighlightBackground#689d6a50
• editor.inactiveSelectionBackground#50494558
• editor.lineHighlightBackground#3c383660
• editor.lineHighlightBorder#3c383600
• editor.rangeHighlightBackground#38343280
• editor.selectionBackground#689d6a40
• editor.selectionHighlightBackground#a8998420
• editor.snippetFinalTabstopHighlightBackground#8f9a5240
• editor.snippetFinalTabstopHighlightBorder#292828
• editor.snippetTabstopHighlightBackground#45403da0
• editor.symbolHighlightBackground#68948a40
• editor.wordHighlightBackground#50494558
• editor.wordHighlightStrongBackground#504945b0
• editorBracketHighlight.foreground1#ebdbb2
• editorBracketHighlight.foreground2#8ec07c
• editorBracketHighlight.foreground3#458588
• editorBracketHighlight.foreground4#b16286
• editorBracketHighlight.foreground5#fe8019
• editorBracketHighlight.foreground6#fabd2f
• editorBracketHighlight.unexpectedBracket.foreground#928374
• editorBracketMatch.background#92837480
• editorBracketMatch.border#32302f00
• editorCodeLens.foreground#7c6f64
• editorCursor.foreground#d4be98
• editorError.background#b8565100
• editorError.foreground#b85651
• editorGhostText.background#29282800
• editorGhostText.foreground#7c6f64
• editorGroup.border#101010
• editorGroup.dropBackground#45403d60
• editorGroupHeader.noTabsBackground#292828
• editorGroupHeader.tabsBackground#292828
• editorGutter.addedBackground#8f9a52a0
• editorGutter.background#29282800
• editorGutter.commentRangeForeground#7c6f64
• editorGutter.deletedBackground#b85651a0
• editorGutter.modifiedBackground#68948aa0
• editorHint.foreground#ab6c7d
• editorHoverWidget.background#32302f
• editorHoverWidget.border#504945
• editorInfo.background#68948a00
• editorInfo.foreground#68948a
• editorInlayHint.background#29282800
• editorInlayHint.foreground#7c6f64
• editorInlayHint.parameterBackground#29282800
• editorInlayHint.parameterForeground#7c6f64
• editorInlayHint.typeBackground#29282800
• editorInlayHint.typeForeground#7c6f64
• editorLightBulb.foreground#d8a657
• editorLightBulbAutoFix.foreground#89b482
• editorLineNumber.activeForeground#928374
• editorLineNumber.foreground#7c6f64
• editorLink.activeForeground#a9b665
• editorMarkerNavigation.background#32302f
• editorMarkerNavigationError.background#b8565180
• editorMarkerNavigationInfo.background#68948a80
• editorMarkerNavigationWarning.background#c18f4180
• editorOverviewRuler.addedForeground#8f9a52a0
• editorOverviewRuler.border#29282800
• editorOverviewRuler.commonContentForeground#928374
• editorOverviewRuler.currentContentForeground#68948a
• editorOverviewRuler.deletedForeground#b85651a0
• editorOverviewRuler.errorForeground#ea6962
• editorOverviewRuler.findMatchForeground#72966c
• editorOverviewRuler.incomingContentForeground#72966c
• editorOverviewRuler.infoForeground#d3869b
• editorOverviewRuler.modifiedForeground#68948aa0
• editorOverviewRuler.rangeHighlightForeground#72966c
• editorOverviewRuler.selectionHighlightForeground#72966c
• editorOverviewRuler.warningForeground#d8a657
• editorOverviewRuler.wordHighlightForeground#7c6f64
• editorOverviewRuler.wordHighlightStrongForeground#7c6f64
• editorRuler.foreground#665c54a0
• editorSuggestWidget.background#383432
• editorSuggestWidget.border#383432
• editorSuggestWidget.foreground#d4be98
• editorSuggestWidget.highlightForeground#a9b665
• editorSuggestWidget.selectedBackground#45403d
• editorUnnecessaryCode.border#292828
• editorUnnecessaryCode.opacity#00000080
• editorWarning.background#c18f4100
• editorWarning.foreground#c18f41
• editorWhitespace.foreground#45403d
• editorWidget.background#292828
• editorWidget.border#7c6f64
• editorWidget.foreground#d4be98
• errorForeground#ea6962
• errorLens.errorBackgroundLight#e4545400
• errorLens.warningBackgroundLight#ff942f00
• extensionBadge.remoteBackground#a89984
• extensionBadge.remoteForeground#292828
• extensionButton.prominentBackground#a89984
• extensionButton.prominentForeground#292828
• extensionButton.prominentHoverBackground#928374
• extensionIcon.preReleaseForeground#e78a4e
• extensionIcon.starForeground#89b482
• extensionIcon.verifiedForeground#a9b665
• focusBorder#45403d00
• foreground#a89984
• gitDecoration.addedResourceForeground#a9b665a0
• gitDecoration.conflictingResourceForeground#d3869ba0
• gitDecoration.deletedResourceForeground#ea6962a0
• gitDecoration.ignoredResourceForeground#5a524c
• gitDecoration.modifiedResourceForeground#7daea3a0
• gitDecoration.stageDeletedResourceForeground#89b482a0
• gitDecoration.stageModifiedResourceForeground#89b482a0
• gitDecoration.submoduleResourceForeground#e78a4ea0
• gitDecoration.untrackedResourceForeground#d8a657a0
• icon.foreground#89b482
• input.background#29282800
• input.border#45403d
• input.foreground#d4be98
• input.placeholderForeground#7c6f64
• inputOption.activeBorder#89b482
• inputValidation.errorBackground#b85651
• inputValidation.errorBorder#ea6962
• inputValidation.errorForeground#d4be98
• inputValidation.infoBackground#68948a
• inputValidation.infoBorder#7daea3
• inputValidation.infoForeground#d4be98
• inputValidation.warningBackground#c18f41
• inputValidation.warningBorder#d8a657
• inputValidation.warningForeground#d4be98
• keybindingLabel.background#29282800
• keybindingLabel.border#1c1c1c
• keybindingLabel.bottomBorder#101010
• keybindingLabel.foreground#d4be98
• keybindingTable.headerBackground#383432
• keybindingTable.rowsBackground#32302f
• list.activeSelectionBackground#45403d60
• list.activeSelectionForeground#d4be98
• list.dropBackground#32302f80
• list.errorForeground#ea6962
• list.focusBackground#45403d60
• list.focusForeground#d4be98
• list.highlightForeground#a9b665
• list.hoverBackground#29282800
• list.hoverForeground#d4be98
• list.inactiveFocusBackground#45403d48
• list.inactiveSelectionBackground#45403d48
• list.inactiveSelectionForeground#a89984
• list.invalidItemForeground#b85651
• list.warningForeground#d8a657
• menu.background#292828
• menu.foreground#a89984
• menu.selectionBackground#32302f
• menu.selectionForeground#d4be98
• menubar.selectionBackground#292828
• menubar.selectionBorder#292828
• merge.border#29282800
• merge.currentContentBackground#68948a40
• merge.currentHeaderBackground#68948a80
• merge.incomingContentBackground#72966c40
• merge.incomingHeaderBackground#72966c80
• minimap.errorHighlight#b8565180
• minimap.findMatchHighlight#72966c60
• minimap.selectionHighlight#504945f0
• minimap.warningHighlight#c18f4180
• minimapGutter.addedBackground#8f9a52a0
• minimapGutter.deletedBackground#b85651a0
• minimapGutter.modifiedBackground#68948aa0
• notebook.cellBorderColor#5a524c
• notebook.cellHoverBackground#292828
• notebook.cellStatusBarItemHoverBackground#3c3836
• notebook.cellToolbarSeparator#5a524c
• notebook.focusedCellBackground#292828
• notebook.focusedCellBorder#5a524c
• notebook.focusedEditorBorder#5a524c
• notebook.inactiveFocusedCellBorder#5a524c
• notebook.outputContainerBackgroundColor#32302f
• notebook.selectedCellBorder#5a524c
• notebookStatusErrorIcon.foreground#ea6962
• notebookStatusRunningIcon.foreground#7daea3
• notebookStatusSuccessIcon.foreground#a9b665
• notificationCenterHeader.background#504945
• notificationCenterHeader.foreground#ddc7a1
• notificationLink.foreground#a9b665
• notifications.background#292828
• notifications.foreground#d4be98
• notificationsErrorIcon.foreground#ea6962
• notificationsInfoIcon.foreground#7daea3
• notificationsWarningIcon.foreground#d8a657
• panel.background#292828
• panel.border#292828
• panelInput.border#45403d
• panelSection.border#101010
• panelSectionHeader.background#292828
• panelTitle.activeBorder#928374
• panelTitle.activeForeground#a89984
• panelTitle.inactiveForeground#7c6f64
• peekView.border#3c3836
• peekViewEditor.background#32302f
• peekViewEditor.matchHighlightBackground#c18f4150
• peekViewEditorGutter.background#32302f
• peekViewResult.background#32302f
• peekViewResult.fileForeground#d4be98
• peekViewResult.lineForeground#a89984
• peekViewResult.matchHighlightBackground#c18f4150
• peekViewResult.selectionBackground#72966c50
• peekViewResult.selectionForeground#c5b18d
• peekViewTitle.background#3c3836
• peekViewTitleDescription.foreground#c5b18d
• peekViewTitleLabel.foreground#a9b665
• pickerGroup.border#ddc7a11a
• pickerGroup.foreground#d4be98
• ports.iconRunningProcessForeground#e78a4e
• problemsErrorIcon.foreground#ea6962
• problemsInfoIcon.foreground#7daea3
• problemsWarningIcon.foreground#d8a657
• progressBar.background#a9b665
• quickInputTitle.background#3c3836
• sash.hoverBorder#7c6f64
• scrollbar.shadow#00000070
• scrollbarSlider.activeBackground#a89984
• scrollbarSlider.background#7c6f6480
• scrollbarSlider.hoverBackground#7c6f64
• selection.background#504945d0
• settings.checkboxBackground#292828
• settings.checkboxBorder#5a524c
• settings.checkboxForeground#e78a4e
• settings.dropdownBackground#292828
• settings.dropdownBorder#5a524c
• settings.dropdownForeground#89b482
• settings.focusedRowBackground#32302f
• settings.headerForeground#a89984
• settings.modifiedItemIndicator#7c6f64
• settings.numberInputBackground#292828
• settings.numberInputBorder#5a524c
• settings.numberInputForeground#d3869b
• settings.rowHoverBackground#32302f
• settings.textInputBackground#292828
• settings.textInputBorder#5a524c
• settings.textInputForeground#7daea3
• sideBar.background#292828
• sideBar.foreground#928374
• sideBarSectionHeader.background#29282800
• sideBarSectionHeader.foreground#a89984
• sideBarTitle.foreground#a89984
• statusBar.background#292828
• statusBar.border#292828
• statusBar.debuggingBackground#292828
• statusBar.debuggingForeground#e78a4e
• statusBar.foreground#a89984
• statusBar.noFolderBackground#292828
• statusBar.noFolderBorder#292828
• statusBar.noFolderForeground#a89984
• statusBarItem.activeBackground#3c3836a0
• statusBarItem.errorBackground#292828
• statusBarItem.errorForeground#ea6962
• statusBarItem.hoverBackground#3c3836
• statusBarItem.prominentBackground#292828
• statusBarItem.prominentForeground#d4be98
• statusBarItem.prominentHoverBackground#3c3836a0
• statusBarItem.remoteBackground#292828
• statusBarItem.remoteForeground#a89984
• statusBarItem.warningBackground#292828
• statusBarItem.warningForeground#d8a657
• symbolIcon.arrayForeground#7daea3
• symbolIcon.booleanForeground#d3869b
• symbolIcon.classForeground#d8a657
• symbolIcon.colorForeground#d4be98
• symbolIcon.constantForeground#89b482
• symbolIcon.constructorForeground#d3869b
• symbolIcon.enumeratorForeground#d3869b
• symbolIcon.enumeratorMemberForeground#89b482
• symbolIcon.eventForeground#d8a657
• symbolIcon.fieldForeground#d4be98
• symbolIcon.fileForeground#d4be98
• symbolIcon.folderForeground#d4be98
• symbolIcon.functionForeground#a9b665
• symbolIcon.interfaceForeground#d8a657
• symbolIcon.keyForeground#a9b665
• symbolIcon.keywordForeground#ea6962
• symbolIcon.methodForeground#a9b665
• symbolIcon.moduleForeground#d3869b
• symbolIcon.namespaceForeground#d3869b
• symbolIcon.nullForeground#89b482
• symbolIcon.numberForeground#d3869b
• symbolIcon.objectForeground#d3869b
• symbolIcon.operatorForeground#e78a4e
• symbolIcon.packageForeground#d3869b
• symbolIcon.propertyForeground#89b482
• symbolIcon.referenceForeground#7daea3
• symbolIcon.snippetForeground#d4be98
• symbolIcon.stringForeground#a9b665
• symbolIcon.structForeground#d8a657
• symbolIcon.textForeground#d4be98
• symbolIcon.typeParameterForeground#89b482
• symbolIcon.unitForeground#d4be98
• symbolIcon.variableForeground#7daea3
• tab.activeBackground#423c39
• tab.activeBorder#a89984
• tab.activeForeground#d4be98
• tab.border#292828
• tab.hoverBackground#292828
• tab.hoverForeground#d4be98
• tab.inactiveBackground#292828
• tab.inactiveForeground#7c6f64
• tab.lastPinnedBorder#a89984
• tab.unfocusedActiveBorder#928374
• tab.unfocusedActiveForeground#a89984
• tab.unfocusedHoverForeground#d4be98
• tab.unfocusedInactiveForeground#7c6f64
• terminal.ansiBlack#3c3836
• terminal.ansiBlue#458588
• terminal.ansiBrightBlack#928374
• terminal.ansiBrightBlue#83a598
• terminal.ansiBrightCyan#8ec07c
• terminal.ansiBrightGreen#b8bb26
• terminal.ansiBrightMagenta#d3869b
• terminal.ansiBrightRed#fb4934
• terminal.ansiBrightWhite#ebdbb2
• terminal.ansiBrightYellow#fabd2f
• terminal.ansiCyan#689d6a
• terminal.ansiGreen#98971a
• terminal.ansiMagenta#b16286
• terminal.ansiRed#cc241d
• terminal.ansiWhite#a89984
• terminal.ansiYellow#d79921
• terminal.background#32302f
• terminal.foreground#ebdbb2
• terminalCursor.foreground#d4be98
• testing.iconErrored#ea6962
• testing.iconFailed#ea6962
• testing.iconPassed#89b482
• testing.iconQueued#7daea3
• testing.iconSkipped#d3869b
• testing.iconUnset#d8a657
• testing.runAction#89b482
• textBlockQuote.background#32302f
• textBlockQuote.border#a89984
• textCodeBlock.background#32302f
• textLink.activeForeground#8f9a52
• textLink.foreground#a9b665
• textPreformat.foreground#d8a657
• titleBar.activeBackground#32302f
• titleBar.activeForeground#ebdbb2
• titleBar.border#292828
• titleBar.inactiveBackground#32302f
• titleBar.inactiveForeground#7c6f64
• toolbar.hoverBackground#383432
• tree.indentGuidesStroke#7c6f64
• walkThrough.embeddedEditorBackground#1c1c1c
• welcomePage.progress.foreground#a9b665
• welcomePage.tileHoverBackground#32302f
• widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).