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: Conqueror of Demons

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#7a4d89
activityBar.background#f0f9f9
activityBar.dropBorder#f8fbfb
activityBar.foreground#0520a8
activityBar.inactiveForeground#65758b
activityBarBadge.background#7a4d89
activityBarBadge.foreground#f0f9f9
badge.background#7a4d89
badge.foreground#f0f9f9
banner.background#f8fbfb
banner.foreground#392b18
banner.iconForeground#2a8981
breadcrumb.activeSelectionForeground#7a4d89
breadcrumb.background#fcfdfd
breadcrumb.focusForeground#0520a8
breadcrumb.foreground#392b1880
breadcrumbPicker.background#f8fbfb
button.background#2a8981
button.foreground#f0f9f9
button.hoverBackground#7a4d89
button.secondaryBackground#f8fbfb
button.secondaryForeground#392b18
button.secondaryHoverBackground#f8f9fb
charts.blue#7a4d89
charts.foreground#392b18
charts.green#1d5f52
charts.lines#2a8981
charts.orange#3cc3a8
charts.purple#0520a8
charts.red#b34a5d
charts.yellow#a07840
checkbox.background#f8fbfb
checkbox.border#65758b33
checkbox.foreground#392b18
debugExceptionWidget.background#f8fbfb
debugExceptionWidget.border#65758b33
debugIcon.breakpointCurrentStackframeForeground#2a8981
debugIcon.breakpointDisabledForeground#65758b
debugIcon.breakpointForeground#2a8981
debugIcon.breakpointStackframeForeground#2a8981
debugIcon.breakpointUnverifiedForeground#54486a
debugIcon.continueForeground#2a8981
debugIcon.disconnectForeground#54486a
debugIcon.pauseForeground#2a8981
debugIcon.restartForeground#0520a8
debugIcon.startForeground#7a4d89
debugIcon.stepBackForeground#2a8981
debugIcon.stepIntoForeground#2a8981
debugIcon.stepOutForeground#2a8981
debugIcon.stepOverForeground#2a8981
debugIcon.stopForeground#b34a5d
debugToolBar.background#f8fbfb
debugToolBar.border#f8f9fb
descriptionForeground#2a8981
diffEditor.border#f8f9fb
diffEditor.diagonalFill#65758b66
diffEditor.insertedLineBackground#1d5f5226
diffEditor.insertedTextBackground#1d5f5226
diffEditor.removedLineBackground#b34a5d26
diffEditor.removedTextBackground#b34a5d26
diffEditorOverview.insertedForeground#1d5f5280
diffEditorOverview.removedForeground#b34a5d80
dropdown.background#f8f9fb
dropdown.border#7a4d8933
dropdown.foreground#392b18
dropdown.listBackground#f8f9fb
editor.background#fcfdfd
editor.findMatchBackground#a0784026
editor.findMatchBorder#a0784080
editor.findMatchForeground#392b18
editor.findMatchHighlightBackground#65758b66
editor.findMatchHighlightForeground#392b18cc
editor.findRangeHighlightBackground#65758b66
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#65758b33
editor.foldBackground#65758b33
editor.foreground#392b18
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#f8f9fbcc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#2a8981
editor.lineHighlightBackground#65758b14
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#65758b33
editor.rangeHighlightBackground#f8f9fbcc
editor.selectionBackground#7a4d8926
editor.selectionForeground#65758b
editor.selectionHighlightBackground#65758b33
editor.selectionHighlightBorder#fcfdfd
editor.snippetFinalTabstopHighlightBackground#65758b33
editor.snippetFinalTabstopHighlightBorder#f8fbfb
editor.snippetTabstopHighlightBackground#65758b33
editor.snippetTabstopHighlightBorder#f8fbfb
editor.stackFrameHighlightBackground#65758b33
editor.symbolHighlightBackground#65758b33
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#65758b33
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#65758b33
editor.wordHighlightStrongBorder#65758b33
editorBracketHighlight.foreground1#b34a5d80
editorBracketHighlight.foreground2#2a898180
editorBracketHighlight.foreground3#a0784080
editorBracketHighlight.foreground4#0520a880
editorBracketHighlight.foreground5#7a4d8980
editorBracketHighlight.foreground6#a859c580
editorBracketMatch.background#7a4d8945
editorBracketMatch.border#7a4d89
editorBracketPairGuide.activeBackground1#2a8981
editorBracketPairGuide.activeBackground2#7a4d89
editorBracketPairGuide.activeBackground3#0520a8
editorBracketPairGuide.activeBackground4#a859c5
editorBracketPairGuide.activeBackground5#a07840
editorBracketPairGuide.activeBackground6#b34a5d
editorBracketPairGuide.background1#2a898180
editorBracketPairGuide.background2#7a4d8980
editorBracketPairGuide.background3#0520a880
editorBracketPairGuide.background4#a859c580
editorBracketPairGuide.background5#a0784080
editorBracketPairGuide.background6#b34a5d80
editorCodeLens.foreground#7a4d89
editorCursor.background#392b18
editorCursor.foreground#a859c5
editorError.border#00000000
editorError.foreground#b34a5d
editorGhostText.foreground#2a8981
editorGroup.border#00000000
editorGroup.dropBackground#f8fbfb
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#f0f9f9
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#392b18cc
editorGutter.addedBackground#1d5f52
editorGutter.background#fcfdfd
editorGutter.commentRangeForeground#f8f9fb
editorGutter.deletedBackground#b34a5d
editorGutter.foldingControlForeground#0520a8
editorGutter.modifiedBackground#2a8981
editorHint.border#00000000
editorHint.foreground#2a8981
editorHoverWidget.background#f8f9fb
editorHoverWidget.border#7a4d8933
editorHoverWidget.foreground#2a8981
editorHoverWidget.highlightForeground#392b18
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#65758b
editorIndentGuide.activeBackground1#65758b
editorIndentGuide.background#65758b66
editorIndentGuide.background1#65758b66
editorInfo.border#f8f9fb
editorInfo.foreground#0520a8
editorInlayHint.background#f8f9fb80
editorInlayHint.foreground#2a898180
editorInlayHint.parameterBackground#f8f9fb80
editorInlayHint.parameterForeground#0520a880
editorInlayHint.typeBackground#f8f9fb80
editorInlayHint.typeForeground#7a4d8980
editorLightBulb.foreground#2a8981
editorLightBulbAutoFix.foreground#7a4d89
editorLineNumber.activeForeground#0520a8
editorLineNumber.foreground#65758b
editorLink.activeForeground#7a4d89
editorMarkerNavigation.background#f8fbfb
editorMarkerNavigationError.background#f8fbfb
editorMarkerNavigationInfo.background#f8fbfb
editorMarkerNavigationWarning.background#f8fbfb
editorOverviewRuler.addedForeground#1d5f5280
editorOverviewRuler.background#fcfdfd
editorOverviewRuler.border#65758b66
editorOverviewRuler.bracketMatchForeground#2a8981
editorOverviewRuler.commentForeground#abaebf80
editorOverviewRuler.commentUnresolvedForeground#a0784080
editorOverviewRuler.commonContentForeground#f8f9fbcc
editorOverviewRuler.currentContentForeground#1d5f52
editorOverviewRuler.deletedForeground#b34a5d80
editorOverviewRuler.errorForeground#b34a5d80
editorOverviewRuler.findMatchForeground#65758b66
editorOverviewRuler.incomingContentForeground#7a4d89
editorOverviewRuler.infoForeground#0520a880
editorOverviewRuler.modifiedForeground#2a898180
editorOverviewRuler.rangeHighlightForeground#65758b66
editorOverviewRuler.selectionHighlightForeground#65758b66
editorOverviewRuler.warningForeground#a0784080
editorOverviewRuler.wordHighlightForeground#65758b33
editorOverviewRuler.wordHighlightStrongForeground#65758b66
editorPane.background#00000000
editorRuler.foreground#65758b66
editorSuggestWidget.background#f8f9fb
editorSuggestWidget.border#7a4d8933
editorSuggestWidget.focusHighlightForeground#7a4d89
editorSuggestWidget.foreground#2a8981
editorSuggestWidget.highlightForeground#3cc3a8
editorSuggestWidget.selectedBackground#65758b33
editorSuggestWidget.selectedForeground#392b18
editorSuggestWidget.selectedIconForeground#392b18
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#392b1880
editorWarning.border#00000000
editorWarning.foreground#a07840
editorWhitespace.foreground#65758b66
editorWidget.background#f8f9fb
editorWidget.border#7a4d8933
editorWidget.foreground#2a8981
editorWidget.resizeBorder#65758b
errorForeground#b34a5d
extensionBadge.remoteBackground#0520a8
extensionBadge.remoteForeground#f0f9f9
extensionButton.prominentBackground#7a4d89
extensionButton.prominentForeground#f0f9f9
extensionButton.prominentHoverBackground#a859c5
extensionIcon.preReleaseForeground#2a8981
extensionIcon.starForeground#7a4d89
extensionIcon.verifiedForeground#0520a8
focusBorder#65758b33
foreground#392b18
git.blame.editorDecorationForeground#65758b
gitDecoration.addedResourceForeground#1d5f52
gitDecoration.conflictingResourceForeground#a07840
gitDecoration.deletedResourceForeground#b34a5d
gitDecoration.ignoredResourceForeground#abaebf
gitDecoration.modifiedResourceForeground#2a8981
gitDecoration.renamedResourceForeground#0520a8
gitDecoration.stageDeletedResourceForeground#b34a5d
gitDecoration.stageModifiedResourceForeground#7a4d89
gitDecoration.submoduleResourceForeground#a07840
gitDecoration.untrackedResourceForeground#7a4d89
icon.foreground#2a8981
input.background#f8f9fb
input.border#7a4d8933
input.foreground#392b18
input.placeholderForeground#65758b
inputOption.activeBackground#7a4d8945
inputOption.activeBorder#7a4d89
inputOption.activeForeground#7a4d89
inputValidation.errorBackground#fff1f2
inputValidation.errorBorder#b34a5d
inputValidation.errorForeground#b34a5d
inputValidation.infoBackground#f0fdfa
inputValidation.infoBorder#0520a8
inputValidation.infoForeground#0520a8
inputValidation.warningBackground#fffbeb
inputValidation.warningBorder#2a8981
inputValidation.warningForeground#a07840
keybindingLabel.background#f8f9fb
keybindingLabel.border#65758b66
keybindingLabel.bottomBorder#65758b66
keybindingLabel.foreground#0520a8
keybindingTable.headerBackground#f8f9fb
keybindingTable.rowsBackground#f8fbfb
list.activeSelectionBackground#2a898126
list.activeSelectionForeground#392b18
list.deemphasizedForeground#2a8981
list.dropBackground#f8fbfb
list.errorForeground#b34a5d
list.filterMatchBackground#f8fbfb
list.filterMatchBorder#7a4d89
list.focusBackground#2a898133
list.focusForeground#392b18
list.focusOutline#3cc3a899
list.highlightForeground#7a4d89
list.hoverBackground#2a89811a
list.hoverForeground#3cc3a8
list.inactiveFocusBackground#65758b14
list.inactiveSelectionBackground#f8f9fb
list.inactiveSelectionForeground#392b18
list.invalidItemForeground#b34a5d
list.warningForeground#a07840
listFilterWidget.background#f8fbfb
listFilterWidget.noMatchesOutline#b34a5d
listFilterWidget.outline#3cc3a866
menu.background#f8fbfb
menu.border#f8f9fbcc
menu.foreground#392b18
menu.selectionBackground#65758b33
menu.selectionBorder#f8f9fb
menu.selectionForeground#392b18
menu.separatorBackground#65758b66
menubar.selectionBackground#65758b33
menubar.selectionBorder#f8f9fbcc
menubar.selectionForeground#392b18
merge.border#f8f9fb
merge.commonContentBackground#65758b33
merge.commonHeaderBackground#65758b33
merge.currentContentBackground#1d5f5245
merge.currentHeaderBackground#1d5f5245
merge.incomingContentBackground#7a4d8945
merge.incomingHeaderBackground#7a4d8945
minimap.background#f8fbfb
minimap.errorHighlight#b34a5d80
minimap.findMatchHighlight#65758b33
minimap.selectionHighlight#65758b33
minimap.warningHighlight#a0784080
minimapGutter.addedBackground#1d5f52
minimapGutter.deletedBackground#b34a5d
minimapGutter.modifiedBackground#2a8981
minimapSlider.activeBackground#65758b66
minimapSlider.background#65758b33
minimapSlider.hoverBackground#65758b33
notebook.cellBorderColor#0520a880
notebook.cellEditorBackground#f8fbfb
notebook.cellHoverBackground#f8f9fb80
notebook.focusedCellBackground#f8f9fbcc
notebook.focusedCellBorder#0520a8
notebook.outputContainerBackgroundColor#f8f9fbcc
notificationCenter.border#65758b33
notificationCenterHeader.background#f8fbfb
notificationCenterHeader.foreground#2a8981
notificationLink.foreground#0520a8
notifications.background#f8fbfb
notifications.border#65758b33
notifications.foreground#392b18
notificationsErrorIcon.foreground#b34a5d
notificationsInfoIcon.foreground#0520a8
notificationsWarningIcon.foreground#a07840
notificationToast.border#65758b33
panel.background#f8fbfb
panel.border#7a4d8933
panel.dropBorder#f8f9fb
panelInput.border#f8fbfb
panelSection.dropBackground#65758b33
panelSectionHeader.background#f8fbfb
panelSectionHeader.foreground#392b18
panelTitle.activeBorder#65758b66
panelTitle.activeForeground#392b18
panelTitle.inactiveForeground#54486a
peekView.border#7a4d89
peekViewEditor.background#f8fbfb
peekViewEditor.matchHighlightBackground#65758b66
peekViewResult.background#f8f9fb
peekViewResult.fileForeground#2a8981
peekViewResult.lineForeground#2a8981
peekViewResult.matchHighlightBackground#65758b66
peekViewResult.selectionBackground#65758b33
peekViewResult.selectionForeground#392b18
peekViewTitle.background#f8f9fb
peekViewTitleDescription.foreground#2a8981
pickerGroup.border#65758b66
pickerGroup.foreground#0520a8
ports.iconRunningProcessForeground#7a4d89
problemsErrorIcon.foreground#b34a5d
problemsInfoIcon.foreground#0520a8
problemsWarningIcon.foreground#a07840
progressBar.background#7a4d89
quickInput.background#f8fbfb
quickInput.foreground#2a8981
quickInputList.focusBackground#65758b33
quickInputList.focusForeground#392b18
quickInputList.focusIconForeground#392b18
scrollbar.shadow#f0f9f94d
scrollbarSlider.activeBackground#2a898180
scrollbarSlider.background#65758b66
scrollbarSlider.hoverBackground#2a898187
searchEditor.findMatchBackground#65758b33
selection.background#65758b66
settings.focusedRowBackground#f8fbfb
settings.focusedRowBorder#65758b33
settings.headerForeground#392b18
settings.modifiedItemIndicator#7a4d89
settings.rowHoverBackground#f8fbfb
sideBar.background#f8fbfb
sideBar.dropBackground#f8fbfb
sideBar.foreground#54486a
sideBarSectionHeader.background#f8f9fb
sideBarSectionHeader.border#65758b33
sideBarSectionHeader.foreground#0520a8
sideBarTitle.foreground#2a8981
statusBar.background#7a4d89
statusBar.debuggingBackground#b34a5d
statusBar.debuggingForeground#f0f9f9
statusBar.foreground#f0f9f9
statusBar.noFolderBackground#2a8981
statusBar.noFolderForeground#392b18
statusBarItem.activeBackground#65758b66
statusBarItem.errorBackground#2a898126
statusBarItem.errorForeground#b34a5d
statusBarItem.hoverBackground#65758b33
statusBarItem.prominentBackground#f8f9fb
statusBarItem.prominentForeground#392b18
statusBarItem.prominentHoverBackground#65758b33
statusBarItem.remoteBackground#2a8981
statusBarItem.remoteForeground#fcfdfd
symbolIcon.arrayForeground#2a8981
symbolIcon.classForeground#0520a8
symbolIcon.colorForeground#3cc3a8
symbolIcon.constantForeground#2a8981
symbolIcon.constructorForeground#0520a8
symbolIcon.enumeratorForeground#2a8981
symbolIcon.enumeratorMemberForeground#2a8981
symbolIcon.eventForeground#7a4d89
symbolIcon.fieldForeground#2a8981
symbolIcon.fileForeground#54486a
symbolIcon.folderForeground#54486a
symbolIcon.functionForeground#0520a8
symbolIcon.interfaceForeground#0520a8
symbolIcon.keyForeground#2a8981
symbolIcon.keywordForeground#7a4d89
symbolIcon.methodForeground#0520a8
symbolIcon.moduleForeground#54486a
symbolIcon.namespaceForeground#2a8981
symbolIcon.nullForeground#2a8981
symbolIcon.numberForeground#2a8981
symbolIcon.objectForeground#2a8981
symbolIcon.operatorForeground#7a4d89
symbolIcon.packageForeground#54486a
symbolIcon.propertyForeground#2a8981
symbolIcon.referenceForeground#0520a8
symbolIcon.snippetForeground#3cc3a8
symbolIcon.stringForeground#3cc3a8
symbolIcon.structForeground#0520a8
symbolIcon.textForeground#392b18
symbolIcon.typeParameterForeground#0520a8
symbolIcon.unitForeground#2a8981
symbolIcon.variableForeground#2a8981
tab.activeBackground#3cc3a81a
tab.activeBorderTop#7a4d89
tab.activeForeground#392b18cc
tab.activeModifiedBorder#0520a8
tab.hoverBackground#65758b33
tab.inactiveBackground#f8fbfb
tab.inactiveForeground#54486a
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#65758b
tab.unfocusedActiveBackground#f8f9fb
tab.unfocusedHoverBackground#65758b33
tab.unfocusedInactiveBackground#f8fbfb
tab.unfocusedInactiveModifiedBorder#0520a880
terminal.ansiBlack#f0f9f9
terminal.ansiBlue#7a4d89
terminal.ansiBrightBlack#65758b
terminal.ansiBrightBlue#7a4d89
terminal.ansiBrightCyan#a859c5
terminal.ansiBrightGreen#1d5f52
terminal.ansiBrightMagenta#0520a8
terminal.ansiBrightRed#b34a5d
terminal.ansiBrightWhite#392b18
terminal.ansiBrightYellow#a07840
terminal.ansiCyan#a859c5
terminal.ansiGreen#1d5f52
terminal.ansiMagenta#0520a8
terminal.ansiRed#b34a5d
terminal.ansiWhite#65758b
terminal.ansiYellow#a07840
terminal.background#fcfdfd
terminal.dropBackground#65758b33
terminal.foreground#392b18
terminal.selectionBackground#7a4d8926
terminal.tab.activeBorder#392b18
terminalCursor.background#392b18
terminalCursor.foreground#a859c5
textBlockQuote.background#f8fbfb
textBlockQuote.border#65758b33
textCodeBlock.background#f8fbfb
textLink.activeForeground#0520a8e6
textLink.foreground#0520a8
textPreformat.foreground#a07840
textSeparator.foreground#2a8981
titleBar.activeBackground#f8fbfb
titleBar.activeForeground#392b18
titleBar.inactiveBackground#fcfdfd
titleBar.inactiveForeground#54486a
toolbar.activeBackground#65758b66
toolbar.hoverBackground#65758b33
tree.indentGuidesStroke#2a8981
walkThrough.embeddedEditorBackground#fcfdfd
welcomePage.background#fcfdfd
widget.shadow#f0f9f94d
window.activeBorder#f8fbfb
window.inactiveBorder#f8fbfb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abaebf	italic
constant, constant.numeric, constant.language	#2a8981	—
entity.name	#0520a8	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#7a4d89	—
entity.other.attribute-name, entity.other.inherited-class	#0520a8	italic
entity.name.class, entity.name.struct	#2a8981	—
entity.name.function	#0520a8	italic
invalid	#b34a5d	underline
invalid.deprecated	#54486a	strikethrough
keyword, keyword.operator	#0520a8e6	—
markup.heading	#7a4d89	bold
markup.bold.markdown, markup.bold	#0520a8	bold
markup.italic.markdown, markup.italic	#0520a8	italic
markup.link	#3cc3a8	—
markup.inserted.diff	#1d5f52	—
markup.deleted.diff	#b34a5d	—
meta.diff.range	#0520a8	—
meta.tag, meta.brace	#65758b	—
meta.import, meta.export	#7a4d89	—
meta.directive.vue	#0520a880	italic
meta.property-name.css	#7a4d89	—
meta.property-value.css	#a07840	—
meta.tag.other.html	#2a8981	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#54486a	—
punctuation.accessor	#a859c5	—
punctuation.definition.string	#3cc3a8	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#0520a880	—
string	#3cc3a8cc	—
storage.type, storage.modifier	#7a4d89	—
support	#7a4d89	—
support.constant	#a07840	—
support.type.property-name	#392b18b3	—
support.type.property-name.json	#392b18cc	—
support.function	#0520a8	italic
variable	#392b18	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#392b18	—
variable.parameter	#1d8c84	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}!`;
}