OpenPoem Night

Name: OpenPoem Night
Author: OpenPoem.org

Publisher: OpenPoem.orgThemes in package: 1

A dark, cinematic theme for the few who listen between the words. Night black, cream ink, a single blood-red accent.

Open in VS Code GitHub

VS Code preview

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

OpenPoem Night — OpenPoem Night

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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...
~/my-project $

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#00000000
activityBar.activeBorder#d1382b
activityBar.background#0a090c
activityBar.border#1a181e
activityBar.foreground#e8e6e0
activityBar.inactiveForeground#5c5e66
activityBarBadge.background#d1382b
activityBarBadge.foreground#ffffff
badge.background#d1382b
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e5493c
breadcrumb.focusForeground#cbccd2
breadcrumb.foreground#6c6e76
breadcrumbPicker.background#0e0d12
button.background#d1382b
button.foreground#ffffff
button.hoverBackground#e5493c
button.secondaryBackground#1b191f
button.secondaryForeground#cbccd2
button.secondaryHoverBackground#232128
charts.blue#6f8cae
charts.foreground#cbccd2
charts.green#6fae86
charts.orange#d99a5b
charts.red#d1382b
charts.yellow#d8b46a
checkbox.background#131217
checkbox.border#2a2830
checkbox.foreground#e5493c
debugConsole.errorForeground#e5493c
debugConsole.infoForeground#7fb0a8
debugConsole.sourceForeground#cbccd2
debugConsole.warningForeground#d8b46a
debugIcon.breakpointForeground#d1382b
debugToolBar.background#0e0d12
descriptionForeground#8a8c94
disabledForeground#6c6e76
dropdown.background#131217
dropdown.border#2a2830
dropdown.foreground#cbccd2
dropdown.listBackground#131217
editor.background#0a090c
editor.findMatchBackground#d1382b66
editor.findMatchHighlightBackground#d1382b33
editor.findRangeHighlightBackground#ffffff0f
editor.foreground#cbccd2
editor.hoverHighlightBackground#ffffff12
editor.inactiveSelectionBackground#d1382b1a
editor.lineHighlightBackground#ffffff08
editor.rangeHighlightBackground#ffffff0a
editor.selectionBackground#d1382b33
editor.selectionHighlightBackground#d1382b1f
editor.wordHighlightBackground#ffffff12
editor.wordHighlightStrongBackground#d1382b26
editorBracketHighlight.foreground1#d1382b
editorBracketHighlight.foreground2#d8b46a
editorBracketHighlight.foreground3#e8b0a4
editorBracketHighlight.foreground4#6fae86
editorBracketHighlight.foreground5#c9a978
editorBracketHighlight.foreground6#9a9ca4
editorBracketHighlight.unexpectedBracket.foreground#e5493c
editorBracketMatch.background#d1382b26
editorBracketMatch.border#d1382b80
editorCursor.background#0a090c
editorCursor.foreground#e5493c
editorError.foreground#e5493c
editorGroup.border#1a181e
editorGroupHeader.noTabsBackground#0c0b0f
editorGroupHeader.tabsBackground#0c0b0f
editorGutter.addedBackground#6fae86
editorGutter.deletedBackground#d1382b
editorGutter.modifiedBackground#d99a5b
editorHint.foreground#6fae86
editorHoverWidget.background#0e0d12
editorHoverWidget.border#2a2830
editorIndentGuide.activeBackground1#3a3841
editorIndentGuide.background1#1c1a21
editorInfo.foreground#7fb0a8
editorLineNumber.activeForeground#8a8c94
editorLineNumber.foreground#3f3d45
editorLink.activeForeground#e5493c
editorOverviewRuler.addedForeground#6fae86
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#d1382b
editorOverviewRuler.errorForeground#e5493c
editorOverviewRuler.findMatchForeground#d1382b99
editorOverviewRuler.modifiedForeground#d99a5b
editorOverviewRuler.warningForeground#d8b46a
editorPane.background#0a090c
editorRuler.foreground#1c1a21
editorSuggestWidget.background#0e0d12
editorSuggestWidget.border#2a2830
editorSuggestWidget.foreground#cbccd2
editorSuggestWidget.highlightForeground#e5493c
editorSuggestWidget.selectedBackground#17151b
editorWarning.foreground#d8b46a
editorWhitespace.foreground#2a2830
editorWidget.background#131217
editorWidget.border#2a2830
editorWidget.foreground#cbccd2
errorForeground#e5493c
extensionButton.prominentBackground#d1382b
extensionButton.prominentHoverBackground#e5493c
focusBorder#d1382b66
foreground#cbccd2
gitDecoration.addedResourceForeground#6fae86
gitDecoration.conflictingResourceForeground#e5493c
gitDecoration.deletedResourceForeground#d1382b
gitDecoration.ignoredResourceForeground#4c4e56
gitDecoration.modifiedResourceForeground#d99a5b
gitDecoration.stageModifiedResourceForeground#d8b46a
gitDecoration.untrackedResourceForeground#7fb0a8
icon.foreground#8a8c94
input.background#131217
input.border#2a2830
input.foreground#f2efe8
input.placeholderForeground#6c6e76
inputOption.activeBackground#d1382b33
inputOption.activeBorder#d1382b
inputOption.activeForeground#f2efe8
inputValidation.errorBackground#2a1210
inputValidation.errorBorder#e5493c
inputValidation.infoBackground#101418
inputValidation.infoBorder#5f7a8a
inputValidation.warningBackground#241d10
inputValidation.warningBorder#d8b46a
list.activeSelectionBackground#17151b
list.activeSelectionForeground#f2efe8
list.activeSelectionIconForeground#e5493c
list.dropBackground#d1382b1a
list.errorForeground#e5493c
list.focusBackground#17151b
list.focusForeground#f2efe8
list.highlightForeground#e5493c
list.hoverBackground#131217
list.inactiveSelectionBackground#131217
list.inactiveSelectionForeground#cbccd2
list.warningForeground#d8b46a
listFilterWidget.background#131217
menu.background#0e0d12
menu.border#2a2830
menu.foreground#cbccd2
menu.selectionBackground#17151b
menu.selectionForeground#f2efe8
menu.separatorBackground#26242b
menubar.selectionBackground#17151b
minimap.findMatchHighlight#d1382b
minimap.selectionHighlight#d1382b66
minimapGutter.addedBackground#6fae86
minimapGutter.deletedBackground#d1382b
minimapGutter.modifiedBackground#d99a5b
notificationLink.foreground#e5493c
notifications.background#0e0d12
notifications.border#2a2830
notifications.foreground#cbccd2
notificationsErrorIcon.foreground#e5493c
notificationsInfoIcon.foreground#7fb0a8
notificationsWarningIcon.foreground#d8b46a
panel.background#0a090c
panel.border#1a181e
panelTitle.activeBorder#d1382b
panelTitle.activeForeground#f2efe8
panelTitle.inactiveForeground#6c6e76
peekView.border#d1382b
peekViewEditor.background#0e0d12
peekViewEditor.matchHighlightBackground#d1382b40
peekViewResult.background#0c0b0f
peekViewResult.matchHighlightBackground#d1382b40
peekViewResult.selectionBackground#17151b
peekViewTitle.background#0c0b0f
peekViewTitleDescription.foreground#8a8c94
peekViewTitleLabel.foreground#f2efe8
progressBar.background#d1382b
sash.hoverBorder#d1382b80
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffffff2b
scrollbarSlider.background#ffffff12
scrollbarSlider.hoverBackground#ffffff1f
selection.background#d1382b40
sideBar.background#0c0b0f
sideBar.border#1a181e
sideBar.foreground#b6b8c0
sideBarSectionHeader.background#0c0b0f
sideBarSectionHeader.border#1a181e
sideBarSectionHeader.foreground#8a8c94
sideBarTitle.foreground#8a8c94
statusBar.background#0a090c
statusBar.border#1a181e
statusBar.debuggingBackground#d1382b
statusBar.debuggingForeground#ffffff
statusBar.foreground#8a8c94
statusBar.noFolderBackground#0a090c
statusBarItem.errorBackground#d1382b
statusBarItem.errorForeground#ffffff
statusBarItem.hoverBackground#ffffff12
statusBarItem.prominentBackground#17151b
statusBarItem.remoteBackground#d1382b
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0a090c
tab.activeBorder#00000000
tab.activeBorderTop#d1382b
tab.activeForeground#f2efe8
tab.border#1a181e
tab.hoverBackground#131217
tab.inactiveBackground#0c0b0f
tab.inactiveForeground#6c6e76
tab.lastPinnedBorder#26242b
tab.unfocusedActiveBorderTop#d1382b66
terminal.ansiBlack#1a181e
terminal.ansiBlue#6f8cae
terminal.ansiBrightBlack#5c5e66
terminal.ansiBrightBlue#8aa6c4
terminal.ansiBrightCyan#9acabf
terminal.ansiBrightGreen#84c79b
terminal.ansiBrightMagenta#e0a4b8
terminal.ansiBrightRed#e5493c
terminal.ansiBrightWhite#f2efe8
terminal.ansiBrightYellow#e6c98a
terminal.ansiCyan#7fb0a8
terminal.ansiGreen#6fae86
terminal.ansiMagenta#c98aa0
terminal.ansiRed#d1382b
terminal.ansiWhite#cbccd2
terminal.ansiYellow#d8b46a
terminal.background#0a090c
terminal.foreground#cbccd2
terminal.selectionBackground#d1382b33
terminalCursor.foreground#e5493c
textBlockQuote.background#0e0d12
textBlockQuote.border#d1382b
textCodeBlock.background#0e0d12
textLink.activeForeground#f16a5c
textLink.foreground#e5493c
textPreformat.foreground#d8b46a
titleBar.activeBackground#0a090c
titleBar.activeForeground#cbccd2
titleBar.border#1a181e
titleBar.inactiveBackground#0a090c
titleBar.inactiveForeground#6c6e76
tree.indentGuidesStroke#26242b
welcomePage.progress.foreground#d1382b
welcomePage.tileBackground#0e0d12
widget.border#26242b
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6b6d75	italic
string, string.quoted, punctuation.definition.string	#c9a978	—
string.template, punctuation.definition.template-expression	#c9a978	—
constant.character.escape, constant.other.placeholder	#e8b0a4	—
constant.numeric, keyword.other.unit	#d98b7a	—
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan	#d1382b	—
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#d1382b	—
keyword.operator, punctuation.separator, punctuation.terminator, meta.brace, punctuation.accessor	#9a9ca4	—
variable, variable.other, meta.definition.variable, variable.other.readwrite	#cbccd2	—
variable.parameter, variable.parameter.function	#c6b2a6	italic
variable.language, variable.language.this, keyword.other.this, variable.language.super	#d1382b	italic
entity.name.function, support.function, meta.function-call.generic, meta.function-call	#e8b0a4	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class, entity.name.type.class	#e6c98a	—
support.type.primitive, keyword.type	#d1382b	italic
variable.other.property, meta.object-literal.key, support.type.property-name, variable.object.property, variable.other.object.property	#bfc1c9	—
entity.name.tag, punctuation.definition.tag	#d1382b	—
entity.other.attribute-name	#e6c98a	italic
support.type.property-name.css, support.constant.property-value.css, constant.other.color	#e8b0a4	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css	#e6c98a	—
string.regexp, constant.other.character-class.regexp, punctuation.definition.character-class.regexp	#6fae86	—
entity.name.namespace, entity.name.module, storage.modifier.import, storage.modifier.package	#e6c98a	—
meta.decorator, punctuation.decorator, entity.name.function.decorator, meta.decorator entity.name.function	#d99a5b	—
constant.other.symbol, constant.other.key, entity.name.constant	#e8b0a4	—
support.constant, support.variable, support.other.variable	#d98b7a	—
markup.heading, entity.name.section, markup.heading entity.name	#f2efe8	bold
punctuation.definition.heading.markdown	#d1382b	—
markup.bold	#e6c98a	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code, markup.raw.block	#c9a978	—
markup.underline.link, string.other.link, constant.other.reference.link.markdown	#d1382b	—
markup.quote	#8a8c94	italic
markup.inserted, markup.inserted.diff	#6fae86	—
markup.deleted, markup.deleted.diff	#d1382b	—
markup.changed, markup.changed.diff	#d99a5b	—
meta.diff.header, punctuation.definition.range.diff	#8a8c94	—
invalid, invalid.illegal	#e5493c	—
invalid.deprecated	#e5493c	strikethrough
entity.name.label, keyword.control.label	#e6c98a	—
token.info-token	#7fb0a8	—
token.warn-token	#d8b46a	—
token.error-token	#e5493c	—
token.debug-token	#c98aa0	—