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: Fontaine Spotlight

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abb1ba	italic
constant, constant.numeric, constant.language	#3730a3	—
entity.name	#1d4ed8	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#1f3b61	—
entity.other.attribute-name, entity.other.inherited-class	#1d4ed8	italic
entity.name.class, entity.name.struct	#3730a3	—
entity.name.function	#1d4ed8	italic
invalid	#be123c	underline
invalid.deprecated	#475569	strikethrough
keyword, keyword.operator	#1d4ed8e6	—
markup.heading	#1f3b61	bold
markup.bold.markdown, markup.bold	#1d4ed8	bold
markup.italic.markdown, markup.italic	#1d4ed8	italic
markup.link	#be123c	—
markup.inserted.diff	#059669	—
markup.deleted.diff	#be123c	—
meta.diff.range	#1d4ed8	—
meta.tag, meta.brace	#64748b	—
meta.import, meta.export	#1f3b61	—
meta.directive.vue	#1d4ed880	italic
meta.property-name.css	#1f3b61	—
meta.property-value.css	#ea580c	—
meta.tag.other.html	#3730a3	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#475569	—
punctuation.accessor	#0ea5e9	—
punctuation.definition.string	#be123c	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#1d4ed880	—
string	#be123ccc	—
storage.type, storage.modifier	#1f3b61	—
support	#1f3b61	—
support.constant	#ea580c	—
support.type.property-name	#0f172ab3	—
support.type.property-name.json	#0f172acc	—
support.function	#1d4ed8	italic
variable	#0f172a	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#0f172a	—
variable.parameter	#64748b	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}!`;
}