Midnight Grape

Name: Midnight Grape
Author: Jennie Zhu

Publisher: Jennie ZhuThemes in package: 1

Enjoy my customized theme, hope it's to your liking

GitHub

VS Code preview

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

Midnight Grape — Midnight Grape

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#130623
activityBar.border#13062360
activityBar.foreground#993290
activityBarBadge.background#FFFCCB
activityBarBadge.foreground#130623
badge.background#13062330
badge.foreground#BE39FF
breadcrumb.activeSelectionForeground#BE39FF
breadcrumb.background#130623
breadcrumb.focusForeground#993290
breadcrumb.foreground#24F0FF
breadcrumbPicker.background#130623
button.background#BE39FF50
contrastBorder#BE39FF40
debugToolBar.background#130623
diffEditor.insertedTextBackground#FFB15F15
diffEditor.removedTextBackground#7FFF0320
dropdown.background#130623
dropdown.border#4DF2AC10
editor.background#130623
editor.findMatchBackground#130623
editor.findMatchBorder#BE39FF
editor.findMatchHighlightBackground#BE39FF93
editor.findMatchHighlightBorder#4DF2AC30
editor.foreground#E849DA
editor.lineHighlightBackground#13062350
editor.selectionBackground#FFFCCB30
editor.selectionHighlightBackground#BE39FF6b
editor.selectionHighlightBorder#FFFCCBf0
editorBracketMatch.background#130623
editorBracketMatch.border#FF6E947f
editorCursor.foreground#FF6E94
editorError.foreground#ff000082
editorGroup.border#13062330
editorGroupHeader.tabsBackground#130623
editorGutter.addedBackground#FFB15F60
editorGutter.deletedBackground#81ff0382
editorGutter.modifiedBackground#FFFCCB60
editorHoverWidget.background#130623
editorHoverWidget.border#4DF2AC10
editorIndentGuide.activeBackground1#130623
editorIndentGuide.background1#4c198b70
editorInfo.foreground#FFFCCB70
editorLineNumber.activeForeground#FFFCCB
editorLineNumber.foreground#BE39FFc0
editorLink.activeForeground#E849DA
editorMarkerNavigation.background#E849DA05
editorOverviewRuler.border#130623
editorOverviewRuler.errorForeground#7FFF0340
editorOverviewRuler.findMatchForeground#BE39FF
editorOverviewRuler.infoForeground#fffbaf69
editorOverviewRuler.warningForeground#FF6E9470
editorRuler.foreground#130623
editorSuggestWidget.background#130623
editorSuggestWidget.border#4DF2AC10
editorSuggestWidget.foreground#E849DA
editorSuggestWidget.highlightForeground#FF6E94
editorSuggestWidget.selectedBackground#BE39FF20
editorWarning.foreground#FFB15F
editorWhitespace.foreground#E849DA40
editorWidget.background#130623
editorWidget.border#FF6E94
editorWidget.resizeBorder#BE39FF
extensionButton.prominentBackground#ffac53b1
extensionButton.prominentHoverBackground#81ff03c4
focusBorder#4DF2AC00
gitDecoration.conflictingResourceForeground#FF6E94
gitDecoration.deletedResourceForeground#81ff03c4
gitDecoration.ignoredResourceForeground#BE39FF
gitDecoration.modifiedResourceForeground#24F0FF
gitDecoration.untrackedResourceForeground#FFFCCB
input.background#130623
input.border#4DF2AC10
input.foreground#24F0FF
input.placeholderForeground#E849DA60
inputOption.activeBackground#E849DA30
inputOption.activeBorder#E849DA30
inputValidation.errorBorder#ff8800e3
inputValidation.infoBorder#ff4b8d98
inputValidation.warningBorder#ff0000bc
list.activeSelectionBackground#130623
list.activeSelectionForeground#BE39FF
list.focusBackground#130623
list.focusForeground#FFFCCB
list.highlightForeground#BE39FF
list.hoverBackground#130623
list.hoverForeground#4DF2AC
list.inactiveSelectionBackground#13062330
list.inactiveSelectionForeground#BE39FF
list.warningForeground#FF6E94
listFilterWidget.background#13062330
listFilterWidget.noMatchesOutline#13062330
listFilterWidget.outline#13062330
menu.background#130623f8
menu.border#BE39FF50
menu.foreground#E849DA
menu.selectionBackground#130623
menu.selectionBorder#13062330
menu.selectionForeground#E849DA
menu.separatorBackground#BE39FF
menubar.selectionBackground#130623
menubar.selectionBorder#BE39FF50
menubar.selectionForeground#E849DA
minimap.background#130623
minimapGutter.addedBackground#81ff03c4
minimapGutter.deletedBackground#FF6E94
minimapGutter.modifiedBackground#FFB15F
minimapSlider.activeBackground#FFB15Fb0
minimapSlider.background#FFB15F80
minimapSlider.hoverBackground#FFB15Fa0
notificationLink.foreground#BE39FF
notifications.background#130623
notifications.foreground#E849DA
panel.background#130623
panel.border#13062360
panelTitle.activeBorder#BE39FF
panelTitle.activeForeground#4DF2AC
panelTitle.inactiveForeground#E849DA
peekView.border#13062330
peekViewEditor.background#E849DA05
peekViewEditor.matchHighlightBackground#BE39FF50
peekViewEditorGutter.background#E849DA05
peekViewResult.background#E849DA05
peekViewResult.matchHighlightBackground#BE39FF50
peekViewResult.selectionBackground#BE39FF70
peekViewTitle.background#E849DA05
peekViewTitleDescription.foreground#E849DA60
pickerGroup.foreground#BE39FF
progressBar.background#BE39FF
scrollbar.shadow#13062300
scrollbarSlider.activeBackground#BE39FFcc
scrollbarSlider.background#BE39FFbb
scrollbarSlider.hoverBackground#BE39FFee
selection.background#BE39FF
settings.checkboxBackground#130623
settings.checkboxForeground#E849DA
settings.dropdownBackground#130623
settings.dropdownForeground#E849DA
settings.headerForeground#BE39FF
settings.modifiedItemIndicator#BE39FF
settings.numberInputBackground#130623
settings.numberInputForeground#E849DA
settings.textInputBackground#130623
settings.textInputForeground#E849DA
sideBar.background#130623
sideBar.border#BE39FF50
sideBar.foreground#FFFCCB
sideBarSectionHeader.background#130623
sideBarSectionHeader.border#13062360
sideBarSectionHeader.foreground#FFFCCB
sideBarTitle.foreground#E849DA
statusBar.background#8625cf
statusBar.border#13062360
statusBar.debuggingBackground#FF6E94
statusBar.debuggingForeground#4DF2AC
statusBar.foreground#e5c1ff
statusBar.noFolderBackground#130623
statusBarItem.hoverBackground#bd39ff8c
statusBarItem.remoteBackground#BE39FF
statusBarItem.remoteForeground#130623
tab.activeBackground#BE39FF50
tab.activeBorder#BE39FF
tab.activeForeground#4DF2AC
tab.activeModifiedBorder#BE39FF
tab.border#130623
tab.inactiveBackground#BE39FF20
tab.inactiveForeground#E849DAaf
tab.unfocusedActiveBackground#BE39FF40
tab.unfocusedActiveBorder#BE39FF
tab.unfocusedActiveForeground#E849DA
tab.unfocusedInactiveBackground#BE39FF10
tab.unfocusedInactiveForeground#E849DA7f
terminal.ansiBlack#130623
terminal.ansiBlue#5b73ff
terminal.ansiBrightBlack#350a4b
terminal.ansiBrightBlue#002fff
terminal.ansiBrightCyan#0EFFDA
terminal.ansiBrightGreen#60ff30
terminal.ansiBrightMagenta#ff52d9
terminal.ansiBrightRed#ec0000
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe23f
terminal.ansiCyan#0EFFDA
terminal.ansiGreen#2aff17c4
terminal.ansiMagenta#FF6E94
terminal.ansiRed#ff2f2fc4
terminal.ansiWhite#ffffffd8
terminal.ansiYellow#fff06e
terminalCursor.background#130623
terminalCursor.foreground#FF6E94
textLink.activeForeground#E849DA
textLink.foreground#BE39FF
titleBar.activeBackground#130623
titleBar.activeForeground#E849DA
titleBar.border#13062360
titleBar.inactiveBackground#130623
titleBar.inactiveForeground#BE39FF
tree.indentGuidesStroke#130623
widget.shadow#13062330

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#9fa1ff	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#fff6a6	—
constant.other.php	#ff9bb6	—
constant.other.color	#4DF2AC	—
invalid, invalid.illegal	#fffd6cc4	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#d4bcff	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#24F0FF	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#E849DA	—
punctuation.definition, string.quoted.single.scss, variable.argument.css	#c758ffa9	—
keyword.control	—	bold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#939fe9	—
text.html.derivative	#78ffdd	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ff5cc9	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css, storage.type.js	#a8ff6e	—
variable.other.object.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#24F0FF
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#FFFCCB	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#0EFFDA	—
support.other.variable, string.other.link, markup.table	#ffb9ef	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#fffd90	—
variable.parameter.function.language.special, variable.parameter	#81ff03c4	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#ffa358
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#FF6E94	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#58e6ff	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#81ff03c4	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFFCCB	italic
entity.other.attribute-name, support.function	#ff7499	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#3f99ff	—
source.scss keyword.control	#FF6E94	—
markup.inserted	#FFB15F	—
markup.deleted	#81ff03c4	—
markup.changed	#FF6E94	—
string.regexp	#0EFFDA	—
constant.character.escape	#0EFFDA	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#f81ae6	italic
support.type.property-name.json	#f81ae6	—
text.html.markdown, punctuation.definition.list_item.markdown	#f81ae6	—
text.html.markdown markup.inline.raw.markdown	#FF6E94	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown, source.css	#BE39FF50	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#24F0FF	bold
markup.underline	#FFFCCB	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#BE39FF50	—
markup.quote	—	italic
string.other.link.description.title.markdown	#FF6E94	—
constant.other.reference.link.markdown	#FF6E94	—
markup.raw.block	#FF6E94	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#0EFFDA	—
variable.language.fenced.markdown	#BE39FF	—
meta.separator	#93b5ff	bold
token.info-token	#BE39FF	—
token.warn-token	#fbff00	—
token.error-token	#FF293B	—
token.debug-token	#0EFFDA	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}