Genshin Vibes

Name: Genshin Vibes
Author: Subrata

Publisher: SubrataThemes in package: 24

A curated collection of dark and light VSCode themes inspired by the aesthetics of Teyvat from Genshin Impact

GitHub

Color themes

VS Code preview

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

Genshin Vibes — Genshin Vibes: Knave's Shadow

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...

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#d8313f
activityBar.background#0e0506
activityBar.dropBorder#120708
activityBar.foreground#f58e8e
activityBar.inactiveForeground#463540
activityBarBadge.background#d8313f
activityBarBadge.foreground#0e0506
badge.background#d8313f
badge.foreground#0e0506
banner.background#120708
banner.foreground#f7f3f3
banner.iconForeground#9195a0
breadcrumb.activeSelectionForeground#d8313f
breadcrumb.background#1a0d0e
breadcrumb.focusForeground#f58e8e
breadcrumb.foreground#f7f3f380
breadcrumbPicker.background#120708
button.background#9195a0
button.foreground#0e0506
button.hoverBackground#d8313f
button.secondaryBackground#120708
button.secondaryForeground#f7f3f3
button.secondaryHoverBackground#241617
charts.blue#d8313f
charts.foreground#f7f3f3
charts.green#6fcf97
charts.lines#9195a0
charts.orange#B94E32
charts.purple#f58e8e
charts.red#ff4d4d
charts.yellow#d9a066
checkbox.background#120708
checkbox.border#46354033
checkbox.foreground#f7f3f3
debugExceptionWidget.background#120708
debugExceptionWidget.border#46354033
debugIcon.breakpointCurrentStackframeForeground#9195a0
debugIcon.breakpointDisabledForeground#463540
debugIcon.breakpointForeground#9195a0
debugIcon.breakpointStackframeForeground#9195a0
debugIcon.breakpointUnverifiedForeground#c2b4b8
debugIcon.continueForeground#9195a0
debugIcon.disconnectForeground#c2b4b8
debugIcon.pauseForeground#9195a0
debugIcon.restartForeground#f58e8e
debugIcon.startForeground#d8313f
debugIcon.stepBackForeground#9195a0
debugIcon.stepIntoForeground#9195a0
debugIcon.stepOutForeground#9195a0
debugIcon.stepOverForeground#9195a0
debugIcon.stopForeground#ff4d4d
debugToolBar.background#120708
debugToolBar.border#241617
descriptionForeground#9195a0
diffEditor.border#241617
diffEditor.diagonalFill#46354066
diffEditor.insertedLineBackground#6fcf9726
diffEditor.insertedTextBackground#6fcf9726
diffEditor.removedLineBackground#ff4d4d26
diffEditor.removedTextBackground#ff4d4d26
diffEditorOverview.insertedForeground#6fcf9780
diffEditorOverview.removedForeground#ff4d4d80
dropdown.background#241617
dropdown.border#d8313f4d
dropdown.foreground#f7f3f3
dropdown.listBackground#241617
editor.background#1a0d0e
editor.findMatchBackground#d9a06626
editor.findMatchBorder#d9a06680
editor.findMatchForeground#f7f3f3
editor.findMatchHighlightBackground#46354066
editor.findMatchHighlightForeground#f7f3f3cc
editor.findRangeHighlightBackground#46354066
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#46354033
editor.foldBackground#46354033
editor.foreground#f7f3f3
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#241617cc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#9195a0
editor.lineHighlightBackground#46354014
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#46354033
editor.rangeHighlightBackground#241617cc
editor.selectionBackground#d8313f33
editor.selectionForeground#463540
editor.selectionHighlightBackground#46354033
editor.selectionHighlightBorder#1a0d0e
editor.snippetFinalTabstopHighlightBackground#46354033
editor.snippetFinalTabstopHighlightBorder#120708
editor.snippetTabstopHighlightBackground#46354033
editor.snippetTabstopHighlightBorder#120708
editor.stackFrameHighlightBackground#46354033
editor.symbolHighlightBackground#46354033
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#46354033
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#46354033
editor.wordHighlightStrongBorder#46354033
editorBracketHighlight.foreground1#ff4d4d80
editorBracketHighlight.foreground2#9195a080
editorBracketHighlight.foreground3#d9a06680
editorBracketHighlight.foreground4#f58e8e80
editorBracketHighlight.foreground5#d8313f80
editorBracketHighlight.foreground6#2a273080
editorBracketMatch.background#d8313f45
editorBracketMatch.border#d8313f
editorBracketPairGuide.activeBackground1#9195a0
editorBracketPairGuide.activeBackground2#d8313f
editorBracketPairGuide.activeBackground3#f58e8e
editorBracketPairGuide.activeBackground4#2a2730
editorBracketPairGuide.activeBackground5#d9a066
editorBracketPairGuide.activeBackground6#ff4d4d
editorBracketPairGuide.background1#9195a080
editorBracketPairGuide.background2#d8313f80
editorBracketPairGuide.background3#f58e8e80
editorBracketPairGuide.background4#2a273080
editorBracketPairGuide.background5#d9a06680
editorBracketPairGuide.background6#ff4d4d80
editorCodeLens.foreground#d8313f
editorCursor.background#f7f3f3
editorCursor.foreground#2a2730
editorError.border#00000000
editorError.foreground#ff4d4d
editorGhostText.foreground#9195a0
editorGroup.border#00000000
editorGroup.dropBackground#120708
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#0e0506
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#f7f3f3cc
editorGutter.addedBackground#6fcf97
editorGutter.background#1a0d0e
editorGutter.commentRangeForeground#241617
editorGutter.deletedBackground#ff4d4d
editorGutter.foldingControlForeground#f58e8e
editorGutter.modifiedBackground#9195a0
editorHint.border#00000000
editorHint.foreground#9195a0
editorHoverWidget.background#241617
editorHoverWidget.border#d8313f4d
editorHoverWidget.foreground#9195a0
editorHoverWidget.highlightForeground#f7f3f3
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#463540
editorIndentGuide.activeBackground1#463540
editorIndentGuide.background#46354066
editorIndentGuide.background1#46354066
editorInfo.border#241617
editorInfo.foreground#f58e8e
editorInlayHint.background#24161780
editorInlayHint.foreground#9195a080
editorInlayHint.parameterBackground#24161780
editorInlayHint.parameterForeground#f58e8e80
editorInlayHint.typeBackground#24161780
editorInlayHint.typeForeground#d8313f80
editorLightBulb.foreground#9195a0
editorLightBulbAutoFix.foreground#d8313f
editorLineNumber.activeForeground#f58e8e
editorLineNumber.foreground#463540
editorLink.activeForeground#d8313f
editorMarkerNavigation.background#120708
editorMarkerNavigationError.background#120708
editorMarkerNavigationInfo.background#120708
editorMarkerNavigationWarning.background#120708
editorOverviewRuler.addedForeground#6fcf9780
editorOverviewRuler.background#1a0d0e
editorOverviewRuler.border#46354066
editorOverviewRuler.bracketMatchForeground#9195a0
editorOverviewRuler.commentForeground#6b5c6580
editorOverviewRuler.commentUnresolvedForeground#d9a06680
editorOverviewRuler.commonContentForeground#241617cc
editorOverviewRuler.currentContentForeground#6fcf97
editorOverviewRuler.deletedForeground#ff4d4d80
editorOverviewRuler.errorForeground#ff4d4d80
editorOverviewRuler.findMatchForeground#46354066
editorOverviewRuler.incomingContentForeground#d8313f
editorOverviewRuler.infoForeground#f58e8e80
editorOverviewRuler.modifiedForeground#9195a080
editorOverviewRuler.rangeHighlightForeground#46354066
editorOverviewRuler.selectionHighlightForeground#46354066
editorOverviewRuler.warningForeground#d9a06680
editorOverviewRuler.wordHighlightForeground#46354033
editorOverviewRuler.wordHighlightStrongForeground#46354066
editorPane.background#00000000
editorRuler.foreground#46354066
editorSuggestWidget.background#241617
editorSuggestWidget.border#d8313f4d
editorSuggestWidget.focusHighlightForeground#d8313f
editorSuggestWidget.foreground#9195a0
editorSuggestWidget.highlightForeground#B94E32
editorSuggestWidget.selectedBackground#46354033
editorSuggestWidget.selectedForeground#f7f3f3
editorSuggestWidget.selectedIconForeground#f7f3f3
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#f7f3f380
editorWarning.border#00000000
editorWarning.foreground#d9a066
editorWhitespace.foreground#46354066
editorWidget.background#241617
editorWidget.border#d8313f4d
editorWidget.foreground#9195a0
editorWidget.resizeBorder#463540
errorForeground#ff4d4d
extensionBadge.remoteBackground#f58e8e
extensionBadge.remoteForeground#0e0506
extensionButton.prominentBackground#d8313f
extensionButton.prominentForeground#0e0506
extensionButton.prominentHoverBackground#2a2730
extensionIcon.preReleaseForeground#9195a0
extensionIcon.starForeground#d8313f
extensionIcon.verifiedForeground#f58e8e
focusBorder#46354033
foreground#f7f3f3
git.blame.editorDecorationForeground#463540
gitDecoration.addedResourceForeground#6fcf97
gitDecoration.conflictingResourceForeground#d9a066
gitDecoration.deletedResourceForeground#ff4d4d
gitDecoration.ignoredResourceForeground#6b5c65
gitDecoration.modifiedResourceForeground#9195a0
gitDecoration.renamedResourceForeground#f58e8e
gitDecoration.stageDeletedResourceForeground#ff4d4d
gitDecoration.stageModifiedResourceForeground#d8313f
gitDecoration.submoduleResourceForeground#d9a066
gitDecoration.untrackedResourceForeground#d8313f
icon.foreground#9195a0
input.background#241617
input.border#d8313f4d
input.foreground#f7f3f3
input.placeholderForeground#463540
inputOption.activeBackground#d8313f45
inputOption.activeBorder#d8313f
inputOption.activeForeground#d8313f
inputValidation.errorBackground#2a1616
inputValidation.errorBorder#ff4d4d
inputValidation.errorForeground#ff4d4d
inputValidation.infoBackground#131b26
inputValidation.infoBorder#f58e8e
inputValidation.infoForeground#f58e8e
inputValidation.warningBackground#2a2816
inputValidation.warningBorder#9195a0
inputValidation.warningForeground#d9a066
keybindingLabel.background#241617
keybindingLabel.border#46354066
keybindingLabel.bottomBorder#46354066
keybindingLabel.foreground#f58e8e
keybindingTable.headerBackground#241617
keybindingTable.rowsBackground#120708
list.activeSelectionBackground#9195a026
list.activeSelectionForeground#f7f3f3
list.deemphasizedForeground#9195a0
list.dropBackground#120708
list.errorForeground#ff4d4d
list.filterMatchBackground#120708
list.filterMatchBorder#d8313f
list.focusBackground#9195a033
list.focusForeground#f7f3f3
list.focusOutline#B94E3266
list.highlightForeground#d8313f
list.hoverBackground#9195a01a
list.hoverForeground#B94E32
list.inactiveFocusBackground#46354014
list.inactiveSelectionBackground#241617
list.inactiveSelectionForeground#f7f3f3
list.invalidItemForeground#ff4d4d
list.warningForeground#d9a066
listFilterWidget.background#120708
listFilterWidget.noMatchesOutline#ff4d4d
listFilterWidget.outline#B94E3266
menu.background#120708
menu.border#241617cc
menu.foreground#f7f3f3
menu.selectionBackground#46354033
menu.selectionBorder#241617
menu.selectionForeground#f7f3f3
menu.separatorBackground#46354066
menubar.selectionBackground#46354033
menubar.selectionBorder#241617cc
menubar.selectionForeground#f7f3f3
merge.border#241617
merge.commonContentBackground#46354033
merge.commonHeaderBackground#46354033
merge.currentContentBackground#6fcf9745
merge.currentHeaderBackground#6fcf9745
merge.incomingContentBackground#d8313f45
merge.incomingHeaderBackground#d8313f45
minimap.background#120708
minimap.errorHighlight#ff4d4d80
minimap.findMatchHighlight#46354033
minimap.selectionHighlight#46354033
minimap.warningHighlight#d9a06680
minimapGutter.addedBackground#6fcf97
minimapGutter.deletedBackground#ff4d4d
minimapGutter.modifiedBackground#9195a0
minimapSlider.activeBackground#46354066
minimapSlider.background#46354033
minimapSlider.hoverBackground#46354033
notebook.cellBorderColor#f58e8e80
notebook.cellEditorBackground#120708
notebook.cellHoverBackground#24161780
notebook.focusedCellBackground#241617cc
notebook.focusedCellBorder#f58e8e
notebook.outputContainerBackgroundColor#241617cc
notificationCenter.border#46354033
notificationCenterHeader.background#120708
notificationCenterHeader.foreground#9195a0
notificationLink.foreground#f58e8e
notifications.background#120708
notifications.border#46354033
notifications.foreground#f7f3f3
notificationsErrorIcon.foreground#ff4d4d
notificationsInfoIcon.foreground#f58e8e
notificationsWarningIcon.foreground#d9a066
notificationToast.border#46354033
panel.background#120708
panel.border#d8313f4d
panel.dropBorder#241617
panelInput.border#120708
panelSection.dropBackground#46354033
panelSectionHeader.background#120708
panelSectionHeader.foreground#f7f3f3
panelTitle.activeBorder#46354066
panelTitle.activeForeground#f7f3f3
panelTitle.inactiveForeground#c2b4b8
peekView.border#d8313f
peekViewEditor.background#120708
peekViewEditor.matchHighlightBackground#46354066
peekViewResult.background#241617
peekViewResult.fileForeground#9195a0
peekViewResult.lineForeground#9195a0
peekViewResult.matchHighlightBackground#46354066
peekViewResult.selectionBackground#46354033
peekViewResult.selectionForeground#f7f3f3
peekViewTitle.background#241617
peekViewTitleDescription.foreground#9195a0
pickerGroup.border#46354066
pickerGroup.foreground#f58e8e
ports.iconRunningProcessForeground#d8313f
problemsErrorIcon.foreground#ff4d4d
problemsInfoIcon.foreground#f58e8e
problemsWarningIcon.foreground#d9a066
progressBar.background#d8313f
quickInput.background#120708
quickInput.foreground#9195a0
quickInputList.focusBackground#46354033
quickInputList.focusForeground#f7f3f3
quickInputList.focusIconForeground#f7f3f3
scrollbar.shadow#0e05064d
scrollbarSlider.activeBackground#9195a080
scrollbarSlider.background#46354066
scrollbarSlider.hoverBackground#9195a087
searchEditor.findMatchBackground#46354033
selection.background#46354066
settings.focusedRowBackground#120708
settings.focusedRowBorder#46354033
settings.headerForeground#f7f3f3
settings.modifiedItemIndicator#d8313f
settings.rowHoverBackground#120708
sideBar.background#120708
sideBar.dropBackground#120708
sideBar.foreground#c2b4b8
sideBarSectionHeader.background#241617
sideBarSectionHeader.border#46354033
sideBarSectionHeader.foreground#f58e8e
sideBarTitle.foreground#9195a0
statusBar.background#d8313f
statusBar.debuggingBackground#ff4d4d
statusBar.debuggingForeground#0e0506
statusBar.foreground#0e0506
statusBar.noFolderBackground#9195a0
statusBar.noFolderForeground#f7f3f3
statusBarItem.activeBackground#46354066
statusBarItem.errorBackground#9195a026
statusBarItem.errorForeground#ff4d4d
statusBarItem.hoverBackground#46354033
statusBarItem.prominentBackground#241617
statusBarItem.prominentForeground#f7f3f3
statusBarItem.prominentHoverBackground#46354033
statusBarItem.remoteBackground#9195a0
statusBarItem.remoteForeground#1a0d0e
symbolIcon.arrayForeground#9195a0
symbolIcon.classForeground#f58e8e
symbolIcon.colorForeground#B94E32
symbolIcon.constantForeground#9195a0
symbolIcon.constructorForeground#f58e8e
symbolIcon.enumeratorForeground#9195a0
symbolIcon.enumeratorMemberForeground#9195a0
symbolIcon.eventForeground#d8313f
symbolIcon.fieldForeground#9195a0
symbolIcon.fileForeground#c2b4b8
symbolIcon.folderForeground#c2b4b8
symbolIcon.functionForeground#f58e8e
symbolIcon.interfaceForeground#f58e8e
symbolIcon.keyForeground#9195a0
symbolIcon.keywordForeground#d8313f
symbolIcon.methodForeground#f58e8e
symbolIcon.moduleForeground#c2b4b8
symbolIcon.namespaceForeground#9195a0
symbolIcon.nullForeground#9195a0
symbolIcon.numberForeground#9195a0
symbolIcon.objectForeground#9195a0
symbolIcon.operatorForeground#d8313f
symbolIcon.packageForeground#c2b4b8
symbolIcon.propertyForeground#9195a0
symbolIcon.referenceForeground#f58e8e
symbolIcon.snippetForeground#B94E32
symbolIcon.stringForeground#B94E32
symbolIcon.structForeground#f58e8e
symbolIcon.textForeground#f7f3f3
symbolIcon.typeParameterForeground#f58e8e
symbolIcon.unitForeground#9195a0
symbolIcon.variableForeground#9195a0
tab.activeBackground#B94E321a
tab.activeBorderTop#d8313f
tab.activeForeground#f7f3f3cc
tab.activeModifiedBorder#f58e8e
tab.hoverBackground#46354033
tab.inactiveBackground#120708
tab.inactiveForeground#c2b4b8
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#463540
tab.unfocusedActiveBackground#241617
tab.unfocusedHoverBackground#46354033
tab.unfocusedInactiveBackground#120708
tab.unfocusedInactiveModifiedBorder#f58e8e80
terminal.ansiBlack#0e0506
terminal.ansiBlue#d8313f
terminal.ansiBrightBlack#463540
terminal.ansiBrightBlue#d8313f
terminal.ansiBrightCyan#2a2730
terminal.ansiBrightGreen#6fcf97
terminal.ansiBrightMagenta#f58e8e
terminal.ansiBrightRed#ff4d4d
terminal.ansiBrightWhite#f7f3f3
terminal.ansiBrightYellow#d9a066
terminal.ansiCyan#2a2730
terminal.ansiGreen#6fcf97
terminal.ansiMagenta#f58e8e
terminal.ansiRed#ff4d4d
terminal.ansiWhite#463540
terminal.ansiYellow#d9a066
terminal.background#1a0d0e
terminal.dropBackground#46354033
terminal.foreground#f7f3f3
terminal.selectionBackground#d8313f33
terminal.tab.activeBorder#f7f3f3
terminalCursor.background#f7f3f3
terminalCursor.foreground#2a2730
textBlockQuote.background#120708
textBlockQuote.border#46354033
textCodeBlock.background#120708
textLink.activeForeground#f58e8ee6
textLink.foreground#f58e8e
textPreformat.foreground#d9a066
textSeparator.foreground#9195a0
titleBar.activeBackground#120708
titleBar.activeForeground#f7f3f3
titleBar.inactiveBackground#1a0d0e
titleBar.inactiveForeground#c2b4b8
toolbar.activeBackground#46354066
toolbar.hoverBackground#46354033
tree.indentGuidesStroke#9195a0
walkThrough.embeddedEditorBackground#1a0d0e
welcomePage.background#1a0d0e
widget.shadow#0e05064d
window.activeBorder#120708
window.inactiveBorder#120708

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6b5c65	italic
constant, constant.numeric, constant.language	#9195a0	—
entity.name	#f58e8e	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#d8313f	—
entity.other.attribute-name, entity.other.inherited-class	#f58e8e	italic
entity.name.class, entity.name.struct	#9195a0	—
entity.name.function	#f58e8e	italic
invalid	#ff4d4d	underline
invalid.deprecated	#c2b4b8	strikethrough
keyword, keyword.operator	#f58e8ee6	—
markup.heading	#d8313f	bold
markup.bold.markdown, markup.bold	#f58e8e	bold
markup.italic.markdown, markup.italic	#f58e8e	italic
markup.link	#B94E32	—
markup.inserted.diff	#6fcf97	—
markup.deleted.diff	#ff4d4d	—
meta.diff.range	#f58e8e	—
meta.tag, meta.brace	#463540	—
meta.import, meta.export	#d8313f	—
meta.directive.vue	#f58e8e80	italic
meta.property-name.css	#d8313f	—
meta.property-value.css	#d9a066	—
meta.tag.other.html	#9195a0	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#c2b4b8	—
punctuation.accessor	#2a2730	—
punctuation.definition.string	#B94E32	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#f58e8e80	—
string	#B94E32cc	—
storage.type, storage.modifier	#d8313f	—
support	#d8313f	—
support.constant	#d9a066	—
support.type.property-name	#f7f3f3b3	—
support.type.property-name.json	#f7f3f3cc	—
support.function	#f58e8e	italic
variable	#f7f3f3	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#f7f3f3	—
variable.parameter	#e8e4e8	italic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}