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: Starry Companion

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#e7a240
activityBar.background#F3F6FF
activityBar.dropBorder#EEF2FF
activityBar.foreground#7084e6
activityBar.inactiveForeground#b8c0dfff
activityBarBadge.background#e7a240
activityBarBadge.foreground#F3F6FF
badge.background#e7a240
badge.foreground#F3F6FF
banner.background#EEF2FF
banner.foreground#1A2140
banner.iconForeground#378da4
breadcrumb.activeSelectionForeground#e7a240
breadcrumb.background#F8FAFF
breadcrumb.focusForeground#7084e6
breadcrumb.foreground#1A214080
breadcrumbPicker.background#EEF2FF
button.background#378da4
button.foreground#F3F6FF
button.hoverBackground#e7a240
button.secondaryBackground#EEF2FF
button.secondaryForeground#1A2140
button.secondaryHoverBackground#E4E9FF
charts.blue#e7a240
charts.foreground#1A2140
charts.green#4E9F5D
charts.lines#378da4
charts.orange#5b6bff
charts.purple#7084e6
charts.red#D64550
charts.yellow#C89B2C
checkbox.background#EEF2FF
checkbox.border#b8c0df33
checkbox.foreground#1A2140
debugExceptionWidget.background#EEF2FF
debugExceptionWidget.border#b8c0df33
debugIcon.breakpointCurrentStackframeForeground#378da4
debugIcon.breakpointDisabledForeground#b8c0dfff
debugIcon.breakpointForeground#378da4
debugIcon.breakpointStackframeForeground#378da4
debugIcon.breakpointUnverifiedForeground#4B5A99
debugIcon.continueForeground#378da4
debugIcon.disconnectForeground#4B5A99
debugIcon.pauseForeground#378da4
debugIcon.restartForeground#7084e6
debugIcon.startForeground#e7a240
debugIcon.stepBackForeground#378da4
debugIcon.stepIntoForeground#378da4
debugIcon.stepOutForeground#378da4
debugIcon.stepOverForeground#378da4
debugIcon.stopForeground#D64550
debugToolBar.background#EEF2FF
debugToolBar.border#E4E9FF
descriptionForeground#378da4
diffEditor.border#E4E9FF
diffEditor.diagonalFill#b8c0df66
diffEditor.insertedLineBackground#4E9F5D26
diffEditor.insertedTextBackground#4E9F5D26
diffEditor.removedLineBackground#D6455026
diffEditor.removedTextBackground#D6455026
diffEditorOverview.insertedForeground#4E9F5D80
diffEditorOverview.removedForeground#D6455080
dropdown.background#E4E9FF
dropdown.border#e7a24033
dropdown.foreground#1A2140
dropdown.listBackground#E4E9FF
editor.background#F8FAFF
editor.findMatchBackground#C89B2C26
editor.findMatchBorder#C89B2C80
editor.findMatchForeground#1A2140
editor.findMatchHighlightBackground#b8c0df66
editor.findMatchHighlightForeground#1A2140cc
editor.findRangeHighlightBackground#b8c0df66
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#b8c0df33
editor.foldBackground#b8c0df33
editor.foreground#1A2140
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#E4E9FFcc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#378da4
editor.lineHighlightBackground#b8c0df14
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#b8c0df33
editor.rangeHighlightBackground#E4E9FFcc
editor.selectionBackground#e7a24026
editor.selectionForeground#b8c0dfff
editor.selectionHighlightBackground#b8c0df33
editor.selectionHighlightBorder#F8FAFF
editor.snippetFinalTabstopHighlightBackground#b8c0df33
editor.snippetFinalTabstopHighlightBorder#EEF2FF
editor.snippetTabstopHighlightBackground#b8c0df33
editor.snippetTabstopHighlightBorder#EEF2FF
editor.stackFrameHighlightBackground#b8c0df33
editor.symbolHighlightBackground#b8c0df33
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#b8c0df33
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#b8c0df33
editor.wordHighlightStrongBorder#b8c0df33
editorBracketHighlight.foreground1#D6455080
editorBracketHighlight.foreground2#378da480
editorBracketHighlight.foreground3#C89B2C80
editorBracketHighlight.foreground4#7084e680
editorBracketHighlight.foreground5#e7a24080
editorBracketHighlight.foreground6#C77DFF80
editorBracketMatch.background#e7a24045
editorBracketMatch.border#e7a240
editorBracketPairGuide.activeBackground1#378da4
editorBracketPairGuide.activeBackground2#e7a240
editorBracketPairGuide.activeBackground3#7084e6
editorBracketPairGuide.activeBackground4#C77DFF
editorBracketPairGuide.activeBackground5#C89B2C
editorBracketPairGuide.activeBackground6#D64550
editorBracketPairGuide.background1#378da480
editorBracketPairGuide.background2#e7a24080
editorBracketPairGuide.background3#7084e680
editorBracketPairGuide.background4#C77DFF80
editorBracketPairGuide.background5#C89B2C80
editorBracketPairGuide.background6#D6455080
editorCodeLens.foreground#e7a240
editorCursor.background#1A2140
editorCursor.foreground#C77DFF
editorError.border#00000000
editorError.foreground#D64550
editorGhostText.foreground#378da4
editorGroup.border#00000000
editorGroup.dropBackground#EEF2FF
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#F3F6FF
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#1A2140cc
editorGutter.addedBackground#4E9F5D
editorGutter.background#F8FAFF
editorGutter.commentRangeForeground#E4E9FF
editorGutter.deletedBackground#D64550
editorGutter.foldingControlForeground#7084e6
editorGutter.modifiedBackground#378da4
editorHint.border#00000000
editorHint.foreground#378da4
editorHoverWidget.background#E4E9FF
editorHoverWidget.border#e7a24033
editorHoverWidget.foreground#378da4
editorHoverWidget.highlightForeground#1A2140
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#b8c0dfff
editorIndentGuide.activeBackground1#b8c0dfff
editorIndentGuide.background#b8c0df66
editorIndentGuide.background1#b8c0df66
editorInfo.border#E4E9FF
editorInfo.foreground#7084e6
editorInlayHint.background#E4E9FF80
editorInlayHint.foreground#378da480
editorInlayHint.parameterBackground#E4E9FF80
editorInlayHint.parameterForeground#7084e680
editorInlayHint.typeBackground#E4E9FF80
editorInlayHint.typeForeground#e7a24080
editorLightBulb.foreground#378da4
editorLightBulbAutoFix.foreground#e7a240
editorLineNumber.activeForeground#7084e6
editorLineNumber.foreground#b8c0dfff
editorLink.activeForeground#e7a240
editorMarkerNavigation.background#EEF2FF
editorMarkerNavigationError.background#EEF2FF
editorMarkerNavigationInfo.background#EEF2FF
editorMarkerNavigationWarning.background#EEF2FF
editorOverviewRuler.addedForeground#4E9F5D80
editorOverviewRuler.background#F8FAFF
editorOverviewRuler.border#b8c0df66
editorOverviewRuler.bracketMatchForeground#378da4
editorOverviewRuler.commentForeground#abadba80
editorOverviewRuler.commentUnresolvedForeground#C89B2C80
editorOverviewRuler.commonContentForeground#E4E9FFcc
editorOverviewRuler.currentContentForeground#4E9F5D
editorOverviewRuler.deletedForeground#D6455080
editorOverviewRuler.errorForeground#D6455080
editorOverviewRuler.findMatchForeground#b8c0df66
editorOverviewRuler.incomingContentForeground#e7a240
editorOverviewRuler.infoForeground#7084e680
editorOverviewRuler.modifiedForeground#378da480
editorOverviewRuler.rangeHighlightForeground#b8c0df66
editorOverviewRuler.selectionHighlightForeground#b8c0df66
editorOverviewRuler.warningForeground#C89B2C80
editorOverviewRuler.wordHighlightForeground#b8c0df33
editorOverviewRuler.wordHighlightStrongForeground#b8c0df66
editorPane.background#00000000
editorRuler.foreground#b8c0df66
editorSuggestWidget.background#E4E9FF
editorSuggestWidget.border#e7a24033
editorSuggestWidget.focusHighlightForeground#e7a240
editorSuggestWidget.foreground#378da4
editorSuggestWidget.highlightForeground#5b6bff
editorSuggestWidget.selectedBackground#b8c0df33
editorSuggestWidget.selectedForeground#1A2140
editorSuggestWidget.selectedIconForeground#1A2140
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#1A214080
editorWarning.border#00000000
editorWarning.foreground#C89B2C
editorWhitespace.foreground#b8c0df66
editorWidget.background#E4E9FF
editorWidget.border#e7a24033
editorWidget.foreground#378da4
editorWidget.resizeBorder#b8c0dfff
errorForeground#D64550
extensionBadge.remoteBackground#7084e6
extensionBadge.remoteForeground#F3F6FF
extensionButton.prominentBackground#e7a240
extensionButton.prominentForeground#F3F6FF
extensionButton.prominentHoverBackground#C77DFF
extensionIcon.preReleaseForeground#378da4
extensionIcon.starForeground#e7a240
extensionIcon.verifiedForeground#7084e6
focusBorder#b8c0df33
foreground#1A2140
git.blame.editorDecorationForeground#b8c0dfff
gitDecoration.addedResourceForeground#4E9F5D
gitDecoration.conflictingResourceForeground#C89B2C
gitDecoration.deletedResourceForeground#D64550
gitDecoration.ignoredResourceForeground#abadba
gitDecoration.modifiedResourceForeground#378da4
gitDecoration.renamedResourceForeground#7084e6
gitDecoration.stageDeletedResourceForeground#D64550
gitDecoration.stageModifiedResourceForeground#e7a240
gitDecoration.submoduleResourceForeground#C89B2C
gitDecoration.untrackedResourceForeground#e7a240
icon.foreground#378da4
input.background#E4E9FF
input.border#e7a24033
input.foreground#1A2140
input.placeholderForeground#b8c0dfff
inputOption.activeBackground#e7a24045
inputOption.activeBorder#e7a240
inputOption.activeForeground#e7a240
inputValidation.errorBackground#F6DADD
inputValidation.errorBorder#D64550
inputValidation.errorForeground#D64550
inputValidation.infoBackground#E2E9FF
inputValidation.infoBorder#7084e6
inputValidation.infoForeground#7084e6
inputValidation.warningBackground#F4EBD1
inputValidation.warningBorder#378da4
inputValidation.warningForeground#C89B2C
keybindingLabel.background#E4E9FF
keybindingLabel.border#b8c0df66
keybindingLabel.bottomBorder#b8c0df66
keybindingLabel.foreground#7084e6
keybindingTable.headerBackground#E4E9FF
keybindingTable.rowsBackground#EEF2FF
list.activeSelectionBackground#378da426
list.activeSelectionForeground#1A2140
list.deemphasizedForeground#378da4
list.dropBackground#EEF2FF
list.errorForeground#D64550
list.filterMatchBackground#EEF2FF
list.filterMatchBorder#e7a240
list.focusBackground#378da433
list.focusForeground#1A2140
list.focusOutline#5b6bff99
list.highlightForeground#e7a240
list.hoverBackground#378da41a
list.hoverForeground#5b6bff
list.inactiveFocusBackground#b8c0df14
list.inactiveSelectionBackground#E4E9FF
list.inactiveSelectionForeground#1A2140
list.invalidItemForeground#D64550
list.warningForeground#C89B2C
listFilterWidget.background#EEF2FF
listFilterWidget.noMatchesOutline#D64550
listFilterWidget.outline#5b6bff66
menu.background#EEF2FF
menu.border#E4E9FFcc
menu.foreground#1A2140
menu.selectionBackground#b8c0df33
menu.selectionBorder#E4E9FF
menu.selectionForeground#1A2140
menu.separatorBackground#b8c0df66
menubar.selectionBackground#b8c0df33
menubar.selectionBorder#E4E9FFcc
menubar.selectionForeground#1A2140
merge.border#E4E9FF
merge.commonContentBackground#b8c0df33
merge.commonHeaderBackground#b8c0df33
merge.currentContentBackground#4E9F5D45
merge.currentHeaderBackground#4E9F5D45
merge.incomingContentBackground#e7a24045
merge.incomingHeaderBackground#e7a24045
minimap.background#EEF2FF
minimap.errorHighlight#D6455080
minimap.findMatchHighlight#b8c0df33
minimap.selectionHighlight#b8c0df33
minimap.warningHighlight#C89B2C80
minimapGutter.addedBackground#4E9F5D
minimapGutter.deletedBackground#D64550
minimapGutter.modifiedBackground#378da4
minimapSlider.activeBackground#b8c0df66
minimapSlider.background#b8c0df33
minimapSlider.hoverBackground#b8c0df33
notebook.cellBorderColor#7084e680
notebook.cellEditorBackground#EEF2FF
notebook.cellHoverBackground#E4E9FF80
notebook.focusedCellBackground#E4E9FFcc
notebook.focusedCellBorder#7084e6
notebook.outputContainerBackgroundColor#E4E9FFcc
notificationCenter.border#b8c0df33
notificationCenterHeader.background#EEF2FF
notificationCenterHeader.foreground#378da4
notificationLink.foreground#7084e6
notifications.background#EEF2FF
notifications.border#b8c0df33
notifications.foreground#1A2140
notificationsErrorIcon.foreground#D64550
notificationsInfoIcon.foreground#7084e6
notificationsWarningIcon.foreground#C89B2C
notificationToast.border#b8c0df33
panel.background#EEF2FF
panel.border#e7a24033
panel.dropBorder#E4E9FF
panelInput.border#EEF2FF
panelSection.dropBackground#b8c0df33
panelSectionHeader.background#EEF2FF
panelSectionHeader.foreground#1A2140
panelTitle.activeBorder#b8c0df66
panelTitle.activeForeground#1A2140
panelTitle.inactiveForeground#4B5A99
peekView.border#e7a240
peekViewEditor.background#EEF2FF
peekViewEditor.matchHighlightBackground#b8c0df66
peekViewResult.background#E4E9FF
peekViewResult.fileForeground#378da4
peekViewResult.lineForeground#378da4
peekViewResult.matchHighlightBackground#b8c0df66
peekViewResult.selectionBackground#b8c0df33
peekViewResult.selectionForeground#1A2140
peekViewTitle.background#E4E9FF
peekViewTitleDescription.foreground#378da4
pickerGroup.border#b8c0df66
pickerGroup.foreground#7084e6
ports.iconRunningProcessForeground#e7a240
problemsErrorIcon.foreground#D64550
problemsInfoIcon.foreground#7084e6
problemsWarningIcon.foreground#C89B2C
progressBar.background#e7a240
quickInput.background#EEF2FF
quickInput.foreground#378da4
quickInputList.focusBackground#b8c0df33
quickInputList.focusForeground#1A2140
quickInputList.focusIconForeground#1A2140
scrollbar.shadow#F3F6FF4d
scrollbarSlider.activeBackground#378da480
scrollbarSlider.background#b8c0df66
scrollbarSlider.hoverBackground#378da487
searchEditor.findMatchBackground#b8c0df33
selection.background#b8c0df66
settings.focusedRowBackground#EEF2FF
settings.focusedRowBorder#b8c0df33
settings.headerForeground#1A2140
settings.modifiedItemIndicator#e7a240
settings.rowHoverBackground#EEF2FF
sideBar.background#EEF2FF
sideBar.dropBackground#EEF2FF
sideBar.foreground#4B5A99
sideBarSectionHeader.background#E4E9FF
sideBarSectionHeader.border#b8c0df33
sideBarSectionHeader.foreground#7084e6
sideBarTitle.foreground#378da4
statusBar.background#e7a240
statusBar.debuggingBackground#D64550
statusBar.debuggingForeground#F3F6FF
statusBar.foreground#F3F6FF
statusBar.noFolderBackground#378da4
statusBar.noFolderForeground#1A2140
statusBarItem.activeBackground#b8c0df66
statusBarItem.errorBackground#378da426
statusBarItem.errorForeground#D64550
statusBarItem.hoverBackground#b8c0df33
statusBarItem.prominentBackground#E4E9FF
statusBarItem.prominentForeground#1A2140
statusBarItem.prominentHoverBackground#b8c0df33
statusBarItem.remoteBackground#378da4
statusBarItem.remoteForeground#F8FAFF
symbolIcon.arrayForeground#378da4
symbolIcon.classForeground#7084e6
symbolIcon.colorForeground#5b6bff
symbolIcon.constantForeground#378da4
symbolIcon.constructorForeground#7084e6
symbolIcon.enumeratorForeground#378da4
symbolIcon.enumeratorMemberForeground#378da4
symbolIcon.eventForeground#e7a240
symbolIcon.fieldForeground#378da4
symbolIcon.fileForeground#4B5A99
symbolIcon.folderForeground#4B5A99
symbolIcon.functionForeground#7084e6
symbolIcon.interfaceForeground#7084e6
symbolIcon.keyForeground#378da4
symbolIcon.keywordForeground#e7a240
symbolIcon.methodForeground#7084e6
symbolIcon.moduleForeground#4B5A99
symbolIcon.namespaceForeground#378da4
symbolIcon.nullForeground#378da4
symbolIcon.numberForeground#378da4
symbolIcon.objectForeground#378da4
symbolIcon.operatorForeground#e7a240
symbolIcon.packageForeground#4B5A99
symbolIcon.propertyForeground#378da4
symbolIcon.referenceForeground#7084e6
symbolIcon.snippetForeground#5b6bff
symbolIcon.stringForeground#5b6bff
symbolIcon.structForeground#7084e6
symbolIcon.textForeground#1A2140
symbolIcon.typeParameterForeground#7084e6
symbolIcon.unitForeground#378da4
symbolIcon.variableForeground#378da4
tab.activeBackground#5b6bff1a
tab.activeBorderTop#e7a240
tab.activeForeground#1A2140cc
tab.activeModifiedBorder#7084e6
tab.hoverBackground#b8c0df33
tab.inactiveBackground#EEF2FF
tab.inactiveForeground#4B5A99
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#b8c0dfff
tab.unfocusedActiveBackground#E4E9FF
tab.unfocusedHoverBackground#b8c0df33
tab.unfocusedInactiveBackground#EEF2FF
tab.unfocusedInactiveModifiedBorder#7084e680
terminal.ansiBlack#F3F6FF
terminal.ansiBlue#e7a240
terminal.ansiBrightBlack#b8c0df
terminal.ansiBrightBlue#e7a240
terminal.ansiBrightCyan#C77DFF
terminal.ansiBrightGreen#4E9F5D
terminal.ansiBrightMagenta#7084e6
terminal.ansiBrightRed#D64550
terminal.ansiBrightWhite#1A2140
terminal.ansiBrightYellow#C89B2C
terminal.ansiCyan#C77DFF
terminal.ansiGreen#4E9F5D
terminal.ansiMagenta#7084e6
terminal.ansiRed#D64550
terminal.ansiWhite#b8c0dfff
terminal.ansiYellow#C89B2C
terminal.background#F8FAFF
terminal.dropBackground#b8c0df33
terminal.foreground#1A2140
terminal.selectionBackground#e7a24026
terminal.tab.activeBorder#1A2140
terminalCursor.background#1A2140
terminalCursor.foreground#C77DFF
textBlockQuote.background#EEF2FF
textBlockQuote.border#b8c0df33
textCodeBlock.background#EEF2FF
textLink.activeForeground#7084e6e6
textLink.foreground#7084e6
textPreformat.foreground#C89B2C
textSeparator.foreground#378da4
titleBar.activeBackground#EEF2FF
titleBar.activeForeground#1A2140
titleBar.inactiveBackground#F8FAFF
titleBar.inactiveForeground#4B5A99
toolbar.activeBackground#b8c0df66
toolbar.hoverBackground#b8c0df33
tree.indentGuidesStroke#378da4
walkThrough.embeddedEditorBackground#F8FAFF
welcomePage.background#F8FAFF
widget.shadow#F3F6FF4d
window.activeBorder#EEF2FF
window.inactiveBorder#EEF2FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abadba	italic
constant, constant.numeric, constant.language	#378da4	—
entity.name	#7084e6	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#e7a240	—
entity.other.attribute-name, entity.other.inherited-class	#7084e6	italic
entity.name.class, entity.name.struct	#378da4	—
entity.name.function	#7084e6	italic
invalid	#D64550	underline
invalid.deprecated	#4B5A99	strikethrough
keyword, keyword.operator	#7084e6e6	—
markup.heading	#e7a240	bold
markup.bold.markdown, markup.bold	#7084e6	bold
markup.italic.markdown, markup.italic	#7084e6	italic
markup.link	#5b6bff	—
markup.inserted.diff	#4E9F5D	—
markup.deleted.diff	#D64550	—
meta.diff.range	#7084e6	—
meta.tag, meta.brace	#b8c0dfff	—
meta.import, meta.export	#e7a240	—
meta.directive.vue	#7084e680	italic
meta.property-name.css	#e7a240	—
meta.property-value.css	#C89B2C	—
meta.tag.other.html	#378da4	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#4B5A99	—
punctuation.accessor	#C77DFF	—
punctuation.definition.string	#5b6bff	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#7084e680	—
string	#5b6bffcc	—
storage.type, storage.modifier	#e7a240	—
support	#e7a240	—
support.constant	#C89B2C	—
support.type.property-name	#1A2140b3	—
support.type.property-name.json	#1A2140cc	—
support.function	#7084e6	italic
variable	#1A2140	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#1A2140	—
variable.parameter	#E6A94C	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}!`;
}