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: Violet Eternity Glow

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#601a42
activityBar.background#fbf8ff
activityBar.dropBorder#f4f0fa
activityBar.foreground#6333ae
activityBar.inactiveForeground#a78eb8
activityBarBadge.background#601a42
activityBarBadge.foreground#fbf8ff
badge.background#601a42
badge.foreground#fbf8ff
banner.background#f4f0fa
banner.foreground#4a2e6b
banner.iconForeground#9c4d78
breadcrumb.activeSelectionForeground#601a42
breadcrumb.background#f7f1fc
breadcrumb.focusForeground#6333ae
breadcrumb.foreground#4a2e6b80
breadcrumbPicker.background#f4f0fa
button.background#9c4d78
button.foreground#fbf8ff
button.hoverBackground#601a42
button.secondaryBackground#f4f0fa
button.secondaryForeground#4a2e6b
button.secondaryHoverBackground#fbf8ff
charts.blue#601a42
charts.foreground#4a2e6b
charts.green#4a9a7d
charts.lines#9c4d78
charts.orange#b85c6e
charts.purple#6333ae
charts.red#b85c6e
charts.yellow#9c4d78
checkbox.background#f4f0fa
checkbox.border#a78eb833
checkbox.foreground#4a2e6b
debugExceptionWidget.background#f4f0fa
debugExceptionWidget.border#a78eb833
debugIcon.breakpointCurrentStackframeForeground#9c4d78
debugIcon.breakpointDisabledForeground#a78eb8
debugIcon.breakpointForeground#9c4d78
debugIcon.breakpointStackframeForeground#9c4d78
debugIcon.breakpointUnverifiedForeground#8b72a9
debugIcon.continueForeground#9c4d78
debugIcon.disconnectForeground#8b72a9
debugIcon.pauseForeground#9c4d78
debugIcon.restartForeground#6333ae
debugIcon.startForeground#601a42
debugIcon.stepBackForeground#9c4d78
debugIcon.stepIntoForeground#9c4d78
debugIcon.stepOutForeground#9c4d78
debugIcon.stepOverForeground#9c4d78
debugIcon.stopForeground#b85c6e
debugToolBar.background#f4f0fa
debugToolBar.border#fbf8ff
descriptionForeground#9c4d78
diffEditor.border#fbf8ff
diffEditor.diagonalFill#a78eb866
diffEditor.insertedLineBackground#4a9a7d26
diffEditor.insertedTextBackground#4a9a7d26
diffEditor.removedLineBackground#b85c6e26
diffEditor.removedTextBackground#b85c6e26
diffEditorOverview.insertedForeground#4a9a7d80
diffEditorOverview.removedForeground#b85c6e80
dropdown.background#fbf8ff
dropdown.border#601a4233
dropdown.foreground#4a2e6b
dropdown.listBackground#fbf8ff
editor.background#f7f1fc
editor.findMatchBackground#9c4d7826
editor.findMatchBorder#9c4d7880
editor.findMatchForeground#4a2e6b
editor.findMatchHighlightBackground#a78eb866
editor.findMatchHighlightForeground#4a2e6bcc
editor.findRangeHighlightBackground#a78eb866
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#a78eb833
editor.foldBackground#a78eb833
editor.foreground#4a2e6b
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#fbf8ffcc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#9c4d78
editor.lineHighlightBackground#a78eb814
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#a78eb833
editor.rangeHighlightBackground#fbf8ffcc
editor.selectionBackground#601a4226
editor.selectionForeground#a78eb8
editor.selectionHighlightBackground#a78eb833
editor.selectionHighlightBorder#f7f1fc
editor.snippetFinalTabstopHighlightBackground#a78eb833
editor.snippetFinalTabstopHighlightBorder#f4f0fa
editor.snippetTabstopHighlightBackground#a78eb833
editor.snippetTabstopHighlightBorder#f4f0fa
editor.stackFrameHighlightBackground#a78eb833
editor.symbolHighlightBackground#a78eb833
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#a78eb833
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#a78eb833
editor.wordHighlightStrongBorder#a78eb833
editorBracketHighlight.foreground1#b85c6e80
editorBracketHighlight.foreground2#9c4d7880
editorBracketHighlight.foreground3#9c4d7880
editorBracketHighlight.foreground4#6333ae80
editorBracketHighlight.foreground5#601a4280
editorBracketHighlight.foreground6#4a9a7d80
editorBracketMatch.background#601a4245
editorBracketMatch.border#601a42
editorBracketPairGuide.activeBackground1#9c4d78
editorBracketPairGuide.activeBackground2#601a42
editorBracketPairGuide.activeBackground3#6333ae
editorBracketPairGuide.activeBackground4#4a9a7d
editorBracketPairGuide.activeBackground5#9c4d78
editorBracketPairGuide.activeBackground6#b85c6e
editorBracketPairGuide.background1#9c4d7880
editorBracketPairGuide.background2#601a4280
editorBracketPairGuide.background3#6333ae80
editorBracketPairGuide.background4#4a9a7d80
editorBracketPairGuide.background5#9c4d7880
editorBracketPairGuide.background6#b85c6e80
editorCodeLens.foreground#601a42
editorCursor.background#4a2e6b
editorCursor.foreground#4a9a7d
editorError.border#00000000
editorError.foreground#b85c6e
editorGhostText.foreground#9c4d78
editorGroup.border#00000000
editorGroup.dropBackground#f4f0fa
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#fbf8ff
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#4a2e6bcc
editorGutter.addedBackground#4a9a7d
editorGutter.background#f7f1fc
editorGutter.commentRangeForeground#fbf8ff
editorGutter.deletedBackground#b85c6e
editorGutter.foldingControlForeground#6333ae
editorGutter.modifiedBackground#9c4d78
editorHint.border#00000000
editorHint.foreground#9c4d78
editorHoverWidget.background#fbf8ff
editorHoverWidget.border#601a4233
editorHoverWidget.foreground#9c4d78
editorHoverWidget.highlightForeground#4a2e6b
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#a78eb8
editorIndentGuide.activeBackground1#a78eb8
editorIndentGuide.background#a78eb866
editorIndentGuide.background1#a78eb866
editorInfo.border#fbf8ff
editorInfo.foreground#6333ae
editorInlayHint.background#fbf8ff80
editorInlayHint.foreground#9c4d7880
editorInlayHint.parameterBackground#fbf8ff80
editorInlayHint.parameterForeground#6333ae80
editorInlayHint.typeBackground#fbf8ff80
editorInlayHint.typeForeground#601a4280
editorLightBulb.foreground#9c4d78
editorLightBulbAutoFix.foreground#601a42
editorLineNumber.activeForeground#6333ae
editorLineNumber.foreground#a78eb8
editorLink.activeForeground#601a42
editorMarkerNavigation.background#f4f0fa
editorMarkerNavigationError.background#f4f0fa
editorMarkerNavigationInfo.background#f4f0fa
editorMarkerNavigationWarning.background#f4f0fa
editorOverviewRuler.addedForeground#4a9a7d80
editorOverviewRuler.background#f7f1fc
editorOverviewRuler.border#a78eb866
editorOverviewRuler.bracketMatchForeground#9c4d78
editorOverviewRuler.commentForeground#baabb480
editorOverviewRuler.commentUnresolvedForeground#9c4d7880
editorOverviewRuler.commonContentForeground#fbf8ffcc
editorOverviewRuler.currentContentForeground#4a9a7d
editorOverviewRuler.deletedForeground#b85c6e80
editorOverviewRuler.errorForeground#b85c6e80
editorOverviewRuler.findMatchForeground#a78eb866
editorOverviewRuler.incomingContentForeground#601a42
editorOverviewRuler.infoForeground#6333ae80
editorOverviewRuler.modifiedForeground#9c4d7880
editorOverviewRuler.rangeHighlightForeground#a78eb866
editorOverviewRuler.selectionHighlightForeground#a78eb866
editorOverviewRuler.warningForeground#9c4d7880
editorOverviewRuler.wordHighlightForeground#a78eb833
editorOverviewRuler.wordHighlightStrongForeground#a78eb866
editorPane.background#00000000
editorRuler.foreground#a78eb866
editorSuggestWidget.background#fbf8ff
editorSuggestWidget.border#601a4233
editorSuggestWidget.focusHighlightForeground#601a42
editorSuggestWidget.foreground#9c4d78
editorSuggestWidget.highlightForeground#b85c6e
editorSuggestWidget.selectedBackground#a78eb833
editorSuggestWidget.selectedForeground#4a2e6b
editorSuggestWidget.selectedIconForeground#4a2e6b
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#4a2e6b80
editorWarning.border#00000000
editorWarning.foreground#9c4d78
editorWhitespace.foreground#a78eb866
editorWidget.background#fbf8ff
editorWidget.border#601a4233
editorWidget.foreground#9c4d78
editorWidget.resizeBorder#a78eb8
errorForeground#b85c6e
extensionBadge.remoteBackground#6333ae
extensionBadge.remoteForeground#fbf8ff
extensionButton.prominentBackground#601a42
extensionButton.prominentForeground#fbf8ff
extensionButton.prominentHoverBackground#4a9a7d
extensionIcon.preReleaseForeground#9c4d78
extensionIcon.starForeground#601a42
extensionIcon.verifiedForeground#6333ae
focusBorder#a78eb833
foreground#4a2e6b
git.blame.editorDecorationForeground#a78eb8
gitDecoration.addedResourceForeground#4a9a7d
gitDecoration.conflictingResourceForeground#9c4d78
gitDecoration.deletedResourceForeground#b85c6e
gitDecoration.ignoredResourceForeground#baabb4
gitDecoration.modifiedResourceForeground#9c4d78
gitDecoration.renamedResourceForeground#6333ae
gitDecoration.stageDeletedResourceForeground#b85c6e
gitDecoration.stageModifiedResourceForeground#601a42
gitDecoration.submoduleResourceForeground#9c4d78
gitDecoration.untrackedResourceForeground#601a42
icon.foreground#9c4d78
input.background#fbf8ff
input.border#601a4233
input.foreground#4a2e6b
input.placeholderForeground#a78eb8
inputOption.activeBackground#601a4245
inputOption.activeBorder#601a42
inputOption.activeForeground#601a42
inputValidation.errorBackground#f9e8eb
inputValidation.errorBorder#b85c6e
inputValidation.errorForeground#b85c6e
inputValidation.infoBackground#ebf2ff
inputValidation.infoBorder#6333ae
inputValidation.infoForeground#6333ae
inputValidation.warningBackground#fdf4ec
inputValidation.warningBorder#9c4d78
inputValidation.warningForeground#9c4d78
keybindingLabel.background#fbf8ff
keybindingLabel.border#a78eb866
keybindingLabel.bottomBorder#a78eb866
keybindingLabel.foreground#6333ae
keybindingTable.headerBackground#fbf8ff
keybindingTable.rowsBackground#f4f0fa
list.activeSelectionBackground#9c4d7826
list.activeSelectionForeground#4a2e6b
list.deemphasizedForeground#9c4d78
list.dropBackground#f4f0fa
list.errorForeground#b85c6e
list.filterMatchBackground#f4f0fa
list.filterMatchBorder#601a42
list.focusBackground#9c4d7833
list.focusForeground#4a2e6b
list.focusOutline#b85c6e99
list.highlightForeground#601a42
list.hoverBackground#9c4d781a
list.hoverForeground#b85c6e
list.inactiveFocusBackground#a78eb814
list.inactiveSelectionBackground#fbf8ff
list.inactiveSelectionForeground#4a2e6b
list.invalidItemForeground#b85c6e
list.warningForeground#9c4d78
listFilterWidget.background#f4f0fa
listFilterWidget.noMatchesOutline#b85c6e
listFilterWidget.outline#b85c6e66
menu.background#f4f0fa
menu.border#fbf8ffcc
menu.foreground#4a2e6b
menu.selectionBackground#a78eb833
menu.selectionBorder#fbf8ff
menu.selectionForeground#4a2e6b
menu.separatorBackground#a78eb866
menubar.selectionBackground#a78eb833
menubar.selectionBorder#fbf8ffcc
menubar.selectionForeground#4a2e6b
merge.border#fbf8ff
merge.commonContentBackground#a78eb833
merge.commonHeaderBackground#a78eb833
merge.currentContentBackground#4a9a7d45
merge.currentHeaderBackground#4a9a7d45
merge.incomingContentBackground#601a4245
merge.incomingHeaderBackground#601a4245
minimap.background#f4f0fa
minimap.errorHighlight#b85c6e80
minimap.findMatchHighlight#a78eb833
minimap.selectionHighlight#a78eb833
minimap.warningHighlight#9c4d7880
minimapGutter.addedBackground#4a9a7d
minimapGutter.deletedBackground#b85c6e
minimapGutter.modifiedBackground#9c4d78
minimapSlider.activeBackground#a78eb866
minimapSlider.background#a78eb833
minimapSlider.hoverBackground#a78eb833
notebook.cellBorderColor#6333ae80
notebook.cellEditorBackground#f4f0fa
notebook.cellHoverBackground#fbf8ff80
notebook.focusedCellBackground#fbf8ffcc
notebook.focusedCellBorder#6333ae
notebook.outputContainerBackgroundColor#fbf8ffcc
notificationCenter.border#a78eb833
notificationCenterHeader.background#f4f0fa
notificationCenterHeader.foreground#9c4d78
notificationLink.foreground#6333ae
notifications.background#f4f0fa
notifications.border#a78eb833
notifications.foreground#4a2e6b
notificationsErrorIcon.foreground#b85c6e
notificationsInfoIcon.foreground#6333ae
notificationsWarningIcon.foreground#9c4d78
notificationToast.border#a78eb833
panel.background#f4f0fa
panel.border#601a4233
panel.dropBorder#fbf8ff
panelInput.border#f4f0fa
panelSection.dropBackground#a78eb833
panelSectionHeader.background#f4f0fa
panelSectionHeader.foreground#4a2e6b
panelTitle.activeBorder#a78eb866
panelTitle.activeForeground#4a2e6b
panelTitle.inactiveForeground#8b72a9
peekView.border#601a42
peekViewEditor.background#f4f0fa
peekViewEditor.matchHighlightBackground#a78eb866
peekViewResult.background#fbf8ff
peekViewResult.fileForeground#9c4d78
peekViewResult.lineForeground#9c4d78
peekViewResult.matchHighlightBackground#a78eb866
peekViewResult.selectionBackground#a78eb833
peekViewResult.selectionForeground#4a2e6b
peekViewTitle.background#fbf8ff
peekViewTitleDescription.foreground#9c4d78
pickerGroup.border#a78eb866
pickerGroup.foreground#6333ae
ports.iconRunningProcessForeground#601a42
problemsErrorIcon.foreground#b85c6e
problemsInfoIcon.foreground#6333ae
problemsWarningIcon.foreground#9c4d78
progressBar.background#601a42
quickInput.background#f4f0fa
quickInput.foreground#9c4d78
quickInputList.focusBackground#a78eb833
quickInputList.focusForeground#4a2e6b
quickInputList.focusIconForeground#4a2e6b
scrollbar.shadow#fbf8ff4d
scrollbarSlider.activeBackground#9c4d7880
scrollbarSlider.background#a78eb866
scrollbarSlider.hoverBackground#9c4d7887
searchEditor.findMatchBackground#a78eb833
selection.background#a78eb866
settings.focusedRowBackground#f4f0fa
settings.focusedRowBorder#a78eb833
settings.headerForeground#4a2e6b
settings.modifiedItemIndicator#601a42
settings.rowHoverBackground#f4f0fa
sideBar.background#f4f0fa
sideBar.dropBackground#f4f0fa
sideBar.foreground#8b72a9
sideBarSectionHeader.background#fbf8ff
sideBarSectionHeader.border#a78eb833
sideBarSectionHeader.foreground#6333ae
sideBarTitle.foreground#9c4d78
statusBar.background#601a42
statusBar.debuggingBackground#b85c6e
statusBar.debuggingForeground#fbf8ff
statusBar.foreground#fbf8ff
statusBar.noFolderBackground#9c4d78
statusBar.noFolderForeground#4a2e6b
statusBarItem.activeBackground#a78eb866
statusBarItem.errorBackground#9c4d7826
statusBarItem.errorForeground#b85c6e
statusBarItem.hoverBackground#a78eb833
statusBarItem.prominentBackground#fbf8ff
statusBarItem.prominentForeground#4a2e6b
statusBarItem.prominentHoverBackground#a78eb833
statusBarItem.remoteBackground#9c4d78
statusBarItem.remoteForeground#f7f1fc
symbolIcon.arrayForeground#9c4d78
symbolIcon.classForeground#6333ae
symbolIcon.colorForeground#b85c6e
symbolIcon.constantForeground#9c4d78
symbolIcon.constructorForeground#6333ae
symbolIcon.enumeratorForeground#9c4d78
symbolIcon.enumeratorMemberForeground#9c4d78
symbolIcon.eventForeground#601a42
symbolIcon.fieldForeground#9c4d78
symbolIcon.fileForeground#8b72a9
symbolIcon.folderForeground#8b72a9
symbolIcon.functionForeground#6333ae
symbolIcon.interfaceForeground#6333ae
symbolIcon.keyForeground#9c4d78
symbolIcon.keywordForeground#601a42
symbolIcon.methodForeground#6333ae
symbolIcon.moduleForeground#8b72a9
symbolIcon.namespaceForeground#9c4d78
symbolIcon.nullForeground#9c4d78
symbolIcon.numberForeground#9c4d78
symbolIcon.objectForeground#9c4d78
symbolIcon.operatorForeground#601a42
symbolIcon.packageForeground#8b72a9
symbolIcon.propertyForeground#9c4d78
symbolIcon.referenceForeground#6333ae
symbolIcon.snippetForeground#b85c6e
symbolIcon.stringForeground#b85c6e
symbolIcon.structForeground#6333ae
symbolIcon.textForeground#4a2e6b
symbolIcon.typeParameterForeground#6333ae
symbolIcon.unitForeground#9c4d78
symbolIcon.variableForeground#9c4d78
tab.activeBackground#b85c6e1a
tab.activeBorderTop#601a42
tab.activeForeground#4a2e6bcc
tab.activeModifiedBorder#6333ae
tab.hoverBackground#a78eb833
tab.inactiveBackground#f4f0fa
tab.inactiveForeground#8b72a9
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#a78eb8
tab.unfocusedActiveBackground#fbf8ff
tab.unfocusedHoverBackground#a78eb833
tab.unfocusedInactiveBackground#f4f0fa
tab.unfocusedInactiveModifiedBorder#6333ae80
terminal.ansiBlack#fbf8ff
terminal.ansiBlue#601a42
terminal.ansiBrightBlack#a78eb8
terminal.ansiBrightBlue#601a42
terminal.ansiBrightCyan#4a9a7d
terminal.ansiBrightGreen#4a9a7d
terminal.ansiBrightMagenta#6333ae
terminal.ansiBrightRed#b85c6e
terminal.ansiBrightWhite#4a2e6b
terminal.ansiBrightYellow#9c4d78
terminal.ansiCyan#4a9a7d
terminal.ansiGreen#4a9a7d
terminal.ansiMagenta#6333ae
terminal.ansiRed#b85c6e
terminal.ansiWhite#a78eb8
terminal.ansiYellow#9c4d78
terminal.background#f7f1fc
terminal.dropBackground#a78eb833
terminal.foreground#4a2e6b
terminal.selectionBackground#601a4226
terminal.tab.activeBorder#4a2e6b
terminalCursor.background#4a2e6b
terminalCursor.foreground#4a9a7d
textBlockQuote.background#f4f0fa
textBlockQuote.border#a78eb833
textCodeBlock.background#f4f0fa
textLink.activeForeground#6333aee6
textLink.foreground#6333ae
textPreformat.foreground#9c4d78
textSeparator.foreground#9c4d78
titleBar.activeBackground#f4f0fa
titleBar.activeForeground#4a2e6b
titleBar.inactiveBackground#f7f1fc
titleBar.inactiveForeground#8b72a9
toolbar.activeBackground#a78eb866
toolbar.hoverBackground#a78eb833
tree.indentGuidesStroke#9c4d78
walkThrough.embeddedEditorBackground#f7f1fc
welcomePage.background#f7f1fc
widget.shadow#fbf8ff4d
window.activeBorder#f4f0fa
window.inactiveBorder#f4f0fa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#baabb4	italic
constant, constant.numeric, constant.language	#9c4d78	—
entity.name	#6333ae	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#601a42	—
entity.other.attribute-name, entity.other.inherited-class	#6333ae	italic
entity.name.class, entity.name.struct	#9c4d78	—
entity.name.function	#6333ae	italic
invalid	#b85c6e	underline
invalid.deprecated	#8b72a9	strikethrough
keyword, keyword.operator	#6333aee6	—
markup.heading	#601a42	bold
markup.bold.markdown, markup.bold	#6333ae	bold
markup.italic.markdown, markup.italic	#6333ae	italic
markup.link	#b85c6e	—
markup.inserted.diff	#4a9a7d	—
markup.deleted.diff	#b85c6e	—
meta.diff.range	#6333ae	—
meta.tag, meta.brace	#a78eb8	—
meta.import, meta.export	#601a42	—
meta.directive.vue	#6333ae80	italic
meta.property-name.css	#601a42	—
meta.property-value.css	#9c4d78	—
meta.tag.other.html	#9c4d78	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#8b72a9	—
punctuation.accessor	#4a9a7d	—
punctuation.definition.string	#b85c6e	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#6333ae80	—
string	#b85c6ecc	—
storage.type, storage.modifier	#601a42	—
support	#601a42	—
support.constant	#9c4d78	—
support.type.property-name	#4a2e6bb3	—
support.type.property-name.json	#4a2e6bcc	—
support.function	#6333ae	italic
variable	#4a2e6b	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#4a2e6b	—
variable.parameter	#b08fc2	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}!`;
}