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: Frost Ritual

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#596f7d	italic
constant, constant.numeric, constant.language	#b0e0e6	—
entity.name	#4682b4	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#91cdf3	—
entity.other.attribute-name, entity.other.inherited-class	#4682b4	italic
entity.name.class, entity.name.struct	#b0e0e6	—
entity.name.function	#4682b4	italic
invalid	#ff6b35	underline
invalid.deprecated	#add8e6	strikethrough
keyword, keyword.operator	#4682b4e6	—
markup.heading	#91cdf3	bold
markup.bold.markdown, markup.bold	#4682b4	bold
markup.italic.markdown, markup.italic	#4682b4	italic
markup.link	#ffd700	—
markup.inserted.diff	#90c8ff	—
markup.deleted.diff	#ff6b35	—
meta.diff.range	#4682b4	—
meta.tag, meta.brace	#2a3d5a	—
meta.import, meta.export	#91cdf3	—
meta.directive.vue	#4682b480	italic
meta.property-name.css	#91cdf3	—
meta.property-value.css	#ffd700	—
meta.tag.other.html	#b0e0e6	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#add8e6	—
punctuation.accessor	#90c8ff	—
punctuation.definition.string	#ffd700	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#4682b480	—
string	#ffd700cc	—
storage.type, storage.modifier	#91cdf3	—
support	#91cdf3	—
support.constant	#ffd700	—
support.type.property-name	#e8f4ffb3	—
support.type.property-name.json	#e8f4ffcc	—
support.function	#4682b4	italic
variable	#e8f4ff	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#e8f4ff	—
variable.parameter	#ff8c42	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}!`;
}