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: Yaksha Vigil

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#526a6f	italic
constant, constant.numeric, constant.language	#3aa19a	—
entity.name	#a6b4fc	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#945fa5	—
entity.other.attribute-name, entity.other.inherited-class	#a6b4fc	italic
entity.name.class, entity.name.struct	#3aa19a	—
entity.name.function	#a6b4fc	italic
invalid	#b54a5e	underline
invalid.deprecated	#a094b8	strikethrough
keyword, keyword.operator	#a6b4fce6	—
markup.heading	#945fa5	bold
markup.bold.markdown, markup.bold	#a6b4fc	bold
markup.italic.markdown, markup.italic	#a6b4fc	italic
markup.link	#9ae0d2	—
markup.inserted.diff	#3aa19a	—
markup.deleted.diff	#b54a5e	—
meta.diff.range	#a6b4fc	—
meta.tag, meta.brace	#3d495c	—
meta.import, meta.export	#945fa5	—
meta.directive.vue	#a6b4fc80	italic
meta.property-name.css	#945fa5	—
meta.property-value.css	#f8c84f	—
meta.tag.other.html	#3aa19a	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#a094b8	—
punctuation.accessor	#6a2d80	—
punctuation.definition.string	#9ae0d2	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#a6b4fc80	—
string	#9ae0d2cc	—
storage.type, storage.modifier	#945fa5	—
support	#945fa5	—
support.constant	#f8c84f	—
support.type.property-name	#f3ece2b3	—
support.type.property-name.json	#f3ece2cc	—
support.function	#a6b4fc	italic
variable	#f3ece2	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#f3ece2	—
variable.parameter	#2cbab3	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}!`;
}