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: Dire Balemoon

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#a8a0a5	italic
constant, constant.numeric, constant.language	#7a7478	—
entity.name	#8e1d2c	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#d8313f	—
entity.other.attribute-name, entity.other.inherited-class	#8e1d2c	italic
entity.name.class, entity.name.struct	#7a7478	—
entity.name.function	#8e1d2c	italic
invalid	#d64545	underline
invalid.deprecated	#524148	strikethrough
keyword, keyword.operator	#8e1d2ce6	—
markup.heading	#d8313f	bold
markup.bold.markdown, markup.bold	#8e1d2c	bold
markup.italic.markdown, markup.italic	#8e1d2c	italic
markup.link	#B94E32	—
markup.inserted.diff	#2e8a5e	—
markup.deleted.diff	#d64545	—
meta.diff.range	#8e1d2c	—
meta.tag, meta.brace	#8a7980	—
meta.import, meta.export	#d8313f	—
meta.directive.vue	#8e1d2c80	italic
meta.property-name.css	#d8313f	—
meta.property-value.css	#a0722a	—
meta.tag.other.html	#7a7478	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#524148	—
punctuation.accessor	#4a3640	—
punctuation.definition.string	#B94E32	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#8e1d2c80	—
string	#B94E32cc	—
storage.type, storage.modifier	#d8313f	—
support	#d8313f	—
support.constant	#a0722a	—
support.type.property-name	#1c0d0eb3	—
support.type.property-name.json	#1c0d0ecc	—
support.function	#8e1d2c	italic
variable	#1c0d0e	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#1c0d0e	—
variable.parameter	#b58a8d	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}!`;
}