Beautiful Background

Name: Beautiful Background
Author: Manish Sri Sai Surya Routhu

Publisher: Manish Sri Sai Surya RouthuThemes in package: 2

A premium dark color theme for creative developers

Open in VS Code GitHub

Color themes

VS Code preview

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

Beautiful Background — Beautiful Background (Muted 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.activeBackground#171722
activityBar.activeBorder#82AAFF
activityBar.background#171722
activityBar.border#171722
activityBar.dropBorder#30304A
activityBar.foreground#D6D6E0
activityBar.inactiveForeground#77778A
activityBarBadge.background#82AAFF
activityBarBadge.foreground#12121A
badge.background#82AAFF
badge.foreground#12121A
breadcrumb.activeSelectionForeground#82AAFF
breadcrumb.background#12121A
breadcrumb.focusForeground#D6D6E0
breadcrumb.foreground#77778A
breadcrumbPicker.background#171722
button.background#82AAFF
button.foreground#12121A
button.hoverBackground#5A8BE8
button.secondaryBackground#30304A
button.secondaryForeground#D6D6E0
button.secondaryHoverBackground#454562
checkbox.background#14141D
checkbox.border#292938
checkbox.foreground#D6D6E0
debugExceptionWidget.background#171722
debugExceptionWidget.border#F48498
debugIcon.breakpointForeground#F48498
debugIcon.pauseForeground#F78C6C
debugIcon.startForeground#C3E88D
debugIcon.stopForeground#F48498
debugToolBar.background#171722
debugToolBar.border#292938
descriptionForeground#9696A8
diffEditor.insertedTextBackground#C3E88D30
diffEditor.removedTextBackground#F4849830
dropdown.background#14141D
dropdown.border#292938
dropdown.foreground#D6D6E0
dropdown.listBackground#171722
editor.background#12121A
editor.findMatchBackground#30304A
editor.findMatchHighlightBackground#30304A80
editor.findRangeHighlightBackground#30304A40
editor.foreground#D6D6E0
editor.hoverHighlightBackground#30304A40
editor.inactiveSelectionBackground#30304A80
editor.lineHighlightBackground#171722
editor.lineHighlightBorder#292938
editor.selectionBackground#30304A
editor.selectionHighlightBackground#30304A60
editor.wordHighlightBackground#30304A40
editor.wordHighlightStrongBackground#30304A70
editorBracketMatch.background#30304A
editorBracketMatch.border#77778A
editorCodeLens.foreground#77778A
editorCursor.foreground#E0E0EA
editorError.foreground#F48498
editorGroup.border#292938
editorGroup.dropBackground#30304A80
editorGroup.emptyBackground#12121A
editorGroupHeader.noTabsBackground#12121A
editorGroupHeader.tabsBackground#12121A
editorGroupHeader.tabsBorder#12121A
editorGutter.addedBackground#C3E88D
editorGutter.background#12121A
editorGutter.deletedBackground#F48498
editorGutter.foldingControlForeground#9696A8
editorGutter.modifiedBackground#82AAFF
editorHint.foreground#77778A
editorHoverWidget.background#171722
editorHoverWidget.border#292938
editorIndentGuide.activeBackground#77778A
editorIndentGuide.background#292938
editorInfo.foreground#82AAFF
editorLineNumber.activeForeground#D6D6E0
editorLineNumber.foreground#77778A
editorLink.activeForeground#82AAFF
editorMarkerNavigation.background#171722
editorMarkerNavigationError.background#F48498
editorMarkerNavigationInfo.background#82AAFF
editorMarkerNavigationWarning.background#F78C6C
editorOverviewRuler.addedForeground#C3E88D
editorOverviewRuler.border#292938
editorOverviewRuler.bracketMatchForeground#77778A
editorOverviewRuler.deletedForeground#F48498
editorOverviewRuler.errorForeground#F48498
editorOverviewRuler.findMatchForeground#30304A
editorOverviewRuler.infoForeground#82AAFF
editorOverviewRuler.modifiedForeground#82AAFF
editorOverviewRuler.rangeHighlightForeground#292938
editorOverviewRuler.selectionHighlightForeground#30304A
editorOverviewRuler.warningForeground#F78C6C
editorOverviewRuler.wordHighlightForeground#30304A
editorOverviewRuler.wordHighlightStrongForeground#30304A
editorRuler.foreground#292938
editorSuggestWidget.background#171722
editorSuggestWidget.border#292938
editorSuggestWidget.foreground#D6D6E0
editorSuggestWidget.highlightForeground#82AAFF
editorSuggestWidget.selectedBackground#30304A
editorWarning.foreground#F78C6C
editorWhitespace.foreground#292938
editorWidget.background#171722
editorWidget.border#292938
editorWidget.foreground#D6D6E0
editorWidget.resizeBorder#82AAFF
errorForeground#F48498
extensionBadge.remoteBackground#C792EA
extensionBadge.remoteForeground#12121A
extensionButton.prominentBackground#82AAFF
extensionButton.prominentForeground#12121A
extensionButton.prominentHoverBackground#5A8BE8
focusBorder#292938
foreground#D6D6E0
gitDecoration.conflictingResourceForeground#F78C6C
gitDecoration.deletedResourceForeground#F48498
gitDecoration.ignoredResourceForeground#77778A
gitDecoration.modifiedResourceForeground#82AAFF
gitDecoration.submoduleResourceForeground#C792EA
gitDecoration.untrackedResourceForeground#C3E88D
icon.foreground#D6D6E0
imagePreview.border#292938
input.background#14141D
input.border#292938
input.foreground#D6D6E0
input.placeholderForeground#77778A
inputOption.activeBackground#30304A
inputOption.activeBorder#82AAFF
inputOption.activeForeground#D6D6E0
inputValidation.errorBackground#3D171F
inputValidation.errorBorder#F48498
inputValidation.errorForeground#F48498
inputValidation.infoBackground#172A4D
inputValidation.infoBorder#82AAFF
inputValidation.infoForeground#82AAFF
inputValidation.warningBackground#3D2B17
inputValidation.warningBorder#FFCB6B
inputValidation.warningForeground#FFCB6B
list.activeSelectionBackground#30304A
list.activeSelectionForeground#D6D6E0
list.dropBackground#30304A80
list.errorForeground#F48498
list.focusBackground#30304A
list.focusForeground#D6D6E0
list.highlightForeground#82AAFF
list.hoverBackground#292938
list.hoverForeground#D6D6E0
list.inactiveFocusBackground#292938
list.inactiveSelectionBackground#292938
list.inactiveSelectionForeground#D6D6E0
list.invalidItemForeground#F48498
list.warningForeground#F78C6C
listFilterWidget.background#171722
listFilterWidget.noMatchesOutline#F48498
listFilterWidget.outline#82AAFF
menubar.selectionBackground#30304A
menubar.selectionForeground#D6D6E0
merge.border#292938
merge.currentContentBackground#C3E88D20
merge.currentHeaderBackground#C3E88D40
merge.incomingContentBackground#82AAFF20
merge.incomingHeaderBackground#82AAFF40
minimap.background#12121A
minimap.errorHighlight#F48498
minimap.findMatchHighlight#30304A
minimap.selectionHighlight#30304A
minimap.warningHighlight#F78C6C
minimapSlider.activeBackground#9696A860
minimapSlider.background#9696A820
minimapSlider.hoverBackground#9696A840
notebook.cellBackground#14141D
notebook.cellBorderColor#292938
notebook.cellEditorBackground#171722
notebook.editorBackground#12121A
notebook.focusedCellBorder#82AAFF
notebook.focusedEditorBorder#82AAFF
notebook.outputContainerBackgroundColor#14141D
notebook.selectedCellBackground#30304A
notificationCenterHeader.background#14141D
notificationCenterHeader.foreground#D6D6E0
notificationLink.foreground#82AAFF
notifications.background#171722
notifications.border#292938
notifications.foreground#D6D6E0
panel.background#14141D
panel.border#292938
panelInput.border#292938
panelTitle.activeBorder#82AAFF
panelTitle.activeForeground#D6D6E0
panelTitle.inactiveForeground#9696A8
peekView.border#82AAFF
peekViewEditor.background#14141D
peekViewEditor.matchHighlightBackground#30304A
peekViewEditorGutter.background#14141D
peekViewResult.background#171722
peekViewResult.fileForeground#D6D6E0
peekViewResult.lineForeground#9696A8
peekViewResult.matchHighlightBackground#30304A
peekViewResult.selectionBackground#30304A
peekViewResult.selectionForeground#D6D6E0
peekViewTitle.background#14141D
peekViewTitleDescription.foreground#9696A8
peekViewTitleLabel.foreground#D6D6E0
pickerGroup.border#292938
pickerGroup.foreground#82AAFF
problemsErrorIcon.foreground#F48498
problemsInfoIcon.foreground#82AAFF
problemsWarningIcon.foreground#F78C6C
progressBar.background#82AAFF
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#9696A860
scrollbarSlider.background#9696A820
scrollbarSlider.hoverBackground#9696A840
selection.background#30304A
sideBar.background#171722
sideBar.border#171722
sideBar.dropBackground#30304A80
sideBar.foreground#D6D6E0
sideBarSectionHeader.background#14141D
sideBarSectionHeader.border#171722
sideBarSectionHeader.foreground#D6D6E0
sideBarTitle.foreground#D6D6E0
statusBar.background#14141D
statusBar.border#14141D
statusBar.debuggingBackground#F78C6C
statusBar.debuggingBorder#F78C6C
statusBar.debuggingForeground#12121A
statusBar.foreground#9696A8
statusBar.noFolderBackground#14141D
statusBar.noFolderBorder#14141D
statusBar.noFolderForeground#9696A8
statusBarItem.activeBackground#00000030
statusBarItem.hoverBackground#00000020
statusBarItem.prominentBackground#30304A
statusBarItem.prominentForeground#D6D6E0
statusBarItem.prominentHoverBackground#454562
tab.activeBackground#12121A
tab.activeBorder#12121A
tab.activeBorderTop#82AAFF
tab.activeForeground#D6D6E0
tab.border#12121A
tab.hoverBackground#14141D
tab.inactiveBackground#171722
tab.inactiveForeground#9696A8
tab.unfocusedActiveBackground#12121A
tab.unfocusedActiveBorder#12121A
tab.unfocusedActiveBorderTop#77778A
tab.unfocusedActiveForeground#9696A8
tab.unfocusedHoverBackground#14141D
tab.unfocusedInactiveBackground#171722
tab.unfocusedInactiveForeground#77778A
terminal.ansiBlack#12121A
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#77778A
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#80CBC4
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#F48498
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#80CBC4
terminal.ansiGreen#C3E88D
terminal.ansiMagenta#C792EA
terminal.ansiRed#F48498
terminal.ansiWhite#D6D6E0
terminal.ansiYellow#FFCB6B
terminal.background#14141D
terminal.foreground#D6D6E0
testing.iconFailed#F48498
testing.iconPassed#C3E88D
testing.iconQueued#FFCB6B
textBlockQuote.background#14141D
textBlockQuote.border#82AAFF
textCodeBlock.background#14141D
textLink.activeForeground#82AAFF
textLink.foreground#82AAFF
textPreformat.foreground#C3E88D
textSeparator.foreground#292938
titleBar.activeBackground#12121A
titleBar.activeForeground#D6D6E0
titleBar.border#12121A
titleBar.inactiveBackground#12121A
titleBar.inactiveForeground#77778A
tree.indentGuidesStroke#292938
walkThrough.embeddedEditorBackground#14141D
welcomePage.background#12121A
welcomePage.buttonBackground#171722
welcomePage.buttonHoverBackground#30304A
widget.shadow#00000050
window.activeBorder#292938
window.inactiveBorder#171722

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#77778A	italic
string, punctuation.definition.string, string.quoted	#C3E88D	—
constant.numeric	#F78C6C	—
constant.language.boolean, constant.language.null, constant.language.undefined	#F78C6C	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#C792EA	italic
storage, storage.type, storage.modifier	#C792EA	italic
entity.name.function, meta.function-call, support.function	#82AAFF	—
variable, variable.other, variable.parameter, support.variable	#D6D6E0	—
entity.name.type, entity.name.class, support.type, support.class	#80CBC4	—
entity.other.inherited-class	#80CBC4	italic
constant.other, variable.other.constant	#FFCB6B	—
variable.object.property, meta.object-literal.key, support.type.property-name	#D6D6E0	—
keyword.operator	#C792EA	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dictionary, punctuation.definition.block, punctuation.definition.binding-pattern	#9696A8	—
entity.name.tag	#C792EA	—
entity.other.attribute-name	#FFCB6B	italic
markup.heading, markup.heading.marker	#82AAFF	bold
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#C3E88D	—
markup.quote	#77778A	italic
markup.list.unnumbered, markup.list.numbered	#D6D6E0	—
meta.tag	#9696A8	—
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	#82AAFF	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#FFCB6B	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css	#C3E88D	—