Black Neon

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#000
• activityBar.activeBorder#222
• activityBar.activeFocusBorder#222
• activityBar.background#000
• activityBar.border#00000000
• activityBar.foreground#bdbdbd
• activityBar.inactiveForeground#6b6b6b
• activityBarBadge.background#f0f3bd
• activityBarBadge.foreground#14213D
• badge.background#222
• badge.foreground#eee
• breadcrumb.activeSelectionForeground#BFD4E1
• breadcrumb.background#000
• breadcrumb.focusForeground#BFD4E1
• breadcrumb.foreground#BFD4E1
• breadcrumbPicker.background#000
• button.background#a8dadc
• button.foreground#000
• button.hoverBackground#b4dadb
• checkbox.background#a8dadc
• checkbox.border#222
• checkbox.foreground#000
• debugExceptionWidget.background#000
• debugExceptionWidget.border#222
• descriptionForeground#BFD4E1
• diffEditor.border#00000000
• diffEditor.diagonalFill#222
• diffEditor.insertedTextBorder#00000000
• diffEditor.removedTextBorder#00000000
• dropdown.background#000
• dropdown.border#222
• dropdown.foreground#BFD4E1
• dropdown.listBackground#000
• editor.background#000
• editor.findMatchBackground#05ff6980
• editor.findMatchBorder#222
• editor.findMatchHighlightBackground#05ff6940
• editor.findMatchHighlightBorder#222
• editor.findRangeHighlightBackground#05ff6940
• editor.foreground#BFD4E1
• editor.lineHighlightBackground#000
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBorder#222
• editor.selectionBackground#353535
• editor.selectionForeground#BFD4E1
• editor.selectionHighlightBorder#00000000
• editor.snippetFinalTabstopHighlightBackground#0353a480
• editor.snippetFinalTabstopHighlightBorder#222
• editor.snippetTabstopHighlightBackground#0353a480
• editor.snippetTabstopHighlightBorder#222
• editor.wordHighlightBackground#0353a480
• editor.wordHighlightBorder#00000000
• editor.wordHighlightStrongBackground#0353a480
• editor.wordHighlightStrongBorder#00000000
• editorBracketMatch.background#353535
• editorBracketMatch.border#222
• editorCodeLens.foreground#BFD4E1
• editorCursor.background#14213D
• editorCursor.foreground#f0f3bd
• editorError.border#222
• editorError.foreground#d97397
• editorGroup.border#222
• editorGroup.dropBackground#0353a480
• editorGroup.emptyBackground#00000000
• editorGroup.focusedEmptyBorder#00000000
• editorGroupHeader.border#222
• editorGroupHeader.noTabsBackground#000
• editorGroupHeader.tabsBackground#000
• editorGroupHeader.tabsBorder#00000000
• editorGutter.addedBackground#2C401B
• editorGutter.background#000
• editorGutter.commentRangeForeground#BFD4E1
• editorGutter.deletedBackground#410202
• editorGutter.foldingControlForeground#BFD4E1
• editorGutter.modifiedBackground#152B49
• editorHint.border#222
• editorHint.foreground#BFD4E1
• editorHoverWidget.background#000
• editorHoverWidget.border#222
• editorHoverWidget.foreground#BFD4E1
• editorHoverWidget.statusBarBackground#000
• editorIndentGuide.activeBackground1#333
• editorIndentGuide.background1#00000000
• editorInfo.border#222
• editorInfo.foreground#BFD4E1
• editorLightBulb.foreground#BFD4E1
• editorLightBulbAutoFix.foreground#BFD4E1
• editorLineNumber.activeForeground#999
• editorLineNumber.foreground#666
• editorLink.activeForeground#f0f3bd
• editorMarkerNavigation.background#000
• editorMarkerNavigationError.background#000
• editorMarkerNavigationInfo.background#000
• editorMarkerNavigationWarning.background#000
• editorOverviewRuler.addedForeground#2C401B
• editorOverviewRuler.background#000
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#BFD4E1
• editorOverviewRuler.commonContentForeground#BFD4E1
• editorOverviewRuler.currentContentForeground#28c9b440
• editorOverviewRuler.deletedForeground#410202
• editorOverviewRuler.errorForeground#d97397
• editorOverviewRuler.incomingContentForeground#00a2ff40
• editorOverviewRuler.infoForeground#BFD4E1
• editorOverviewRuler.modifiedForeground#152B49
• editorOverviewRuler.warningForeground#BFD4E1
• editorPane.background#000
• editorRuler.foreground#BFD4E1
• editorSuggestWidget.background#000
• editorSuggestWidget.border#222
• editorSuggestWidget.foreground#BFD4E1
• editorSuggestWidget.highlightForeground#f0f3bd
• editorSuggestWidget.selectedBackground#222
• editorUnnecessaryCode.border#00000000
• editorUnnecessaryCode.opacity#000000c0
• editorWarning.border#222
• editorWarning.foreground#BFD4E1
• editorWhitespace.foreground#222
• editorWidget.background#000
• editorWidget.border#222
• editorWidget.foreground#BFD4E1
• editorWidget.resizeBorder#222
• errorForeground#d97397
• extensionBadge.remoteBackground#000
• extensionBadge.remoteForeground#BFD4E1
• extensionButton.background#a8dadc
• extensionButton.hoverBackground#b4dadb
• extensionButton.prominentBackground#a8dadc
• extensionButton.prominentForeground#000
• extensionButton.prominentHoverBackground#b4dadb
• focusBorder#00000000
• foreground#BFD4E1
• gitDecoration.addedResourceForeground#caffbf
• gitDecoration.conflictingResourceForeground#ffc6ff
• gitDecoration.deletedResourceForeground#ffadad
• gitDecoration.ignoredResourceForeground#A0A48E
• gitDecoration.modifiedResourceForeground#9bf6ff
• gitDecoration.submoduleResourceForeground#bdb2ff
• gitDecoration.untrackedResourceForeground#fdffb6
• icon.foreground#BFD4E1
• input.background#000
• input.border#222
• input.foreground#BFD4E1
• input.placeholderForeground#999999
• inputOption.activeBackground#000
• inputOption.activeBorder#00000000
• inputValidation.errorBackground#d97397
• inputValidation.errorBorder#d97397
• inputValidation.errorForeground#000
• inputValidation.infoBackground#000
• inputValidation.infoBorder#222
• inputValidation.infoForeground#BFD4E1
• inputValidation.warningBackground#d97397
• inputValidation.warningBorder#d97397
• inputValidation.warningForeground#000
• list.activeSelectionBackground#222
• list.activeSelectionForeground#f0f3bd
• list.deemphasizedForeground#BFD4E1
• list.dropBackground#0353a480
• list.errorForeground#d97397
• list.filterMatchBackground#000
• list.filterMatchBorder#222
• list.focusBackground#222
• list.focusForeground#BFD4E1
• list.highlightForeground#f0f3bd
• list.hoverBackground#222
• list.hoverForeground#BFD4E1
• list.inactiveFocusBackground#222
• list.inactiveSelectionBackground#00000000
• list.inactiveSelectionForeground#f0f3bd
• list.invalidItemForeground#d97397
• list.warningForeground#BFD4E1
• listFilterWidget.background#000
• listFilterWidget.noMatchesOutline#222
• listFilterWidget.outline#222
• menu.background#000
• menu.border#222
• menu.foreground#BFD4E1
• menu.selectionBackground#222
• menu.selectionBorder#00000000
• menu.selectionForeground#BFD4E1
• menu.separatorBackground#00000000
• menubar.selectionBackground#353535
• menubar.selectionBorder#00000000
• menubar.selectionForeground#BFD4E1
• merge.border#00000000
• merge.commonContentBackground#00000000
• merge.commonHeaderBackground#00000000
• merge.currentContentBackground#28c9b440
• merge.currentHeaderBackground#28c9b440
• merge.incomingContentBackground#00a2ff40
• merge.incomingHeaderBackground#00a2ff40
• notificationCenter.border#222
• notificationCenterHeader.background#000
• notificationCenterHeader.foreground#BFD4E1
• notificationLink.foreground#f0f3bd
• notifications.background#000
• notifications.border#222
• notifications.foreground#BFD4E1
• notificationsErrorIcon.foreground#BFD4E1
• notificationsInfoIcon.foreground#BFD4E1
• notificationsWarningIcon.foreground#BFD4E1
• notificationToast.border#222
• panel.background#000
• panel.border#222
• panelInput.border#222
• panelTitle.activeBorder#f0f3bd
• panelTitle.activeForeground#BFD4E1
• panelTitle.inactiveForeground#BFD4E1
• peekView.border#222
• peekViewEditor.background#000
• peekViewEditor.matchHighlightBackground#000
• peekViewEditor.matchHighlightBorder#222
• peekViewEditorGutter.background#000
• peekViewResult.background#000
• peekViewResult.fileForeground#BFD4E1
• peekViewResult.lineForeground#BFD4E1
• peekViewResult.matchHighlightBackground#000
• peekViewResult.selectionBackground#000
• peekViewResult.selectionForeground#BFD4E1
• peekViewTitle.background#000
• peekViewTitleDescription.foreground#BFD4E1
• peekViewTitleLabel.foreground#BFD4E1
• pickerGroup.border#222
• pickerGroup.foreground#BFD4E1
• problemsErrorIcon.foreground#d97397
• problemsInfoIcon.foreground#BFD4E1
• problemsWarningIcon.foreground#BFD4E1
• progressBar.background#f0f3bd
• quickInput.background#000
• quickInputTitle.background#000
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#a8dadc
• scrollbarSlider.background#99999940
• scrollbarSlider.hoverBackground#a8dadc80
• searchEditor.findMatchBackground#000
• searchEditor.findMatchBorder#222
• searchEditor.textInputBorder#222
• selection.background#2ec4be
• settings.checkboxBackground#a8dadc
• settings.checkboxBorder#222
• settings.checkboxForeground#000
• settings.dropdownBackground#000
• settings.dropdownBorder#222
• settings.dropdownForeground#BFD4E1
• settings.dropdownListBorder#222
• settings.headerForeground#BFD4E1
• settings.modifiedItemIndicator#f0f3bd
• settings.numberInputBackground#000
• settings.numberInputBorder#222
• settings.numberInputForeground#BFD4E1
• settings.textInputBackground#000
• settings.textInputBorder#222
• settings.textInputForeground#BFD4E1
• sideBar.background#000
• sideBar.border#222
• sideBar.dropBackground#0353a480
• sideBar.foreground#BFD4E1
• sideBarSectionHeader.background#000
• sideBarSectionHeader.border#00000000
• sideBarSectionHeader.foreground#BFD4E1
• sideBarTitle.foreground#BFD4E1
• statusBar.background#000
• statusBar.border#00000000
• statusBar.debuggingBackground#000
• statusBar.debuggingBorder#222
• statusBar.debuggingForeground#BFD4E1
• statusBar.foreground#BFD4E1
• statusBar.noFolderBackground#000
• statusBar.noFolderBorder#222
• statusBar.noFolderForeground#BFD4E1
• statusBarItem.activeBackground#000
• statusBarItem.hoverBackground#222
• statusBarItem.prominentBackground#000
• statusBarItem.prominentForeground#BFD4E1
• statusBarItem.prominentHoverBackground#000
• statusBarItem.remoteBackground#000
• statusBarItem.remoteForeground#BFD4E1
• tab.activeBackground#222
• tab.activeBorder#00000000
• tab.activeBorderTop#00000000
• tab.activeForeground#BFD4E1
• tab.activeModifiedBorder#00000000
• tab.border#00000000
• tab.hoverBackground#000
• tab.hoverBorder#222
• tab.hoverForeground#BFD4E1
• tab.inactiveBackground#000
• tab.inactiveForeground#BFD4E1
• tab.inactiveModifiedBorder#00000000
• tab.unfocusedActiveBackground#222
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveBorderTop#00000000
• tab.unfocusedActiveForeground#BFD4E1
• tab.unfocusedActiveModifiedBorder#00000000
• tab.unfocusedHoverBackground#00000000
• tab.unfocusedHoverBorder#222
• tab.unfocusedHoverForeground#BFD4E1
• tab.unfocusedInactiveBackground#000
• tab.unfocusedInactiveForeground#BFD4E1
• tab.unfocusedInactiveModifiedBorder#00000000
• textBlockQuote.background#000
• textBlockQuote.border#f0f3bd
• textCodeBlock.background#00000000
• textLink.activeForeground#f0f3bd
• textLink.foreground#f0f3bd
• textPreformat.foreground#BFD4E1
• textSeparator.foreground#2C401B
• titleBar.activeBackground#000
• titleBar.activeForeground#BFD4E1
• titleBar.border#00000000
• titleBar.inactiveBackground#000
• titleBar.inactiveForeground#BFD4E1
• tree.indentGuidesStroke#222
• walkThrough.embeddedEditorBackground#000
• welcomePage.background#000
• widget.shadow#00000000
• window.activeBorder#00000000
• window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).