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: Verdant Dreamweave

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6f7d59	italic
constant, constant.numeric, constant.language	#90ee90	—
entity.name	#b9daa4	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#a7ea43	—
entity.other.attribute-name, entity.other.inherited-class	#b9daa4	italic
entity.name.class, entity.name.struct	#90ee90	—
entity.name.function	#b9daa4	italic
invalid	#f0d9b5	underline
invalid.deprecated	#9ac89a	strikethrough
keyword, keyword.operator	#b9daa4e6	—
markup.heading	#a7ea43	bold
markup.bold.markdown, markup.bold	#b9daa4	bold
markup.italic.markdown, markup.italic	#b9daa4	italic
markup.link	#f0d9b5	—
markup.inserted.diff	#90ee90	—
markup.deleted.diff	#f0d9b5	—
meta.diff.range	#b9daa4	—
meta.tag, meta.brace	#3a4a3a	—
meta.import, meta.export	#a7ea43	—
meta.directive.vue	#b9daa480	italic
meta.property-name.css	#a7ea43	—
meta.property-value.css	#e7ff2fff	—
meta.tag.other.html	#90ee90	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#9ac89a	—
punctuation.accessor	#9ac89a	—
punctuation.definition.string	#f0d9b5	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#b9daa480	—
string	#f0d9b5cc	—
storage.type, storage.modifier	#a7ea43	—
support	#a7ea43	—
support.constant	#e7ff2fff	—
support.type.property-name	#e8f5d8b3	—
support.type.property-name.json	#e8f5d8cc	—
support.function	#b9daa4	italic
variable	#e8f5d8	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#e8f5d8	—
variable.parameter	#c8e6c9	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}!`;
}