Instrument

Name: Instrument
Author: Dmitry Melnikov

Publisher: Dmitry MelnikovThemes in package: 2

A functional, restrained editor theme: one signal color, everything else quiet.

Open in VS Code GitHub

Color themes

VS Code preview

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

Instrument — Instrument Dark

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.background#1A1917
activityBar.border#38362F
activityBar.foreground#E8E4D9
activityBar.inactiveForeground#6B6960
activityBarBadge.background#E2652E
activityBarBadge.foreground#1A1917
badge.background#7FA3AC
badge.foreground#1A1917
button.background#E2652E
button.foreground#1A1917
button.hoverBackground#F07840
button.secondaryBackground#38362F
button.secondaryForeground#E8E4D9
button.secondaryHoverBackground#454238
checkbox.background#1A1917
checkbox.border#38362F
descriptionForeground#A8A398
diffEditor.insertedLineBackground#93A66B16
diffEditor.insertedTextBackground#93A66B26
diffEditor.removedLineBackground#D6603A16
diffEditor.removedTextBackground#D6603A22
disabledForeground#6B6960
dropdown.background#1A1917
dropdown.border#38362F
dropdown.foreground#E8E4D9
editor.background#201F1D
editor.findMatchBackground#E2652E55
editor.findMatchHighlightBackground#E2652E22
editor.foreground#E8E4D9
editor.inactiveSelectionBackground#3E3B3360
editor.lineHighlightBackground#2A2925
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#7FA3AC14
editor.selectionBackground#3E3B33
editor.selectionHighlightBackground#3E3B3390
editor.wordHighlightBackground#7FA3AC22
editor.wordHighlightStrongBackground#7FA3AC33
editorBracketHighlight.foreground1#E2652E
editorBracketHighlight.foreground2#7FA3AC
editorBracketHighlight.foreground3#93A66B
editorBracketHighlight.foreground4#C99A46
editorBracketMatch.background#7FA3AC22
editorBracketMatch.border#7FA3AC66
editorCodeLens.foreground#7A776C
editorCursor.foreground#E2652E
editorError.foreground#D6603A
editorGroup.border#38362F
editorGroupHeader.tabsBackground#1A1917
editorGroupHeader.tabsBorder#38362F
editorGutter.addedBackground#93A66B
editorGutter.background#201F1D
editorGutter.deletedBackground#D6603A
editorGutter.modifiedBackground#7FA3AC
editorHint.foreground#7A776C
editorHoverWidget.background#262521
editorHoverWidget.border#38362F
editorIndentGuide.activeBackground1#57544B
editorIndentGuide.background1#2E2C27
editorInfo.foreground#7FA3AC
editorLineNumber.activeForeground#7FA3AC
editorLineNumber.foreground#57544B
editorOverviewRuler.border#38362F
editorRuler.foreground#38362F
editorSuggestWidget.background#262521
editorSuggestWidget.border#38362F
editorSuggestWidget.highlightForeground#E2652E
editorSuggestWidget.selectedBackground#E2652E22
editorWarning.foreground#C99A46
editorWhitespace.foreground#38362F
editorWidget.background#262521
editorWidget.border#38362F
errorForeground#E2652E
focusBorder#E2652E
foreground#E8E4D9
gitDecoration.addedResourceForeground#93A66B
gitDecoration.conflictingResourceForeground#C99A46
gitDecoration.deletedResourceForeground#D6603A
gitDecoration.ignoredResourceForeground#57544B
gitDecoration.modifiedResourceForeground#7FA3AC
gitDecoration.untrackedResourceForeground#A6BB7E
input.background#1A1917
input.border#38362F
input.foreground#E8E4D9
input.placeholderForeground#6B6960
inputOption.activeBorder#E2652E
list.activeSelectionBackground#E2652E26
list.activeSelectionForeground#E8E4D9
list.dropBackground#7FA3AC22
list.focusBackground#E2652E2A
list.focusForeground#E8E4D9
list.hoverBackground#262521
list.inactiveSelectionBackground#262521
menu.background#262521
menu.border#38362F
menu.foreground#E8E4D9
menu.selectionBackground#E2652E26
menubar.selectionBackground#38362F
notifications.background#262521
notifications.border#38362F
notifications.foreground#E8E4D9
notificationsErrorIcon.foreground#D6603A
notificationsInfoIcon.foreground#7FA3AC
notificationsWarningIcon.foreground#C99A46
panel.background#1A1917
panel.border#38362F
panelInput.border#38362F
panelTitle.activeBorder#E2652E
panelTitle.activeForeground#E8E4D9
panelTitle.inactiveForeground#7A776C
peekView.border#E2652E
peekViewEditor.background#1A1917
peekViewResult.background#1F1E1B
peekViewTitle.background#262521
peekViewTitleLabel.foreground#E8E4D9
progressBar.background#E2652E
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#E2652E88
scrollbarSlider.background#57544B66
scrollbarSlider.hoverBackground#57544B99
selection.background#E2652E3D
sideBar.background#1A1917
sideBar.border#38362F
sideBar.foreground#C7C3B8
sideBarSectionHeader.background#1A1917
sideBarSectionHeader.border#38362F
sideBarSectionHeader.foreground#A8A398
sideBarTitle.foreground#E8E4D9
statusBar.background#1A1917
statusBar.border#38362F
statusBar.debuggingBackground#E2652E
statusBar.debuggingForeground#1A1917
statusBar.foreground#C7C3B8
statusBar.noFolderBackground#1A1917
statusBarItem.hoverBackground#38362F
statusBarItem.remoteBackground#7FA3AC
statusBarItem.remoteForeground#1A1917
tab.activeBackground#201F1D
tab.activeBorderTop#E2652E
tab.activeForeground#E8E4D9
tab.border#38362F
tab.hoverBackground#201F1D
tab.inactiveBackground#1A1917
tab.inactiveForeground#7A776C
terminal.ansiBlack#57544B
terminal.ansiBlue#7FA3AC
terminal.ansiBrightBlack#7A776C
terminal.ansiBrightBlue#93B7C0
terminal.ansiBrightCyan#7FC2CA
terminal.ansiBrightGreen#A6BB7E
terminal.ansiBrightMagenta#BBA0BB
terminal.ansiBrightRed#E2652E
terminal.ansiBrightWhite#F2EFE6
terminal.ansiBrightYellow#DBAE5C
terminal.ansiCyan#6BAEB6
terminal.ansiGreen#93A66B
terminal.ansiMagenta#A98CA9
terminal.ansiRed#D6603A
terminal.ansiWhite#C7C3B8
terminal.ansiYellow#C99A46
terminal.background#201F1D
terminal.foreground#E8E4D9
titleBar.activeBackground#1A1917
titleBar.activeForeground#E8E4D9
titleBar.border#38362F
titleBar.inactiveBackground#1A1917
titleBar.inactiveForeground#6B6960
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#E8E4D9	—
comment, punctuation.definition.comment	#7A776C	italic
string, string.quoted, string.template	#93A66B	—
constant.numeric, constant.language, constant.character	#C99A46	—
keyword, keyword.control, keyword.operator.new, storage.type.function	#E2652E	—
storage, storage.type, storage.modifier	#E2652E	—
entity.name.function, support.function, meta.function-call	#7FA3AC	—
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class	#7FA3AC	bold
entity.name.tag	#E2652E	—
entity.other.attribute-name	#C99A46	—
variable, variable.other.readwrite, variable.parameter	#E8E4D9	—
variable.other.constant, variable.other.property	#6BAEB6	—
punctuation, meta.brace, punctuation.separator, punctuation.terminator	#A8A398	—
keyword.operator	#A8A398	—
invalid, invalid.illegal	#1A1917	—
markup.heading	#E2652E	bold
markup.bold	#E8E4D9	bold
markup.italic	#E8E4D9	italic
markup.underline.link	#7FA3AC	underline
markup.inserted	#93A66B	—
markup.deleted	#D6603A	—