Ellora - OLED Mood Themes

Name: Ellora - OLED Mood Themes
Author: Dhruv_Singh

Publisher: Dhruv_SinghThemes in package: 12

Mood-based dark themes on true black. Pick how you're coding today.

Open in VS Code GitHub

Color themes

VS Code preview

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

Ellora - OLED Mood Themes — Ellora · Focus

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.activeBorder#55d6f5
activityBar.background#000000
activityBar.border#00000000
activityBar.foreground#c8d0da
activityBar.inactiveForeground#454e5a
activityBarBadge.background#55d6f5
activityBarBadge.foreground#000000
badge.background#55d6f5
badge.foreground#000000
banner.background#0e1214
banner.foreground#c8d0da
banner.iconForeground#55d6f5
breadcrumb.activeSelectionForeground#55d6f5
breadcrumb.background#000000
breadcrumb.focusForeground#c8d0da
breadcrumb.foreground#717b8c
breadcrumbPicker.background#0e1214
button.background#55d6f5
button.foreground#000000
button.hoverBackground#69dbf6
button.secondaryBackground#141a1d
button.secondaryForeground#c8d0da
button.secondaryHoverBackground#22282b
chat.requestBorder#ffffff14
checkbox.background#0e1214
checkbox.border#ffffff14
checkbox.foreground#55d6f5
commandCenter.activeBackground#ffffff0a
commandCenter.background#000000
commandCenter.border#ffffff14
commandCenter.foreground#717b8c
debugConsole.errorForeground#ff8095
debugConsole.infoForeground#5fd6f5
debugConsole.warningForeground#e5c078
debugIcon.breakpointForeground#ff8095
debugIcon.pauseForeground#e5c078
debugIcon.restartForeground#7ed4a6
debugIcon.startForeground#7ed4a6
debugIcon.stopForeground#ff8095
debugToolBar.background#0e1214
debugToolBar.border#ffffff14
descriptionForeground#717b8c
diffEditor.border#ffffff14
diffEditor.diagonalFill#ffffff0a
diffEditor.insertedLineBackground#7ed4a614
diffEditor.insertedTextBackground#7ed4a624
diffEditor.removedLineBackground#ff809514
diffEditor.removedTextBackground#ff809524
diffEditorGutter.insertedLineBackground#7ed4a61f
diffEditorGutter.removedLineBackground#ff80951f
disabledForeground#454e5a
dropdown.background#0e1214
dropdown.border#ffffff14
dropdown.foreground#c8d0da
dropdown.listBackground#0e1214
editor.background#000000
editor.findMatchBackground#e8c47a4d
editor.findMatchBorder#e8c47a
editor.findMatchHighlightBackground#e8c47a29
editor.findRangeHighlightBackground#e8c47a0f
editor.focusedStackFrameHighlightBackground#7ed4a61f
editor.foldBackground#55d6f50d
editor.foreground#c8d0da
editor.hoverHighlightBackground#55d6f514
editor.inactiveSelectionBackground#55d6f51f
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#55d6f50f
editor.selectionBackground#55d6f538
editor.selectionHighlightBackground#55d6f51a
editor.selectionHighlightBorder#55d6f540
editor.stackFrameHighlightBackground#e5c0781f
editor.wordHighlightBackground#55d6f51a
editor.wordHighlightBorder#55d6f533
editor.wordHighlightStrongBackground#55d6f524
editorBracketHighlight.foreground1#6cc4dd
editorBracketHighlight.foreground2#8f9cab
editorBracketHighlight.foreground3#b4bdcb
editorBracketHighlight.unexpectedBracket.foreground#ff8095
editorBracketMatch.background#55d6f51f
editorBracketMatch.border#55d6f566
editorCodeLens.foreground#454e5a
editorCursor.background#000000
editorCursor.foreground#d0f4ff
editorError.foreground#ff8095
editorGroup.border#ffffff14
editorGroup.dropBackground#55d6f51a
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#7ed4a6
editorGutter.background#000000
editorGutter.deletedBackground#e06a80
editorGutter.modifiedBackground#5fd6f5
editorHint.foreground#717b8c
editorHoverWidget.background#0e1214
editorHoverWidget.border#ffffff14
editorHoverWidget.foreground#97a2b0
editorIndentGuide.activeBackground1#ffffff29
editorIndentGuide.background1#ffffff0f
editorInfo.foreground#5fd6f5
editorInlayHint.background#00000000
editorInlayHint.foreground#454e5a
editorInlayHint.parameterForeground#454e5a
editorInlayHint.typeForeground#454e5a
editorLightBulb.foreground#e5c078
editorLineNumber.activeForeground#97a2b0
editorLineNumber.foreground#454e5a
editorLink.activeForeground#55d6f5
editorOverviewRuler.addedForeground#7ed4a699
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#e06a8099
editorOverviewRuler.errorForeground#ff8095
editorOverviewRuler.findMatchForeground#e8c47a99
editorOverviewRuler.infoForeground#5fd6f5
editorOverviewRuler.modifiedForeground#5fd6f599
editorOverviewRuler.warningForeground#e5c078
editorRuler.foreground#ffffff0f
editorStickyScroll.background#000000
editorStickyScroll.shadow#00000000
editorStickyScrollHover.background#0e1214
editorSuggestWidget.background#0e1214
editorSuggestWidget.border#ffffff14
editorSuggestWidget.focusHighlightForeground#55d6f5
editorSuggestWidget.foreground#97a2b0
editorSuggestWidget.highlightForeground#55d6f5
editorSuggestWidget.selectedBackground#55d6f52e
editorSuggestWidget.selectedForeground#c8d0da
editorUnicodeHighlight.border#e5c078
editorWarning.foreground#e5c078
editorWhitespace.foreground#ffffff0d
editorWidget.background#0e1214
editorWidget.border#ffffff14
editorWidget.foreground#c8d0da
errorForeground#ff8095
extensionBadge.remoteBackground#55d6f5
extensionBadge.remoteForeground#000000
extensionButton.prominentBackground#55d6f5
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#69dbf6
extensionIcon.starForeground#e5c078
focusBorder#55d6f5
foreground#97a2b0
gitDecoration.addedResourceForeground#7ed4a6
gitDecoration.conflictingResourceForeground#e5c078
gitDecoration.deletedResourceForeground#e06a80
gitDecoration.ignoredResourceForeground#454e5a
gitDecoration.modifiedResourceForeground#5fd6f5
gitDecoration.renamedResourceForeground#5fd6f5
gitDecoration.stageDeletedResourceForeground#e06a80
gitDecoration.stageModifiedResourceForeground#5fd6f5
gitDecoration.submoduleResourceForeground#717b8c
gitDecoration.untrackedResourceForeground#a9c4c9
icon.foreground#97a2b0
input.background#0e1214
input.border#ffffff14
input.foreground#c8d0da
input.placeholderForeground#454e5a
inputOption.activeBackground#55d6f533
inputOption.activeBorder#55d6f5
inputOption.activeForeground#c8d0da
inputValidation.errorBackground#0e1214
inputValidation.errorBorder#ff8095
inputValidation.errorForeground#c8d0da
inputValidation.infoBackground#0e1214
inputValidation.infoBorder#5fd6f5
inputValidation.infoForeground#c8d0da
inputValidation.warningBackground#0e1214
inputValidation.warningBorder#e5c078
inputValidation.warningForeground#c8d0da
keybindingLabel.background#ffffff0f
keybindingLabel.border#ffffff14
keybindingLabel.bottomBorder#ffffff14
keybindingLabel.foreground#97a2b0
list.activeSelectionBackground#55d6f529
list.activeSelectionForeground#c8d0da
list.deemphasizedForeground#454e5a
list.dropBackground#55d6f51a
list.errorForeground#ff8095
list.focusBackground#55d6f529
list.focusForeground#c8d0da
list.focusHighlightForeground#55d6f5
list.highlightForeground#55d6f5
list.hoverBackground#ffffff0a
list.hoverForeground#c8d0da
list.inactiveSelectionBackground#ffffff0d
list.inactiveSelectionForeground#97a2b0
list.warningForeground#e5c078
menu.background#0e1214
menu.border#ffffff14
menu.foreground#97a2b0
menu.selectionBackground#55d6f52e
menu.selectionForeground#c8d0da
menu.separatorBackground#ffffff14
menubar.selectionBackground#ffffff0f
merge.commonContentBackground#ffffff0d
merge.commonHeaderBackground#ffffff1a
merge.currentContentBackground#7ed4a61a
merge.currentHeaderBackground#7ed4a640
merge.incomingContentBackground#5fd6f51a
merge.incomingHeaderBackground#5fd6f540
minimap.background#000000
minimap.errorHighlight#ff809599
minimap.findMatchHighlight#e8c47a99
minimap.selectionHighlight#55d6f566
minimap.warningHighlight#e5c07899
minimapGutter.addedBackground#7ed4a6
minimapGutter.deletedBackground#e06a80
minimapGutter.modifiedBackground#5fd6f5
minimapSlider.activeBackground#55d6f53d
minimapSlider.background#55d6f51a
minimapSlider.hoverBackground#55d6f529
notificationCenterHeader.background#0e1214
notificationCenterHeader.foreground#97a2b0
notificationLink.foreground#55d6f5
notifications.background#0e1214
notifications.border#ffffff14
notifications.foreground#97a2b0
notificationsErrorIcon.foreground#ff8095
notificationsInfoIcon.foreground#5fd6f5
notificationsWarningIcon.foreground#e5c078
notificationToast.border#ffffff14
panel.background#000000
panel.border#ffffff14
panelTitle.activeBorder#55d6f5
panelTitle.activeForeground#c8d0da
panelTitle.inactiveForeground#717b8c
peekView.border#55d6f580
peekViewEditor.background#0e1214
peekViewEditor.matchHighlightBackground#e8c47a33
peekViewResult.background#0e1214
peekViewResult.fileForeground#c8d0da
peekViewResult.lineForeground#717b8c
peekViewResult.matchHighlightBackground#e8c47a33
peekViewResult.selectionBackground#55d6f52e
peekViewResult.selectionForeground#c8d0da
peekViewTitle.background#0e1214
peekViewTitleDescription.foreground#717b8c
peekViewTitleLabel.foreground#c8d0da
pickerGroup.border#ffffff14
pickerGroup.foreground#55d6f5
problemsErrorIcon.foreground#ff8095
problemsInfoIcon.foreground#5fd6f5
problemsWarningIcon.foreground#e5c078
progressBar.background#55d6f5
quickInput.background#0e1214
quickInput.foreground#97a2b0
quickInputList.focusBackground#55d6f52e
quickInputList.focusForeground#c8d0da
quickInputTitle.background#0e1214
sash.hoverBorder#55d6f5
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffffff24
scrollbarSlider.background#ffffff0f
scrollbarSlider.hoverBackground#ffffff1a
selection.background#55d6f538
settings.focusedRowBackground#ffffff08
settings.headerForeground#c8d0da
settings.modifiedItemIndicator#55d6f5
settings.rowHoverBackground#ffffff05
sideBar.background#000000
sideBar.border#00000000
sideBar.foreground#97a2b0
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#717b8c
sideBarTitle.foreground#97a2b0
statusBar.background#000000
statusBar.border#ffffff0d
statusBar.debuggingBackground#e5c07826
statusBar.debuggingForeground#c8d0da
statusBar.foreground#717b8c
statusBar.noFolderBackground#000000
statusBarItem.hoverBackground#ffffff0f
statusBarItem.prominentBackground#55d6f533
statusBarItem.remoteBackground#55d6f5
statusBarItem.remoteForeground#000000
symbolIcon.classForeground#b6c1cf
symbolIcon.constantForeground#c3ccd9
symbolIcon.enumeratorForeground#c3ccd9
symbolIcon.functionForeground#5fd6f5
symbolIcon.interfaceForeground#b6c1cf
symbolIcon.keywordForeground#dce4ee
symbolIcon.methodForeground#5fd6f5
symbolIcon.propertyForeground#8b98a9
symbolIcon.stringForeground#a9c4c9
symbolIcon.variableForeground#c8d0da
tab.activeBackground#000000
tab.activeBorder#00000000
tab.activeBorderTop#55d6f5
tab.activeForeground#c8d0da
tab.activeModifiedBorder#55d6f5
tab.border#00000000
tab.hoverBackground#ffffff08
tab.inactiveBackground#000000
tab.inactiveForeground#717b8c
tab.inactiveModifiedBorder#55d6f566
tab.unfocusedActiveForeground#97a2b0
tab.unfocusedInactiveForeground#454e5a
terminal.ansiBlack#12161a
terminal.ansiBlue#5fd6f5
terminal.ansiBrightBlack#454e5a
terminal.ansiBrightBlue#a0e4f7
terminal.ansiBrightCyan#aee6f0
terminal.ansiBrightGreen#9ce0bc
terminal.ansiBrightMagenta#ccd6e2
terminal.ansiBrightRed#ffa0b0
terminal.ansiBrightWhite#e8edf2
terminal.ansiBrightYellow#f0d49a
terminal.ansiCyan#8fd9e8
terminal.ansiGreen#7ed4a6
terminal.ansiMagenta#b6c1cf
terminal.ansiRed#ff8095
terminal.ansiWhite#c8d0da
terminal.ansiYellow#e5c078
terminal.background#000000
terminal.border#ffffff14
terminal.findMatchBackground#e8c47a4d
terminal.findMatchHighlightBackground#e8c47a29
terminal.foreground#c8d0da
terminal.inactiveSelectionBackground#55d6f51f
terminal.selectionBackground#55d6f538
terminal.tab.activeBorder#55d6f5
terminalCursor.background#000000
terminalCursor.foreground#d0f4ff
textBlockQuote.background#ffffff08
textBlockQuote.border#55d6f566
textCodeBlock.background#0e1214
textLink.activeForeground#77def7
textLink.foreground#55d6f5
textPreformat.foreground#a9c4c9
textSeparator.foreground#ffffff14
titleBar.activeBackground#000000
titleBar.activeForeground#97a2b0
titleBar.border#00000000
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#454e5a
toolbar.activeBackground#ffffff17
toolbar.hoverBackground#ffffff0f
tree.inactiveIndentGuidesStroke#ffffff0a
tree.indentGuidesStroke#ffffff14
walkThrough.embeddedEditorBackground#000000
welcomePage.background#000000
welcomePage.progress.foreground#55d6f5
welcomePage.tileBackground#0e1214
welcomePage.tileHoverBackground#141a1d
widget.border#ffffff14
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#717b8c	italic
comment keyword, comment storage.type, punctuation.definition.block.tag	#8f99a7	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, storage, storage.type, storage.modifier, variable.language.this, variable.language.self, variable.language.super	#dce4ee	bold
entity.name.function, support.function, meta.function-call entity.name.function, meta.method-call entity.name.function, meta.decorator entity.name.function, entity.name.function.decorator, punctuation.decorator	#5fd6f5	—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class, entity.name.tag, meta.type.annotation entity.name.type	#b6c1cf	—
string, punctuation.definition.string, string.template	#a9c4c9	—
string.regexp, constant.character.escape, constant.other.character-class	#b3c7cf	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#dce4ee	—
constant.numeric, constant.language, constant.other, variable.other.enummember, keyword.other.unit, support.constant	#c3ccd9	—
variable.other.property, variable.other.object.property, support.type.property-name, entity.other.attribute-name, meta.object-literal.key, support.type.vendored.property-name	#8b98a9	—
variable.parameter, meta.function.parameters variable	#aab4c2	—
variable, variable.other.readwrite, meta.definition.variable, variable.other.constant, support.variable	#c8d0da	—
keyword.operator, punctuation, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#97a2b0	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#b6c1cf	—
support.constant.property-value, constant.numeric.css, keyword.other.unit.css	#c3ccd9	—
support.type.property-name.json	#8b98a9	—
entity.name.tag.yaml	#8b98a9	—
markup.heading, markup.heading entity.name, punctuation.definition.heading	#55d6f5	bold
markup.bold	#c8d0da	bold
markup.italic	#c8d0da	italic
markup.underline.link, string.other.link, constant.other.reference.link	#5fd6f5	underline
markup.inline.raw, markup.fenced_code.block, markup.raw.block	#a9c4c9	—
markup.quote	#717b8c	italic
punctuation.definition.list.begin.markdown	#55d6f5	—
markup.inserted	#7ed4a6	—
markup.deleted	#ff8095	—
markup.changed	#5fd6f5	—
meta.diff.header, meta.diff.range	#55d6f5	—
invalid.illegal	#ff8095	—
invalid.deprecated	#717b8c	strikethrough

