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 Light 2.0

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#ad38651a
activityBar.activeBorder#007a8c
activityBar.activeFocusBorder#007a8c
activityBar.background#ebd8e2
activityBar.border#d2b1c2
activityBar.foreground#ad3865
activityBar.inactiveForeground#7a6270
activityBarBadge.background#ad3865
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#ad3865
activityBarTop.dropBorder#d2b1c2
activityBarTop.foreground#2b1a22
activityBarTop.inactiveForeground#7a6270
button.background#ad3865
button.border#d2b1c2
button.foreground#ffffff
button.hoverBackground#802246
button.secondaryBackground#dfcad6
button.secondaryBorder#d2b1c2
button.secondaryForeground#2b1a22
button.secondaryHoverBackground#dec2d3
button.separator#dca2c1
checkbox.background#ebd8e2
checkbox.border#d2b1c2
checkbox.foreground#2b1a22
commandCenter.activeBackground#dfcad6
commandCenter.activeForeground#2b1a22
commandCenter.background#ebd8e2
commandCenter.border#d2b1c2
commandCenter.foreground#2b1a22
contrastActiveBorder#a3456c
contrastBorder#00000000
descriptionForeground#802246
dropdown.background#ebd8e2
dropdown.border#d2b1c2
dropdown.foreground#2b1a22
dropdown.listBackground#ebd8e2
editor.background#ebd8e2
editor.findMatchBackground#007a8c33
editor.findMatchBorder#007a8c
editor.findMatchHighlightBackground#007a8c1a
editor.findMatchHighlightBorder#007a8c66
editor.foreground#1f1a1c
editor.inactiveSelectionBackground#dca2c188
editor.lineHighlightBackground#e2cbdb
editor.lineHighlightBorder#00000000
editor.selectionBackground#dca2c1
editor.selectionForeground#1f1a1c
editor.selectionHighlightBackground#d4a4bf88
editor.wordHighlightBackground#d4a4bfaa
editor.wordHighlightStrongBackground#ad386533
editorBracketHighlight.foreground1#c41352
editorBracketHighlight.foreground2#007a8c
editorBracketHighlight.foreground3#7a119e
editorBracketHighlight.foreground4#ad3865
editorBracketHighlight.foreground5#c45400
editorBracketHighlight.foreground6#2b1a22
editorBracketMatch.background#dca2c188
editorBracketMatch.border#007a8c
editorCursor.background#ebd8e2
editorCursor.foreground#ad3865
editorError.foreground#a01b4c
editorGroup.border#d2b1c2
editorGroup.dropBackground#ad38651a
editorGroup.emptyBackground#ebd8e2
editorGroup.focusedEmptyBorder#ad3865
editorGroupHeader.border#d2b1c2
editorGroupHeader.noTabsBackground#ebd8e2
editorGroupHeader.tabsBackground#ebd8e2
editorGroupHeader.tabsBorder#d2b1c2
editorGutter.background#ebd8e2
editorInfo.foreground#007a8c
editorLineNumber.activeForeground#ad3865
editorLineNumber.foreground#9b7a8a
editorMultiCursor.primary.foreground#ad3865
editorMultiCursor.secondary.foreground#ad3865
editorWarning.foreground#1b7a2b
errorForeground#2b1a22
focusBorder#ad3865
foreground#2b1a22
icon.foreground#007a8c
input.background#ebd8e2
input.border#d2b1c2
input.foreground#2b1a22
input.placeholderForeground#7a6270
list.activeSelectionBackground#ad386522
list.activeSelectionForeground#802246
list.activeSelectionIconForeground#802246
list.dropBackground#ebd8e2
list.errorForeground#c41010
list.filterMatchBackground#ebd8e2
list.filterMatchBorder#d2b1c2
list.focusAndSelectionOutline#ad3865
list.focusBackground#e2cbdb
list.focusForeground#2b1a22
list.focusHighlightForeground#2b1a22
list.focusOutline#ad3865
list.highlightForeground#802246
list.hoverBackground#dec2d3
list.hoverForeground#802246
list.inactiveFocusBackground#e2cbdb
list.inactiveFocusOutline#ad3865
list.inactiveSelectionBackground#e2cbdb
list.inactiveSelectionForeground#2b1a22
list.invalidItemForeground#c45400
list.warningForeground#806000
listFilterWidget.background#ebd8e2
listFilterWidget.noMatchesOutline#ad3865
listFilterWidget.outline#ad3865
listFilterWidget.shadow#d2b1c288
menu.background#ebd8e2
menu.border#d2b1c2
menu.foreground#2b1a22
menu.selectionBackground#dec2d3
menu.selectionBorder#ad3865
menu.selectionForeground#2b1a22
menu.separatorBackground#d2b1c2
minimap.background#ebd8e2
minimap.selectionHighlight#dec2d3aa
minimapSlider.background#ad386522
minimapSlider.hoverBackground#ad386544
panel.background#ebd8e2
panel.border#d2b1c2
panelTitle.activeBorder#ad3865
panelTitle.activeForeground#ad3865
panelTitle.border#d2b1c2
panelTitle.inactiveForeground#6e5261
sash.hoverBorder#a3456c
scrollbar.background#ebd8e2
scrollbar.shadow#d2b1c288
scrollbarSlider.activeBackground#ad386555
scrollbarSlider.background#ad386533
scrollbarSlider.hoverBackground#ad386544
selection.background#dca2c1
sideBar.background#ebd8e2
sideBar.border#d2b1c2
sideBar.dropBackground#ebd8e2
sideBar.foreground#2b1a22
sideBarActivityBarTop.border#ad3865
sideBarSectionHeader.background#ebd8e2
sideBarSectionHeader.border#d2b1c2
sideBarSectionHeader.foreground#2b1a22
sideBarStickyScroll.background#ebd8e2
sideBarStickyScroll.border#d2b1c2
sideBarStickyScroll.shadow#cc88aa
sideBarTitle.background#ebd8e2
sideBarTitle.border#d2b1c2
sideBarTitle.foreground#2b1a22
statusBar.background#ad3865
statusBar.border#ad3865
statusBar.debuggingBackground#912a52
statusBar.debuggingBorder#912a52
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#ad3865
statusBar.noFolderBorder#ad3865
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#802246
statusBarItem.errorBackground#a01b4c
statusBarItem.errorForeground#ffffff
statusBarItem.errorHoverBackground#ad3865
statusBarItem.errorHoverForeground#ffffff
statusBarItem.focusBorder#ffffff
statusBarItem.hoverBackground#bf4977
statusBarItem.hoverForeground#ffffff
statusBarItem.remoteBackground#912a52
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverBackground#802246
statusBarItem.remoteHoverForeground#ffffff
statusBarItem.warningBackground#806000
statusBarItem.warningForeground#ffffff
statusBarItem.warningHoverBackground#ad3865
statusBarItem.warningHoverForeground#ffffff
tab.activeBackground#ebd8e2
tab.activeBorder#ad3865
tab.activeBorderTop#ad3865
tab.activeForeground#2b1a22
tab.border#d2b1c2
tab.hoverBackground#dec2d3
tab.hoverForeground#2b1a22
tab.inactiveBackground#dfcad6
tab.inactiveForeground#6e5261
tab.unfocusedActiveBackground#ebd8e2
tab.unfocusedActiveBorderTop#d2b1c2
tab.unfocusedActiveForeground#6e5261
tab.unfocusedInactiveBackground#dfcad6
tab.unfocusedInactiveForeground#6e5261
terminal.background#ebd8e2
terminal.border#d2b1c2
terminal.foreground#1f1a1c
terminalCursor.background#ebd8e2
terminalCursor.foreground#ad3865
textBlockQuote.background#e2cbdb
textBlockQuote.border#d2b1c2
textLink.activeForeground#007a8c
textLink.foreground#2b1a22
textPreformat.background#e2cbdb
textSeparator.foreground#2b1a22
titleBar.activeBackground#ebd8e2
titleBar.activeForeground#2b1a22
titleBar.border#d2b1c2
titleBar.inactiveBackground#ebd8e2
titleBar.inactiveForeground#7a6270
tree.inactiveIndentGuidesStroke#d2b1c2
tree.indentGuidesStroke#d2b1c2
widget.border#d2b1c2
window.activeBorder#ad3865
window.inactiveBorder#d2b1c2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7a6270	italic
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python	#c41352	bold
string, string.quoted, string.value, string.tag, meta.preprocessor.string	#167024	bold
entity.name.function, support.function, support.constant.handlebars	#00788a	—
variable, meta.definition.variable.name, support.variable	#1f1a1c	—
constant.numeric, constant.language, support.type, entity.name.type, entity.name.class, support.class, meta.return-type, entity.name.tag.css, keyword.other.unit	#7a119e	bold
entity.name.tag, punctuation.definition.tag, meta.structure.dictionary.key.python, support.type.property-name, variable.css, variable.scss	#802246	—
entity.other.attribute-name, keyword.operator, support.function.git-rebase, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts	#00788a	—
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	#ad3865	—
constant.regexp	#8f125a	—
invalid	#c41010	—