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: Geo Contract Vault

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#e8c65e
activityBar.background#150f0b
activityBar.dropBorder#241e19
activityBar.foreground#e4c060
activityBar.inactiveForeground#3b2f2e
activityBarBadge.background#e8c65e
activityBarBadge.foreground#150f0b
badge.background#e8c65e
badge.foreground#150f0b
banner.background#241e19
banner.foreground#e8d9b2
banner.iconForeground#d4b085
breadcrumb.activeSelectionForeground#e8c65e
breadcrumb.background#1e1814
breadcrumb.focusForeground#e4c060
breadcrumb.foreground#e8d9b280
breadcrumbPicker.background#241e19
button.background#d4b085
button.foreground#150f0b
button.hoverBackground#e8c65e
button.secondaryBackground#241e19
button.secondaryForeground#e8d9b2
button.secondaryHoverBackground#2a231c
charts.blue#e8c65e
charts.foreground#e8d9b2
charts.green#d4b085
charts.lines#d4b085
charts.orange#b85c40
charts.purple#e4c060
charts.red#b85c40
charts.yellow#e8c660
checkbox.background#241e19
checkbox.border#3b2f2e33
checkbox.foreground#e8d9b2
debugExceptionWidget.background#241e19
debugExceptionWidget.border#3b2f2e33
debugIcon.breakpointCurrentStackframeForeground#d4b085
debugIcon.breakpointDisabledForeground#3b2f2e
debugIcon.breakpointForeground#d4b085
debugIcon.breakpointStackframeForeground#d4b085
debugIcon.breakpointUnverifiedForeground#b99c71
debugIcon.continueForeground#d4b085
debugIcon.disconnectForeground#b99c71
debugIcon.pauseForeground#d4b085
debugIcon.restartForeground#e4c060
debugIcon.startForeground#e8c65e
debugIcon.stepBackForeground#d4b085
debugIcon.stepIntoForeground#d4b085
debugIcon.stepOutForeground#d4b085
debugIcon.stepOverForeground#d4b085
debugIcon.stopForeground#b85c40
debugToolBar.background#241e19
debugToolBar.border#2a231c
descriptionForeground#d4b085
diffEditor.border#2a231c
diffEditor.diagonalFill#3b2f2e66
diffEditor.insertedLineBackground#d4b08526
diffEditor.insertedTextBackground#d4b08526
diffEditor.removedLineBackground#b85c4026
diffEditor.removedTextBackground#b85c4026
diffEditorOverview.insertedForeground#d4b08580
diffEditorOverview.removedForeground#b85c4080
dropdown.background#2a231c
dropdown.border#e8c65e4d
dropdown.foreground#e8d9b2
dropdown.listBackground#2a231c
editor.background#1e1814
editor.findMatchBackground#e8c66026
editor.findMatchBorder#e8c66080
editor.findMatchForeground#e8d9b2
editor.findMatchHighlightBackground#3b2f2e66
editor.findMatchHighlightForeground#e8d9b2cc
editor.findRangeHighlightBackground#3b2f2e66
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#3b2f2e33
editor.foldBackground#3b2f2e33
editor.foreground#e8d9b2
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#2a231ccc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#d4b085
editor.lineHighlightBackground#3b2f2e14
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#3b2f2e33
editor.rangeHighlightBackground#2a231ccc
editor.selectionBackground#e8c65e33
editor.selectionForeground#3b2f2e
editor.selectionHighlightBackground#3b2f2e33
editor.selectionHighlightBorder#1e1814
editor.snippetFinalTabstopHighlightBackground#3b2f2e33
editor.snippetFinalTabstopHighlightBorder#241e19
editor.snippetTabstopHighlightBackground#3b2f2e33
editor.snippetTabstopHighlightBorder#241e19
editor.stackFrameHighlightBackground#3b2f2e33
editor.symbolHighlightBackground#3b2f2e33
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#3b2f2e33
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#3b2f2e33
editor.wordHighlightStrongBorder#3b2f2e33
editorBracketHighlight.foreground1#b85c4080
editorBracketHighlight.foreground2#d4b08580
editorBracketHighlight.foreground3#e8c66080
editorBracketHighlight.foreground4#e4c06080
editorBracketHighlight.foreground5#e8c65e80
editorBracketHighlight.foreground6#c8b8a380
editorBracketMatch.background#e8c65e45
editorBracketMatch.border#e8c65e
editorBracketPairGuide.activeBackground1#d4b085
editorBracketPairGuide.activeBackground2#e8c65e
editorBracketPairGuide.activeBackground3#e4c060
editorBracketPairGuide.activeBackground4#c8b8a3
editorBracketPairGuide.activeBackground5#e8c660
editorBracketPairGuide.activeBackground6#b85c40
editorBracketPairGuide.background1#d4b08580
editorBracketPairGuide.background2#e8c65e80
editorBracketPairGuide.background3#e4c06080
editorBracketPairGuide.background4#c8b8a380
editorBracketPairGuide.background5#e8c66080
editorBracketPairGuide.background6#b85c4080
editorCodeLens.foreground#e8c65e
editorCursor.background#e8d9b2
editorCursor.foreground#c8b8a3
editorError.border#00000000
editorError.foreground#b85c40
editorGhostText.foreground#d4b085
editorGroup.border#00000000
editorGroup.dropBackground#241e19
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#150f0b
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#e8d9b2cc
editorGutter.addedBackground#d4b085
editorGutter.background#1e1814
editorGutter.commentRangeForeground#2a231c
editorGutter.deletedBackground#b85c40
editorGutter.foldingControlForeground#e4c060
editorGutter.modifiedBackground#d4b085
editorHint.border#00000000
editorHint.foreground#d4b085
editorHoverWidget.background#2a231c
editorHoverWidget.border#e8c65e4d
editorHoverWidget.foreground#d4b085
editorHoverWidget.highlightForeground#e8d9b2
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#3b2f2e
editorIndentGuide.activeBackground1#3b2f2e
editorIndentGuide.background#3b2f2e66
editorIndentGuide.background1#3b2f2e66
editorInfo.border#2a231c
editorInfo.foreground#e4c060
editorInlayHint.background#2a231c80
editorInlayHint.foreground#d4b08580
editorInlayHint.parameterBackground#2a231c80
editorInlayHint.parameterForeground#e4c06080
editorInlayHint.typeBackground#2a231c80
editorInlayHint.typeForeground#e8c65e80
editorLightBulb.foreground#d4b085
editorLightBulbAutoFix.foreground#e8c65e
editorLineNumber.activeForeground#e4c060
editorLineNumber.foreground#3b2f2e
editorLink.activeForeground#e8c65e
editorMarkerNavigation.background#241e19
editorMarkerNavigationError.background#241e19
editorMarkerNavigationInfo.background#241e19
editorMarkerNavigationWarning.background#241e19
editorOverviewRuler.addedForeground#d4b08580
editorOverviewRuler.background#1e1814
editorOverviewRuler.border#3b2f2e66
editorOverviewRuler.bracketMatchForeground#d4b085
editorOverviewRuler.commentForeground#7d745980
editorOverviewRuler.commentUnresolvedForeground#e8c66080
editorOverviewRuler.commonContentForeground#2a231ccc
editorOverviewRuler.currentContentForeground#d4b085
editorOverviewRuler.deletedForeground#b85c4080
editorOverviewRuler.errorForeground#b85c4080
editorOverviewRuler.findMatchForeground#3b2f2e66
editorOverviewRuler.incomingContentForeground#e8c65e
editorOverviewRuler.infoForeground#e4c06080
editorOverviewRuler.modifiedForeground#d4b08580
editorOverviewRuler.rangeHighlightForeground#3b2f2e66
editorOverviewRuler.selectionHighlightForeground#3b2f2e66
editorOverviewRuler.warningForeground#e8c66080
editorOverviewRuler.wordHighlightForeground#3b2f2e33
editorOverviewRuler.wordHighlightStrongForeground#3b2f2e66
editorPane.background#00000000
editorRuler.foreground#3b2f2e66
editorSuggestWidget.background#2a231c
editorSuggestWidget.border#e8c65e4d
editorSuggestWidget.focusHighlightForeground#e8c65e
editorSuggestWidget.foreground#d4b085
editorSuggestWidget.highlightForeground#b85c40
editorSuggestWidget.selectedBackground#3b2f2e33
editorSuggestWidget.selectedForeground#e8d9b2
editorSuggestWidget.selectedIconForeground#e8d9b2
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#e8d9b280
editorWarning.border#00000000
editorWarning.foreground#e8c660
editorWhitespace.foreground#3b2f2e66
editorWidget.background#2a231c
editorWidget.border#e8c65e4d
editorWidget.foreground#d4b085
editorWidget.resizeBorder#3b2f2e
errorForeground#b85c40
extensionBadge.remoteBackground#e4c060
extensionBadge.remoteForeground#150f0b
extensionButton.prominentBackground#e8c65e
extensionButton.prominentForeground#150f0b
extensionButton.prominentHoverBackground#c8b8a3
extensionIcon.preReleaseForeground#d4b085
extensionIcon.starForeground#e8c65e
extensionIcon.verifiedForeground#e4c060
focusBorder#3b2f2e33
foreground#e8d9b2
git.blame.editorDecorationForeground#3b2f2e
gitDecoration.addedResourceForeground#d4b085
gitDecoration.conflictingResourceForeground#e8c660
gitDecoration.deletedResourceForeground#b85c40
gitDecoration.ignoredResourceForeground#7d7459
gitDecoration.modifiedResourceForeground#d4b085
gitDecoration.renamedResourceForeground#e4c060
gitDecoration.stageDeletedResourceForeground#b85c40
gitDecoration.stageModifiedResourceForeground#e8c65e
gitDecoration.submoduleResourceForeground#e8c660
gitDecoration.untrackedResourceForeground#e8c65e
icon.foreground#d4b085
input.background#2a231c
input.border#e8c65e4d
input.foreground#e8d9b2
input.placeholderForeground#3b2f2e
inputOption.activeBackground#e8c65e45
inputOption.activeBorder#e8c65e
inputOption.activeForeground#e8c65e
inputValidation.errorBackground#3a2a20
inputValidation.errorBorder#b85c40
inputValidation.errorForeground#b85c40
inputValidation.infoBackground#2a231c
inputValidation.infoBorder#e4c060
inputValidation.infoForeground#e4c060
inputValidation.warningBackground#4a3624
inputValidation.warningBorder#d4b085
inputValidation.warningForeground#e8c660
keybindingLabel.background#2a231c
keybindingLabel.border#3b2f2e66
keybindingLabel.bottomBorder#3b2f2e66
keybindingLabel.foreground#e4c060
keybindingTable.headerBackground#2a231c
keybindingTable.rowsBackground#241e19
list.activeSelectionBackground#d4b08526
list.activeSelectionForeground#e8d9b2
list.deemphasizedForeground#d4b085
list.dropBackground#241e19
list.errorForeground#b85c40
list.filterMatchBackground#241e19
list.filterMatchBorder#e8c65e
list.focusBackground#d4b08533
list.focusForeground#e8d9b2
list.focusOutline#b85c4066
list.highlightForeground#e8c65e
list.hoverBackground#d4b0851a
list.hoverForeground#b85c40
list.inactiveFocusBackground#3b2f2e14
list.inactiveSelectionBackground#2a231c
list.inactiveSelectionForeground#e8d9b2
list.invalidItemForeground#b85c40
list.warningForeground#e8c660
listFilterWidget.background#241e19
listFilterWidget.noMatchesOutline#b85c40
listFilterWidget.outline#b85c4066
menu.background#241e19
menu.border#2a231ccc
menu.foreground#e8d9b2
menu.selectionBackground#3b2f2e33
menu.selectionBorder#2a231c
menu.selectionForeground#e8d9b2
menu.separatorBackground#3b2f2e66
menubar.selectionBackground#3b2f2e33
menubar.selectionBorder#2a231ccc
menubar.selectionForeground#e8d9b2
merge.border#2a231c
merge.commonContentBackground#3b2f2e33
merge.commonHeaderBackground#3b2f2e33
merge.currentContentBackground#d4b08545
merge.currentHeaderBackground#d4b08545
merge.incomingContentBackground#e8c65e45
merge.incomingHeaderBackground#e8c65e45
minimap.background#241e19
minimap.errorHighlight#b85c4080
minimap.findMatchHighlight#3b2f2e33
minimap.selectionHighlight#3b2f2e33
minimap.warningHighlight#e8c66080
minimapGutter.addedBackground#d4b085
minimapGutter.deletedBackground#b85c40
minimapGutter.modifiedBackground#d4b085
minimapSlider.activeBackground#3b2f2e66
minimapSlider.background#3b2f2e33
minimapSlider.hoverBackground#3b2f2e33
notebook.cellBorderColor#e4c06080
notebook.cellEditorBackground#241e19
notebook.cellHoverBackground#2a231c80
notebook.focusedCellBackground#2a231ccc
notebook.focusedCellBorder#e4c060
notebook.outputContainerBackgroundColor#2a231ccc
notificationCenter.border#3b2f2e33
notificationCenterHeader.background#241e19
notificationCenterHeader.foreground#d4b085
notificationLink.foreground#e4c060
notifications.background#241e19
notifications.border#3b2f2e33
notifications.foreground#e8d9b2
notificationsErrorIcon.foreground#b85c40
notificationsInfoIcon.foreground#e4c060
notificationsWarningIcon.foreground#e8c660
notificationToast.border#3b2f2e33
panel.background#241e19
panel.border#e8c65e4d
panel.dropBorder#2a231c
panelInput.border#241e19
panelSection.dropBackground#3b2f2e33
panelSectionHeader.background#241e19
panelSectionHeader.foreground#e8d9b2
panelTitle.activeBorder#3b2f2e66
panelTitle.activeForeground#e8d9b2
panelTitle.inactiveForeground#b99c71
peekView.border#e8c65e
peekViewEditor.background#241e19
peekViewEditor.matchHighlightBackground#3b2f2e66
peekViewResult.background#2a231c
peekViewResult.fileForeground#d4b085
peekViewResult.lineForeground#d4b085
peekViewResult.matchHighlightBackground#3b2f2e66
peekViewResult.selectionBackground#3b2f2e33
peekViewResult.selectionForeground#e8d9b2
peekViewTitle.background#2a231c
peekViewTitleDescription.foreground#d4b085
pickerGroup.border#3b2f2e66
pickerGroup.foreground#e4c060
ports.iconRunningProcessForeground#e8c65e
problemsErrorIcon.foreground#b85c40
problemsInfoIcon.foreground#e4c060
problemsWarningIcon.foreground#e8c660
progressBar.background#e8c65e
quickInput.background#241e19
quickInput.foreground#d4b085
quickInputList.focusBackground#3b2f2e33
quickInputList.focusForeground#e8d9b2
quickInputList.focusIconForeground#e8d9b2
scrollbar.shadow#150f0b4d
scrollbarSlider.activeBackground#d4b08580
scrollbarSlider.background#3b2f2e66
scrollbarSlider.hoverBackground#d4b08587
searchEditor.findMatchBackground#3b2f2e33
selection.background#3b2f2e66
settings.focusedRowBackground#241e19
settings.focusedRowBorder#3b2f2e33
settings.headerForeground#e8d9b2
settings.modifiedItemIndicator#e8c65e
settings.rowHoverBackground#241e19
sideBar.background#241e19
sideBar.dropBackground#241e19
sideBar.foreground#b99c71
sideBarSectionHeader.background#2a231c
sideBarSectionHeader.border#3b2f2e33
sideBarSectionHeader.foreground#e4c060
sideBarTitle.foreground#d4b085
statusBar.background#e8c65e
statusBar.debuggingBackground#b85c40
statusBar.debuggingForeground#150f0b
statusBar.foreground#150f0b
statusBar.noFolderBackground#d4b085
statusBar.noFolderForeground#e8d9b2
statusBarItem.activeBackground#3b2f2e66
statusBarItem.errorBackground#d4b08526
statusBarItem.errorForeground#b85c40
statusBarItem.hoverBackground#3b2f2e33
statusBarItem.prominentBackground#2a231c
statusBarItem.prominentForeground#e8d9b2
statusBarItem.prominentHoverBackground#3b2f2e33
statusBarItem.remoteBackground#d4b085
statusBarItem.remoteForeground#1e1814
symbolIcon.arrayForeground#d4b085
symbolIcon.classForeground#e4c060
symbolIcon.colorForeground#b85c40
symbolIcon.constantForeground#d4b085
symbolIcon.constructorForeground#e4c060
symbolIcon.enumeratorForeground#d4b085
symbolIcon.enumeratorMemberForeground#d4b085
symbolIcon.eventForeground#e8c65e
symbolIcon.fieldForeground#d4b085
symbolIcon.fileForeground#b99c71
symbolIcon.folderForeground#b99c71
symbolIcon.functionForeground#e4c060
symbolIcon.interfaceForeground#e4c060
symbolIcon.keyForeground#d4b085
symbolIcon.keywordForeground#e8c65e
symbolIcon.methodForeground#e4c060
symbolIcon.moduleForeground#b99c71
symbolIcon.namespaceForeground#d4b085
symbolIcon.nullForeground#d4b085
symbolIcon.numberForeground#d4b085
symbolIcon.objectForeground#d4b085
symbolIcon.operatorForeground#e8c65e
symbolIcon.packageForeground#b99c71
symbolIcon.propertyForeground#d4b085
symbolIcon.referenceForeground#e4c060
symbolIcon.snippetForeground#b85c40
symbolIcon.stringForeground#b85c40
symbolIcon.structForeground#e4c060
symbolIcon.textForeground#e8d9b2
symbolIcon.typeParameterForeground#e4c060
symbolIcon.unitForeground#d4b085
symbolIcon.variableForeground#d4b085
tab.activeBackground#b85c401a
tab.activeBorderTop#e8c65e
tab.activeForeground#e8d9b2cc
tab.activeModifiedBorder#e4c060
tab.hoverBackground#3b2f2e33
tab.inactiveBackground#241e19
tab.inactiveForeground#b99c71
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#3b2f2e
tab.unfocusedActiveBackground#2a231c
tab.unfocusedHoverBackground#3b2f2e33
tab.unfocusedInactiveBackground#241e19
tab.unfocusedInactiveModifiedBorder#e4c06080
terminal.ansiBlack#150f0b
terminal.ansiBlue#e8c65e
terminal.ansiBrightBlack#3b2f2e
terminal.ansiBrightBlue#e8c65e
terminal.ansiBrightCyan#c8b8a3
terminal.ansiBrightGreen#d4b085
terminal.ansiBrightMagenta#e4c060
terminal.ansiBrightRed#b85c40
terminal.ansiBrightWhite#e8d9b2
terminal.ansiBrightYellow#e8c660
terminal.ansiCyan#c8b8a3
terminal.ansiGreen#d4b085
terminal.ansiMagenta#e4c060
terminal.ansiRed#b85c40
terminal.ansiWhite#3b2f2e
terminal.ansiYellow#e8c660
terminal.background#1e1814
terminal.dropBackground#3b2f2e33
terminal.foreground#e8d9b2
terminal.selectionBackground#e8c65e33
terminal.tab.activeBorder#e8d9b2
terminalCursor.background#e8d9b2
terminalCursor.foreground#c8b8a3
textBlockQuote.background#241e19
textBlockQuote.border#3b2f2e33
textCodeBlock.background#241e19
textLink.activeForeground#e4c060e6
textLink.foreground#e4c060
textPreformat.foreground#e8c660
textSeparator.foreground#d4b085
titleBar.activeBackground#241e19
titleBar.activeForeground#e8d9b2
titleBar.inactiveBackground#1e1814
titleBar.inactiveForeground#b99c71
toolbar.activeBackground#3b2f2e66
toolbar.hoverBackground#3b2f2e33
tree.indentGuidesStroke#d4b085
walkThrough.embeddedEditorBackground#1e1814
welcomePage.background#1e1814
widget.shadow#150f0b4d
window.activeBorder#241e19
window.inactiveBorder#241e19

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7d7459	italic
constant, constant.numeric, constant.language	#d4b085	—
entity.name	#e4c060	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#e8c65e	—
entity.other.attribute-name, entity.other.inherited-class	#e4c060	italic
entity.name.class, entity.name.struct	#d4b085	—
entity.name.function	#e4c060	italic
invalid	#b85c40	underline
invalid.deprecated	#b99c71	strikethrough
keyword, keyword.operator	#e4c060e6	—
markup.heading	#e8c65e	bold
markup.bold.markdown, markup.bold	#e4c060	bold
markup.italic.markdown, markup.italic	#e4c060	italic
markup.link	#b85c40	—
markup.inserted.diff	#d4b085	—
markup.deleted.diff	#b85c40	—
meta.diff.range	#e4c060	—
meta.tag, meta.brace	#3b2f2e	—
meta.import, meta.export	#e8c65e	—
meta.directive.vue	#e4c06080	italic
meta.property-name.css	#e8c65e	—
meta.property-value.css	#e8c660	—
meta.tag.other.html	#d4b085	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#b99c71	—
punctuation.accessor	#c8b8a3	—
punctuation.definition.string	#b85c40	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#e4c06080	—
string	#b85c40cc	—
storage.type, storage.modifier	#e8c65e	—
support	#e8c65e	—
support.constant	#e8c660	—
support.type.property-name	#e8d9b2b3	—
support.type.property-name.json	#e8d9b2cc	—
support.function	#e4c060	italic
variable	#e8d9b2	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#e8d9b2	—
variable.parameter	#b99c71	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}!`;
}