VS Code preview

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

Ellora - OLED Mood Themes — Ellora · Frost

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#3b4252
activityBar.activeBorder#88c0d0
activityBar.background#2e3440
activityBar.dropBackground#3b4252
activityBar.foreground#d8dee9
activityBarBadge.background#88c0d0
activityBarBadge.foreground#2e3440
badge.background#88c0d0
badge.foreground#2e3440
button.background#88c0d0ee
button.foreground#2e3440
button.hoverBackground#88c0d0
button.secondaryBackground#434c5e
button.secondaryForeground#d8dee9
button.secondaryHoverBackground#4c566a
charts.blue#81a1c1
charts.foreground#d8dee9
charts.green#a3be8c
charts.lines#88c0d0
charts.orange#d08770
charts.purple#b48ead
charts.red#bf616a
charts.yellow#ebcb8b
debugConsole.errorForeground#bf616a
debugConsole.infoForeground#88c0d0
debugConsole.sourceForeground#8290ab
debugConsole.warningForeground#ebcb8b
debugConsoleInputIcon.foreground#81a1c1
debugExceptionWidget.background#4c566a
debugExceptionWidget.border#2e3440
debugToolBar.background#3b4252
descriptionForeground#d8dee9e6
diffEditor.insertedTextBackground#81a1c133
diffEditor.removedTextBackground#bf616a4d
dropdown.background#3b4252
dropdown.border#3b4252
dropdown.foreground#d8dee9
editor.background#2e3440
editor.findMatchBackground#88c0d066
editor.findMatchBorder#88c0d0
editor.findMatchHighlightBackground#88c0d033
editor.findRangeHighlightBackground#88c0d033
editor.focusedStackFrameHighlightBackground#5e81ac
editor.foreground#d8dee9
editor.hoverHighlightBackground#3b4252
editor.inactiveSelectionBackground#434c5ecc
editor.inlineValuesBackground#4c566a
editor.inlineValuesForeground#eceff4
editor.lineHighlightBackground#3b4252
editor.lineHighlightBorder#3b4252
editor.rangeHighlightBackground#434c5e52
editor.selectionBackground#434c5ecc
editor.selectionHighlightBackground#434c5ecc
editor.stackFrameHighlightBackground#5e81ac
editor.wordHighlightBackground#81a1c166
editor.wordHighlightStrongBackground#81a1c199
editorBracketHighlight.foreground1#8fbcbb
editorBracketHighlight.foreground2#88c0d0
editorBracketHighlight.foreground3#81a1c1
editorBracketHighlight.foreground4#5e81ac
editorBracketHighlight.foreground5#8fbcbb
editorBracketHighlight.foreground6#88c0d0
editorBracketHighlight.unexpectedBracket.foreground#bf616a
editorBracketMatch.background#2e344000
editorBracketMatch.border#88c0d0
editorCodeLens.foreground#4c566a
editorCursor.foreground#d8dee9
editorError.border#bf616a00
editorError.foreground#bf616a
editorGroup.border#3b425201
editorGroup.dropBackground#3b425299
editorGroupHeader.border#3b425200
editorGroupHeader.noTabsBackground#2e3440
editorGroupHeader.tabsBackground#2e3440
editorGroupHeader.tabsBorder#3b425200
editorGutter.addedBackground#a3be8c
editorGutter.background#2e3440
editorGutter.deletedBackground#bf616a
editorGutter.modifiedBackground#ebcb8b
editorHint.border#ebcb8b00
editorHint.foreground#ebcb8b
editorHoverWidget.background#3b4252
editorHoverWidget.border#3b4252
editorIndentGuide.activeBackground1#4c566a
editorIndentGuide.background1#434c5eb3
editorInlayHint.background#434c5e
editorInlayHint.foreground#d8dee9
editorLineNumber.activeForeground#d8dee9
editorLineNumber.foreground#4c566a
editorLink.activeForeground#88c0d0
editorMarkerNavigation.background#5e81acc0
editorMarkerNavigationError.background#bf616ac0
editorMarkerNavigationWarning.background#ebcb8bc0
editorOverviewRuler.addedForeground#a3be8c
editorOverviewRuler.border#3b4252
editorOverviewRuler.currentContentForeground#3b4252
editorOverviewRuler.deletedForeground#bf616a
editorOverviewRuler.errorForeground#bf616a
editorOverviewRuler.findMatchForeground#88c0d066
editorOverviewRuler.incomingContentForeground#3b4252
editorOverviewRuler.infoForeground#81a1c1
editorOverviewRuler.modifiedForeground#ebcb8b
editorOverviewRuler.rangeHighlightForeground#88c0d066
editorOverviewRuler.selectionHighlightForeground#88c0d066
editorOverviewRuler.warningForeground#ebcb8b
editorOverviewRuler.wordHighlightForeground#88c0d066
editorOverviewRuler.wordHighlightStrongForeground#88c0d066
editorRuler.foreground#434c5e
editorSuggestWidget.background#2e3440
editorSuggestWidget.border#3b4252
editorSuggestWidget.focusHighlightForeground#88c0d0
editorSuggestWidget.foreground#d8dee9
editorSuggestWidget.highlightForeground#88c0d0
editorSuggestWidget.selectedBackground#434c5e
editorSuggestWidget.selectedForeground#d8dee9
editorWarning.border#ebcb8b00
editorWarning.foreground#ebcb8b
editorWhitespace.foreground#4c566ab3
editorWidget.background#2e3440
editorWidget.border#3b4252
errorForeground#bf616a
extensionButton.prominentBackground#434c5e
extensionButton.prominentForeground#d8dee9
extensionButton.prominentHoverBackground#4c566a
focusBorder#3b4252
foreground#d8dee9
gitDecoration.conflictingResourceForeground#5e81ac
gitDecoration.deletedResourceForeground#bf616a
gitDecoration.ignoredResourceForeground#d8dee966
gitDecoration.modifiedResourceForeground#ebcb8b
gitDecoration.stageDeletedResourceForeground#bf616a
gitDecoration.stageModifiedResourceForeground#ebcb8b
gitDecoration.submoduleResourceForeground#8fbcbb
gitDecoration.untrackedResourceForeground#a3be8c
input.background#3b4252
input.border#3b4252
input.foreground#d8dee9
input.placeholderForeground#d8dee999
inputOption.activeBackground#5e81ac
inputOption.activeBorder#5e81ac
inputOption.activeForeground#eceff4
inputValidation.errorBackground#bf616a
inputValidation.errorBorder#bf616a
inputValidation.infoBackground#81a1c1
inputValidation.infoBorder#81a1c1
inputValidation.warningBackground#d08770
inputValidation.warningBorder#d08770
keybindingLabel.background#4c566a
keybindingLabel.border#4c566a
keybindingLabel.bottomBorder#4c566a
keybindingLabel.foreground#d8dee9
list.activeSelectionBackground#88c0d0
list.activeSelectionForeground#2e3440
list.dropBackground#88c0d099
list.errorForeground#bf616a
list.focusBackground#88c0d099
list.focusForeground#d8dee9
list.focusHighlightForeground#eceff4
list.highlightForeground#88c0d0
list.hoverBackground#3b4252
list.hoverForeground#eceff4
list.inactiveFocusBackground#434c5ecc
list.inactiveSelectionBackground#434c5e
list.inactiveSelectionForeground#d8dee9
list.warningForeground#ebcb8b
menu.background#3b4252
menu.foreground#d8dee9
menu.selectionBackground#434c5e
menu.selectionForeground#88c0d0
menu.separatorBackground#4c566a
merge.border#3b425200
merge.currentContentBackground#81a1c14d
merge.currentHeaderBackground#81a1c166
merge.incomingContentBackground#8fbcbb4d
merge.incomingHeaderBackground#8fbcbb66
minimap.background#2e3440
minimap.errorHighlight#bf616acc
minimap.findMatchHighlight#88c0d0
minimap.selectionHighlight#88c0d0cc
minimap.warningHighlight#ebcb8bcc
minimapGutter.addedBackground#a3be8c
minimapGutter.deletedBackground#bf616a
minimapGutter.modifiedBackground#ebcb8b
minimapSlider.activeBackground#434c5eaa
minimapSlider.background#434c5e99
minimapSlider.hoverBackground#434c5eaa
notificationCenter.border#3b425200
notificationCenterHeader.background#2e3440
notificationCenterHeader.foreground#88c0d0
notificationLink.foreground#88c0d0
notifications.background#3b4252
notifications.border#2e3440
notifications.foreground#d8dee9
notificationToast.border#3b425200
panel.background#2e3440
panel.border#3b4252
panelTitle.activeBorder#88c0d000
panelTitle.activeForeground#88c0d0
panelTitle.inactiveForeground#d8dee9
peekView.border#4c566a
peekViewEditor.background#2e3440
peekViewEditor.matchHighlightBackground#88c0d04d
peekViewEditorGutter.background#2e3440
peekViewResult.background#2e3440
peekViewResult.fileForeground#88c0d0
peekViewResult.lineForeground#d8dee966
peekViewResult.matchHighlightBackground#88c0d0cc
peekViewResult.selectionBackground#434c5e
peekViewResult.selectionForeground#d8dee9
peekViewTitle.background#3b4252
peekViewTitleDescription.foreground#d8dee9
peekViewTitleLabel.foreground#88c0d0
pickerGroup.border#3b4252
pickerGroup.foreground#88c0d0
progressBar.background#88c0d0
quickInput.background#2e3440
quickInput.foreground#d8dee9
quickInputList.focusBackground#88c0d0
quickInputList.focusForeground#2e3440
sash.hoverBorder#88c0d0
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#434c5eaa
scrollbarSlider.background#434c5e99
scrollbarSlider.hoverBackground#434c5eaa
selection.background#88c0d099
sideBar.background#2e3440
sideBar.border#3b4252
sideBar.foreground#d8dee9
sideBarSectionHeader.background#3b4252
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#3b4252
statusBar.border#3b425200
statusBar.debuggingBackground#5e81ac
statusBar.debuggingForeground#d8dee9
statusBar.foreground#d8dee9
statusBar.noFolderBackground#3b4252
statusBar.noFolderForeground#d8dee9
statusBarItem.activeBackground#4c566a
statusBarItem.errorBackground#3b4252
statusBarItem.errorForeground#bf616a
statusBarItem.hoverBackground#434c5e
statusBarItem.prominentBackground#3b4252
statusBarItem.prominentHoverBackground#434c5e
statusBarItem.warningBackground#ebcb8b
statusBarItem.warningForeground#2e3440
tab.activeBackground#3b4252
tab.activeBorder#88c0d000
tab.activeBorderTop#88c0d000
tab.activeForeground#d8dee9
tab.border#3b425200
tab.hoverBackground#3b4252cc
tab.hoverBorder#88c0d000
tab.inactiveBackground#2e3440
tab.inactiveForeground#d8dee966
tab.lastPinnedBorder#4c566a
tab.unfocusedActiveBorder#88c0d000
tab.unfocusedActiveBorderTop#88c0d000
tab.unfocusedActiveForeground#d8dee999
tab.unfocusedHoverBackground#3b4252b3
tab.unfocusedHoverBorder#88c0d000
tab.unfocusedInactiveForeground#d8dee966
terminal.ansiBlack#3b4252
terminal.ansiBlue#81a1c1
terminal.ansiBrightBlack#4c566a
terminal.ansiBrightBlue#81a1c1
terminal.ansiBrightCyan#8fbcbb
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eceff4
terminal.ansiBrightYellow#ebcb8b
terminal.ansiCyan#88c0d0
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#ebcb8b
terminal.background#2e3440
terminal.foreground#d8dee9
terminal.tab.activeBorder#88c0d0
terminalCursor.foreground#d8dee9
textBlockQuote.background#3b4252
textBlockQuote.border#81a1c1
textCodeBlock.background#4c566a
textLink.activeForeground#88c0d0
textLink.foreground#88c0d0
textPreformat.foreground#8fbcbb
textSeparator.foreground#eceff4
titleBar.activeBackground#2e3440
titleBar.activeForeground#d8dee9
titleBar.border#2e344000
titleBar.inactiveBackground#2e3440
titleBar.inactiveForeground#d8dee966
tree.indentGuidesStroke#616e88
walkThrough.embeddedEditorBackground#2e3440
welcomePage.buttonBackground#434c5e
welcomePage.buttonHoverBackground#4c566a
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d8dee9ff	—
emphasis	—	italic
strong	—	bold
comment, punctuation.definition.comment	#8290ab	italic
constant.character, constant.character.escape, constant.regexp	#EBCB8B	—
constant.language	#81A1C1	—
constant.numeric	#B48EAD	—
entity.name.class, entity.name.type.class, entity.name.type, support.class, support.type, support.type.exception	#8FBCBB	—
entity.name.function, support.function	#88C0D0	—
entity.name.tag	#81A1C1	—
entity.other.attribute-name	#8FBCBB	—
entity.other.inherited-class	#8FBCBB	bold
invalid.deprecated	#D8DEE9	—
invalid.illegal	#D8DEE9	—
keyword, keyword.operator, keyword.other.new, storage, variable.language	#81A1C1	—
markup.bold	—	bold
markup.changed	#EBCB8B	—
markup.deleted	#BF616A	—
markup.inserted	#A3BE8C	—
markup.heading, text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title	#88C0D0	—
text.html.markdown markup.italic	—	italic
text.html.markdown markup.underline.link	—	underline
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition	#8FBCBB	—
text.html.markdown markup.quote	#8290ab	—
text.html.markdown punctuation.definition.heading, text.html.markdown beginning.punctuation.definition.list, text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string	#81A1C1	—
meta.preprocessor	#5E81AC	—
punctuation, punctuation.section, punctuation.definition.parameters	#ECEFF4	—
punctuation.definition.tag, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.terminator, punctuation.definition.variable	#81A1C1	—
string	#A3BE8C	—
string.regexp	#EBCB8B	—
support.constant, support.function.construct	#81A1C1	—
variable.other, variable.parameter	#D8DEE9	—
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function, source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function, source.python entity.name.function.decorator, source.python meta.function.decorator support.type	#D08770	—
source.js meta.object-literal.key, source.ts meta.object-literal.key, source.tsx meta.object-literal.key	#D8DEE9	—
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function, source.js meta.object-literal.key entity.name.function	#88C0D0	—
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class, source.js variable.other.readwrite.alias, source.js storage.type.class.jsdoc	#8FBCBB	—
source.js support.type.primitive, source.ts support.type.primitive, source.tsx support.type.primitive	#81A1C1	—
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression, source.ts string.template punctuation.definition.template-expression, source.tsx string.template punctuation.definition.template-expression	#81A1C1	—
source.python meta.function-call.generic, source.python support.type	#88C0D0	—
source.python meta.function.parameters variable.parameter.function.language.special.self	#81A1C1	—
source.css support.type.property-name	#D8DEE9	—
source.css meta.property-value	#88C0D0	—
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword	#D08770	—
source.css constant.other.color.rgb-value	#B48EAD	—
source.yaml entity.name.tag	#8FBCBB	—
source.diff meta.diff.range.context, source.diff meta.diff.header.from-file, source.diff punctuation.definition.from-file, source.diff punctuation.definition.range	#8FBCBB	—
source.diff punctuation.definition.separator	#81A1C1	—

