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: Ice Oracle

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abb1ba	italic
constant, constant.numeric, constant.language	#5abed4	—
entity.name	#1e3a5f	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#4e74b1	—
entity.other.attribute-name, entity.other.inherited-class	#1e3a5f	italic
entity.name.class, entity.name.struct	#5abed4	—
entity.name.function	#1e3a5f	italic
invalid	#c2410c	underline
invalid.deprecated	#475569	strikethrough
keyword, keyword.operator	#1e3a5fe6	—
markup.heading	#4e74b1	bold
markup.bold.markdown, markup.bold	#1e3a5f	bold
markup.italic.markdown, markup.italic	#1e3a5f	italic
markup.link	#3FA7FF	—
markup.inserted.diff	#10b981	—
markup.deleted.diff	#c2410c	—
meta.diff.range	#1e3a5f	—
meta.tag, meta.brace	#8898af	—
meta.import, meta.export	#4e74b1	—
meta.directive.vue	#1e3a5f80	italic
meta.property-name.css	#4e74b1	—
meta.property-value.css	#f97316	—
meta.tag.other.html	#5abed4	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#475569	—
punctuation.accessor	#2FB7AD	—
punctuation.definition.string	#3FA7FF	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#1e3a5f80	—
string	#3FA7FFcc	—
storage.type, storage.modifier	#4e74b1	—
support	#4e74b1	—
support.constant	#f97316	—
support.type.property-name	#1e3a5fb3	—
support.type.property-name.json	#1e3a5fcc	—
support.function	#1e3a5f	italic
variable	#1e3a5f	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#1e3a5f	—
variable.parameter	#7B5CDB	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}!`;
}