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: Hydrocourt Midnight

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#19b3e6
activityBar.background#091420
activityBar.dropBorder#14273a
activityBar.foreground#87cefa
activityBar.inactiveForeground#2a3d5a
activityBarBadge.background#19b3e6
activityBarBadge.foreground#091420
badge.background#19b3e6
badge.foreground#091420
banner.background#14273a
banner.foreground#e8f4ff
banner.iconForeground#40e0d0
breadcrumb.activeSelectionForeground#19b3e6
breadcrumb.background#0d1a26
breadcrumb.focusForeground#87cefa
breadcrumb.foreground#e8f4ff80
breadcrumbPicker.background#14273a
button.background#40e0d0
button.foreground#091420
button.hoverBackground#19b3e6
button.secondaryBackground#14273a
button.secondaryForeground#e8f4ff
button.secondaryHoverBackground#1a2d40
charts.blue#19b3e6
charts.foreground#e8f4ff
charts.green#40e0d0
charts.lines#40e0d0
charts.orange#ff69b4
charts.purple#87cefa
charts.red#ff69b4
charts.yellow#00bfff
checkbox.background#14273a
checkbox.border#2a3d5a33
checkbox.foreground#e8f4ff
debugExceptionWidget.background#14273a
debugExceptionWidget.border#2a3d5a33
debugIcon.breakpointCurrentStackframeForeground#40e0d0
debugIcon.breakpointDisabledForeground#2a3d5a
debugIcon.breakpointForeground#40e0d0
debugIcon.breakpointStackframeForeground#40e0d0
debugIcon.breakpointUnverifiedForeground#add8e6
debugIcon.continueForeground#40e0d0
debugIcon.disconnectForeground#add8e6
debugIcon.pauseForeground#40e0d0
debugIcon.restartForeground#87cefa
debugIcon.startForeground#19b3e6
debugIcon.stepBackForeground#40e0d0
debugIcon.stepIntoForeground#40e0d0
debugIcon.stepOutForeground#40e0d0
debugIcon.stepOverForeground#40e0d0
debugIcon.stopForeground#ff69b4
debugToolBar.background#14273a
debugToolBar.border#1a2d40
descriptionForeground#40e0d0
diffEditor.border#1a2d40
diffEditor.diagonalFill#2a3d5a66
diffEditor.insertedLineBackground#40e0d026
diffEditor.insertedTextBackground#40e0d026
diffEditor.removedLineBackground#ff69b426
diffEditor.removedTextBackground#ff69b426
diffEditorOverview.insertedForeground#40e0d080
diffEditorOverview.removedForeground#ff69b480
dropdown.background#1a2d40
dropdown.border#19b3e64d
dropdown.foreground#e8f4ff
dropdown.listBackground#1a2d40
editor.background#0d1a26
editor.findMatchBackground#00bfff26
editor.findMatchBorder#00bfff80
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#40e0d0
editor.lineHighlightBackground#2a3d5a14
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#2a3d5a33
editor.rangeHighlightBackground#1a2d40cc
editor.selectionBackground#19b3e633
editor.selectionForeground#2a3d5a
editor.selectionHighlightBackground#2a3d5a33
editor.selectionHighlightBorder#0d1a26
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#ff69b480
editorBracketHighlight.foreground2#40e0d080
editorBracketHighlight.foreground3#00bfff80
editorBracketHighlight.foreground4#87cefa80
editorBracketHighlight.foreground5#19b3e680
editorBracketHighlight.foreground6#add8e680
editorBracketMatch.background#19b3e645
editorBracketMatch.border#19b3e6
editorBracketPairGuide.activeBackground1#40e0d0
editorBracketPairGuide.activeBackground2#19b3e6
editorBracketPairGuide.activeBackground3#87cefa
editorBracketPairGuide.activeBackground4#add8e6
editorBracketPairGuide.activeBackground5#00bfff
editorBracketPairGuide.activeBackground6#ff69b4
editorBracketPairGuide.background1#40e0d080
editorBracketPairGuide.background2#19b3e680
editorBracketPairGuide.background3#87cefa80
editorBracketPairGuide.background4#add8e680
editorBracketPairGuide.background5#00bfff80
editorBracketPairGuide.background6#ff69b480
editorCodeLens.foreground#19b3e6
editorCursor.background#e8f4ff
editorCursor.foreground#add8e6
editorError.border#00000000
editorError.foreground#ff69b4
editorGhostText.foreground#40e0d0
editorGroup.border#00000000
editorGroup.dropBackground#14273a
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#091420
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#e8f4ffcc
editorGutter.addedBackground#40e0d0
editorGutter.background#0d1a26
editorGutter.commentRangeForeground#1a2d40
editorGutter.deletedBackground#ff69b4
editorGutter.foldingControlForeground#87cefa
editorGutter.modifiedBackground#40e0d0
editorHint.border#00000000
editorHint.foreground#40e0d0
editorHoverWidget.background#1a2d40
editorHoverWidget.border#19b3e64d
editorHoverWidget.foreground#40e0d0
editorHoverWidget.highlightForeground#e8f4ff
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#2a3d5a
editorIndentGuide.activeBackground1#2a3d5a
editorIndentGuide.background#2a3d5a66
editorIndentGuide.background1#2a3d5a66
editorInfo.border#1a2d40
editorInfo.foreground#87cefa
editorInlayHint.background#1a2d4080
editorInlayHint.foreground#40e0d080
editorInlayHint.parameterBackground#1a2d4080
editorInlayHint.parameterForeground#87cefa80
editorInlayHint.typeBackground#1a2d4080
editorInlayHint.typeForeground#19b3e680
editorLightBulb.foreground#40e0d0
editorLightBulbAutoFix.foreground#19b3e6
editorLineNumber.activeForeground#87cefa
editorLineNumber.foreground#2a3d5a
editorLink.activeForeground#19b3e6
editorMarkerNavigation.background#14273a
editorMarkerNavigationError.background#14273a
editorMarkerNavigationInfo.background#14273a
editorMarkerNavigationWarning.background#14273a
editorOverviewRuler.addedForeground#40e0d080
editorOverviewRuler.background#0d1a26
editorOverviewRuler.border#2a3d5a66
editorOverviewRuler.bracketMatchForeground#40e0d0
editorOverviewRuler.commentForeground#59747d80
editorOverviewRuler.commentUnresolvedForeground#00bfff80
editorOverviewRuler.commonContentForeground#1a2d40cc
editorOverviewRuler.currentContentForeground#40e0d0
editorOverviewRuler.deletedForeground#ff69b480
editorOverviewRuler.errorForeground#ff69b480
editorOverviewRuler.findMatchForeground#2a3d5a66
editorOverviewRuler.incomingContentForeground#19b3e6
editorOverviewRuler.infoForeground#87cefa80
editorOverviewRuler.modifiedForeground#40e0d080
editorOverviewRuler.rangeHighlightForeground#2a3d5a66
editorOverviewRuler.selectionHighlightForeground#2a3d5a66
editorOverviewRuler.warningForeground#00bfff80
editorOverviewRuler.wordHighlightForeground#2a3d5a33
editorOverviewRuler.wordHighlightStrongForeground#2a3d5a66
editorPane.background#00000000
editorRuler.foreground#2a3d5a66
editorSuggestWidget.background#1a2d40
editorSuggestWidget.border#19b3e64d
editorSuggestWidget.focusHighlightForeground#19b3e6
editorSuggestWidget.foreground#40e0d0
editorSuggestWidget.highlightForeground#ff69b4
editorSuggestWidget.selectedBackground#2a3d5a33
editorSuggestWidget.selectedForeground#e8f4ff
editorSuggestWidget.selectedIconForeground#e8f4ff
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#e8f4ff80
editorWarning.border#00000000
editorWarning.foreground#00bfff
editorWhitespace.foreground#2a3d5a66
editorWidget.background#1a2d40
editorWidget.border#19b3e64d
editorWidget.foreground#40e0d0
editorWidget.resizeBorder#2a3d5a
errorForeground#ff69b4
extensionBadge.remoteBackground#87cefa
extensionBadge.remoteForeground#091420
extensionButton.prominentBackground#19b3e6
extensionButton.prominentForeground#091420
extensionButton.prominentHoverBackground#add8e6
extensionIcon.preReleaseForeground#40e0d0
extensionIcon.starForeground#19b3e6
extensionIcon.verifiedForeground#87cefa
focusBorder#2a3d5a33
foreground#e8f4ff
git.blame.editorDecorationForeground#2a3d5a
gitDecoration.addedResourceForeground#40e0d0
gitDecoration.conflictingResourceForeground#00bfff
gitDecoration.deletedResourceForeground#ff69b4
gitDecoration.ignoredResourceForeground#59747d
gitDecoration.modifiedResourceForeground#40e0d0
gitDecoration.renamedResourceForeground#87cefa
gitDecoration.stageDeletedResourceForeground#ff69b4
gitDecoration.stageModifiedResourceForeground#19b3e6
gitDecoration.submoduleResourceForeground#00bfff
gitDecoration.untrackedResourceForeground#19b3e6
icon.foreground#40e0d0
input.background#1a2d40
input.border#19b3e64d
input.foreground#e8f4ff
input.placeholderForeground#2a3d5a
inputOption.activeBackground#19b3e645
inputOption.activeBorder#19b3e6
inputOption.activeForeground#19b3e6
inputValidation.errorBackground#2a1a20
inputValidation.errorBorder#ff69b4
inputValidation.errorForeground#ff69b4
inputValidation.infoBackground#1a2d40
inputValidation.infoBorder#87cefa
inputValidation.infoForeground#87cefa
inputValidation.warningBackground#3a2d20
inputValidation.warningBorder#40e0d0
inputValidation.warningForeground#00bfff
keybindingLabel.background#1a2d40
keybindingLabel.border#2a3d5a66
keybindingLabel.bottomBorder#2a3d5a66
keybindingLabel.foreground#87cefa
keybindingTable.headerBackground#1a2d40
keybindingTable.rowsBackground#14273a
list.activeSelectionBackground#40e0d026
list.activeSelectionForeground#e8f4ff
list.deemphasizedForeground#40e0d0
list.dropBackground#14273a
list.errorForeground#ff69b4
list.filterMatchBackground#14273a
list.filterMatchBorder#19b3e6
list.focusBackground#40e0d033
list.focusForeground#e8f4ff
list.focusOutline#ff69b466
list.highlightForeground#19b3e6
list.hoverBackground#40e0d01a
list.hoverForeground#ff69b4
list.inactiveFocusBackground#2a3d5a14
list.inactiveSelectionBackground#1a2d40
list.inactiveSelectionForeground#e8f4ff
list.invalidItemForeground#ff69b4
list.warningForeground#00bfff
listFilterWidget.background#14273a
listFilterWidget.noMatchesOutline#ff69b4
listFilterWidget.outline#ff69b466
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#40e0d045
merge.currentHeaderBackground#40e0d045
merge.incomingContentBackground#19b3e645
merge.incomingHeaderBackground#19b3e645
minimap.background#14273a
minimap.errorHighlight#ff69b480
minimap.findMatchHighlight#2a3d5a33
minimap.selectionHighlight#2a3d5a33
minimap.warningHighlight#00bfff80
minimapGutter.addedBackground#40e0d0
minimapGutter.deletedBackground#ff69b4
minimapGutter.modifiedBackground#40e0d0
minimapSlider.activeBackground#2a3d5a66
minimapSlider.background#2a3d5a33
minimapSlider.hoverBackground#2a3d5a33
notebook.cellBorderColor#87cefa80
notebook.cellEditorBackground#14273a
notebook.cellHoverBackground#1a2d4080
notebook.focusedCellBackground#1a2d40cc
notebook.focusedCellBorder#87cefa
notebook.outputContainerBackgroundColor#1a2d40cc
notificationCenter.border#2a3d5a33
notificationCenterHeader.background#14273a
notificationCenterHeader.foreground#40e0d0
notificationLink.foreground#87cefa
notifications.background#14273a
notifications.border#2a3d5a33
notifications.foreground#e8f4ff
notificationsErrorIcon.foreground#ff69b4
notificationsInfoIcon.foreground#87cefa
notificationsWarningIcon.foreground#00bfff
notificationToast.border#2a3d5a33
panel.background#14273a
panel.border#19b3e64d
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#19b3e6
peekViewEditor.background#14273a
peekViewEditor.matchHighlightBackground#2a3d5a66
peekViewResult.background#1a2d40
peekViewResult.fileForeground#40e0d0
peekViewResult.lineForeground#40e0d0
peekViewResult.matchHighlightBackground#2a3d5a66
peekViewResult.selectionBackground#2a3d5a33
peekViewResult.selectionForeground#e8f4ff
peekViewTitle.background#1a2d40
peekViewTitleDescription.foreground#40e0d0
pickerGroup.border#2a3d5a66
pickerGroup.foreground#87cefa
ports.iconRunningProcessForeground#19b3e6
problemsErrorIcon.foreground#ff69b4
problemsInfoIcon.foreground#87cefa
problemsWarningIcon.foreground#00bfff
progressBar.background#19b3e6
quickInput.background#14273a
quickInput.foreground#40e0d0
quickInputList.focusBackground#2a3d5a33
quickInputList.focusForeground#e8f4ff
quickInputList.focusIconForeground#e8f4ff
scrollbar.shadow#0914204d
scrollbarSlider.activeBackground#40e0d080
scrollbarSlider.background#2a3d5a66
scrollbarSlider.hoverBackground#40e0d087
searchEditor.findMatchBackground#2a3d5a33
selection.background#2a3d5a66
settings.focusedRowBackground#14273a
settings.focusedRowBorder#2a3d5a33
settings.headerForeground#e8f4ff
settings.modifiedItemIndicator#19b3e6
settings.rowHoverBackground#14273a
sideBar.background#14273a
sideBar.dropBackground#14273a
sideBar.foreground#add8e6
sideBarSectionHeader.background#1a2d40
sideBarSectionHeader.border#2a3d5a33
sideBarSectionHeader.foreground#87cefa
sideBarTitle.foreground#40e0d0
statusBar.background#19b3e6
statusBar.debuggingBackground#ff69b4
statusBar.debuggingForeground#091420
statusBar.foreground#091420
statusBar.noFolderBackground#40e0d0
statusBar.noFolderForeground#e8f4ff
statusBarItem.activeBackground#2a3d5a66
statusBarItem.errorBackground#40e0d026
statusBarItem.errorForeground#ff69b4
statusBarItem.hoverBackground#2a3d5a33
statusBarItem.prominentBackground#1a2d40
statusBarItem.prominentForeground#e8f4ff
statusBarItem.prominentHoverBackground#2a3d5a33
statusBarItem.remoteBackground#40e0d0
statusBarItem.remoteForeground#0d1a26
symbolIcon.arrayForeground#40e0d0
symbolIcon.classForeground#87cefa
symbolIcon.colorForeground#ff69b4
symbolIcon.constantForeground#40e0d0
symbolIcon.constructorForeground#87cefa
symbolIcon.enumeratorForeground#40e0d0
symbolIcon.enumeratorMemberForeground#40e0d0
symbolIcon.eventForeground#19b3e6
symbolIcon.fieldForeground#40e0d0
symbolIcon.fileForeground#add8e6
symbolIcon.folderForeground#add8e6
symbolIcon.functionForeground#87cefa
symbolIcon.interfaceForeground#87cefa
symbolIcon.keyForeground#40e0d0
symbolIcon.keywordForeground#19b3e6
symbolIcon.methodForeground#87cefa
symbolIcon.moduleForeground#add8e6
symbolIcon.namespaceForeground#40e0d0
symbolIcon.nullForeground#40e0d0
symbolIcon.numberForeground#40e0d0
symbolIcon.objectForeground#40e0d0
symbolIcon.operatorForeground#19b3e6
symbolIcon.packageForeground#add8e6
symbolIcon.propertyForeground#40e0d0
symbolIcon.referenceForeground#87cefa
symbolIcon.snippetForeground#ff69b4
symbolIcon.stringForeground#ff69b4
symbolIcon.structForeground#87cefa
symbolIcon.textForeground#e8f4ff
symbolIcon.typeParameterForeground#87cefa
symbolIcon.unitForeground#40e0d0
symbolIcon.variableForeground#40e0d0
tab.activeBackground#ff69b41a
tab.activeBorderTop#19b3e6
tab.activeForeground#e8f4ffcc
tab.activeModifiedBorder#87cefa
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#87cefa80
terminal.ansiBlack#091420
terminal.ansiBlue#19b3e6
terminal.ansiBrightBlack#2a3d5a
terminal.ansiBrightBlue#19b3e6
terminal.ansiBrightCyan#add8e6
terminal.ansiBrightGreen#40e0d0
terminal.ansiBrightMagenta#87cefa
terminal.ansiBrightRed#ff69b4
terminal.ansiBrightWhite#e8f4ff
terminal.ansiBrightYellow#00bfff
terminal.ansiCyan#add8e6
terminal.ansiGreen#40e0d0
terminal.ansiMagenta#87cefa
terminal.ansiRed#ff69b4
terminal.ansiWhite#2a3d5a
terminal.ansiYellow#00bfff
terminal.background#0d1a26
terminal.dropBackground#2a3d5a33
terminal.foreground#e8f4ff
terminal.selectionBackground#19b3e633
terminal.tab.activeBorder#e8f4ff
terminalCursor.background#e8f4ff
terminalCursor.foreground#add8e6
textBlockQuote.background#14273a
textBlockQuote.border#2a3d5a33
textCodeBlock.background#14273a
textLink.activeForeground#87cefae6
textLink.foreground#87cefa
textPreformat.foreground#00bfff
textSeparator.foreground#40e0d0
titleBar.activeBackground#14273a
titleBar.activeForeground#e8f4ff
titleBar.inactiveBackground#0d1a26
titleBar.inactiveForeground#add8e6
toolbar.activeBackground#2a3d5a66
toolbar.hoverBackground#2a3d5a33
tree.indentGuidesStroke#40e0d0
walkThrough.embeddedEditorBackground#0d1a26
welcomePage.background#0d1a26
widget.shadow#0914204d
window.activeBorder#14273a
window.inactiveBorder#14273a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#59747d	italic
constant, constant.numeric, constant.language	#40e0d0	—
entity.name	#87cefa	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#19b3e6	—
entity.other.attribute-name, entity.other.inherited-class	#87cefa	italic
entity.name.class, entity.name.struct	#40e0d0	—
entity.name.function	#87cefa	italic
invalid	#ff69b4	underline
invalid.deprecated	#add8e6	strikethrough
keyword, keyword.operator	#87cefae6	—
markup.heading	#19b3e6	bold
markup.bold.markdown, markup.bold	#87cefa	bold
markup.italic.markdown, markup.italic	#87cefa	italic
markup.link	#ff69b4	—
markup.inserted.diff	#40e0d0	—
markup.deleted.diff	#ff69b4	—
meta.diff.range	#87cefa	—
meta.tag, meta.brace	#2a3d5a	—
meta.import, meta.export	#19b3e6	—
meta.directive.vue	#87cefa80	italic
meta.property-name.css	#19b3e6	—
meta.property-value.css	#00bfff	—
meta.tag.other.html	#40e0d0	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#add8e6	—
punctuation.accessor	#add8e6	—
punctuation.definition.string	#ff69b4	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#87cefa80	—
string	#ff69b4cc	—
storage.type, storage.modifier	#19b3e6	—
support	#19b3e6	—
support.constant	#00bfff	—
support.type.property-name	#e8f4ffb3	—
support.type.property-name.json	#e8f4ffcc	—
support.function	#87cefa	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	#9370db	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}!`;
}