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#001a1a
• activityBar.activeBorder#00000000
• activityBar.activeFocusBorder#00000000
• activityBar.background#000000
• activityBar.border#00000000
• activityBar.dropBorder#00000000
• activityBar.foreground#888888
• activityBar.inactiveForeground#444444
• activityBarBadge.background#0d4f4f
• activityBarBadge.foreground#00d4aa
• badge.background#0d4f4f
• badge.foreground#00d4aa
• breadcrumb.activeSelectionForeground#00d4aa
• breadcrumb.focusForeground#39bae6
• breadcrumb.foreground#555555
• button.background#0d4f4f
• button.foreground#00d4aa
• button.hoverBackground#1a6b6b
• button.secondaryBackground#1a0a3a
• button.secondaryForeground#d2a6ff
• button.secondaryHoverBackground#2a1060
• checkbox.background#001a1a
• checkbox.border#00000000
• checkbox.foreground#d2a6ff
• commandCenter.activeBackground#0d4f4f
• commandCenter.activeBorder#00000000
• commandCenter.activeForeground#00d4aa
• commandCenter.background#001a1a
• commandCenter.border#00000000
• commandCenter.foreground#888888
• commandCenter.inactiveBorder#00000000
• commandCenter.inactiveForeground#444444
• contrastActiveBorder#00000000
• contrastBorder#00000000
• descriptionForeground#666666
• diffEditor.border#00000000
• diffEditor.insertedLineBackground#00d4aa0c
• diffEditor.insertedTextBackground#00d4aa22
• diffEditor.insertedTextBorder#00000000
• diffEditor.removedLineBackground#ff6b6b0c
• diffEditor.removedTextBackground#ff6b6b22
• diffEditor.removedTextBorder#00000000
• diffEditorOverview.insertedForeground#00d4aa
• diffEditorOverview.removedForeground#ff6b6b
• disabledForeground#444444
• dropdown.background#001a1a
• dropdown.border#00000000
• dropdown.foreground#888888
• dropdown.listBackground#001a1a
• editor.background#000000
• editor.findMatchBackground#39bae633
• editor.findMatchBorder#00000000
• editor.findMatchHighlightBackground#39bae618
• editor.findMatchHighlightBorder#00000000
• editor.findRangeHighlightBackground#0d4f4f22
• editor.findRangeHighlightBorder#00000000
• editor.foldBackground#001a1a
• editor.foreground#bfbdb6
• editor.hoverHighlightBackground#39bae615
• editor.inactiveSelectionBackground#0d4f4f44
• editor.lineHighlightBackground#ffffff05
• editor.lineHighlightBorder#00000000
• editor.linkedEditingBackground#d2a6ff15
• editor.rangeHighlightBackground#0d4f4f18
• editor.rangeHighlightBorder#00000000
• editor.selectionBackground#0d4f4f
• editor.selectionForeground#00d4aa
• editor.selectionHighlightBackground#0d4f4f55
• editor.selectionHighlightBorder#00000000
• editor.snippetFinalTabstopHighlightBackground#d2a6ff22
• editor.snippetFinalTabstopHighlightBorder#00000000
• editor.snippetTabstopHighlightBackground#001a1a
• editor.snippetTabstopHighlightBorder#00000000
• editor.symbolHighlightBackground#39bae618
• editor.symbolHighlightBorder#00000000
• editor.wordHighlightBackground#39bae615
• editor.wordHighlightBorder#00000000
• editor.wordHighlightStrongBackground#d2a6ff18
• editor.wordHighlightStrongBorder#00000000
• editorBracketHighlight.foreground1#00d4aa
• editorBracketHighlight.foreground2#d2a6ff
• editorBracketHighlight.foreground3#39bae6
• editorBracketHighlight.foreground4#ffb454
• editorBracketHighlight.foreground5#ff8f40
• editorBracketHighlight.foreground6#95e6cb
• editorBracketMatch.background#0d4f4f
• editorBracketMatch.border#00000000
• editorCursor.background#000000
• editorCursor.foreground#00d4aa
• editorGroup.border#00000000
• editorGroup.dropBackground#d2a6ff15
• editorGroup.emptyBackground#000000
• editorGroupHeader.border#00000000
• editorGroupHeader.noTabsBackground#000000
• editorGroupHeader.tabsBackground#000000
• editorGroupHeader.tabsBorder#00000000
• editorGutter.addedBackground#00d4aa
• editorGutter.deletedBackground#ff6b6b
• editorGutter.modifiedBackground#39bae6
• editorHoverWidget.background#001a1a
• editorHoverWidget.border#00000000
• editorIndentGuide.activeBackground1#00d4aa
• editorIndentGuide.activeBackground2#00d4aa55
• editorIndentGuide.background1#0d4f4f
• editorIndentGuide.background2#0a2e2b
• editorLineNumber.activeForeground#00d4aa
• editorLineNumber.foreground#1a6b5a
• editorOverviewRuler.addedForeground#00d4aa
• editorOverviewRuler.border#00000000
• editorOverviewRuler.deletedForeground#ff6b6b
• editorOverviewRuler.findMatchForeground#39bae666
• editorOverviewRuler.modifiedForeground#39bae6
• editorOverviewRuler.selectionHighlightForeground#00d4aa44
• editorRuler.foreground#0d3330
• editorSuggestWidget.background#001a1a
• editorSuggestWidget.border#00000000
• editorSuggestWidget.foreground#888888
• editorSuggestWidget.highlightForeground#00d4aa
• editorSuggestWidget.selectedBackground#0d4f4f
• editorWhitespace.foreground#0d4f4f
• errorForeground#ff6b6b
• extensionButton.prominentBackground#0d4f4f
• extensionButton.prominentForeground#00d4aa
• extensionButton.prominentHoverBackground#1a6b6b
• focusBorder#00000000
• foreground#888888
• gitDecoration.addedResourceForeground#00e5b8
• gitDecoration.conflictingResourceForeground#ff8f40
• gitDecoration.deletedResourceForeground#ff6b6b
• gitDecoration.ignoredResourceForeground#444444
• gitDecoration.modifiedResourceForeground#00d4aa
• gitDecoration.renamedResourceForeground#d2a6ff
• gitDecoration.stageDeletedResourceForeground#ff6b6b
• gitDecoration.stageModifiedResourceForeground#00d4aa
• gitDecoration.submoduleResourceForeground#888888
• gitDecoration.untrackedResourceForeground#a78bfa
• icon.foreground#888888
• input.background#001a1a
• input.border#00000000
• input.foreground#bfbdb6
• input.placeholderForeground#444444
• inputOption.activeBackground#0d4f4f
• inputOption.activeBorder#00000000
• inputOption.activeForeground#00d4aa
• inputValidation.errorBackground#3a0000
• inputValidation.errorBorder#00000000
• inputValidation.infoBackground#001a2a
• inputValidation.infoBorder#00000000
• inputValidation.warningBackground#2a1500
• inputValidation.warningBorder#00000000
• list.activeSelectionBackground#0d4f4f
• list.activeSelectionForeground#00d4aa
• list.activeSelectionIconForeground#00d4aa
• list.dropBackground#0d4f4f
• list.errorForeground#ff6b6b
• list.focusBackground#0d4f4f
• list.focusForeground#00d4aa
• list.focusOutline#00000000
• list.highlightForeground#00d4aa
• list.hoverBackground#001a1a
• list.hoverForeground#39bae6
• list.inactiveFocusBackground#001a1a
• list.inactiveSelectionBackground#001a1a
• list.inactiveSelectionForeground#d2a6ff
• list.invalidItemForeground#ff6b6b
• list.warningForeground#ff8f40
• listFilterWidget.background#001a1a
• listFilterWidget.noMatchesOutline#00000000
• listFilterWidget.outline#00000000
• menu.background#001a1a
• menu.border#00000000
• menu.foreground#888888
• menu.selectionBackground#0d4f4f
• menu.selectionBorder#00000000
• menu.selectionForeground#00d4aa
• menu.separatorBackground#0d4f4f
• menubar.selectionBackground#0d4f4f
• menubar.selectionBorder#00000000
• menubar.selectionForeground#00d4aa
• minimap.background#000d0d
• minimap.errorHighlight#ff6b6b
• minimap.findMatchHighlight#39bae666
• minimap.foregroundOpacity#00d4aa
• minimap.selectionHighlight#0d4f4f
• minimap.warningHighlight#ff8f40
• minimapGutter.addedBackground#00d4aa
• minimapGutter.deletedBackground#ff6b6b
• minimapGutter.modifiedBackground#39bae6
• minimapSlider.activeBackground#00d4aa40
• minimapSlider.background#ffffff0a
• minimapSlider.hoverBackground#39bae620
• notificationCenter.border#00000000
• notificationCenterHeader.background#001a1a
• notificationCenterHeader.foreground#888888
• notificationLink.foreground#39bae6
• notifications.background#001a1a
• notifications.border#00000000
• notifications.foreground#888888
• notificationsErrorIcon.foreground#ff6b6b
• notificationsInfoIcon.foreground#39bae6
• notificationsWarningIcon.foreground#ff8f40
• notificationToast.border#00000000
• panel.background#000000
• panel.border#00000000
• panel.foreground#888888
• panelTitle.activeBorder#00000000
• panelTitle.activeForeground#00d4aa
• panelTitle.inactiveForeground#555555
• peekView.border#00000000
• peekViewEditor.background#000d0d
• peekViewEditor.matchHighlightBackground#39bae625
• peekViewEditor.matchHighlightBorder#00000000
• peekViewEditorGutter.background#000d0d
• peekViewResult.background#001a1a
• peekViewResult.fileForeground#d2a6ff
• peekViewResult.lineForeground#666666
• peekViewResult.matchHighlightBackground#39bae625
• peekViewResult.selectionBackground#0d4f4f
• peekViewResult.selectionForeground#00d4aa
• peekViewTitle.background#001a1a
• peekViewTitleDescription.foreground#666666
• peekViewTitleLabel.foreground#d2a6ff
• progressBar.background#00d4aa
• sash.hoverBorder#00000000
• scm.historyItemAdditionsForeground#00d4aa
• scm.historyItemDeletionsForeground#ff6b6b
• scrollbar.shadow#000000
• scrollbarSlider.activeBackground#00d4aa50
• scrollbarSlider.background#ffffff10
• scrollbarSlider.hoverBackground#39bae630
• sideBar.background#000000
• sideBar.border#00000000
• sideBar.dropBackground#d2a6ff15
• sideBar.foreground#888888
• sideBarSectionHeader.background#001a1a
• sideBarSectionHeader.border#00000000
• sideBarSectionHeader.foreground#888888
• sideBarTitle.foreground#888888
• statusBar.background#002a2a
• statusBar.border#00000000
• statusBar.debuggingBackground#1a0a3a
• statusBar.debuggingBorder#00000000
• statusBar.debuggingForeground#d2a6ff
• statusBar.focusBorder#00000000
• statusBar.foreground#00d4aa
• statusBar.noFolderBackground#000000
• statusBar.noFolderBorder#00000000
• statusBar.noFolderForeground#888888
• statusBarItem.activeBackground#0d4f4f
• statusBarItem.compactHoverBackground#0d4f4f
• statusBarItem.errorBackground#3a0000
• statusBarItem.errorForeground#ff6b6b
• statusBarItem.focusBorder#00000000
• statusBarItem.hoverBackground#0d4f4f
• statusBarItem.prominentBackground#1a0a3a
• statusBarItem.prominentForeground#d2a6ff
• statusBarItem.prominentHoverBackground#2a1060
• statusBarItem.remoteBackground#0d4f4f
• statusBarItem.remoteForeground#00d4aa
• statusBarItem.warningBackground#2a1500
• statusBarItem.warningForeground#ff8f40
• symbolIcon.classForeground#59c2ff
• symbolIcon.constantForeground#d2a6ff
• symbolIcon.enumeratorForeground#ff8f40
• symbolIcon.functionForeground#ffb454
• symbolIcon.interfaceForeground#d2a6ff
• symbolIcon.keywordForeground#ff8f40
• symbolIcon.moduleForeground#39bae6
• symbolIcon.propertyForeground#888888
• symbolIcon.variableForeground#bfbdb6
• tab.activeBackground#001a1a
• tab.activeBorder#00000000
• tab.activeBorderTop#00000000
• tab.activeForeground#bfbdb6
• tab.activeModifiedBorder#00000000
• tab.border#00000000
• tab.hoverBackground#001a1a
• tab.hoverBorder#00000000
• tab.hoverForeground#39bae6
• tab.inactiveBackground#000000
• tab.inactiveForeground#555555
• tab.inactiveModifiedBorder#00000000
• tab.unfocusedActiveBackground#001a1a
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveBorderTop#00000000
• tab.unfocusedActiveForeground#666666
• tab.unfocusedHoverBackground#001a1a
• tab.unfocusedHoverBorder#00000000
• tab.unfocusedInactiveBackground#000000
• tab.unfocusedInactiveForeground#444444
• terminal.ansiBlack#000000
• terminal.ansiBlue#39bae6
• terminal.ansiBrightBlack#444444
• terminal.ansiBrightBlue#59c2ff
• terminal.ansiBrightCyan#00ffcc
• terminal.ansiBrightGreen#aad94c
• terminal.ansiBrightMagenta#d2a6ff
• terminal.ansiBrightRed#f07178
• terminal.ansiBrightWhite#bfbdb6
• terminal.ansiBrightYellow#ffb454
• terminal.ansiCyan#00d4aa
• terminal.ansiGreen#aad94c
• terminal.ansiMagenta#d2a6ff
• terminal.ansiRed#ff6b6b
• terminal.ansiWhite#888888
• terminal.ansiYellow#ff8f40
• terminal.background#000000
• terminal.border#00000000
• terminal.foreground#bfbdb6
• terminal.selectionBackground#0d4f4f
• terminal.tab.activeBorder#00000000
• terminalCommandDecoration.defaultBackground#0d4f4f
• terminalCommandDecoration.errorBackground#ff6b6b
• terminalCommandDecoration.successBackground#00d4aa
• terminalCursor.background#000000
• terminalCursor.foreground#00d4aa
• textBlockQuote.background#001a1a
• textBlockQuote.border#00000000
• textCodeBlock.background#001a1a
• textLink.activeForeground#00d4aa
• textLink.foreground#39bae6
• textPreformat.background#001a1a
• textPreformat.foreground#bfbdb6
• textSeparator.foreground#333333
• titleBar.activeBackground#000000
• titleBar.activeForeground#888888
• titleBar.border#00000000
• titleBar.inactiveBackground#000000
• titleBar.inactiveForeground#444444
• tree.indentGuidesStroke#0d4f4f
• walkThrough.embeddedEditorBackground#001a1a
• welcomePage.background#000000
• welcomePage.buttonBackground#001a1a
• welcomePage.buttonHoverBackground#0d4f4f
• window.activeBorder#00000000
• window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).