Void Teal

Color themes

• 

  Void Reef

• 

  Void Teal

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#e8f5f2
• activityBar.activeBorder#00000000
• activityBar.activeFocusBorder#00000000
• activityBar.background#e0e0e0
• activityBar.border#00000000
• activityBar.dropBorder#00000000
• activityBar.foreground#007a65
• activityBar.inactiveForeground#888888
• activityBarBadge.background#00a387
• activityBarBadge.foreground#ffffff
• badge.background#007a65
• badge.foreground#ffffff
• breadcrumb.activeSelectionForeground#00a387
• breadcrumb.focusForeground#1a7abf
• breadcrumb.foreground#888888
• button.background#007a65
• button.foreground#ffffff
• button.hoverBackground#00a387
• button.secondaryBackground#e8e8f0
• button.secondaryForeground#6b3fa0
• button.secondaryHoverBackground#d8d8ee
• checkbox.background#f5f5f0
• checkbox.border#00000000
• checkbox.foreground#6b3fa0
• commandCenter.activeBackground#00a38720
• commandCenter.activeBorder#00000000
• commandCenter.activeForeground#007a65
• commandCenter.background#ebebeb
• commandCenter.border#00000000
• commandCenter.foreground#444444
• commandCenter.inactiveBorder#00000000
• commandCenter.inactiveForeground#aaaaaa
• descriptionForeground#666666
• diffEditor.border#00000000
• diffEditor.insertedLineBackground#007a650c
• diffEditor.insertedTextBackground#007a6522
• diffEditor.insertedTextBorder#00000000
• diffEditor.removedLineBackground#c0392b0c
• diffEditor.removedTextBackground#c0392b22
• diffEditor.removedTextBorder#00000000
• diffEditorOverview.insertedForeground#007a65
• diffEditorOverview.removedForeground#c0392b
• disabledForeground#aaaaaa
• dropdown.background#f5f5f0
• dropdown.border#00000000
• dropdown.foreground#444444
• dropdown.listBackground#f5f5f0
• editor.background#f5f5f0
• editor.findMatchBackground#1a7abf33
• editor.findMatchBorder#00000000
• editor.findMatchHighlightBackground#1a7abf18
• editor.findMatchHighlightBorder#00000000
• editor.findRangeHighlightBackground#00a38722
• editor.findRangeHighlightBorder#00000000
• editor.foldBackground#e8f5f2
• editor.foreground#2d2d2d
• editor.hoverHighlightBackground#1a7abf15
• editor.inactiveSelectionBackground#00a38744
• editor.lineHighlightBackground#00000005
• editor.lineHighlightBorder#00000000
• editor.linkedEditingBackground#6b3fa015
• editor.rangeHighlightBackground#00a38718
• editor.rangeHighlightBorder#00000000
• editor.selectionBackground#00a38730
• editor.selectionForeground#007a65
• editor.selectionHighlightBackground#00a38720
• editor.selectionHighlightBorder#00000000
• editor.snippetFinalTabstopHighlightBackground#6b3fa022
• editor.snippetFinalTabstopHighlightBorder#00000000
• editor.snippetTabstopHighlightBackground#e8f5f2
• editor.snippetTabstopHighlightBorder#00000000
• editor.symbolHighlightBackground#1a7abf18
• editor.symbolHighlightBorder#00000000
• editor.wordHighlightBackground#1a7abf15
• editor.wordHighlightBorder#00000000
• editor.wordHighlightStrongBackground#6b3fa018
• editor.wordHighlightStrongBorder#00000000
• editorBracketHighlight.foreground1#007a65
• editorBracketHighlight.foreground2#6b3fa0
• editorBracketHighlight.foreground3#1a7abf
• editorBracketHighlight.foreground4#0099b8
• editorBracketHighlight.foreground5#c0392b
• editorBracketHighlight.foreground6#7952b3
• editorBracketMatch.background#00a38730
• editorBracketMatch.border#00000000
• editorCursor.background#f5f5f0
• editorCursor.foreground#00a387
• editorGroup.border#00000000
• editorGroup.dropBackground#6b3fa015
• editorGroup.emptyBackground#f5f5f0
• editorGroupHeader.border#00000000
• editorGroupHeader.noTabsBackground#f5f5f0
• editorGroupHeader.tabsBackground#f5f5f0
• editorGroupHeader.tabsBorder#00000000
• editorGutter.addedBackground#007a65
• editorGutter.deletedBackground#c0392b
• editorGutter.modifiedBackground#1a7abf
• editorHoverWidget.background#f5f5f0
• editorHoverWidget.border#00000000
• editorIndentGuide.activeBackground1#00a387
• editorIndentGuide.activeBackground2#00a38755
• editorIndentGuide.background1#00a38730
• editorIndentGuide.background2#00a38718
• editorLineNumber.activeForeground#00a387
• editorLineNumber.foreground#aaaaaa
• editorOverviewRuler.addedForeground#007a65
• editorOverviewRuler.border#00000000
• editorOverviewRuler.deletedForeground#c0392b
• editorOverviewRuler.findMatchForeground#1a7abf66
• editorOverviewRuler.modifiedForeground#1a7abf
• editorOverviewRuler.selectionHighlightForeground#00a38744
• editorRuler.foreground#00a38720
• editorSuggestWidget.background#f5f5f0
• editorSuggestWidget.border#00000000
• editorSuggestWidget.foreground#444444
• editorSuggestWidget.highlightForeground#00a387
• editorSuggestWidget.selectedBackground#00a38720
• editorWhitespace.foreground#00a38730
• errorForeground#c0392b
• extensionButton.prominentBackground#007a65
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#00a387
• focusBorder#00a387
• foreground#444444
• gitDecoration.addedResourceForeground#007a65
• gitDecoration.conflictingResourceForeground#b8860b
• gitDecoration.deletedResourceForeground#c0392b
• gitDecoration.ignoredResourceForeground#aaaaaa
• gitDecoration.modifiedResourceForeground#00a387
• gitDecoration.renamedResourceForeground#6b3fa0
• gitDecoration.stageDeletedResourceForeground#c0392b
• gitDecoration.stageModifiedResourceForeground#00a387
• gitDecoration.submoduleResourceForeground#888888
• gitDecoration.untrackedResourceForeground#6b3fa0
• icon.foreground#666666
• input.background#ffffff
• input.border#00000000
• input.foreground#2d2d2d
• input.placeholderForeground#aaaaaa
• inputOption.activeBackground#00a38730
• inputOption.activeBorder#00000000
• inputOption.activeForeground#007a65
• inputValidation.errorBackground#fdecea
• inputValidation.errorBorder#00000000
• inputValidation.infoBackground#e8f5f2
• inputValidation.infoBorder#00000000
• inputValidation.warningBackground#fff8e1
• inputValidation.warningBorder#00000000
• list.activeSelectionBackground#00a38720
• list.activeSelectionForeground#007a65
• list.activeSelectionIconForeground#007a65
• list.dropBackground#00a38720
• list.errorForeground#c0392b
• list.focusBackground#00a38720
• list.focusForeground#007a65
• list.focusOutline#00000000
• list.highlightForeground#00a387
• list.hoverBackground#ebebeb
• list.hoverForeground#1a7abf
• list.inactiveFocusBackground#ebebeb
• list.inactiveSelectionBackground#e0e0e0
• list.inactiveSelectionForeground#6b3fa0
• list.invalidItemForeground#c0392b
• list.warningForeground#c0392b
• listFilterWidget.background#f5f5f0
• listFilterWidget.noMatchesOutline#00000000
• listFilterWidget.outline#00000000
• menu.background#f5f5f0
• menu.border#00000000
• menu.foreground#444444
• menu.selectionBackground#00a38720
• menu.selectionBorder#00000000
• menu.selectionForeground#007a65
• menu.separatorBackground#e0e0e0
• menubar.selectionBackground#00a38720
• menubar.selectionBorder#00000000
• menubar.selectionForeground#007a65
• minimap.background#ebebeb
• minimap.errorHighlight#c0392b
• minimap.findMatchHighlight#1a7abf66
• minimap.foregroundOpacity#00a387
• minimap.selectionHighlight#00a38730
• minimap.warningHighlight#c0392b
• minimapGutter.addedBackground#007a65
• minimapGutter.deletedBackground#c0392b
• minimapGutter.modifiedBackground#1a7abf
• minimapSlider.activeBackground#00a38740
• minimapSlider.background#0000000a
• minimapSlider.hoverBackground#00a38720
• notificationCenter.border#00000000
• notificationCenterHeader.background#e8f5f2
• notificationCenterHeader.foreground#444444
• notificationLink.foreground#1a7abf
• notifications.background#e8f5f2
• notifications.border#00a38733
• notifications.foreground#444444
• notificationsErrorIcon.foreground#c0392b
• notificationsInfoIcon.foreground#1a7abf
• notificationsWarningIcon.foreground#c0392b
• notificationToast.border#00000000
• panel.background#f0f0eb
• panel.border#00000000
• panel.foreground#444444
• panelTitle.activeBorder#00000000
• panelTitle.activeForeground#00a387
• panelTitle.inactiveForeground#888888
• peekView.border#00000000
• peekViewEditor.background#f0f0eb
• peekViewEditor.matchHighlightBackground#1a7abf25
• peekViewEditor.matchHighlightBorder#00000000
• peekViewEditorGutter.background#f0f0eb
• peekViewResult.background#ebebeb
• peekViewResult.fileForeground#6b3fa0
• peekViewResult.lineForeground#666666
• peekViewResult.matchHighlightBackground#1a7abf25
• peekViewResult.selectionBackground#00a38720
• peekViewResult.selectionForeground#007a65
• peekViewTitle.background#ebebeb
• peekViewTitleDescription.foreground#666666
• peekViewTitleLabel.foreground#6b3fa0
• progressBar.background#00a387
• sash.hoverBorder#00000000
• scm.historyItemAdditionsForeground#007a65
• scm.historyItemDeletionsForeground#c0392b
• scrollbar.shadow#00000015
• scrollbarSlider.activeBackground#00a38750
• scrollbarSlider.background#00000015
• scrollbarSlider.hoverBackground#00a38730
• sideBar.background#ebebeb
• sideBar.border#00000000
• sideBar.dropBackground#6b3fa015
• sideBar.foreground#444444
• sideBarSectionHeader.background#e0e0e0
• sideBarSectionHeader.border#00000000
• sideBarSectionHeader.foreground#444444
• sideBarTitle.foreground#444444
• statusBar.background#007a65
• statusBar.border#00000000
• statusBar.debuggingBackground#6b3fa0
• statusBar.debuggingBorder#00000000
• statusBar.debuggingForeground#ffffff
• statusBar.focusBorder#00000000
• statusBar.foreground#ffffff
• statusBar.noFolderBackground#ebebeb
• statusBar.noFolderBorder#00000000
• statusBar.noFolderForeground#444444
• statusBarItem.activeBackground#007a6580
• statusBarItem.compactHoverBackground#007a6580
• statusBarItem.errorBackground#c0392b
• statusBarItem.errorForeground#ffffff
• statusBarItem.focusBorder#00000000
• statusBarItem.hoverBackground#007a6580
• statusBarItem.prominentBackground#6b3fa0
• statusBarItem.prominentForeground#ffffff
• statusBarItem.prominentHoverBackground#7952b3
• statusBarItem.remoteBackground#007a65
• statusBarItem.remoteForeground#ffffff
• statusBarItem.warningBackground#b8860b
• statusBarItem.warningForeground#ffffff
• symbolIcon.classForeground#1a7abf
• symbolIcon.constantForeground#7952b3
• symbolIcon.enumeratorForeground#6b3fa0
• symbolIcon.functionForeground#0099b8
• symbolIcon.interfaceForeground#7952b3
• symbolIcon.keywordForeground#6b3fa0
• symbolIcon.moduleForeground#1a7abf
• symbolIcon.propertyForeground#666666
• symbolIcon.variableForeground#2d2d2d
• tab.activeBackground#f5f5f0
• tab.activeBorder#00000000
• tab.activeBorderTop#00000000
• tab.activeForeground#2d2d2d
• tab.activeModifiedBorder#00000000
• tab.border#00000000
• tab.hoverBackground#ebebeb
• tab.hoverBorder#00000000
• tab.hoverForeground#1a7abf
• tab.inactiveBackground#e8e8e3
• tab.inactiveForeground#888888
• tab.inactiveModifiedBorder#00000000
• tab.unfocusedActiveBackground#f5f5f0
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveBorderTop#00000000
• tab.unfocusedActiveForeground#666666
• tab.unfocusedHoverBackground#ebebeb
• tab.unfocusedHoverBorder#00000000
• tab.unfocusedInactiveBackground#e8e8e3
• tab.unfocusedInactiveForeground#aaaaaa
• terminal.ansiBlack#2d2d2d
• terminal.ansiBlue#1a7abf
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#1a7abf
• terminal.ansiBrightCyan#00a387
• terminal.ansiBrightGreen#007a65
• terminal.ansiBrightMagenta#7952b3
• terminal.ansiBrightRed#c0392b
• terminal.ansiBrightWhite#2d2d2d
• terminal.ansiBrightYellow#b8860b
• terminal.ansiCyan#0099b8
• terminal.ansiGreen#007a65
• terminal.ansiMagenta#6b3fa0
• terminal.ansiRed#c0392b
• terminal.ansiWhite#888888
• terminal.ansiYellow#b8860b
• terminal.background#f5f5f0
• terminal.border#00000000
• terminal.foreground#2d2d2d
• terminal.selectionBackground#00a38730
• terminal.tab.activeBorder#00000000
• terminalCommandDecoration.defaultBackground#00a38730
• terminalCommandDecoration.errorBackground#c0392b
• terminalCommandDecoration.successBackground#007a65
• terminalCursor.background#f5f5f0
• terminalCursor.foreground#00a387
• textBlockQuote.background#e8f5f2
• textBlockQuote.border#00000000
• textCodeBlock.background#e8f5f2
• textLink.activeForeground#007a65
• textLink.foreground#1a7abf
• textPreformat.background#e8f5f2
• textPreformat.foreground#2d2d2d
• textSeparator.foreground#cccccc
• titleBar.activeBackground#ebebeb
• titleBar.activeForeground#333333
• titleBar.border#00000000
• titleBar.inactiveBackground#ebebeb
• titleBar.inactiveForeground#888888
• tree.indentGuidesStroke#00a38740
• walkThrough.embeddedEditorBackground#ebebeb
• welcomePage.background#f5f5f0
• welcomePage.buttonBackground#ebebeb
• welcomePage.buttonHoverBackground#00a38720
• window.activeBorder#00000000
• window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).