Midnight Mirage Theme

Name: Midnight Mirage Theme
Author: Puszkarek

Publisher: PuszkarekThemes in package: 1

It provides a comfortable and eye-catching coding experience that is easy on the eyes

GitHub

VS Code preview

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

Midnight Mirage Theme — Midnight Mirage

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.activeBackground#8077cf
activityBar.activeBorder#8077cf
activityBar.activeFocusBorder#ffffff00
activityBar.background#313b43
activityBar.border#434d56
activityBar.dropBorder#dbdde1
activityBar.foreground#dbdde1
activityBar.inactiveForeground#727882
activityBarBadge.background#8077cf
activityBarBadge.foreground#dbdde1
badge.background#8077cf
badge.foreground#dbdde1
breadcrumb.activeSelectionForeground#434d56
breadcrumb.background#313b43
breadcrumb.focusForeground#f2f3f5
breadcrumb.foreground#dbdde1
button.background#8077cf
button.foreground#f2f3f5
button.hoverBackground#8077cfc7
button.secondaryBackground#30353b
button.secondaryForeground#dbdde1
button.secondaryHoverBackground#30353bc1
checkbox.background#4b57697d
checkbox.border#dbdde1
checkbox.foreground#dbdde1
checkbox.selectBackground#4b57697d
checkbox.selectBorder#8077cf
debugExceptionWidget.background#30353b
debugExceptionWidget.border#727882
debugToolBar.background#30353b
debugToolBar.border#727882
diffEditor.border#434d56
diffEditor.insertedLineBackground#73c9917c
diffEditor.insertedTextBackground#9bb95533
diffEditor.insertedTextBorder#ffffff00
diffEditor.removedLineBackground#c74e397c
diffEditor.removedTextBackground#9188e333
diffEditor.removedTextBorder#ffffff00
diffEditorGutter.insertedLineBackground#ffffff00
diffEditorGutter.removedLineBackground#ffffff00
diffEditorOverview.insertedForeground#73c9917c
diffEditorOverview.removedForeground#c74e397c
dropdown.background#4b5769
dropdown.border#dbdde1
dropdown.foreground#dbdde1
dropdown.listBackground#4b5769
editor.background#313b43
editor.findMatchBackground#ea5c0055
editor.findMatchBorder#dbdde155
editor.findMatchHighlightBackground#acacac55
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#4b57697c
editor.foreground#dbdde1
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#8077cf2d
editor.lineHighlightBackground#4b5769
editor.lineHighlightBorder#4b5769
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#8077cf4a
editor.selectionHighlightBackground#8077cfc7
editor.selectionHighlightBorder#8077cfc7
editor.wordHighlightBackground#8077cf4a
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#341a49d7
editorBracketMatch.background#0064001a
editorBracketMatch.border#727882
editorCodeLens.foreground#dbdde1
editorCursor.background#30353bc1
editorCursor.foreground#f2f3f5
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#ff7255
editorGroup.border#434d56
editorGroup.emptyBackground#313b43
editorGroupHeader.border#434d56
editorGroupHeader.tabsBackground#313b43
editorGroupHeader.tabsBorder#434d56
editorGutter.addedBackground#587c0c
editorGutter.background#313b43
editorGutter.commentGlyphForeground#8077cf
editorGutter.commentRangeForeground#8077cf
editorGutter.commentUnresolvedGlyphForeground#f2f3f5
editorGutter.deletedBackground#c74e39
editorGutter.foldingControlForeground#dbdde1
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#30353b
editorHoverWidget.border#727882
editorHoverWidget.foreground#dbdde1
editorIndentGuide.activeBackground1#f2f3f5
editorIndentGuide.background1#727882
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#3aa2ff
editorLineNumber.activeForeground#dbdde1
editorLineNumber.foreground#727882
editorLink.activeForeground#4ea1e6
editorMarkerNavigation.background#30353b
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorStickyScroll.background#39444c
editorStickyScroll.border#434d56
editorStickyScrollHover.background#4b5769
editorSuggestWidget.background#30353b
editorSuggestWidget.border#727882
editorSuggestWidget.foreground#dbdde1
editorSuggestWidget.highlightForeground#3fb3ff
editorSuggestWidget.selectedBackground#4b5769
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#ffd61e
editorWhitespace.foreground#727882
editorWidget.background#30353b
editorWidget.foreground#dbdde1
editorWidget.resizeBorder#dbdde1
focusBorder#8077cf
foreground#dbdde1
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#e2c08d
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#dbdde1
input.background#4b57697d
input.border#ffffff00
input.foreground#dbdde1
input.placeholderForeground#727882
inputOption.activeBackground#8077cf
inputOption.activeBorder#f2f3f5
inputOption.activeForeground#f2f3f5
list.activeSelectionBackground#8077cf4a
list.activeSelectionForeground#dbdde1
list.dropBackground#8077cf4a
list.focusBackground#4b5769
list.focusForeground#dbdde1
list.highlightForeground#8077cf
list.hoverBackground#4b5769
list.hoverForeground#dbdde1
list.inactiveSelectionBackground#4b5769
list.inactiveSelectionForeground#dbdde1
listFilterWidget.background#30353b
listFilterWidget.noMatchesOutline#d73737
listFilterWidget.outline#00000000
menu.background#30353b
menu.border#727882
menu.foreground#dbdde1
menu.selectionBackground#4b5769
menu.selectionBorder#ffffff00
menu.selectionForeground#dbdde1
menu.separatorBackground#dbdde1
menubar.selectionBackground#4b5769
menubar.selectionBorder#ffffff00
menubar.selectionForeground#dbdde1
merge.commonContentBackground#30353b7c
merge.commonHeaderBackground#30353b7c
merge.currentContentBackground#73c9917c
merge.currentHeaderBackground#b0ffbe90
merge.incomingContentBackground#3399ff33
merge.incomingHeaderBackground#8db9e290
minimap.background#313b43
minimap.errorHighlight#ff5855
minimap.findMatchHighlight#ff9c557c
minimap.infoHighlight#1ed2ff
minimap.selectionHighlight#8077cf7c
minimap.selectionOccurrenceHighlight#ff9c557c
minimap.warningHighlight#ffd61e
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#ff1414
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#ffffff4a
minimapSlider.background#FFFFFF25
minimapSlider.hoverBackground#d9d9d925
notificationCenter.border#727882
notificationCenterHeader.background#30353b
notificationCenterHeader.foreground#f2f3f5
notifications.background#30353b
notifications.border#727882
notifications.foreground#f2f3f5
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#727882
panel.background#313b43
panel.border#434d56
panelSection.border#434d56
panelStickyScroll.background#39444c
panelStickyScroll.border#434d56
panelTitle.activeBorder#434d56
panelTitle.activeForeground#dbdde1
panelTitle.inactiveForeground#727882
peekView.border#007acc
peekViewEditor.background#30353b
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#30353b
peekViewResult.background#30353b
peekViewResult.fileForeground#dbdde1
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#30353b
peekViewTitleDescription.foreground#727882
peekViewTitleLabel.foreground#dbdde1
pickerGroup.border#8077cf
pickerGroup.foreground#455aff
progressBar.background#8077cf
scrollbar.shadow#ff000000
scrollbarSlider.activeBackground#ffffff4a
scrollbarSlider.background#FFFFFF25
scrollbarSlider.hoverBackground#d9d9d925
selection.background#8077cf
settings.focusedRowBackground#ffffff07
settings.headerForeground#dbdde1
sideBar.background#313b43
sideBar.border#434d56
sideBar.dropBackground#8077cf4a
sideBar.foreground#dbdde1
sideBarSectionHeader.background#ffffff00
sideBarSectionHeader.border#434d56
sideBarSectionHeader.foreground#dbdde1
sideBarStickyScroll.background#39444c
sideBarStickyScroll.border#434d56
sideBarTitle.foreground#dbdde1
statusBar.background#313b43
statusBar.border#434d56
statusBar.debuggingBackground#ff8042
statusBar.debuggingBorder#8077cf
statusBar.debuggingForeground#dbdde1
statusBar.foreground#dbdde1
statusBar.noFolderBackground#8077cf
statusBar.noFolderBorder#cf777700
statusBar.noFolderForeground#dbdde1
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#4b5769
statusBarItem.remoteBackground#8077cf
statusBarItem.remoteForeground#dbdde1
tab.activeBackground#4b5769
tab.activeBorder#dbdde100
tab.activeForeground#dbdde1
tab.border#434d56
tab.hoverBackground#4b5769
tab.hoverBorder#9188e300
tab.hoverForeground#727882
tab.inactiveBackground#313b43
tab.inactiveForeground#727882
terminal.ansiBlack#111111
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#f2f3f5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#dbdde1
terminal.ansiYellow#e5e510
terminal.border#434d56
terminal.foreground#dbdde1
terminal.selectionBackground#8077cf4a
terminalCursor.background#8077cf
terminalCursor.foreground#f2f3f5
textLink.foreground#455aff
titleBar.activeBackground#313b43
titleBar.activeForeground#dbdde1
titleBar.border#434d56
titleBar.inactiveBackground#30353b
titleBar.inactiveForeground#727882
tree.indentGuidesStroke#727882
walkThrough.embeddedEditorBackground#00000050
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
block.scope.end, block.scope.begin, meta.tag, meta.brace.square, meta.template.expression, punctuation.separator.list.comma, punctuation.separator.key-value, punctuation.separator.delimiter, function.brace, variable.parameter.function, support.type.property-name, support.constant.property-value, invalid, token.package	#e1dbdb	—
rgb-value	#f286c4	—
punctuation.section.embedded, variable.interpolation, punctuation.definition.string.begin, punctuation.definition.string.end	#fff672	—
punctuation.quasi.element, punctuation.section.embedded, punctuation.definition.constant, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#f286c4	—
comment, punctuation.definition.comment	#9ba0a7	italic
comment.line.double-slash,comment.block.documentation	—	italic
entity.other.attribute-name, entity.other.attribute-name, variable.parameter, variable.language.super	—	italic
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff	#a1ff77	—
punctuation.definition.bold	#9188e3	—
string.regexp	#9188e3	—
keyword, support.variable.dom, support.variable.property.dom, support.type.object.dom, support.variable.property.process, support.constant.json, support.constant.font-name, support.constant.property.math, constant.character.escape, constant.character.entity, token.storage, storage	#f286c4	—
entity.name.function, support.function, variable.function, keyword.other.special-method	#a1ff77	—
string	#fff672	—
constant, entity.name.namespace, variable.language, support.constant.math, support.type.primitive, entity.name.type.module, support.module.node, support.type.object.module, support.module.node	#9188e3	—
variable, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node, support.type.object.console	#f2f3f5	—
keyword.operator.assignment.compound, keyword.operator.assignment	#f286c4	—
variable.other.property, variable.parameter, constant.other.character-class.regexp, constant.other.symbol, support.function, text.variable, text.bracketed	#ffc280	—
support.class, entity.name.type.namespace, entity.name.type.class, entity.name.class, variable.other.class, entity.other.inherited-class, entity.name.type, support.type.primitive	#9ef7ff	—
support.type.builtin	#9b88e3	—
source.json meta.structure.dictionary.json > string.quoted.json, support.type.property-name.json	#ffc280	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation	#fff672	—
entity.name.tag, meta.selector	#f286c4	—
entity.other.attribute-name	#a7ff71	—
keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end	#fff672	—
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	#9CDCFE	—
entity.other.attribute-name.id, source.css entity.other.attribute-name.class.css, source.sass entity.other.attribute-name.class.css, source.scss entity.other.attribute-name.class.css, source.less entity.other.attribute-name.class.css, source.stylus entity.other.attribute-name.class.css, source.postcss entity.other.attribute-name.class.css	#a7ff71	—
selector.css, selector.scss, selector.sass, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#f286c4	—
keyword.operator.css, keyword.operator.scss, keyword.operator.less, support.type.vendored.property-name.css, support.type.vendored.property-name.scss, support.constant.property-value.scss, support.constant.property-value.css, support.constant.color.css, support.constant.color.scss	#9b88e3	—
markup.heading	#ffc280	—
markup.heading punctuation.definition.heading, entity.name.section	#a1ff77	—
punctuation.definition.italic, todo.emphasis, todo.bold, markup.italic, markup.bold	#f286c4	—
comment markup.link	#9ba0a7	—
markup.changed.diff	#9188e3	—
markup.inserted.diff	#fff672	—
markup.deleted.diff	#ffc280	—
token.info-token	#a1ff77	—
token.warn-token	#f286c4	—
token.error-token	#f44747	—
token.debug-token	#f286c4	—

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