VS Code preview

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

Ellora - OLED Mood Themes — Ellora · Galaxy

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.activeBorder#00e8c6
activityBar.background#20232B
activityBar.border#1B1D23
activityBar.dropBackground#3a404e
activityBar.foreground#BAAFC0
activityBar.inactiveForeground#5c5966
activityBarBadge.background#00b0ff
activityBarBadge.foreground#20232B
badge.background#00b0ff
badge.foreground#20232B
breadcrumb.activeSelectionForeground#00e8c6
breadcrumb.focusForeground#D5CED9
breadcrumb.foreground#8a8d99
breadcrumbPicker.background#20232A
button.background#00e8c5cc
button.foreground#20232B
button.hoverBackground#07d4b6cc
button.secondaryBackground#3a404e
button.secondaryForeground#D5CED9
button.secondaryHoverBackground#495061
debugExceptionWidget.background#FF9F2E60
debugExceptionWidget.border#FF9F2E60
debugToolBar.background#20232A
descriptionForeground#a4a8b8
diffEditor.insertedTextBackground#29BF1220
diffEditor.removedTextBackground#F21B3F20
dropdown.background#2b303b
dropdown.border#363c49
dropdown.foreground#D5CED9
editor.background#262A33
editor.findMatchBackground#f39d1256
editor.findMatchBorder#f39d12b6
editor.findMatchHighlightBackground#59b8b377
editor.foreground#D5CED9
editor.hoverHighlightBackground#373941
editor.inactiveSelectionBackground#3D435280
editor.lineHighlightBackground#2e323d
editor.lineHighlightBorder#2e323d
editor.rangeHighlightBackground#372F3C
editor.selectionBackground#3D4352
editor.selectionHighlightBackground#4F435580
editor.wordHighlightBackground#4F4355
editor.wordHighlightStrongBackground#db45a280
editorBracketHighlight.foreground1#00e8c6
editorBracketHighlight.foreground2#FFE66D
editorBracketHighlight.foreground3#c74ded
editorBracketHighlight.unexpectedBracket.foreground#FC644D
editorBracketMatch.background#746f7740
editorBracketMatch.border#746f77
editorCodeLens.foreground#746f77
editorCursor.foreground#FFFFFF
editorError.foreground#FC644D
editorGroup.dropBackground#495061d7
editorGroupHeader.tabsBackground#23262E
editorGutter.addedBackground#9BC53DBB
editorGutter.deletedBackground#FC644DBB
editorGutter.modifiedBackground#5BC0EBBB
editorHoverWidget.background#373941
editorHoverWidget.border#00e8c5cc
editorIndentGuide.activeBackground1#585C66
editorIndentGuide.background1#333844
editorInlayHint.background#2b303b
editorInlayHint.foreground#8a8d99
editorLineNumber.activeForeground#a4a8b8
editorLineNumber.foreground#746f77
editorLink.activeForeground#3B79C7
editorOverviewRuler.border#1B1D23
editorRuler.foreground#4F4355
editorSuggestWidget.background#20232A
editorSuggestWidget.border#372F3C
editorSuggestWidget.foreground#D5CED9
editorSuggestWidget.highlightForeground#00e8c6
editorSuggestWidget.selectedBackground#373941
editorWarning.foreground#FF9F2E
editorWhitespace.foreground#333844
editorWidget.background#20232A
editorWidget.border#372F3C
errorForeground#FC644D
extensionButton.prominentBackground#07d4b6cc
extensionButton.prominentForeground#20232B
extensionButton.prominentHoverBackground#07d4b5b0
focusBorder#746f77
foreground#D5CED9
gitDecoration.conflictingResourceForeground#C668BA
gitDecoration.deletedResourceForeground#FC644D
gitDecoration.ignoredResourceForeground#555555
gitDecoration.modifiedResourceForeground#5BC0EB
gitDecoration.untrackedResourceForeground#96E072
input.background#2b303b
input.foreground#D5CED9
input.placeholderForeground#746f77
inputOption.activeBorder#C668BA
inputValidation.errorBackground#D65343
inputValidation.errorBorder#D65343
inputValidation.infoBackground#3A6395
inputValidation.infoBorder#3A6395
inputValidation.warningBackground#DE9237
inputValidation.warningBorder#DE9237
list.activeSelectionBackground#23262E
list.activeSelectionForeground#00e8c6
list.dropBackground#3a404e
list.focusBackground#282b35
list.focusForeground#eeeeee
list.highlightForeground#00e8c6
list.hoverBackground#23262E
list.hoverForeground#eeeeee
list.inactiveSelectionBackground#23262E
list.inactiveSelectionForeground#00e8c6
menu.background#2b303b
menu.foreground#D5CED9
menu.selectionBackground#373941
menu.selectionForeground#00e8c6
menu.separatorBackground#3a404e
merge.currentContentBackground#F9267240
merge.currentHeaderBackground#F92672
merge.incomingContentBackground#3B79C740
merge.incomingHeaderBackground#3B79C7BB
minimap.background#262A33
minimapGutter.addedBackground#9BC53D
minimapGutter.deletedBackground#FC644D
minimapGutter.modifiedBackground#5BC0EB
minimapSlider.activeBackground#60698060
minimapSlider.background#58607460
minimapSlider.hoverBackground#60698060
notificationCenterHeader.background#2d313b
notificationLink.foreground#00e8c6
notifications.background#2d313b
notifications.border#373941
notifications.foreground#D5CED9
notificationsErrorIcon.foreground#FC644D
notificationsInfoIcon.foreground#00b0ff
notificationsWarningIcon.foreground#FF9F2E
panel.background#23262E
panel.border#1B1D23
panelTitle.activeBorder#00e8c6
panelTitle.activeForeground#D5CED9
panelTitle.inactiveForeground#746f77
peekView.border#23262E
peekViewEditor.background#1A1C22
peekViewEditor.matchHighlightBackground#FF9F2E60
peekViewResult.background#1A1C22
peekViewResult.matchHighlightBackground#FF9F2E60
peekViewResult.selectionBackground#23262E
peekViewTitle.background#1A1C22
peekViewTitleDescription.foreground#746f77
pickerGroup.border#4F4355
pickerGroup.foreground#00e8c6
progressBar.background#C668BA
quickInput.background#20232A
quickInput.foreground#D5CED9
quickInputList.focusBackground#373941
quickInputList.focusForeground#00e8c6
scrollbar.shadow#23262E
scrollbarSlider.activeBackground#3A3F4CCC
scrollbarSlider.background#3A3F4C77
scrollbarSlider.hoverBackground#3A3F4CAA
selection.background#746f77
sideBar.background#23262E
sideBar.border#1B1D23
sideBar.foreground#999999
sideBarSectionHeader.background#23262E
sideBarTitle.foreground#00e8c6
statusBar.background#23262E
statusBar.debuggingBackground#FC644D
statusBar.debuggingForeground#20232B
statusBar.foreground#a4a8b8
statusBar.noFolderBackground#23262E
statusBarItem.activeBackground#00e8c5cc
statusBarItem.hoverBackground#07d4b5b0
statusBarItem.prominentBackground#07d4b5b0
statusBarItem.prominentHoverBackground#00e8c5cc
tab.activeBackground#262A33
tab.activeBorder#00e8c6
tab.activeForeground#00e8c6
tab.inactiveBackground#23262E
tab.inactiveForeground#746f77
terminal.ansiBlack#23262E
terminal.ansiBlue#7cb7ff
terminal.ansiBrightBlack#746f77
terminal.ansiBrightBlue#7cb7ff
terminal.ansiBrightCyan#00e8c6
terminal.ansiBrightGreen#96E072
terminal.ansiBrightMagenta#ff00aa
terminal.ansiBrightRed#ee5d43
terminal.ansiBrightWhite#eeeeee
terminal.ansiBrightYellow#FFE66D
terminal.ansiCyan#00e8c6
terminal.ansiGreen#96E072
terminal.ansiMagenta#ff00aa
terminal.ansiRed#ee5d43
terminal.ansiWhite#D5CED9
terminal.ansiYellow#FFE66D
terminal.background#262A33
terminal.foreground#D5CED9
terminalCursor.background#23262E
terminalCursor.foreground#FFE66D
textBlockQuote.background#20232A80
textBlockQuote.border#00e8c680
textCodeBlock.background#20232A
textLink.activeForeground#61ffe0
textLink.foreground#00e8c6
titleBar.activeBackground#23262E
titleBar.activeForeground#D5CED9
titleBar.inactiveBackground#23262E
titleBar.inactiveForeground#746f77
tree.indentGuidesStroke#3a404e
walkThrough.embeddedEditorBackground#23262E
widget.shadow#14151A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#D5CED9	—
comment, markup.quote.markdown, meta.diff, meta.diff.header	#A0A1A7	italic
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, string.unquoted.cmake	#D5CED9	—
variable, support.variable, entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, beginning.punctuation.definition.list.markdown, source.css entity.other.attribute-name.parent-selector, meta.structure.dictionary.json support.type.property-name	#00e8c6	—
markup.bold, constant.numeric, meta.group.regexp, constant.other.php, support.constant.ext.php, constant.other.class.php, support.constant.core.php, fenced_code.block.language, constant.other.caps.python, entity.other.attribute-name, support.type.exception.python, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js	#f39c12	—
markup.list, text.xml string, entity.name.type, support.function, meta.at-rule.extend, entity.name.function, entity.other.inherited-class, entity.other.keyframe-offset.css, text.html.markdown string.quoted, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name.class.jade, source.css entity.other.attribute-name, text.xml punctuation.definition.string	#FFE66D	—
markup.heading, variable.language.this.js, variable.language.special.self.python	#ff00aa	—
punctuation.definition.interpolation, punctuation.section.embedded.end.php, punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.php, punctuation.section.embedded.begin.ruby, punctuation.definition.template-expression, entity.name.tag	#f92672	—
storage, keyword, meta.link, meta.image, markup.italic, source.js support.type, support.type	#c74ded	—
string.regexp, markup.changed	#7cb7ff	—
constant, support.class, keyword.operator, support.constant, text.html.markdown string, source.css support.function, source.php support.function, support.function.magic.python, entity.other.attribute-name.id, markup.deleted	#ee5d43	—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string	#96E072	—
entity.other.inherited-class	—	underline

