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: Veiled Harbinger

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#c7d3e6
activityBar.background#0E1118
activityBar.dropBorder#1A2030
activityBar.foreground#d4a5d4
activityBar.inactiveForeground#3a4355ff
activityBarBadge.background#c7d3e6
activityBarBadge.foreground#0E1118
badge.background#c7d3e6
badge.foreground#0E1118
banner.background#1A2030
banner.foreground#E6ECF5
banner.iconForeground#7e8faf
breadcrumb.activeSelectionForeground#c7d3e6
breadcrumb.background#141925
breadcrumb.focusForeground#d4a5d4
breadcrumb.foreground#E6ECF580
breadcrumbPicker.background#1A2030
button.background#7e8faf
button.foreground#0E1118
button.hoverBackground#c7d3e6
button.secondaryBackground#1A2030
button.secondaryForeground#E6ECF5
button.secondaryHoverBackground#20273A
charts.blue#c7d3e6
charts.foreground#E6ECF5
charts.green#98C379
charts.lines#7e8faf
charts.orange#B8C9FF
charts.purple#d4a5d4
charts.red#E06C75
charts.yellow#E5C07B
checkbox.background#1A2030
checkbox.border#3a435533
checkbox.foreground#E6ECF5
debugExceptionWidget.background#1A2030
debugExceptionWidget.border#3a435533
debugIcon.breakpointCurrentStackframeForeground#7e8faf
debugIcon.breakpointDisabledForeground#3a4355ff
debugIcon.breakpointForeground#7e8faf
debugIcon.breakpointStackframeForeground#7e8faf
debugIcon.breakpointUnverifiedForeground#B6C0D4
debugIcon.continueForeground#7e8faf
debugIcon.disconnectForeground#B6C0D4
debugIcon.pauseForeground#7e8faf
debugIcon.restartForeground#d4a5d4
debugIcon.startForeground#c7d3e6
debugIcon.stepBackForeground#7e8faf
debugIcon.stepIntoForeground#7e8faf
debugIcon.stepOutForeground#7e8faf
debugIcon.stepOverForeground#7e8faf
debugIcon.stopForeground#E06C75
debugToolBar.background#1A2030
debugToolBar.border#20273A
descriptionForeground#7e8faf
diffEditor.border#20273A
diffEditor.diagonalFill#3a435566
diffEditor.insertedLineBackground#98C37926
diffEditor.insertedTextBackground#98C37926
diffEditor.removedLineBackground#E06C7526
diffEditor.removedTextBackground#E06C7526
diffEditorOverview.insertedForeground#98C37980
diffEditorOverview.removedForeground#E06C7580
dropdown.background#20273A
dropdown.border#c7d3e64d
dropdown.foreground#E6ECF5
dropdown.listBackground#20273A
editor.background#141925
editor.findMatchBackground#E5C07B26
editor.findMatchBorder#E5C07B80
editor.findMatchForeground#E6ECF5
editor.findMatchHighlightBackground#3a435566
editor.findMatchHighlightForeground#E6ECF5cc
editor.findRangeHighlightBackground#3a435566
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#3a435533
editor.foldBackground#3a435533
editor.foreground#E6ECF5
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#20273Acc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#7e8faf
editor.lineHighlightBackground#3a435514
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#3a435533
editor.rangeHighlightBackground#20273Acc
editor.selectionBackground#c7d3e633
editor.selectionForeground#3a4355ff
editor.selectionHighlightBackground#3a435533
editor.selectionHighlightBorder#141925
editor.snippetFinalTabstopHighlightBackground#3a435533
editor.snippetFinalTabstopHighlightBorder#1A2030
editor.snippetTabstopHighlightBackground#3a435533
editor.snippetTabstopHighlightBorder#1A2030
editor.stackFrameHighlightBackground#3a435533
editor.symbolHighlightBackground#3a435533
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#3a435533
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#3a435533
editor.wordHighlightStrongBorder#3a435533
editorBracketHighlight.foreground1#E06C7580
editorBracketHighlight.foreground2#7e8faf80
editorBracketHighlight.foreground3#E5C07B80
editorBracketHighlight.foreground4#d4a5d480
editorBracketHighlight.foreground5#c7d3e680
editorBracketHighlight.foreground6#967ab780
editorBracketMatch.background#c7d3e645
editorBracketMatch.border#c7d3e6
editorBracketPairGuide.activeBackground1#7e8faf
editorBracketPairGuide.activeBackground2#c7d3e6
editorBracketPairGuide.activeBackground3#d4a5d4
editorBracketPairGuide.activeBackground4#967ab7
editorBracketPairGuide.activeBackground5#E5C07B
editorBracketPairGuide.activeBackground6#E06C75
editorBracketPairGuide.background1#7e8faf80
editorBracketPairGuide.background2#c7d3e680
editorBracketPairGuide.background3#d4a5d480
editorBracketPairGuide.background4#967ab780
editorBracketPairGuide.background5#E5C07B80
editorBracketPairGuide.background6#E06C7580
editorCodeLens.foreground#c7d3e6
editorCursor.background#E6ECF5
editorCursor.foreground#967ab7
editorError.border#00000000
editorError.foreground#E06C75
editorGhostText.foreground#7e8faf
editorGroup.border#00000000
editorGroup.dropBackground#1A2030
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#0E1118
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#E6ECF5cc
editorGutter.addedBackground#98C379
editorGutter.background#141925
editorGutter.commentRangeForeground#20273A
editorGutter.deletedBackground#E06C75
editorGutter.foldingControlForeground#d4a5d4
editorGutter.modifiedBackground#7e8faf
editorHint.border#00000000
editorHint.foreground#7e8faf
editorHoverWidget.background#20273A
editorHoverWidget.border#c7d3e64d
editorHoverWidget.foreground#7e8faf
editorHoverWidget.highlightForeground#E6ECF5
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#3a4355ff
editorIndentGuide.activeBackground1#3a4355ff
editorIndentGuide.background#3a435566
editorIndentGuide.background1#3a435566
editorInfo.border#20273A
editorInfo.foreground#d4a5d4
editorInlayHint.background#20273A80
editorInlayHint.foreground#7e8faf80
editorInlayHint.parameterBackground#20273A80
editorInlayHint.parameterForeground#d4a5d480
editorInlayHint.typeBackground#20273A80
editorInlayHint.typeForeground#c7d3e680
editorLightBulb.foreground#7e8faf
editorLightBulbAutoFix.foreground#c7d3e6
editorLineNumber.activeForeground#d4a5d4
editorLineNumber.foreground#3a4355ff
editorLink.activeForeground#c7d3e6
editorMarkerNavigation.background#1A2030
editorMarkerNavigationError.background#1A2030
editorMarkerNavigationInfo.background#1A2030
editorMarkerNavigationWarning.background#1A2030
editorOverviewRuler.addedForeground#98C37980
editorOverviewRuler.background#141925
editorOverviewRuler.border#3a435566
editorOverviewRuler.bracketMatchForeground#7e8faf
editorOverviewRuler.commentForeground#59677d80
editorOverviewRuler.commentUnresolvedForeground#E5C07B80
editorOverviewRuler.commonContentForeground#20273Acc
editorOverviewRuler.currentContentForeground#98C379
editorOverviewRuler.deletedForeground#E06C7580
editorOverviewRuler.errorForeground#E06C7580
editorOverviewRuler.findMatchForeground#3a435566
editorOverviewRuler.incomingContentForeground#c7d3e6
editorOverviewRuler.infoForeground#d4a5d480
editorOverviewRuler.modifiedForeground#7e8faf80
editorOverviewRuler.rangeHighlightForeground#3a435566
editorOverviewRuler.selectionHighlightForeground#3a435566
editorOverviewRuler.warningForeground#E5C07B80
editorOverviewRuler.wordHighlightForeground#3a435533
editorOverviewRuler.wordHighlightStrongForeground#3a435566
editorPane.background#00000000
editorRuler.foreground#3a435566
editorSuggestWidget.background#20273A
editorSuggestWidget.border#c7d3e64d
editorSuggestWidget.focusHighlightForeground#c7d3e6
editorSuggestWidget.foreground#7e8faf
editorSuggestWidget.highlightForeground#B8C9FF
editorSuggestWidget.selectedBackground#3a435533
editorSuggestWidget.selectedForeground#E6ECF5
editorSuggestWidget.selectedIconForeground#E6ECF5
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#E6ECF580
editorWarning.border#00000000
editorWarning.foreground#E5C07B
editorWhitespace.foreground#3a435566
editorWidget.background#20273A
editorWidget.border#c7d3e64d
editorWidget.foreground#7e8faf
editorWidget.resizeBorder#3a4355ff
errorForeground#E06C75
extensionBadge.remoteBackground#d4a5d4
extensionBadge.remoteForeground#0E1118
extensionButton.prominentBackground#c7d3e6
extensionButton.prominentForeground#0E1118
extensionButton.prominentHoverBackground#967ab7
extensionIcon.preReleaseForeground#7e8faf
extensionIcon.starForeground#c7d3e6
extensionIcon.verifiedForeground#d4a5d4
focusBorder#3a435533
foreground#E6ECF5
git.blame.editorDecorationForeground#3a4355ff
gitDecoration.addedResourceForeground#98C379
gitDecoration.conflictingResourceForeground#E5C07B
gitDecoration.deletedResourceForeground#E06C75
gitDecoration.ignoredResourceForeground#59677d
gitDecoration.modifiedResourceForeground#7e8faf
gitDecoration.renamedResourceForeground#d4a5d4
gitDecoration.stageDeletedResourceForeground#E06C75
gitDecoration.stageModifiedResourceForeground#c7d3e6
gitDecoration.submoduleResourceForeground#E5C07B
gitDecoration.untrackedResourceForeground#c7d3e6
icon.foreground#7e8faf
input.background#20273A
input.border#c7d3e64d
input.foreground#E6ECF5
input.placeholderForeground#3a4355ff
inputOption.activeBackground#c7d3e645
inputOption.activeBorder#c7d3e6
inputOption.activeForeground#c7d3e6
inputValidation.errorBackground#2A1A22
inputValidation.errorBorder#E06C75
inputValidation.errorForeground#E06C75
inputValidation.infoBackground#1B2436
inputValidation.infoBorder#d4a5d4
inputValidation.infoForeground#d4a5d4
inputValidation.warningBackground#2A2418
inputValidation.warningBorder#7e8faf
inputValidation.warningForeground#E5C07B
keybindingLabel.background#20273A
keybindingLabel.border#3a435566
keybindingLabel.bottomBorder#3a435566
keybindingLabel.foreground#d4a5d4
keybindingTable.headerBackground#20273A
keybindingTable.rowsBackground#1A2030
list.activeSelectionBackground#7e8faf26
list.activeSelectionForeground#E6ECF5
list.deemphasizedForeground#7e8faf
list.dropBackground#1A2030
list.errorForeground#E06C75
list.filterMatchBackground#1A2030
list.filterMatchBorder#c7d3e6
list.focusBackground#7e8faf33
list.focusForeground#E6ECF5
list.focusOutline#B8C9FF66
list.highlightForeground#c7d3e6
list.hoverBackground#7e8faf1a
list.hoverForeground#B8C9FF
list.inactiveFocusBackground#3a435514
list.inactiveSelectionBackground#20273A
list.inactiveSelectionForeground#E6ECF5
list.invalidItemForeground#E06C75
list.warningForeground#E5C07B
listFilterWidget.background#1A2030
listFilterWidget.noMatchesOutline#E06C75
listFilterWidget.outline#B8C9FF66
menu.background#1A2030
menu.border#20273Acc
menu.foreground#E6ECF5
menu.selectionBackground#3a435533
menu.selectionBorder#20273A
menu.selectionForeground#E6ECF5
menu.separatorBackground#3a435566
menubar.selectionBackground#3a435533
menubar.selectionBorder#20273Acc
menubar.selectionForeground#E6ECF5
merge.border#20273A
merge.commonContentBackground#3a435533
merge.commonHeaderBackground#3a435533
merge.currentContentBackground#98C37945
merge.currentHeaderBackground#98C37945
merge.incomingContentBackground#c7d3e645
merge.incomingHeaderBackground#c7d3e645
minimap.background#1A2030
minimap.errorHighlight#E06C7580
minimap.findMatchHighlight#3a435533
minimap.selectionHighlight#3a435533
minimap.warningHighlight#E5C07B80
minimapGutter.addedBackground#98C379
minimapGutter.deletedBackground#E06C75
minimapGutter.modifiedBackground#7e8faf
minimapSlider.activeBackground#3a435566
minimapSlider.background#3a435533
minimapSlider.hoverBackground#3a435533
notebook.cellBorderColor#d4a5d480
notebook.cellEditorBackground#1A2030
notebook.cellHoverBackground#20273A80
notebook.focusedCellBackground#20273Acc
notebook.focusedCellBorder#d4a5d4
notebook.outputContainerBackgroundColor#20273Acc
notificationCenter.border#3a435533
notificationCenterHeader.background#1A2030
notificationCenterHeader.foreground#7e8faf
notificationLink.foreground#d4a5d4
notifications.background#1A2030
notifications.border#3a435533
notifications.foreground#E6ECF5
notificationsErrorIcon.foreground#E06C75
notificationsInfoIcon.foreground#d4a5d4
notificationsWarningIcon.foreground#E5C07B
notificationToast.border#3a435533
panel.background#1A2030
panel.border#c7d3e64d
panel.dropBorder#20273A
panelInput.border#1A2030
panelSection.dropBackground#3a435533
panelSectionHeader.background#1A2030
panelSectionHeader.foreground#E6ECF5
panelTitle.activeBorder#3a435566
panelTitle.activeForeground#E6ECF5
panelTitle.inactiveForeground#B6C0D4
peekView.border#c7d3e6
peekViewEditor.background#1A2030
peekViewEditor.matchHighlightBackground#3a435566
peekViewResult.background#20273A
peekViewResult.fileForeground#7e8faf
peekViewResult.lineForeground#7e8faf
peekViewResult.matchHighlightBackground#3a435566
peekViewResult.selectionBackground#3a435533
peekViewResult.selectionForeground#E6ECF5
peekViewTitle.background#20273A
peekViewTitleDescription.foreground#7e8faf
pickerGroup.border#3a435566
pickerGroup.foreground#d4a5d4
ports.iconRunningProcessForeground#c7d3e6
problemsErrorIcon.foreground#E06C75
problemsInfoIcon.foreground#d4a5d4
problemsWarningIcon.foreground#E5C07B
progressBar.background#c7d3e6
quickInput.background#1A2030
quickInput.foreground#7e8faf
quickInputList.focusBackground#3a435533
quickInputList.focusForeground#E6ECF5
quickInputList.focusIconForeground#E6ECF5
scrollbar.shadow#0E11184d
scrollbarSlider.activeBackground#7e8faf80
scrollbarSlider.background#3a435566
scrollbarSlider.hoverBackground#7e8faf87
searchEditor.findMatchBackground#3a435533
selection.background#3a435566
settings.focusedRowBackground#1A2030
settings.focusedRowBorder#3a435533
settings.headerForeground#E6ECF5
settings.modifiedItemIndicator#c7d3e6
settings.rowHoverBackground#1A2030
sideBar.background#1A2030
sideBar.dropBackground#1A2030
sideBar.foreground#B6C0D4
sideBarSectionHeader.background#20273A
sideBarSectionHeader.border#3a435533
sideBarSectionHeader.foreground#d4a5d4
sideBarTitle.foreground#7e8faf
statusBar.background#c7d3e6
statusBar.debuggingBackground#E06C75
statusBar.debuggingForeground#0E1118
statusBar.foreground#0E1118
statusBar.noFolderBackground#7e8faf
statusBar.noFolderForeground#E6ECF5
statusBarItem.activeBackground#3a435566
statusBarItem.errorBackground#7e8faf26
statusBarItem.errorForeground#E06C75
statusBarItem.hoverBackground#3a435533
statusBarItem.prominentBackground#20273A
statusBarItem.prominentForeground#E6ECF5
statusBarItem.prominentHoverBackground#3a435533
statusBarItem.remoteBackground#7e8faf
statusBarItem.remoteForeground#141925
symbolIcon.arrayForeground#7e8faf
symbolIcon.classForeground#d4a5d4
symbolIcon.colorForeground#B8C9FF
symbolIcon.constantForeground#7e8faf
symbolIcon.constructorForeground#d4a5d4
symbolIcon.enumeratorForeground#7e8faf
symbolIcon.enumeratorMemberForeground#7e8faf
symbolIcon.eventForeground#c7d3e6
symbolIcon.fieldForeground#7e8faf
symbolIcon.fileForeground#B6C0D4
symbolIcon.folderForeground#B6C0D4
symbolIcon.functionForeground#d4a5d4
symbolIcon.interfaceForeground#d4a5d4
symbolIcon.keyForeground#7e8faf
symbolIcon.keywordForeground#c7d3e6
symbolIcon.methodForeground#d4a5d4
symbolIcon.moduleForeground#B6C0D4
symbolIcon.namespaceForeground#7e8faf
symbolIcon.nullForeground#7e8faf
symbolIcon.numberForeground#7e8faf
symbolIcon.objectForeground#7e8faf
symbolIcon.operatorForeground#c7d3e6
symbolIcon.packageForeground#B6C0D4
symbolIcon.propertyForeground#7e8faf
symbolIcon.referenceForeground#d4a5d4
symbolIcon.snippetForeground#B8C9FF
symbolIcon.stringForeground#B8C9FF
symbolIcon.structForeground#d4a5d4
symbolIcon.textForeground#E6ECF5
symbolIcon.typeParameterForeground#d4a5d4
symbolIcon.unitForeground#7e8faf
symbolIcon.variableForeground#7e8faf
tab.activeBackground#B8C9FF1a
tab.activeBorderTop#c7d3e6
tab.activeForeground#E6ECF5cc
tab.activeModifiedBorder#d4a5d4
tab.hoverBackground#3a435533
tab.inactiveBackground#1A2030
tab.inactiveForeground#B6C0D4
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#3a4355ff
tab.unfocusedActiveBackground#20273A
tab.unfocusedHoverBackground#3a435533
tab.unfocusedInactiveBackground#1A2030
tab.unfocusedInactiveModifiedBorder#d4a5d480
terminal.ansiBlack#0E1118
terminal.ansiBlue#c7d3e6
terminal.ansiBrightBlack#3a4355
terminal.ansiBrightBlue#c7d3e6
terminal.ansiBrightCyan#967ab7
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#d4a5d4
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#E6ECF5
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#967ab7
terminal.ansiGreen#98C379
terminal.ansiMagenta#d4a5d4
terminal.ansiRed#E06C75
terminal.ansiWhite#3a4355ff
terminal.ansiYellow#E5C07B
terminal.background#141925
terminal.dropBackground#3a435533
terminal.foreground#E6ECF5
terminal.selectionBackground#c7d3e633
terminal.tab.activeBorder#E6ECF5
terminalCursor.background#E6ECF5
terminalCursor.foreground#967ab7
textBlockQuote.background#1A2030
textBlockQuote.border#3a435533
textCodeBlock.background#1A2030
textLink.activeForeground#d4a5d4e6
textLink.foreground#d4a5d4
textPreformat.foreground#E5C07B
textSeparator.foreground#7e8faf
titleBar.activeBackground#1A2030
titleBar.activeForeground#E6ECF5
titleBar.inactiveBackground#141925
titleBar.inactiveForeground#B6C0D4
toolbar.activeBackground#3a435566
toolbar.hoverBackground#3a435533
tree.indentGuidesStroke#7e8faf
walkThrough.embeddedEditorBackground#141925
welcomePage.background#141925
widget.shadow#0E11184d
window.activeBorder#1A2030
window.inactiveBorder#1A2030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#59677d	italic
constant, constant.numeric, constant.language	#7e8faf	—
entity.name	#d4a5d4	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#c7d3e6	—
entity.other.attribute-name, entity.other.inherited-class	#d4a5d4	italic
entity.name.class, entity.name.struct	#7e8faf	—
entity.name.function	#d4a5d4	italic
invalid	#E06C75	underline
invalid.deprecated	#B6C0D4	strikethrough
keyword, keyword.operator	#d4a5d4e6	—
markup.heading	#c7d3e6	bold
markup.bold.markdown, markup.bold	#d4a5d4	bold
markup.italic.markdown, markup.italic	#d4a5d4	italic
markup.link	#B8C9FF	—
markup.inserted.diff	#98C379	—
markup.deleted.diff	#E06C75	—
meta.diff.range	#d4a5d4	—
meta.tag, meta.brace	#3a4355ff	—
meta.import, meta.export	#c7d3e6	—
meta.directive.vue	#d4a5d480	italic
meta.property-name.css	#c7d3e6	—
meta.property-value.css	#E5C07B	—
meta.tag.other.html	#7e8faf	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#B6C0D4	—
punctuation.accessor	#967ab7	—
punctuation.definition.string	#B8C9FF	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#d4a5d480	—
string	#B8C9FFcc	—
storage.type, storage.modifier	#c7d3e6	—
support	#c7d3e6	—
support.constant	#E5C07B	—
support.type.property-name	#E6ECF5b3	—
support.type.property-name.json	#E6ECF5cc	—
support.function	#d4a5d4	italic
variable	#E6ECF5	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#E6ECF5	—
variable.parameter	#E6A3B5	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}!`;
}