Midnight Rainbow

Name: Midnight Rainbow
Author: Parallax Shift

Publisher: Parallax ShiftThemes in package: 1

A dark theme for Visual Studio Code.

Open in VS Code

VS Code preview

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

Midnight Rainbow — Midnight Rainbow

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#ffffff1f
activityBar.activeBorder#ffcf00
activityBar.background#090018
activityBar.border#ffffff1f
activityBar.foreground#ffffffbf
activityBar.inactiveForeground#ffffff5f
activityBarBadge.background#ffcf00
activityBarBadge.foreground#090018
badge.background#ffcf003f
badge.foreground#ffcf00
button.background#ffcf00bf
button.foreground#090018
button.hoverBackground#ffcf00
button.secondaryBackground#ffcf00bf
button.secondaryForeground#090018
button.secondaryHoverBackground#ffcf00
debugConsoleInputIcon.foreground#ffcf00
debugExceptionWidget.background#ffffff1f
debugExceptionWidget.border#0000
debugIcon.breakpointDisabledForeground#ffcf007f
debugIcon.breakpointForeground#ffcf00
debugToolBar.background#090018
descriptionForeground#ffffff5f
diffEditor.diagonalFill#ffffff3f
diffEditor.insertedTextBackground#00ff001f
diffEditor.removedTextBackground#ff00001f
dropdown.background#090018
dropdown.border#ffffff1f
dropdown.foreground#ffffff7f
editor.background#090018
editor.findMatchBackground#ffffff1f
editor.findMatchBorder#0000
editor.findMatchHighlightBackground#ffffff1f
editor.findMatchHighlightBorder#0000
editor.findRangeHighlightBackground#ffffff1f
editor.foreground#ffffffbf
editor.inactiveSelectionBackground#ffffff1f
editor.lineHighlightBackground#ffffff1f
editor.rangeHighlightBackground#ffffff1f
editor.selectionBackground#ffffff1f
editor.selectionHighlightBackground#ffffff1f
editor.selectionHighlightBorder#0000
editor.snippetTabstopHighlightBackground#ffffff3f
editor.wordHighlightBackground#ffffff1f
editor.wordHighlightBorder#0000
editor.wordHighlightStrongBackground#ffffff1f
editor.wordHighlightStrongBorder#0000
editorBracketHighlight.foreground1#ff7f00
editorBracketHighlight.foreground2#ffbf00
editorBracketHighlight.foreground3#3fbf00
editorBracketHighlight.foreground4#007fff
editorBracketHighlight.foreground5#cf00ff
editorBracketHighlight.foreground6#ff00bf
editorBracketHighlight.unexpectedBracket.foreground#bf0000
editorBracketMatch.background#ffffff1f
editorBracketMatch.border#0000
editorCodeLens.foreground#ffffffbf
editorCursor.foreground#ffcf00
editorError.foreground#bf0000
editorGroup.border#ffffff1f
editorGroupHeader.noTabsBackground#0000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#ffffff1f
editorGutter.addedBackground#3fbf00
editorGutter.deletedBackground#bf0000
editorGutter.modifiedBackground#007fff
editorHoverWidget.background#090018
editorHoverWidget.border#ffffff1f
editorIndentGuide.activeBackground#ffffff7f
editorIndentGuide.background#ffffff3f
editorLineNumber.activeForeground#ffffffbf
editorLineNumber.foreground#ffffff3f
editorLink.activeForeground#ffcf00
editorMarkerNavigation.background#ffffff1f
editorOverviewRuler.addedForeground#3fbf00
editorOverviewRuler.border#ffffff1f
editorOverviewRuler.bracketMatchForeground#ffffff1f
editorOverviewRuler.deletedForeground#bf0000
editorOverviewRuler.errorForeground#bf0000
editorOverviewRuler.findMatchForeground#ffffff1f
editorOverviewRuler.modifiedForeground#007fff
editorOverviewRuler.warningForeground#ff7f00
editorOverviewRuler.wordHighlightForeground#ffffff1f
editorOverviewRuler.wordHighlightStrongForeground#ffffff3f
editorRuler.foreground#ffffff7f
editorSuggestWidget.background#090018
editorSuggestWidget.border#ffffff1f
editorSuggestWidget.highlightForeground#ffffffbf
editorSuggestWidget.selectedBackground#ffffff1f
editorWarning.foreground#ff7f00
editorWhitespace.foreground#ffffff3f
editorWidget.background#090018
editorWidget.border#ffffff1f
errorForeground#bf0000
extensionButton.prominentBackground#ffcf00bf
extensionButton.prominentForeground#090018
extensionButton.prominentHoverBackground#ffcf00
focusBorder#ffcf00
foreground#ffffff7f
gitDecoration.conflictingResourceForeground#ff7f00
gitDecoration.deletedResourceForeground#bf0000
gitDecoration.ignoredResourceForeground#ffffff5f
gitDecoration.modifiedResourceForeground#007fff
gitDecoration.submoduleResourceForeground#ff00bf
gitDecoration.untrackedResourceForeground#3fbf00
icon.foreground#ffffff5f
input.background#090018
input.border#ffffff1f
input.foreground#ffffffbf
input.placeholderForeground#ffffff5f
inputOption.activeBackground#ffffff3f
inputOption.activeBorder#ffcf00
inputOption.activeForeground#ffffffbf
inputValidation.errorBackground#090018
inputValidation.errorBorder#bf0000
inputValidation.infoBackground#090018
inputValidation.infoBorder#007fff
inputValidation.warningBackground#090018
inputValidation.warningBorder#ff7f00
keybindingLabel.background#ffffff1f
keybindingLabel.border#0000
keybindingLabel.bottomBorder#0000
keybindingLabel.foreground#ffffffbf
list.activeSelectionBackground#ffffff3f
list.activeSelectionForeground#ffffffbf
list.deemphasizedForeground#ffffff7f
list.errorForeground#bf0000
list.filterMatchBackground#ffffff3f
list.filterMatchBorder#0000
list.focusBackground#ffffff3f
list.focusForeground#ffffffbf
list.focusOutline#0000
list.highlightForeground#ffffffbf
list.hoverBackground#ffffff1f
list.inactiveSelectionBackground#ffffff1f
list.inactiveSelectionForeground#ffffff5f
list.invalidItemForeground#bf0000
listFilterWidget.background#0000
listFilterWidget.noMatchesOutline#bf0000
listFilterWidget.outline#ffcf00
minimap.background#090018bf
minimap.errorHighlight#bf0000
minimap.findMatchHighlight#ffffff3f
minimap.selectionHighlight#ffffff3f
minimapGutter.addedBackground#3fbf007f
minimapGutter.deletedBackground#bf00007f
minimapGutter.modifiedBackground#007fff7f
panel.background#090018
panel.border#ffffff1f
panelTitle.activeBorder#ffcf00
panelTitle.activeForeground#ffffffbf
panelTitle.inactiveForeground#ffffff7f
peekView.border#ffffff1f
peekViewEditor.background#090018
peekViewEditor.matchHighlightBackground#ffffff1f
peekViewEditor.matchHighlightBorder#0000
peekViewResult.background#090018
peekViewResult.fileForeground#ffffffbf
peekViewResult.lineForeground#ffffff5f
peekViewResult.matchHighlightBackground#ffffff3f
peekViewResult.selectionBackground#ffffff1f
peekViewTitle.background#090018
peekViewTitleDescription.foreground#ffffff5f
peekViewTitleLabel.foreground#ffffffbf
pickerGroup.border#ffffff1f
pickerGroup.foreground#ffffff5f
progressBar.background#ffcf003f
scrollbar.shadow#0000
scrollbarSlider.activeBackground#ffffff7f
scrollbarSlider.background#ffffff3f
scrollbarSlider.hoverBackground#ffffff5f
selection.background#ffffff5f
settings.headerForeground#ffffffbf
settings.modifiedItemIndicator#007fff
sideBar.background#090018
sideBar.border#ffffff1f
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ffffff1f
sideBarSectionHeader.foreground#ffffff7f
sideBarTitle.foreground#ffffff7f
statusBar.background#090018
statusBar.border#ffffff1f
statusBar.debuggingBackground#ffcf00
statusBar.debuggingForeground#090018
statusBar.foreground#ffffff7f
statusBar.noFolderBackground#090018
statusBarItem.activeBackground#ffffff3f
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#ffffff5f
statusBarItem.prominentHoverBackground#ffffff3f
statusBarItem.remoteBackground#ffcf00
statusBarItem.remoteForeground#090018
tab.activeBackground#ffffff1f
tab.activeBorder#0000
tab.activeBorderTop#ffcf00
tab.activeForeground#ffffffbf
tab.activeModifiedBorder#007fff
tab.border#ffffff1f
tab.inactiveBackground#0000
tab.inactiveForeground#ffffff7f
tab.unfocusedActiveBorderTop#ffcf007f
tab.unfocusedActiveForeground#ffffff7f
tab.unfocusedInactiveForeground#ffffff5f
terminal.ansiBlack#ffffff1f
terminal.ansiBlue#005fbf
terminal.ansiBrightBlack#ffffff5f
terminal.ansiBrightBlue#007fff
terminal.ansiBrightCyan#00bfbf
terminal.ansiBrightGreen#3fbf00
terminal.ansiBrightMagenta#ff00bf
terminal.ansiBrightRed#ff0000
terminal.ansiBrightWhite#ffffffbf
terminal.ansiBrightYellow#ffbf00
terminal.ansiCyan#007f7f
terminal.ansiGreen#1fbf00
terminal.ansiMagenta#bf007f
terminal.ansiRed#bf0000
terminal.ansiWhite#ffffffbf
terminal.ansiYellow#bf7f00
terminal.background#090018
terminal.foreground#ffffff7f
textBlockQuote.background#0000
textLink.activeForeground#ffcf00
textLink.foreground#ffcf00
textPreformat.foreground#ffffffbf
titleBar.activeBackground#090018
titleBar.activeForeground#ffffffbf
titleBar.border#ffffff1f
titleBar.inactiveBackground#090018
titleBar.inactiveForeground#ffffff7f
tree.indentGuidesStroke#ffffff7f
walkThrough.embeddedEditorBackground#090018
welcomePage.progress.background#ffcf003f
welcomePage.tileBackground#ffffff1f
welcomePage.tileHoverBackground#ffffff3f
welcomePage.tileShadow#0000
widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable.css, variable.argument.css, meta.function.variable.css, keyword.operator	#ffffffbf	—
comment, punctuation.definition.comment	#ffffff5f	italic
invalid, invalid.deprecated	#bf0000	—
keyword, keyword.control, keyword.declaration, support.constant, storage.type, storage.modifier	#ff7f00	—
entity.other.inherited-class, entity.name, entity.name.section, entity.other.attribute-name, variable.function, support.function.misc.css	#ffbf00	—
constant, constant.numeric, constant.language, constant.character.escape, variable, variable.language, variable.parameter	#3fbf00	—
entity.name.tag, support	#007fff	—
string	#cf00ff	—
link, url, uri	—	underline

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