Dark Midnight Pink

Name: Dark Midnight Pink
Author: Ruvarashe S Nemaramba

Publisher: Ruvarashe S NemarambaThemes in package: 2

Midnight dark theme with vibrant pink accents, now featuring an eye-friendly soft light pink variant.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark Midnight Pink — Dark Midnight Pink 2.0

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

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.activeBackground#ff207d27
activityBar.activeBorder#5099a1
activityBar.activeFocusBorder#5099a1
activityBar.background#000000
activityBar.border#581832
activityBar.foreground#e2357a
activityBar.inactiveForeground#7b5e6e
activityBarBadge.background#231429
activityBarBadge.foreground#f1ebed
activityBarTop.activeBorder#e7e7e7
activityBarTop.dropBorder#471a2c
activityBarTop.foreground#f1ebed
activityBarTop.inactiveForeground#e7e7e799
badge.background#ed4272b0
badge.foreground#f1ebed
banner.background#480d25
banner.foreground#f1ebed
banner.iconForeground#b81858
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#000000
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#7a5c6c
breadcrumbPicker.background#000000
button.background#ea5582
button.border#471a2c
button.foreground#f1ebed
button.hoverBackground#f5538384
button.secondaryBackground#e582a0
button.secondaryBorder#471a2c
button.secondaryForeground#f1ebed
button.secondaryHoverBackground#f5538384
button.separator#7a455a
chat.avatarBackground#471a2c
chat.avatarForeground#f1ebed
chat.checkpointSeparator#471a2c
chat.editedFileForeground#4edbec
chat.linesAddedForeground#ccecb594
chat.linesRemovedForeground#8a0d5ec8
chat.requestBackground#471a2c33
chat.requestBorder#471a2c
chat.requestBubbleBackground#471a2c44
chat.requestBubbleHoverBackground#471a2c66
chat.requestCodeBorder#471a2c3a
chat.slashCommandBackground#b8185833
chat.slashCommandForeground#4edbec
chat.thinkingShimmer#4edbec33
checkbox.background#000000
checkbox.border#471a2c
checkbox.disabled.background#000000
checkbox.disabled.foreground#f1ebed
checkbox.foreground#f1ebed
checkbox.selectBackground#000000
checkbox.selectBorder#471a2c
commandCenter.activeBackground#471a2c33
commandCenter.activeBorder#b81858
commandCenter.activeForeground#f1ebed
commandCenter.background#000000
commandCenter.border#471a2c
commandCenter.debuggingBackground#471a2c5c
commandCenter.foreground#f1ebed
commandCenter.inactiveBorder#471a2c
commandCenter.inactiveForeground#7a5c6c
contrastActiveBorder#af4b73
contrastBorder#af4b73
debugExceptionWidget.background#000000
debugExceptionWidget.border#8a0d5f
debugTokenExpression.boolean#4edbec
debugTokenExpression.error#8a0d5f
debugTokenExpression.name#b81858
debugTokenExpression.number#4edbec
debugTokenExpression.string#ebd39e
debugTokenExpression.value#ffffff
debugToolBar.background#000000
debugToolBar.border#471a2c
descriptionForeground#b81556
dropdown.background#000000
dropdown.border#471a2c
dropdown.foreground#f1ebed
dropdown.listBackground#000000
editor.background#000000
editor.findMatchBackground#4edbec55
editor.findMatchBorder#4edbec
editor.findMatchHighlightBackground#4edbec22
editor.findMatchHighlightBorder#4edbec44
editor.focusedStackFrameHighlightBackground#b8185844
editor.foreground#f1ebed
editor.inactiveSelectionBackground#9b4e6c57
editor.lineHighlightBackground#2e3eb21a
editor.lineHighlightBorder#2e3eb266
editor.selectionBackground#5b263b93
editor.selectionForeground#f58aae
editor.selectionHighlightBackground#471a2c66
editor.stackFrameHighlightBackground#471a2c66
editor.wordHighlightBackground#471a2c66
editor.wordHighlightStrongBackground#b8185844
editorActionList.background#000000
editorActionList.focusBackground#000000
editorActionList.focusForeground#f1ebed
editorBracketHighlight.foreground1#fdc29f
editorBracketHighlight.foreground2#fd7aa5
editorBracketHighlight.foreground3#e0b0c0
editorBracketHighlight.foreground4#be1e5e
editorBracketHighlight.foreground5#fd8849
editorBracketHighlight.foreground6#f1ebed
editorBracketHighlight.unexpectedBracket.foreground#f04141
editorBracketMatch.background#471a2c99
editorBracketMatch.border#4edbec
editorBracketPairGuide.activeBackground1#fdc29f
editorBracketPairGuide.activeBackground2#fd7aa5
editorBracketPairGuide.activeBackground3#e0b0c0
editorBracketPairGuide.activeBackground4#be1e5e
editorBracketPairGuide.activeBackground5#fd8849
editorBracketPairGuide.activeBackground6#f1ebed
editorBracketPairGuide.background1#cf307f33
editorBracketPairGuide.background2#fd7aa533
editorBracketPairGuide.background3#e0b0c033
editorBracketPairGuide.background4#be1e5e33
editorBracketPairGuide.background5#fd884933
editorBracketPairGuide.background6#f1ebed22
editorCursor.background#000000
editorCursor.foreground#4edbec
editorError.foreground#8a0d5f
editorGhostText.foreground#7a5c6c88
editorGroup.border#581832
editorGroup.dropBackground#b8185822
editorGroup.emptyBackground#000000
editorGroup.focusedEmptyBorder#b81858
editorGroupHeader.border#471a2c
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#471a2c
editorGutter.background#000000
editorHoverWidget.background#000000
editorHoverWidget.border#471a2c
editorHoverWidget.foreground#f1ebed
editorHoverWidget.statusBarBackground#000000
editorInfo.foreground#4edbec
editorLineNumber.activeForeground#b81858
editorLineNumber.foreground#44343d
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#8a0d5f22
editorMarkerNavigationError.headerBackground#8a0d5f44
editorMarkerNavigationWarning.background#ccecb511
editorMarkerNavigationWarning.headerBackground#ccecb522
editorMultiCursor.primary.foreground#4edbec
editorMultiCursor.secondary.foreground#4edbec
editorPane.background#000000
editorStickyScroll.background#000000
editorStickyScroll.border#471a2c
editorStickyScrollGutter.background#000000
editorStickyScrollHover.background#471a2c33
editorSuggestWidget.background#000000
editorSuggestWidget.border#471a2c
editorSuggestWidget.focusHighlightForeground#4edbec
editorSuggestWidget.foreground#f1ebed
editorSuggestWidget.highlightForeground#4edbec
editorSuggestWidget.selectedBackground#471a2c66
editorSuggestWidget.selectedForeground#f1ebed
editorSuggestWidget.selectedIconForeground#4edbec
editorSuggestWidgetStatus.foreground#7a5c6c
editorWarning.foreground#ccecb5
editorWidget.background#000000
editorWidget.border#471a2c
editorWidget.foreground#f1ebed
editorWidget.resizeBorder#b81858
errorForeground#f1ebed
extensionButton.background#471a2c
extensionButton.border#471a2c
extensionButton.foreground#ffffff
extensionButton.hoverBackground#471a2cbb
extensionButton.prominentBackground#b81858
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#8a0d5f
extensionIcon.preReleaseForeground#7a5c6c
extensionIcon.sponsorForeground#b81858
extensionIcon.starForeground#4edbec
extensionIcon.verifiedForeground#4edbec
focusBorder#e72f8b
foreground#f1ebed
gitDecoration.addedResourceForeground#ccecb5
gitDecoration.conflictingResourceForeground#b81858
gitDecoration.deletedResourceForeground#8a0d5f
gitDecoration.ignoredResourceForeground#7a5c6c
gitDecoration.modifiedResourceForeground#4edbec
gitDecoration.untrackedResourceForeground#ebd39e
icon.foreground#5099a1
inlineChat.background#000000
inlineChat.border#471a2c
inlineChat.foreground#f1ebed
inlineChat.shadow#000000aa
inlineChatDiff.inserted#ccecb522
inlineChatDiff.removed#8a0d5f33
inlineChatInput.background#000000
inlineChatInput.border#471a2c
inlineChatInput.focusBorder#b81858
inlineChatInput.placeholderForeground#7a5c6c
input.background#000000
input.border#471a2c
input.foreground#f1ebed
input.placeholderForeground#f1ebed
inputOption.activeBackground#000000
inputOption.activeBorder#471a2c
inputOption.activeForeground#f1ebed
inputOption.hoverBackground#f5538384
inputValidation.errorBackground#000000
inputValidation.errorBorder#471a2c
inputValidation.errorForeground#f1ebed
inputValidation.infoBackground#000000
inputValidation.infoBorder#471a2c
inputValidation.warningBackground#000000
inputValidation.warningBorder#471a2c
interactive.activeCodeBorder#b81858
interactive.inactiveCodeBorder#471a2c
keybindingLabel.background#471a2c33
keybindingLabel.border#471a2c
keybindingLabel.bottomBorder#b81858
keybindingLabel.foreground#ffffff
keybindingTable.headerBackground#471a2c33
keybindingTable.rowsBackground#000000
list.activeSelectionBackground#000000
list.activeSelectionForeground#f1ebed
list.activeSelectionIconForeground#e0b0c0
list.dropBackground#000000
list.errorForeground#f04141
list.filterMatchBackground#000000
list.filterMatchBorder#581832
list.focusAndSelectionOutline#cf307f
list.focusBackground#000000
list.focusForeground#f1ebed
list.focusHighlightForeground#f1ebed
list.focusOutline#cf307f
list.highlightForeground#f1ebed
list.hoverBackground#a3486a8e
list.hoverForeground#fd7aa5
list.inactiveFocusBackground#000000
list.inactiveFocusOutline#cf307f
list.inactiveSelectionBackground#000000
list.inactiveSelectionForeground#f1ebed
list.invalidItemForeground#fd8849
list.warningForeground#ffcf54
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#cf307f
listFilterWidget.outline#cf307f
listFilterWidget.shadow#000000
menu.background#000000
menu.border#471a2c
menu.foreground#f1ebed
menu.selectionBackground#471a2c66
menu.selectionBorder#b81858
menu.selectionForeground#f1ebed
menu.separatorBackground#471a2c
menubar.selectionBackground#471a2c66
menubar.selectionBorder#b81858
menubar.selectionForeground#f1ebed
merge.border#471a2c
merge.currentContentBackground#4edbec11
merge.currentHeaderBackground#4edbec33
merge.incomingContentBackground#b8185811
merge.incomingHeaderBackground#b8185833
mergeEditor.conflict.unhandledFocused.border#b81858
mergeEditor.conflict.unhandledUnfocused.border#471a2c
minimap.background#000000
minimap.findMatchHighlight#b8185855
minimap.selectionHighlight#471a2c88
minimapSlider.background#b8185833
minimapSlider.hoverBackground#b8185855
notebook.cellBorderColor#471a2c
notebook.editorBackground#000000
notebook.focusedCellBorder#b81858
notificationCenter.border#471a2c
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#f1ebed
notifications.background#000000
notifications.border#471a2c
notifications.foreground#f1ebed
notificationsErrorIcon.foreground#8a0d5f
notificationsInfoIcon.foreground#4edbec
notificationsWarningIcon.foreground#ccecb5
notificationToast.border#471a2c
outputView.background#000000
outputViewStickyScroll.background#000000
panel.background#000000
panel.border#471a2c
panel.dropBorder#b81858
panelInput.border#471a2c
panelSection.border#471a2c
panelSection.dropBackground#b8185822
panelSectionHeader.background#000000
panelSectionHeader.border#471a2c
panelSectionHeader.foreground#f1ebed
panelStickyScroll.background#000000
panelStickyScroll.border#471a2c
panelTitle.activeBorder#b81858
panelTitle.activeForeground#f1ebed
panelTitle.border#471a2c
panelTitle.inactiveForeground#7a5c6c
panelTitleBadge.background#b8185833
panelTitleBadge.foreground#f1ebed
peekView.border#4edbec
peekViewEditor.background#000000
peekViewEditor.matchHighlightBackground#4edbec44
peekViewEditorGutter.background#000000
peekViewResult.background#000000
peekViewResult.fileForeground#f1ebed
peekViewResult.lineForeground#7a5c6c
peekViewResult.selectionBackground#471a2c66
peekViewResult.selectionForeground#f1ebed
peekViewTitle.background#000000
peekViewTitleDescription.foreground#7a5c6c
peekViewTitleLabel.foreground#f1ebed
pickerGroup.border#471a2c
pickerGroup.foreground#4edbec
progressBar.background#ed4272b0
quickInput.background#000000
quickInput.foreground#ffffff
quickInputList.focusBackground#471a2c66
quickInputList.focusForeground#ffffff
quickInputList.focusHighlightForeground#f1ebed
quickInputList.focusIconForeground#4edbec
quickInputTitle.background#000000
radio.activeBackground#000000
radio.activeBorder#471a2c
radio.activeForeground#f1ebed
radio.inactiveBackground#000000
radio.inactiveBorder#471a2c
radio.inactiveForeground#f1ebed
radio.inactiveHoverBackground#000000
sash.hoverBorder#af4b73
scrollbar.background#000000
scrollbar.shadow#301622
scrollbarSlider.activeBackground#ee688e82
scrollbarSlider.background#ee688e82
scrollbarSlider.hoverBackground#ee688e82
selection.background#af4b73
settings.checkboxBackground#000000
settings.checkboxBorder#471a2c
settings.dropdownBackground#000000
settings.dropdownBorder#471a2c
settings.headerForeground#ffffff
settings.modifiedItemIndicator#b81858
settings.numberInputBackground#000000
settings.numberInputBorder#471a2c
settings.textInputBackground#000000
settings.textInputBorder#471a2c
sideBar.background#000000
sideBar.border#471a2c
sideBar.dropBackground#000000
sideBar.foreground#f1ebed
sideBarActivityBarTop.border#ff0000
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#471a2c
sideBarSectionHeader.foreground#f1ebed
sideBarStickyScroll.background#000000
sideBarStickyScroll.border#471a2c
sideBarStickyScroll.shadow#fc91bc
sideBarTitle.background#000000
sideBarTitle.border#471a2c
sideBarTitle.foreground#f1ebed
sideBySideEditor.horizontalBorder#471a2c
sideBySideEditor.verticalBorder#471a2c
statusBar.background#c82a69
statusBar.border#471a2c
statusBar.debuggingBackground#471a2c
statusBar.debuggingBorder#b81858
statusBar.debuggingForeground#f1ebed
statusBar.focusBorder#b81858
statusBar.foreground#dfb7cc
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#471a2c
statusBar.noFolderForeground#7a5c6c
statusBarItem.activeBackground#471a2c88
statusBarItem.errorBackground#8a0d5f
statusBarItem.errorForeground#f1ebed
statusBarItem.errorHoverBackground#b81858
statusBarItem.errorHoverForeground#f1ebed
statusBarItem.focusBorder#b81858
statusBarItem.hoverBackground#471a2c44
statusBarItem.hoverForeground#f1ebed
statusBarItem.remoteBackground#b81858
statusBarItem.remoteForeground#f1ebed
statusBarItem.remoteHoverBackground#8a0d5f
statusBarItem.remoteHoverForeground#f1ebed
statusBarItem.warningBackground#ccecb5
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#b81858
statusBarItem.warningHoverForeground#f1ebed
symbolIcon.booleanForeground#4edbec
symbolIcon.functionForeground#b81858
symbolIcon.keywordForeground#b81858
symbolIcon.numberForeground#4edbec
symbolIcon.stringForeground#ebd39e
symbolIcon.variableForeground#ffffff
tab.activeBackground#000000
tab.activeBorder#3cabb7
tab.activeBorderTop#5099a1
tab.activeForeground#f1ebed
tab.border#000000
tab.hoverBackground#471a2c33
tab.hoverForeground#f1ebed
tab.inactiveBackground#000000
tab.inactiveForeground#7b5e6e
tab.unfocusedActiveBackground#000000
tab.unfocusedActiveBorderTop#471a2c
tab.unfocusedActiveForeground#7a5c6c
tab.unfocusedInactiveBackground#000000
tab.unfocusedInactiveForeground#67495a
terminal.ansiBlack#000000
terminal.ansiBlue#4edbec
terminal.ansiBrightBlack#7a5c6c
terminal.ansiBrightBlue#4edbec
terminal.ansiBrightCyan#a3f3fc
terminal.ansiBrightGreen#ccecb5
terminal.ansiBrightMagenta#e25c99
terminal.ansiBrightRed#b81858
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ebd39e
terminal.ansiCyan#4edbec
terminal.ansiGreen#ccecb5
terminal.ansiMagenta#b81858
terminal.ansiRed#8a0d5f
terminal.ansiWhite#ffffff
terminal.ansiYellow#ebd39e
terminal.background#000000
terminal.border#471a2c
terminal.foreground#ffffff
terminal.inactiveSelectionBackground#471a2c44
terminal.selectionBackground#471a2c88
terminalCommandDecoration.defaultBackground#7a5c6c
terminalCommandDecoration.errorBackground#8a0d5f
terminalCommandDecoration.successBackground#ccecb5
terminalCursor.background#000000
terminalCursor.foreground#b81858
terminalStickyScroll.background#000000
testing.iconErrored#8a0d5f
testing.iconFailed#8a0d5f
testing.iconPassed#ccecb5
testing.iconSkipped#7a5c6c
testing.peekBorder#471a2c
testing.peekHeaderBackground#471a2c33
testing.runAction#b81858
textBlockQuote.background#000000
textBlockQuote.border#471a2c
textLink.activeForeground#4edbec
textLink.foreground#f1ebed
textPreformat.background#000000
textSeparator.foreground#f1ebed
titleBar.activeBackground#000000
titleBar.activeForeground#f1ebed
titleBar.border#471a2c
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#7a5c6c
toolbar.activeBackground#ff4b81
toolbar.hoverBackground#ee5bbf38
tree.inactiveIndentGuidesStroke#471a2c
tree.indentGuidesStroke#471a2c
welcomePage.background#000000
welcomePage.tileBackground#471a2c22
welcomePage.tileBorder#471a2c
welcomePage.tileHoverBackground#471a2c44
widget.border#581832
window.activeBorder#b7014a
window.inactiveBorder#471a2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
meta.diff.header	#130080	—
comment	#ffb3d6de	—
constant.language	#cba4b8	—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#cba4b8	—
constant.regexp	#b46695	—
entity.name.tag	#e07880	—
entity.name.tag.css	#cf5db2	—
entity.other.attribute-name	#cba4b8	—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name	#cba4b8	—
invalid	#491432	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#cf5db2	—
markup.italic	—	italic
markup.inserted	#ccecb5	—
markup.deleted	#e07880	—
markup.changed	#4edbec	—
meta.selector	#cf5db2	—
punctuation.bracket, punctuation.definition.parameters, punctuation.section.embedded, meta.brace, punctuation.separator.element, punctuation.definition.arguments, punctuation.definition.dict, punctuation.definition.list, punctuation.section.method, punctuation.section.class, punctuation.section.inner-class	#942755	—
punctuation.definition.tag	#8a0d5f	—
meta.preprocessor	#db6a8a	—
meta.preprocessor.string	#ccecb5	—
meta.preprocessor.numeric	#cba4b8	—
meta.structure.dictionary.key.python	#e07880	—
storage	#db6a8a	—
storage.type	#db6a8a	—
storage.modifier	#db6a8a	—
string	#ccecb5	—
string.tag	#ccecb5	—
string.value	#ccecb5	—
string.regexp	#b46695	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js	#4edbec	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less	#e07880	—
keyword	#db6a8a	—
keyword.control	#db6a8a	—
keyword.operator	#4edbec	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#4edbec	—
keyword.other.unit	#cba4b8	—
support.function.git-rebase	#4edbec	—
constant.sha.git-rebase	#cba4b8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#e07880	—
variable.language.this	#db6a8a	—
entity.name.function, support.function, support.constant.handlebars	#a52446	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type	#cf5db2	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#cf5db2	—
keyword.control	#db6a8a	—
variable, meta.definition.variable.name, support.variable	#d85e91	—
meta.object-literal.key, meta.object-literal.key entity.name.function	#e07880	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#cba4b8	—