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: Eternal Electro Throne

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#67597d	italic
constant, constant.numeric, constant.language	#b08fc2	—
entity.name	#d1a6e2	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#aa7cee	—
entity.other.attribute-name, entity.other.inherited-class	#d1a6e2	italic
entity.name.class, entity.name.struct	#b08fc2	—
entity.name.function	#d1a6e2	italic
invalid	#f1a7b4	underline
invalid.deprecated	#8c7ca1	strikethrough
keyword, keyword.operator	#d1a6e2e6	—
markup.heading	#aa7cee	bold
markup.bold.markdown, markup.bold	#d1a6e2	bold
markup.italic.markdown, markup.italic	#d1a6e2	italic
markup.link	#f1a7b4	—
markup.inserted.diff	#7ed3b0	—
markup.deleted.diff	#f1a7b4	—
meta.diff.range	#d1a6e2	—
meta.tag, meta.brace	#453a59	—
meta.import, meta.export	#aa7cee	—
meta.directive.vue	#d1a6e280	italic
meta.property-name.css	#aa7cee	—
meta.property-value.css	#e6c78a	—
meta.tag.other.html	#b08fc2	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#8c7ca1	—
punctuation.accessor	#7ed3b0	—
punctuation.definition.string	#f1a7b4	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#d1a6e280	—
string	#f1a7b4cc	—
storage.type, storage.modifier	#aa7cee	—
support	#aa7cee	—
support.constant	#e6c78a	—
support.type.property-name	#e8d5f3b3	—
support.type.property-name.json	#e8d5f3cc	—
support.function	#d1a6e2	italic
variable	#e8d5f3	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#e8d5f3	—
variable.parameter	#e6c78a	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}!`;
}