ZBRA Theme

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#4fe070
• activityBar.activeBorder#263451
• activityBar.activeFocusBorder#776af8
• activityBar.background#263451
• activityBar.border#282c34
• activityBar.dropBorder#4f59e0
• activityBar.foreground#585c62
• activityBar.inactiveForeground#898b8f
• activityBarBadge.background#eb5630
• activityBarBadge.foreground#282c34
• badge.background#776af8
• badge.foreground#282c34
• breadcrumb.activeSelectionForeground#d1d3d4
• breadcrumb.background#282c34
• breadcrumb.focusForeground#b9bbbd
• breadcrumb.foreground#a1a3a6
• breadcrumbPicker.background#282c34
• button.background#4f59e0
• button.foreground#282c34
• button.hoverBackground#43bfb3
• button.secondaryBackground#b9bbbd
• button.secondaryForeground#282c34
• button.secondaryHoverBackground#a1a3a6
• charts.blue#4f59e0
• charts.foreground#b9bbbd
• charts.green#4fe070
• charts.lines#707479
• charts.orange#eb5630
• charts.purple#776af8
• charts.red#eb3047
• charts.yellow#e0d66c
• checkbox.background#4f59e0
• checkbox.border#40444b
• checkbox.foreground#282c34
• debugConsole.errorForeground#eb3047
• debugConsole.infoForeground#4f59e0
• debugConsole.sourceForeground#776af8
• debugConsole.warningForeground#eb5630
• debugConsoleInputIcon.foreground#898b8f
• debugExceptionWidget.background#40444b
• debugExceptionWidget.border#40444b
• debugIcon.breakpointCurrentStackframeForeground#4fe070
• debugIcon.breakpointDisabledForeground#898b8f
• debugIcon.breakpointForeground#eb3047
• debugIcon.breakpointStackframeForeground#e0d66c
• debugIcon.breakpointUnverifiedForeground#a1a3a6
• debugIcon.continueForeground#4fe070
• debugIcon.disconnectForeground#eb5630
• debugIcon.pauseForeground#4f59e0
• debugIcon.restartForeground#eb30d5
• debugIcon.startForeground#4fe070
• debugIcon.stepBackForeground#d1d3d4
• debugIcon.stepIntoForeground#d1d3d4
• debugIcon.stepOutForeground#d1d3d4
• debugIcon.stepOverForeground#d1d3d4
• debugIcon.stopForeground#eb3047
• debugTokenExpression.boolean#776af8
• debugTokenExpression.error#eb3047
• debugTokenExpression.name#4f59e0
• debugTokenExpression.number#eb30d5
• debugTokenExpression.string#4fe070
• debugTokenExpression.value#d1d3d4
• debugToolBar.background#40444b
• debugToolBar.border#585c62
• debugView.exceptionLabelBackground#40444b
• debugView.exceptionLabelForeground#e0d66c
• debugView.stateLabelBackground#40444b
• debugView.stateLabelForeground#4f59e0
• debugView.valueChangedHighlight#e0d66c33
• descriptionForeground#b9bbbd
• diffEditor.border#40444b
• diffEditor.diagonalFill#40444b7f
• diffEditor.insertedTextBackground#4fe07020
• diffEditor.removedTextBackground#eb304720
• dropdown.background#40444b
• dropdown.border#40444b
• dropdown.foreground#b9bbbd
• dropdown.listBackground#40444b
• editor.background#282c34
• editor.findMatchBackground#e0d66c3f
• editor.findMatchHighlightBackground#e0d66c33
• editor.findRangeHighlightBackground#40444b
• editor.focusedStackFrameHighlightBackground#4fe0703f
• editor.foldBackground#40444b66
• editor.foreground#d1d3d4
• editor.hoverHighlightBackground#585c627f
• editor.inactiveSelectionBackground#4f59e033
• editor.lineHighlightBackground#282c34
• editor.lineHighlightBorder#40444b
• editor.rangeHighlightBackground#e0d66c33
• editor.selectionBackground#4f59e033
• editor.selectionForeground#d1d3d4
• editor.selectionHighlightBackground#40444b
• editor.snippetFinalTabstopHighlightBackground#585c627f
• editor.snippetTabstopHighlightBackground#40444b7f
• editor.stackFrameHighlightBackground#43bfb33f
• editor.symbolHighlightBackground#776af833
• editor.wordHighlightBackground#776af833
• editor.wordHighlightStrongBackground#eb30d533
• editorBracketHighlight.foreground1#d1d3d4
• editorBracketHighlight.foreground2#e0d66c
• editorBracketHighlight.foreground3#43bfb3
• editorBracketHighlight.foreground4#776af8
• editorBracketHighlight.foreground5#4fe070
• editorBracketHighlight.foreground6#4f59e0
• editorBracketHighlight.unexpectedBracket.foreground#eb3047
• editorBracketMatch.background#40444b
• editorBracketMatch.border#585c62
• editorCodeLens.foreground#a1a3a6
• editorCursor.background#282c34
• editorCursor.foreground#776af8
• editorError.border#d1d3d4
• editorError.foreground#eb3047
• editorGroup.border#40444b
• editorGroup.dropBackground#585c627f
• editorGroup.emptyBackground#282c34
• editorGroup.focusedEmptyBorder#40444b
• editorGroupHeader.border#282c34
• editorGroupHeader.noTabsBackground#282c34
• editorGroupHeader.tabsBackground#282c34
• editorGroupHeader.tabsBorder#282c34
• editorGutter.addedBackground#4fe070
• editorGutter.background#282c34
• editorGutter.commentRangeForeground#707479
• editorGutter.deletedBackground#eb3047
• editorGutter.foldingControlForeground#a1a3a6
• editorGutter.modifiedBackground#e0d66c
• editorHint.border#898b8f
• editorHint.foreground#eb30d5
• editorHoverWidget.background#40444b
• editorHoverWidget.border#40444b
• editorHoverWidget.foreground#b9bbbd
• editorHoverWidget.statusBarBackground#4f59e033
• editorIndentGuide.activeBackground#585c62
• editorIndentGuide.background#40444b
• editorInfo.border#a1a3a6
• editorInfo.foreground#4f59e0
• editorLightBulb.foreground#e0d66c
• editorLightBulbAutoFix.foreground#4f59e0
• editorLineNumber.activeForeground#898b8f
• editorLineNumber.foreground#585c62
• editorLink.activeForeground#43bfb3
• editorMarkerNavigation.background#40444b
• editorMarkerNavigationError.background#eb3047
• editorMarkerNavigationInfo.background#4f59e0
• editorMarkerNavigationWarning.background#eb5630
• editorOverviewRuler.addedForeground#4fe0707f
• editorOverviewRuler.border#40444b
• editorOverviewRuler.bracketMatchForeground#707479
• editorOverviewRuler.commonContentForeground#776af8
• editorOverviewRuler.currentContentForeground#43bfb3
• editorOverviewRuler.deletedForeground#eb30477f
• editorOverviewRuler.errorForeground#eb30477f
• editorOverviewRuler.findMatchForeground#e0d66cbf
• editorOverviewRuler.incomingContentForeground#4f59e0
• editorOverviewRuler.infoForeground#4f59e07f
• editorOverviewRuler.modifiedForeground#e0d66c7f
• editorOverviewRuler.rangeHighlightForeground#585c62bf
• editorOverviewRuler.selectionHighlightForeground#40444bbf
• editorOverviewRuler.warningForeground#eb56307f
• editorOverviewRuler.wordHighlightForeground#585c62bf
• editorOverviewRuler.wordHighlightStrongForeground#707479bf
• editorPane.background#282c34
• editorRuler.foreground#40444b
• editorSuggestWidget.background#40444b
• editorSuggestWidget.border#40444b
• editorSuggestWidget.foreground#b9bbbd
• editorSuggestWidget.highlightForeground#eb30d5
• editorSuggestWidget.selectedBackground#585c62
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#b9bbbd
• editorWarning.foreground#eb5630
• editorWhitespace.foreground#40444b
• editorWidget.background#40444b
• editorWidget.border#40444b
• editorWidget.foreground#b9bbbd
• editorWidget.resizeBorder#4f59e0
• errorForeground#eb3047
• extensionBadge.remoteBackground#eb30d5
• extensionBadge.remoteForeground#282c34
• extensionButton.prominentBackground#4f59e0
• extensionButton.prominentForeground#282c34
• extensionButton.prominentHoverBackground#43bfb3
• focusBorder#776af8
• foreground#d1d3d4
• gitDecoration.addedResourceForeground#4fe070
• gitDecoration.conflictingResourceForeground#43bfb3
• gitDecoration.deletedResourceForeground#eb3047
• gitDecoration.ignoredResourceForeground#707479
• gitDecoration.modifiedResourceForeground#e0d66c
• gitDecoration.stageDeletedResourceForeground#eb3047
• gitDecoration.stageModifiedResourceForeground#43bfb3
• gitDecoration.submoduleResourceForeground#eb30d5
• gitDecoration.untrackedResourceForeground#776af8
• icon.foreground#b9bbbd
• input.background#40444b
• input.border#40444b
• input.foreground#b9bbbd
• input.placeholderForeground#585c62
• inputOption.activeBackground#585c62
• inputOption.activeBorder#43bfb3
• inputOption.activeForeground#d1d3d4
• inputValidation.errorBackground#40444b
• inputValidation.errorBorder#eb3047
• inputValidation.errorForeground#eb3047
• inputValidation.infoBackground#40444b
• inputValidation.infoBorder#4f59e0
• inputValidation.infoForeground#4f59e0
• inputValidation.warningBackground#40444b
• inputValidation.warningBorder#eb5630
• inputValidation.warningForeground#eb5630
• list.activeSelectionBackground#776af833
• list.activeSelectionForeground#d1d3d4
• list.deemphasizedForeground#898b8f
• list.dropBackground#40444b
• list.errorForeground#eb3047
• list.filterMatchBackground#e0d66c33
• list.filterMatchBorder#e0d66c33
• list.focusBackground#7074793f
• list.focusForeground#d1d3d4
• list.highlightForeground#e0d66c
• list.hoverBackground#40444b33
• list.hoverForeground#d1d3d4
• list.inactiveFocusBackground#40444b3f
• list.inactiveSelectionBackground#585c623f
• list.inactiveSelectionForeground#b9bbbd
• list.invalidItemForeground#eb3047
• list.warningForeground#e0d66c
• listFilterWidget.background#40444b
• listFilterWidget.noMatchesOutline#eb3047
• listFilterWidget.outline#4f59e0
• menu.background#282c34
• menu.foreground#b9bbbd
• menu.selectionBackground#40444b
• menu.selectionForeground#d1d3d4
• menu.separatorBackground#585c62
• menubar.selectionBackground#40444b
• menubar.selectionForeground#d1d3d4
• merge.border#898b8f
• merge.commonContentBackground#776af84c
• merge.commonHeaderBackground#776af84c
• merge.currentContentBackground#43bfb34c
• merge.currentHeaderBackground#43bfb34c
• merge.incomingContentBackground#4f59e04c
• merge.incomingHeaderBackground#4f59e04c
• minimap.background#282c34
• minimap.errorHighlight#eb304780
• minimap.findMatchHighlight#e0d66c
• minimap.selectionHighlight#4f59e080
• minimap.warningHighlight#eb563080
• minimapGutter.addedBackground#4fe07080
• minimapGutter.deletedBackground#eb304780
• minimapGutter.modifiedBackground#e0d66c80
• minimapSlider.activeBackground#70747933
• minimapSlider.background#40444b33
• minimapSlider.hoverBackground#585c6233
• notebook.cellBorderColor#40444b3f
• notebook.cellHoverBackground#40444b3f
• notebook.cellInsertionIndicator#4fe070
• notebook.cellStatusBarItemHoverBackground#40444b3f
• notebook.cellToolbarSeparator#40444b3f
• notebook.focusedCellBackground#40444b7f
• notebook.focusedCellBorder#776af8
• notebook.focusedEditorBorder#40444b
• notebook.focusedRowBorder#776af8
• notebook.inactiveFocusedCellBorder#a1a3a6
• notebook.outputContainerBackgroundColor#282c34
• notebook.symbolHighlightBackground#776af83f
• notebookScrollbarSlider.activeBackground#a1a3a67f
• notebookScrollbarSlider.background#7074797f
• notebookScrollbarSlider.hoverBackground#898b8f7f
• notebookStatusErrorIcon.foreground#eb3047
• notebookStatusRunningIcon.foreground#4f59e0
• notebookStatusSuccessIcon.foreground#4fe070
• notificationCenterHeader.background#585c62
• notificationCenterHeader.foreground#b9bbbd
• notificationLink.foreground#4f59e0
• notifications.background#40444b
• notifications.border#707479
• notifications.foreground#d1d3d4
• notificationsErrorIcon.foreground#eb3047
• notificationsInfoIcon.foreground#4f59e0
• notificationsWarningIcon.foreground#eb5630
• notificationToast.border#707479
• panel.background#282c34
• panel.border#40444b
• panel.dropBorder#4f59e0
• panelSection.border#40444b
• panelSection.dropBackground#40444b3f
• panelSectionHeader.background#585c62
• panelSectionHeader.border#282c34
• panelSectionHeader.foreground#b9bbbd
• panelTitle.activeBorder#707479
• panelTitle.activeForeground#b9bbbd
• panelTitle.inactiveForeground#898b8f
• peekView.border#eb30d5
• peekViewEditor.background#40444b7f
• peekViewEditor.matchHighlightBackground#e0d66c7f
• peekViewEditorGutter.background#40444b7f
• peekViewResult.background#40444b
• peekViewResult.fileForeground#b9bbbd
• peekViewResult.lineForeground#585c62
• peekViewResult.matchHighlightBackground#e0d66c
• peekViewResult.selectionBackground#707479
• peekViewResult.selectionForeground#d1d3d4
• peekViewTitle.background#40444b
• peekViewTitleDescription.foreground#a1a3a6
• peekViewTitleLabel.foreground#d1d3d4
• pickerGroup.border#585c62
• pickerGroup.foreground#898b8f
• problemsErrorIcon.foreground#eb3047
• problemsInfoIcon.foreground#4f59e0
• problemsWarningIcon.foreground#eb5630
• progressBar.background#4fe070
• quickInput.background#40444b
• quickInput.foreground#d1d3d4
• quickInputTitle.background#585c62
• sash.hoverBorder#4f59e0
• scm.providerBorder#585c62
• scrollbar.shadow#282c34
• scrollbarSlider.activeBackground#a1a3a67f
• scrollbarSlider.background#7074797f
• scrollbarSlider.hoverBackground#898b8f7f
• selection.background#585c62
• settings.checkboxBackground#4f59e0
• settings.checkboxBorder#4f59e0
• settings.checkboxForeground#282c34
• settings.dropdownBackground#40444b
• settings.dropdownForeground#b9bbbd
• settings.dropdownListBorder#585c62
• settings.focusedRowBackground#282c34
• settings.headerForeground#d1d3d4
• settings.modifiedItemIndicator#43bfb3
• settings.numberInputBackground#40444b
• settings.numberInputForeground#b9bbbd
• settings.rowHoverBackground#40444b7f
• settings.textInputBackground#40444b
• settings.textInputForeground#b9bbbd
• sideBar.background#282c34
• sideBar.border#40444b
• sideBar.dropBackground#40444b3f
• sideBar.foreground#b9bbbd
• sideBarSectionHeader.background#585c62
• sideBarSectionHeader.border#282c34
• sideBarSectionHeader.foreground#b9bbbd
• sideBarTitle.foreground#a1a3a6
• statusBar.background#263451
• statusBar.border#282c34
• statusBar.debuggingBackground#eb5630
• statusBar.debuggingBorder#282c34
• statusBar.debuggingForeground#282c34
• statusBar.foreground#d1d3d4
• statusBar.noFolderBackground#604C9D
• statusBar.noFolderBorder#282c34
• statusBar.noFolderForeground#b9bbbd
• statusBarItem.activeBackground#43bfb3
• statusBarItem.errorBackground#eb3047
• statusBarItem.errorForeground#282c34
• statusBarItem.hoverBackground#776af8
• statusBarItem.prominentBackground#43bfb3
• statusBarItem.prominentHoverBackground#4fe070
• statusBarItem.remoteBackground#4fe070
• statusBarItem.remoteForeground#282c34
• symbolIcon.arrayForeground#eb30d5
• symbolIcon.booleanForeground#776af8
• symbolIcon.classForeground#4f59e0
• symbolIcon.colorForeground#43bfb3
• symbolIcon.constantForeground#4fe070
• symbolIcon.constructorForeground#776af8
• symbolIcon.enumeratorForeground#43bfb3
• symbolIcon.enumeratorMemberForeground#4f59e0
• symbolIcon.eventForeground#eb5630
• symbolIcon.fieldForeground#eb3047
• symbolIcon.fileForeground#b9bbbd
• symbolIcon.folderForeground#a1a3a6
• symbolIcon.functionForeground#776af8
• symbolIcon.interfaceForeground#eb3047
• symbolIcon.keyForeground#e0d66c
• symbolIcon.keywordForeground#4f59e0
• symbolIcon.methodForeground#43bfb3
• symbolIcon.moduleForeground#43bfb3
• symbolIcon.namespaceForeground#4f59e0
• symbolIcon.nullForeground#eb3047
• symbolIcon.numberForeground#eb5630
• symbolIcon.objectForeground#d1d3d4
• symbolIcon.operatorForeground#eb3047
• symbolIcon.packageForeground#eb5630
• symbolIcon.propertyForeground#43bfb3
• symbolIcon.referenceForeground#eb5630
• symbolIcon.snippetForeground#a1a3a6
• symbolIcon.stringForeground#4fe070
• symbolIcon.structForeground#4f59e0
• symbolIcon.textForeground#d1d3d4
• symbolIcon.typeParameterForeground#4f59e0
• symbolIcon.unitForeground#e0d66c
• symbolIcon.variableForeground#eb5630
• tab.activeBackground#282c34
• tab.activeForeground#b9bbbd
• tab.activeModifiedBorder#e0d66c
• tab.border#282c34
• tab.hoverBackground#40444b80
• tab.hoverForeground#a1a3a6
• tab.inactiveBackground#40444b
• tab.inactiveForeground#707479
• tab.inactiveModifiedBorder#e0d66c
• tab.lastPinnedBorder#eb30d5
• tab.unfocusedActiveBackground#282c34
• tab.unfocusedActiveForeground#707479
• tab.unfocusedActiveModifiedBorder#e0d66c
• tab.unfocusedHoverBackground#40444b80
• tab.unfocusedHoverForeground#898b8f
• tab.unfocusedInactiveBackground#40444b
• tab.unfocusedInactiveForeground#585c62
• tab.unfocusedInactiveModifiedBorder#e0d66c
• terminal.ansiBlack#282c34
• terminal.ansiBlue#4f59e0
• terminal.ansiBrightBlack#40444b
• terminal.ansiBrightBlue#4f59e0
• terminal.ansiBrightCyan#43bfb3
• terminal.ansiBrightGreen#43bfb3
• terminal.ansiBrightMagenta#eb30d5
• terminal.ansiBrightRed#eb5630
• terminal.ansiBrightWhite#d1d3d4
• terminal.ansiBrightYellow#e0d66c
• terminal.ansiCyan#43bfb3
• terminal.ansiGreen#4fe070
• terminal.ansiMagenta#eb30d5
• terminal.ansiRed#eb3047
• terminal.ansiWhite#b9bbbd
• terminal.ansiYellow#e0d66c
• terminal.background#282c34
• terminal.foreground#b9bbbd
• terminal.selectionBackground#4f59e07f
• terminalCursor.background#40444b
• terminalCursor.foreground#a1a3a6
• testing.iconErrored#eb3047
• testing.iconFailed#eb5630
• testing.iconPassed#4fe070
• testing.iconQueued#43bfb3
• testing.iconSkipped#898b8f
• testing.iconUnset#a1a3a6
• testing.message.error.decorationForeground#eb3047
• testing.message.error.lineBackground#eb30473f
• testing.message.info.decorationForeground#4f59e0
• testing.message.info.lineBackground#4f59e03f
• testing.peekBorder#707479
• testing.runAction#4f59e0
• textBlockQuote.background#40444b
• textBlockQuote.border#40444b
• textCodeBlock.background#282c34
• textLink.activeForeground#43bfb3
• textLink.foreground#4f59e0
• textPreformat.foreground#eb5630
• textSeparator.foreground#898b8f
• titleBar.activeBackground#263451
• titleBar.activeForeground#d1d3d4
• titleBar.inactiveBackground#282c34
• titleBar.inactiveForeground#707479
• tree.indentGuidesStroke#40444b
• walkThrough.embeddedEditorBackground#282c34
• welcomePage.background#282c34
• welcomePage.progress.background#4f59e0
• welcomePage.progress.foreground#282c34
• widget.shadow#282c34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).