VS Code preview

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

Ellora - OLED Mood Themes — Ellora · Happy

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.activeBorder#ff0080
activityBar.background#00002c
activityBar.border#00000000
activityBar.foreground#eeffff
activityBar.inactiveForeground#4d5578
activityBarBadge.background#ff0080
activityBarBadge.foreground#000000
badge.background#ff0080
badge.foreground#000000
banner.background#0f0021
banner.foreground#eeffff
banner.iconForeground#ff0080
breadcrumb.activeSelectionForeground#ff0080
breadcrumb.background#00002c
breadcrumb.focusForeground#eeffff
breadcrumb.foreground#7f88b3
breadcrumbPicker.background#0f0021
button.background#ff0080
button.foreground#000000
button.hoverBackground#ff1f8f
button.secondaryBackground#28002b
button.secondaryForeground#eeffff
button.secondaryHoverBackground#350f38
chat.requestBorder#ffffff14
checkbox.background#0f0021
checkbox.border#ffffff14
checkbox.foreground#ff0080
commandCenter.activeBackground#ffffff0a
commandCenter.background#00002c
commandCenter.border#ffffff14
commandCenter.foreground#7f88b3
debugConsole.errorForeground#ff5370
debugConsole.infoForeground#00d9ff
debugConsole.warningForeground#ffa600
debugIcon.breakpointForeground#ff5370
debugIcon.pauseForeground#ffa600
debugIcon.restartForeground#00ff55
debugIcon.startForeground#00ff55
debugIcon.stopForeground#ff5370
debugToolBar.background#0f0021
debugToolBar.border#ffffff14
descriptionForeground#7f88b3
diffEditor.border#ffffff14
diffEditor.diagonalFill#ffffff0a
diffEditor.insertedLineBackground#00ff5514
diffEditor.insertedTextBackground#00ff5524
diffEditor.removedLineBackground#ff537014
diffEditor.removedTextBackground#ff537024
diffEditorGutter.insertedLineBackground#00ff551f
diffEditorGutter.removedLineBackground#ff53701f
disabledForeground#4d5578
dropdown.background#0f0021
dropdown.border#ffffff14
dropdown.foreground#eeffff
dropdown.listBackground#0f0021
editor.background#00002c
editor.findMatchBackground#ffd9004d
editor.findMatchBorder#ffd900
editor.findMatchHighlightBackground#ffd90029
editor.findRangeHighlightBackground#ffd9000f
editor.focusedStackFrameHighlightBackground#00ff551f
editor.foldBackground#ff00800d
editor.foreground#eeffff
editor.hoverHighlightBackground#ff008014
editor.inactiveSelectionBackground#ff00801f
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ff00800f
editor.selectionBackground#ff008038
editor.selectionHighlightBackground#ff00801a
editor.selectionHighlightBorder#ff008040
editor.stackFrameHighlightBackground#ffa6001f
editor.wordHighlightBackground#ff00801a
editor.wordHighlightBorder#ff008033
editor.wordHighlightStrongBackground#ff008024
editorBracketHighlight.foreground1#e13f9e
editorBracketHighlight.foreground2#bd9ee3
editorBracketHighlight.foreground3#e1916d
editorBracketHighlight.unexpectedBracket.foreground#ff5370
editorBracketMatch.background#ff00801f
editorBracketMatch.border#ff008066
editorCodeLens.foreground#4d5578
editorCursor.background#00002c
editorCursor.foreground#00f7ff
editorError.foreground#ff5370
editorGroup.border#ffffff14
editorGroup.dropBackground#ff00801a
editorGroupHeader.noTabsBackground#00002c
editorGroupHeader.tabsBackground#00002c
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00ff55
editorGutter.background#00002c
editorGutter.deletedBackground#ff5370
editorGutter.modifiedBackground#ffd900
editorHint.foreground#7f88b3
editorHoverWidget.background#0f0021
editorHoverWidget.border#ffffff14
editorHoverWidget.foreground#a9b4d6
editorIndentGuide.activeBackground1#ffffff29
editorIndentGuide.background1#ffffff0f
editorInfo.foreground#00d9ff
editorInlayHint.background#00000000
editorInlayHint.foreground#4d5578
editorInlayHint.parameterForeground#4d5578
editorInlayHint.typeForeground#4d5578
editorLightBulb.foreground#ffa600
editorLineNumber.activeForeground#a9b4d6
editorLineNumber.foreground#4d5578
editorLink.activeForeground#ff0080
editorOverviewRuler.addedForeground#00ff5599
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#ff537099
editorOverviewRuler.errorForeground#ff5370
editorOverviewRuler.findMatchForeground#ffd90099
editorOverviewRuler.infoForeground#00d9ff
editorOverviewRuler.modifiedForeground#ffd90099
editorOverviewRuler.warningForeground#ffa600
editorRuler.foreground#ffffff0f
editorStickyScroll.background#00002c
editorStickyScroll.shadow#00000000
editorStickyScrollHover.background#0f0021
editorSuggestWidget.background#0f0021
editorSuggestWidget.border#ffffff14
editorSuggestWidget.focusHighlightForeground#ff0080
editorSuggestWidget.foreground#a9b4d6
editorSuggestWidget.highlightForeground#ff0080
editorSuggestWidget.selectedBackground#ff00802e
editorSuggestWidget.selectedForeground#eeffff
editorUnicodeHighlight.border#ffa600
editorWarning.foreground#ffa600
editorWhitespace.foreground#ffffff0d
editorWidget.background#0f0021
editorWidget.border#ffffff14
editorWidget.foreground#eeffff
errorForeground#ff5370
extensionBadge.remoteBackground#ff0080
extensionBadge.remoteForeground#000000
extensionButton.prominentBackground#ff0080
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#ff1f8f
extensionIcon.starForeground#ffa600
focusBorder#ff0080
foreground#a9b4d6
gitDecoration.addedResourceForeground#00ff55
gitDecoration.conflictingResourceForeground#ff7e34
gitDecoration.deletedResourceForeground#ff5370
gitDecoration.ignoredResourceForeground#4d5578
gitDecoration.modifiedResourceForeground#ffd900
gitDecoration.renamedResourceForeground#ffd900
gitDecoration.stageDeletedResourceForeground#ff5370
gitDecoration.stageModifiedResourceForeground#ffd900
gitDecoration.submoduleResourceForeground#7f88b3
gitDecoration.untrackedResourceForeground#00ffff
icon.foreground#a9b4d6
input.background#0f0021
input.border#ffffff14
input.foreground#eeffff
input.placeholderForeground#4d5578
inputOption.activeBackground#ff008033
inputOption.activeBorder#ff0080
inputOption.activeForeground#eeffff
inputValidation.errorBackground#0f0021
inputValidation.errorBorder#ff5370
inputValidation.errorForeground#eeffff
inputValidation.infoBackground#0f0021
inputValidation.infoBorder#00d9ff
inputValidation.infoForeground#eeffff
inputValidation.warningBackground#0f0021
inputValidation.warningBorder#ffa600
inputValidation.warningForeground#eeffff
keybindingLabel.background#ffffff0f
keybindingLabel.border#ffffff14
keybindingLabel.bottomBorder#ffffff14
keybindingLabel.foreground#a9b4d6
list.activeSelectionBackground#ff008029
list.activeSelectionForeground#eeffff
list.deemphasizedForeground#4d5578
list.dropBackground#ff00801a
list.errorForeground#ff5370
list.focusBackground#ff008029
list.focusForeground#eeffff
list.focusHighlightForeground#ff0080
list.highlightForeground#ff0080
list.hoverBackground#ffffff0a
list.hoverForeground#eeffff
list.inactiveSelectionBackground#ffffff0d
list.inactiveSelectionForeground#a9b4d6
list.warningForeground#ffa600
menu.background#0f0021
menu.border#ffffff14
menu.foreground#a9b4d6
menu.selectionBackground#ff00802e
menu.selectionForeground#eeffff
menu.separatorBackground#ffffff14
menubar.selectionBackground#ffffff0f
merge.commonContentBackground#ffffff0d
merge.commonHeaderBackground#ffffff1a
merge.currentContentBackground#00ff551a
merge.currentHeaderBackground#00ff5540
merge.incomingContentBackground#00d9ff1a
merge.incomingHeaderBackground#00d9ff40
minimap.background#00002c
minimap.errorHighlight#ff537099
minimap.findMatchHighlight#ffd90099
minimap.selectionHighlight#ff008066
minimap.warningHighlight#ffa60099
minimapGutter.addedBackground#00ff55
minimapGutter.deletedBackground#ff5370
minimapGutter.modifiedBackground#ffd900
minimapSlider.activeBackground#ff00803d
minimapSlider.background#ff00801a
minimapSlider.hoverBackground#ff008029
notificationCenterHeader.background#0f0021
notificationCenterHeader.foreground#a9b4d6
notificationLink.foreground#ff0080
notifications.background#0f0021
notifications.border#ffffff14
notifications.foreground#a9b4d6
notificationsErrorIcon.foreground#ff5370
notificationsInfoIcon.foreground#00d9ff
notificationsWarningIcon.foreground#ffa600
notificationToast.border#ffffff14
panel.background#00002c
panel.border#ffffff14
panelTitle.activeBorder#ff0080
panelTitle.activeForeground#eeffff
panelTitle.inactiveForeground#7f88b3
peekView.border#ff008080
peekViewEditor.background#0f0021
peekViewEditor.matchHighlightBackground#ffd90033
peekViewResult.background#0f0021
peekViewResult.fileForeground#eeffff
peekViewResult.lineForeground#7f88b3
peekViewResult.matchHighlightBackground#ffd90033
peekViewResult.selectionBackground#ff00802e
peekViewResult.selectionForeground#eeffff
peekViewTitle.background#0f0021
peekViewTitleDescription.foreground#7f88b3
peekViewTitleLabel.foreground#eeffff
pickerGroup.border#ffffff14
pickerGroup.foreground#ff0080
problemsErrorIcon.foreground#ff5370
problemsInfoIcon.foreground#00d9ff
problemsWarningIcon.foreground#ffa600
progressBar.background#ff0080
quickInput.background#0f0021
quickInput.foreground#a9b4d6
quickInputList.focusBackground#ff00802e
quickInputList.focusForeground#eeffff
quickInputTitle.background#0f0021
sash.hoverBorder#ff0080
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffffff24
scrollbarSlider.background#ffffff0f
scrollbarSlider.hoverBackground#ffffff1a
selection.background#ff008038
settings.focusedRowBackground#ffffff08
settings.headerForeground#eeffff
settings.modifiedItemIndicator#ff0080
settings.rowHoverBackground#ffffff05
sideBar.background#00002c
sideBar.border#00000000
sideBar.foreground#a9b4d6
sideBarSectionHeader.background#00002c
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#7f88b3
sideBarTitle.foreground#a9b4d6
statusBar.background#00002c
statusBar.border#ffffff0d
statusBar.debuggingBackground#ffa60026
statusBar.debuggingForeground#eeffff
statusBar.foreground#7f88b3
statusBar.noFolderBackground#00002c
statusBarItem.hoverBackground#ffffff0f
statusBarItem.prominentBackground#ff008033
statusBarItem.remoteBackground#ff0080
statusBarItem.remoteForeground#000000
symbolIcon.classForeground#ffcb6b
symbolIcon.constantForeground#ff7e34
symbolIcon.enumeratorForeground#ff7e34
symbolIcon.functionForeground#00ffff
symbolIcon.interfaceForeground#ffcb6b
symbolIcon.keywordForeground#ff0062
symbolIcon.methodForeground#00ffff
symbolIcon.propertyForeground#c792ea
symbolIcon.stringForeground#eeff00
symbolIcon.variableForeground#eeffff
tab.activeBackground#00002c
tab.activeBorder#00000000
tab.activeBorderTop#ff0080
tab.activeForeground#eeffff
tab.activeModifiedBorder#ff0080
tab.border#00000000
tab.hoverBackground#ffffff08
tab.inactiveBackground#00002c
tab.inactiveForeground#7f88b3
tab.inactiveModifiedBorder#ff008066
tab.unfocusedActiveForeground#a9b4d6
tab.unfocusedInactiveForeground#4d5578
terminal.ansiBlack#160021
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#4d5578
terminal.ansiBrightBlue#a8c4ff
terminal.ansiBrightCyan#7afaff
terminal.ansiBrightGreen#5cff8f
terminal.ansiBrightMagenta#ff5cb0
terminal.ansiBrightRed#ff7a90
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f5ff5c
terminal.ansiCyan#00ffff
terminal.ansiGreen#00ff55
terminal.ansiMagenta#ff0080
terminal.ansiRed#ff5370
terminal.ansiWhite#eeffff
terminal.ansiYellow#eeff00
terminal.background#00002c
terminal.border#ffffff14
terminal.findMatchBackground#ffd9004d
terminal.findMatchHighlightBackground#ffd90029
terminal.foreground#eeffff
terminal.inactiveSelectionBackground#ff00801f
terminal.selectionBackground#ff008038
terminal.tab.activeBorder#ff0080
terminalCursor.background#00002c
terminalCursor.foreground#00f7ff
textBlockQuote.background#ffffff08
textBlockQuote.border#ff008066
textCodeBlock.background#0f0021
textLink.activeForeground#ff3399
textLink.foreground#ff0080
textPreformat.foreground#eeff00
textSeparator.foreground#ffffff14
titleBar.activeBackground#00002c
titleBar.activeForeground#a9b4d6
titleBar.border#00000000
titleBar.inactiveBackground#00002c
titleBar.inactiveForeground#4d5578
toolbar.activeBackground#ffffff17
toolbar.hoverBackground#ffffff0f
tree.inactiveIndentGuidesStroke#ffffff0a
tree.indentGuidesStroke#ffffff14
walkThrough.embeddedEditorBackground#00002c
welcomePage.background#00002c
welcomePage.progress.foreground#ff0080
welcomePage.tileBackground#0f0021
welcomePage.tileHoverBackground#28002b
widget.border#ffffff14
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7f88b3	italic
comment keyword, comment storage.type, punctuation.definition.block.tag	#a6b2ce	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, storage, storage.type, storage.modifier, variable.language.this, variable.language.self, variable.language.super	#ff0062
entity.name.function, support.function, meta.function-call entity.name.function, meta.method-call entity.name.function, meta.decorator entity.name.function, entity.name.function.decorator, punctuation.decorator	#00ffff	—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class, entity.name.tag, meta.type.annotation entity.name.type	#ffcb6b	—
string, punctuation.definition.string, string.template	#eeff00	—
string.regexp, constant.character.escape, constant.other.character-class	#f5cb15	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#ff0062	—
constant.numeric, constant.language, constant.other, variable.other.enummember, keyword.other.unit, support.constant	#ff7e34	—
variable.other.property, variable.other.object.property, support.type.property-name, entity.other.attribute-name, meta.object-literal.key, support.type.vendored.property-name	#c792ea	—
variable.parameter, meta.function.parameters variable	#dbc9f5	—
variable, variable.other.readwrite, meta.definition.variable, variable.other.constant, support.variable	#eeffff	—
keyword.operator, punctuation, meta.brace, punctuation.separator, punctuation.terminator, punctuation.accessor	#a9b4d6	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#ffcb6b	—
support.constant.property-value, constant.numeric.css, keyword.other.unit.css	#ff7e34	—
support.type.property-name.json	#c792ea	—
entity.name.tag.yaml	#c792ea	—
markup.heading, markup.heading entity.name, punctuation.definition.heading	#ff0080	bold
markup.bold	#eeffff	bold
markup.italic	#eeffff	italic
markup.underline.link, string.other.link, constant.other.reference.link	#00ffff	underline
markup.inline.raw, markup.fenced_code.block, markup.raw.block	#eeff00	—
markup.quote	#7f88b3	italic
punctuation.definition.list.begin.markdown	#ff0080	—
markup.inserted	#00ff55	—
markup.deleted	#ff5370	—
markup.changed	#00d9ff	—
meta.diff.header, meta.diff.range	#ff0080	—
invalid.illegal	#ff5370	—
invalid.deprecated	#7f88b3	strikethrough