Apollo Midnight Color Theme

Name: Apollo Midnight Color Theme
Author: Apollo GraphQL

Publisher: Apollo GraphQLThemes in package: 1

A dark theme based on Apollo Studio's color palette in Explorer dark mode.

Open in VS Code GitHub

VS Code preview

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

Apollo Midnight Color Theme — Apollo Midnight

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#5168C2
activityBar.activeBorder#F4D03F
activityBar.background#252E50
activityBar.border#3D4B6A
activityBar.foreground#ffffff
activityBar.inactiveForeground#7A92F0
activityBarBadge.background#F4D03F
activityBarBadge.foreground#060F2F
badge.background#5168C2
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#B4C3DB
breadcrumb.background#3C4A85
breadcrumb.focusForeground#B4C3DB
breadcrumb.foreground#B4C3DB
button.background#2075D6
button.foreground#ffffff
button.hoverBackground#1053A0
dropdown.background#1B2240
dropdown.foreground#B4C3DB
dropdown.listBackground#1B2240
editor.background#060F2F
editor.findMatchBorder#F4D03F
editor.findMatchHighlightBackground#7156D960
editor.findMatchHighlightBorder#5168C2
editor.foreground#ffffff
editor.rangeHighlightBackground#3C4A8550
editor.symbolHighlightBackground#3C4A8550
editorCursor.foreground#F4D03F
editorGroup.border#3D4B6A
editorGroup.dropBackground#5168C250
editorGroupHeader.border#3D4B6A
editorGroupHeader.noTabsBackground#060F2F
editorGroupHeader.tabsBackground#060F2F
editorIndentGuide.activeBackground#566992
editorIndentGuide.background#383D5B
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#798FBB
editorWidget.background#060F2F
editorWidget.border#3D4B6A
editorWidget.foreground#B4C3DB
icon.foreground#566992
input.background#060F2F
input.border#3D4B6A
input.foreground#ffffff
input.placeholderForeground#798FBB
list.activeSelectionBackground#3C4A85
list.deemphasizedForeground#798FBB
list.dropBackground#060F2F
list.hoverBackground#383D5B
list.hoverForeground#ffffff
list.inactiveSelectionBackground#3D4B6A
list.inactiveSelectionForeground#ffffff
menu.background#060F2F
menu.foreground#FFFFFF
menu.selectionBackground#3D4B6A
menu.selectionForeground#FFFFFF
notificationCenterHeader.background#3C4A85
notificationCenterHeader.foreground#ffffff
notifications.background#1B2240
notifications.border#3D4B6A
notifications.foreground#B4C3DB
notificationToast.border#3D4B6A
panelSection.border#3D4B6A
panelSectionHeader.border#3D4B6A
panelTitle.activeBorder#F4D03F
panelTitle.inactiveForeground#798FBB
sideBar.background#1B2240
sideBar.border#3D4B6A
sideBar.dropBackground#060F2F
sideBar.foreground#B4C3DB
sideBarSectionHeader.background#252E50
sideBarSectionHeader.border#3D4B6A
sideBarSectionHeader.foreground#B4C3DB
sideBarTitle.foreground#ffffff
statusBar.background#3C4A85
statusBar.border#566992
statusBar.foreground#B0BEF7
statusBarItem.prominentForeground#ffffff
tab.activeBackground#3C4A85
tab.activeBorderTop#F4D03F
tab.activeForeground#ffffff
tab.border#060F2F
tab.hoverForeground#ffffff
tab.inactiveBackground#1B2240
tab.unfocusedActiveForeground#B4C3DB
tab.unfocusedHoverForeground#ffffff
tab.unfocusedInactiveForeground#798FBB
textBlockQuote.border#3D4B6A
textLink.foreground#2075D6
titleBar.activeBackground#060F2F
titleBar.inactiveBackground#1B2240
tree.indentGuidesStroke#3D4B6A
window.activeBorder#3D4B6A
window.inactiveBorder#3D4B6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#798FBB	—
variable, string constant.other.placeholder	#FFC18F	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#7A92F0	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#CAD0D8	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#41D9D3	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7A92F0	—
meta.block variable.other	#FFC18F	—
support.other.variable, string.other.link	#FFC18F	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#F59140	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#8BF6F2	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
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	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#41D9D3	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
entity.name.tag.yaml	#CD8FFF	—
string.unquoted.plain.out.yaml, constant.numeric.integer.yaml	#E6EBFF	—
string.unquoted.block.yaml	#B4C3DB	—
constant.language.boolean.yaml	#F4D03F	—
markup.italic	#41D9D3	italic
markup.bold, markup.bold string	#41D9D3	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#41D9D3	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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