Professional Dark Themes

Name: Professional Dark Themes
Author: eduardo-nobrega-developer

Publisher: eduardo-nobrega-developerThemes in package: 5

A dark, modern set of professional color themes for VS Code.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Professional Dark Themes — Professional Theme (Palette 4)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeFocusBorder#ffd866
activityBar.background#191a21
activityBar.border#101218
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#6f778d
activityBarBadge.background#78dce8
activityBarBadge.foreground#191a21
badge.background#ff5f87
badge.foreground#f8f8f2
banner.background#292c36
banner.foreground#f8f8f2
banner.iconForeground#ffd866
breadcrumb.activeSelectionForeground#f8f8f2
breadcrumb.background#1f222b
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#7d8499
breadcrumbPicker.background#191a21
button.background#78dce8
button.foreground#191a21
button.hoverBackground#8ee6f0
button.secondaryBackground#292c36
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#ffffff14
charts.blue#78dce8
charts.foreground#f8f8f2
charts.green#a9dc76
charts.lines#4c5263
charts.orange#fc9867
charts.purple#ab9df2
charts.red#ff5f87
charts.yellow#ffd866
checkbox.background#292c36
checkbox.border#6f778d
checkbox.foreground#ffd866
commandCenter.activeBackground#ffffff12
commandCenter.activeForeground#f8f8f2
commandCenter.background#191a21
commandCenter.border#292c36
commandCenter.foreground#7d8499
debugConsole.errorForeground#ff5f87
debugConsole.infoForeground#78dce8
debugConsole.sourceForeground#f8f8f2
debugConsole.warningForeground#fc9867
debugConsoleInputIcon.foreground#ffd866
debugIcon.breakpointCurrentStackframeForeground#ffd866
debugIcon.breakpointDisabledForeground#7d8499
debugIcon.breakpointForeground#ff5f87
debugIcon.breakpointStackframeForeground#f8f8f2
debugIcon.breakpointUnverifiedForeground#fc9867
debugIcon.continueForeground#f8f8f2
debugIcon.disconnectForeground#f8f8f2
debugIcon.pauseForeground#f8f8f2
debugIcon.restartForeground#a9dc76
debugIcon.startForeground#a9dc76
debugIcon.stepBackForeground#f8f8f2
debugIcon.stepIntoForeground#f8f8f2
debugIcon.stepOutForeground#f8f8f2
debugIcon.stepOverForeground#f8f8f2
debugIcon.stopForeground#ff5f87
debugToolBar.background#292c36
debugView.exceptionLabelBackground#ff5f87
debugView.exceptionLabelForeground#191a21
debugView.stateLabelBackground#a9dc76
debugView.stateLabelForeground#191a21
debugView.valueChangedHighlight#ffd866
descriptionForeground#7d8499
diffEditor.insertedLineBackground#a9dc761a
diffEditor.insertedTextBackground#a9dc7633
diffEditor.removedLineBackground#ff5f871a
diffEditor.removedTextBackground#ff5f8733
diffEditor.unchangedCodeBackground#191a21
diffEditorGutter.insertedLineBackground#a9dc7619
diffEditorGutter.removedLineBackground#ff5f8719
diffEditorOverview.insertedForeground#a9dc76a5
diffEditorOverview.removedForeground#ff5f87a5
disabledForeground#f8f8f226
dropdown.background#191a21
dropdown.border#6f778d
dropdown.foreground#f8f8f2
dropdown.listBackground#191a21
editor.background#1f222b
editor.findMatchBackground#78dce880
editor.findMatchBorder#ffd866
editor.findMatchHighlightBackground#78dce850
editor.findRangeHighlightBackground#292c36
editor.foreground#f8f8f2
editor.hoverHighlightBackground#292c36
editor.inactiveSelectionBackground#78dce840
editor.lineHighlightBackground#292c36
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#292c36
editor.selectionBackground#78dce840
editor.selectionHighlightBackground#78dce830
editor.wordHighlightBackground#78dce830
editor.wordHighlightStrongBackground#78dce850
editorBracketHighlight.foreground1#ff5f87
editorBracketHighlight.foreground2#fc9867
editorBracketHighlight.foreground3#ffd866
editorBracketHighlight.foreground4#a9dc76
editorBracketHighlight.foreground5#78dce8
editorBracketHighlight.foreground6#ab9df2
editorBracketMatch.background#78dce830
editorBracketMatch.border#4c5263
editorCodeLens.foreground#4c5263
editorCursor.background#1f222b
editorCursor.foreground#f8f8f2
editorError.foreground#ff5f87
editorGhostText.foreground#4c5263
editorGroup.border#101218
editorGroup.emptyBackground#101218
editorGroupHeader.tabsBackground#191a21
editorGroupHeader.tabsBorder#101218
editorGutter.addedBackground#a9dc76
editorGutter.background#1f222b
editorGutter.deletedBackground#ff5f87
editorGutter.foldingControlForeground#7d8499
editorGutter.modifiedBackground#fc9867
editorHint.foreground#ab9df2
editorHoverWidget.background#191a21
editorHoverWidget.border#101218
editorInfo.foreground#78dce8
editorInlayHint.background#292c36
editorInlayHint.foreground#7d8499
editorInlayHint.parameterBackground#fc98670c
editorInlayHint.parameterForeground#fc98677f
editorInlayHint.typeBackground#ab9df20c
editorInlayHint.typeForeground#ab9df27f
editorLightBulb.foreground#ffd866
editorLightBulbAutoFix.foreground#a9dc76
editorLineNumber.activeForeground#7d8499
editorLineNumber.foreground#4c5263
editorLink.activeForeground#78dce8
editorOverviewRuler.addedForeground#a9dc76
editorOverviewRuler.border#1f222b
editorOverviewRuler.deletedForeground#ff5f87
editorOverviewRuler.errorForeground#ff5f87
editorOverviewRuler.infoForeground#78dce8
editorOverviewRuler.modifiedForeground#fc9867
editorOverviewRuler.warningForeground#fc9867
editorStickyScroll.background#1f222b
editorStickyScroll.border#292c36
editorSuggestWidget.background#191a21
editorSuggestWidget.border#101218
editorSuggestWidget.foreground#7d8499
editorSuggestWidget.highlightForeground#f8f8f2
editorSuggestWidget.selectedBackground#78dce820
editorUnnecessaryCode.opacity#000000a5
editorWarning.foreground#fc9867
editorWhitespace.foreground#4c5263
editorWidget.background#191a21
editorWidget.border#101218
errorForeground#ff5f87
extensionButton.prominentBackground#78dce8
extensionButton.prominentForeground#191a21
extensionButton.prominentHoverBackground#8ee6f0
extensionIcon.starForeground#ff5f87
extensionIcon.verifiedForeground#a9dc76
focusBorder#4c5263
foreground#f8f8f2
gitDecoration.addedResourceForeground#a9dc76
gitDecoration.conflictingResourceForeground#fc9867
gitDecoration.deletedResourceForeground#ff5f87
gitDecoration.ignoredResourceForeground#4c5263
gitDecoration.modifiedResourceForeground#ffd866
gitDecoration.stageDeletedResourceForeground#ff5f87
gitDecoration.stageModifiedResourceForeground#ffd866
gitDecoration.untrackedResourceForeground#7d8499
icon.foreground#7d8499
input.background#191a21
input.border#6f778d
input.foreground#f8f8f2
input.placeholderForeground#4c5263
inputOption.activeBackground#78dce830
inputOption.activeBorder#6f778d
inputOption.activeForeground#f8f8f2
inputValidation.errorBackground#3a1d2b
inputValidation.errorBorder#ff5f87
inputValidation.errorForeground#ff5f87
inputValidation.infoBackground#18343c
inputValidation.infoBorder#78dce8
inputValidation.infoForeground#78dce8
inputValidation.warningBackground#332913
inputValidation.warningBorder#fc9867
inputValidation.warningForeground#fc9867
keybindingLabel.background#292c36
keybindingLabel.border#6f778d
keybindingLabel.foreground#f8f8f2
list.activeSelectionBackground#78dce820
list.activeSelectionForeground#f8f8f2
list.errorForeground#ff5f87
list.focusBackground#78dce820
list.focusForeground#f8f8f2
list.highlightForeground#f8f8f2
list.hoverBackground#ffffff0d
list.hoverForeground#f8f8f2
list.inactiveSelectionBackground#292c36
list.inactiveSelectionForeground#f8f8f2
list.warningForeground#fc9867
menu.background#191a21
menu.border#101218
menu.foreground#f8f8f2
menu.selectionBackground#78dce820
menu.selectionForeground#f8f8f2
menu.separatorBackground#292c36
menubar.selectionBackground#292c36
menubar.selectionForeground#f8f8f2
minimap.errorHighlight#ff5f87a5
minimap.findMatchHighlight#7d8499a5
minimap.selectionHighlight#f8f8f226
minimap.warningHighlight#fc9867a5
minimapGutter.addedBackground#a9dc76
minimapGutter.deletedBackground#ff5f87
minimapGutter.modifiedBackground#ffd866
minimapSlider.activeBackground#7d849999
minimapSlider.background#7d849933
minimapSlider.hoverBackground#7d849966
notebook.editorBackground#1f222b
notificationCenterHeader.background#191a21
notificationCenterHeader.foreground#7d8499
notificationLink.foreground#ffd866
notifications.background#191a21
notifications.border#101218
notifications.foreground#7d8499
notificationsErrorIcon.foreground#ff5f87
notificationsInfoIcon.foreground#78dce8
notificationsWarningIcon.foreground#fc9867
panel.background#191a21
panel.border#101218
panelTitle.activeBorder#ff5f87
panelTitle.activeForeground#ff5f87
panelTitle.inactiveForeground#7d8499
peekView.border#101218
peekViewEditor.background#191a21
peekViewEditor.matchHighlightBackground#78dce830
peekViewResult.background#191a21
peekViewResult.matchHighlightBackground#78dce830
peekViewResult.selectionBackground#78dce820
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#292c36
peekViewTitleDescription.foreground#7d8499
peekViewTitleLabel.foreground#f8f8f2
pickerGroup.border#1f222b
pickerGroup.foreground#4c5263
problemsErrorIcon.foreground#ff5f87
problemsInfoIcon.foreground#78dce8
problemsWarningIcon.foreground#fc9867
progressBar.background#78dce8
quickInput.background#191a21
quickInput.foreground#f8f8f2
quickInputList.focusBackground#78dce820
sash.hoverBorder#4c5263
scrollbar.shadow#101218
scrollbarSlider.activeBackground#7d849999
scrollbarSlider.background#7d849933
scrollbarSlider.hoverBackground#7d849966
selection.background#78dce840
sideBar.background#191a21
sideBar.border#101218
sideBar.foreground#7d8499
sideBarSectionHeader.background#292c36
sideBarSectionHeader.border#101218
sideBarSectionHeader.foreground#f8f8f2
sideBarTitle.foreground#f8f8f2
statusBar.background#191a21
statusBar.border#101218
statusBar.debuggingBackground#ff5f87
statusBar.debuggingForeground#191a21
statusBar.foreground#f8f8f2
statusBar.noFolderBackground#191a21
statusBarItem.hoverBackground#ffffff14
statusBarItem.remoteBackground#78dce8
statusBarItem.remoteForeground#191a21
tab.activeBackground#1f222b
tab.activeBorder#1f222b
tab.activeBorderTop#ff5f87
tab.activeForeground#f8f8f2
tab.border#101218
tab.hoverBackground#292c36
tab.inactiveBackground#191a21
tab.inactiveForeground#7d8499
terminal.ansiBlack#191a21
terminal.ansiBlue#78dce8
terminal.ansiBrightBlack#4c5263
terminal.ansiBrightBlue#8ee6f0
terminal.ansiBrightCyan#8ee6f0
terminal.ansiBrightGreen#b9e885
terminal.ansiBrightMagenta#b9a7ff
terminal.ansiBrightRed#ff789c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe27a
terminal.ansiCyan#78dce8
terminal.ansiGreen#a9dc76
terminal.ansiMagenta#ab9df2
terminal.ansiRed#ff5f87
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#ffd866
terminal.background#191a21
terminal.foreground#f8f8f2
terminalCursor.background#191a21
terminalCursor.foreground#f8f8f2
textBlockQuote.background#292c36
textBlockQuote.border#4c5263
textCodeBlock.background#191a21
textLink.activeForeground#8ee6f0
textLink.foreground#78dce8
textPreformat.foreground#ffd866
titleBar.activeBackground#191a21
titleBar.activeForeground#f8f8f2
titleBar.border#101218
titleBar.inactiveBackground#101218
titleBar.inactiveForeground#7d8499
tree.indentGuidesStroke#4c5263
walkThrough.embeddedEditorBackground#1f222b
welcomePage.tileBackground#292c36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6f778d	italic
constant, constant.numeric, constant.language, support.constant	#ab9df2	—
entity.name.function, meta.function-call, support.function	#a9dc76	—
entity.name.type, entity.name.class, support.type, storage.type	#ffd866	—
entity.name.tag, meta.tag, punctuation.definition.tag	#ff5f87	—
keyword, storage.modifier, keyword.operator.expression	#ff5f87	—
keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator	#f8f8f2	—
markup.heading, markup.bold	#ffd866	bold
markup.inserted, markup.quote	#a9dc76	—
markup.deleted	#ff5f87	—
markup.changed, markup.warning	#fc9867	—
string, punctuation.definition.string	#ffd866	—
string.regexp, constant.character.escape	#78dce8	—
support, support.class, support.variable	#78dce8	—
variable, meta.definition.variable.name	#f8f8f2	—
variable.language, variable.parameter, meta.object-literal.key	#fc9867	—
variable.other.property, support.variable.property, meta.property-name	#78dce8	—
invalid, invalid.illegal	#ff5f87	underline