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: Damselette Whisper

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#495a79
activityBar.background#F2F4F8
activityBar.dropBorder#EDF1F7
activityBar.foreground#906b99
activityBar.inactiveForeground#99a0b0
activityBarBadge.background#495a79
activityBarBadge.foreground#F2F4F8
badge.background#495a79
badge.foreground#F2F4F8
banner.background#EDF1F7
banner.foreground#634d9a
banner.iconForeground#8a95b3
breadcrumb.activeSelectionForeground#495a79
breadcrumb.background#F7F9FC
breadcrumb.focusForeground#906b99
breadcrumb.foreground#634d9a80
breadcrumbPicker.background#EDF1F7
button.background#8a95b3
button.foreground#F2F4F8
button.hoverBackground#495a79
button.secondaryBackground#EDF1F7
button.secondaryForeground#634d9a
button.secondaryHoverBackground#E4E9F2
charts.blue#495a79
charts.foreground#634d9a
charts.green#4F8A5B
charts.lines#8a95b3
charts.orange#7089ef
charts.purple#906b99
charts.red#C94A5A
charts.yellow#B8892E
checkbox.background#EDF1F7
checkbox.border#99a0b033
checkbox.foreground#634d9a
debugExceptionWidget.background#EDF1F7
debugExceptionWidget.border#99a0b033
debugIcon.breakpointCurrentStackframeForeground#8a95b3
debugIcon.breakpointDisabledForeground#99a0b0
debugIcon.breakpointForeground#8a95b3
debugIcon.breakpointStackframeForeground#8a95b3
debugIcon.breakpointUnverifiedForeground#4A556F
debugIcon.continueForeground#8a95b3
debugIcon.disconnectForeground#4A556F
debugIcon.pauseForeground#8a95b3
debugIcon.restartForeground#906b99
debugIcon.startForeground#495a79
debugIcon.stepBackForeground#8a95b3
debugIcon.stepIntoForeground#8a95b3
debugIcon.stepOutForeground#8a95b3
debugIcon.stepOverForeground#8a95b3
debugIcon.stopForeground#C94A5A
debugToolBar.background#EDF1F7
debugToolBar.border#E4E9F2
descriptionForeground#8a95b3
diffEditor.border#E4E9F2
diffEditor.diagonalFill#99a0b066
diffEditor.insertedLineBackground#4F8A5B26
diffEditor.insertedTextBackground#4F8A5B26
diffEditor.removedLineBackground#C94A5A26
diffEditor.removedTextBackground#C94A5A26
diffEditorOverview.insertedForeground#4F8A5B80
diffEditorOverview.removedForeground#C94A5A80
dropdown.background#E4E9F2
dropdown.border#495a7933
dropdown.foreground#634d9a
dropdown.listBackground#E4E9F2
editor.background#F7F9FC
editor.findMatchBackground#B8892E26
editor.findMatchBorder#B8892E80
editor.findMatchForeground#634d9a
editor.findMatchHighlightBackground#99a0b066
editor.findMatchHighlightForeground#634d9acc
editor.findRangeHighlightBackground#99a0b066
editor.findRangeHighlightBorder#00000000
editor.focusedStackFrameHighlightBackground#99a0b033
editor.foldBackground#99a0b033
editor.foreground#634d9a
editor.hoverHighlightBackground#00000000
editor.inactiveSelectionBackground#E4E9F2cc
editor.inlineValuesBackground#00000000
editor.inlineValuesForeground#8a95b3
editor.lineHighlightBackground#99a0b014
editor.lineHighlightBorder#00000000
editor.linkedEditingBackground#99a0b033
editor.rangeHighlightBackground#E4E9F2cc
editor.selectionBackground#495a7926
editor.selectionForeground#99a0b0
editor.selectionHighlightBackground#99a0b033
editor.selectionHighlightBorder#F7F9FC
editor.snippetFinalTabstopHighlightBackground#99a0b033
editor.snippetFinalTabstopHighlightBorder#EDF1F7
editor.snippetTabstopHighlightBackground#99a0b033
editor.snippetTabstopHighlightBorder#EDF1F7
editor.stackFrameHighlightBackground#99a0b033
editor.symbolHighlightBackground#99a0b033
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#99a0b033
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#99a0b033
editor.wordHighlightStrongBorder#99a0b033
editorBracketHighlight.foreground1#C94A5A80
editorBracketHighlight.foreground2#8a95b380
editorBracketHighlight.foreground3#B8892E80
editorBracketHighlight.foreground4#906b9980
editorBracketHighlight.foreground5#495a7980
editorBracketHighlight.foreground6#7A5C9980
editorBracketMatch.background#495a7945
editorBracketMatch.border#495a79
editorBracketPairGuide.activeBackground1#8a95b3
editorBracketPairGuide.activeBackground2#495a79
editorBracketPairGuide.activeBackground3#906b99
editorBracketPairGuide.activeBackground4#7A5C99
editorBracketPairGuide.activeBackground5#B8892E
editorBracketPairGuide.activeBackground6#C94A5A
editorBracketPairGuide.background1#8a95b380
editorBracketPairGuide.background2#495a7980
editorBracketPairGuide.background3#906b9980
editorBracketPairGuide.background4#7A5C9980
editorBracketPairGuide.background5#B8892E80
editorBracketPairGuide.background6#C94A5A80
editorCodeLens.foreground#495a79
editorCursor.background#634d9a
editorCursor.foreground#7A5C99
editorError.border#00000000
editorError.foreground#C94A5A
editorGhostText.foreground#8a95b3
editorGroup.border#00000000
editorGroup.dropBackground#EDF1F7
editorGroup.emptyBackground#00000000
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.noTabsBackground#00000000
editorGroupHeader.tabsBackground#F2F4F8
editorGroupHeader.tabsBorder#00000000
editorGroupHeader.tabsForeground#634d9acc
editorGutter.addedBackground#4F8A5B
editorGutter.background#F7F9FC
editorGutter.commentRangeForeground#E4E9F2
editorGutter.deletedBackground#C94A5A
editorGutter.foldingControlForeground#906b99
editorGutter.modifiedBackground#8a95b3
editorHint.border#00000000
editorHint.foreground#8a95b3
editorHoverWidget.background#E4E9F2
editorHoverWidget.border#495a7933
editorHoverWidget.foreground#8a95b3
editorHoverWidget.highlightForeground#634d9a
editorHoverWidget.statusBarBackground#00000000
editorIndentGuide.activeBackground#99a0b0
editorIndentGuide.activeBackground1#99a0b0
editorIndentGuide.background#99a0b066
editorIndentGuide.background1#99a0b066
editorInfo.border#E4E9F2
editorInfo.foreground#906b99
editorInlayHint.background#E4E9F280
editorInlayHint.foreground#8a95b380
editorInlayHint.parameterBackground#E4E9F280
editorInlayHint.parameterForeground#906b9980
editorInlayHint.typeBackground#E4E9F280
editorInlayHint.typeForeground#495a7980
editorLightBulb.foreground#8a95b3
editorLightBulbAutoFix.foreground#495a79
editorLineNumber.activeForeground#906b99
editorLineNumber.foreground#99a0b0
editorLink.activeForeground#495a79
editorMarkerNavigation.background#EDF1F7
editorMarkerNavigationError.background#EDF1F7
editorMarkerNavigationInfo.background#EDF1F7
editorMarkerNavigationWarning.background#EDF1F7
editorOverviewRuler.addedForeground#4F8A5B80
editorOverviewRuler.background#F7F9FC
editorOverviewRuler.border#99a0b066
editorOverviewRuler.bracketMatchForeground#8a95b3
editorOverviewRuler.commentForeground#abb0ba80
editorOverviewRuler.commentUnresolvedForeground#B8892E80
editorOverviewRuler.commonContentForeground#E4E9F2cc
editorOverviewRuler.currentContentForeground#4F8A5B
editorOverviewRuler.deletedForeground#C94A5A80
editorOverviewRuler.errorForeground#C94A5A80
editorOverviewRuler.findMatchForeground#99a0b066
editorOverviewRuler.incomingContentForeground#495a79
editorOverviewRuler.infoForeground#906b9980
editorOverviewRuler.modifiedForeground#8a95b380
editorOverviewRuler.rangeHighlightForeground#99a0b066
editorOverviewRuler.selectionHighlightForeground#99a0b066
editorOverviewRuler.warningForeground#B8892E80
editorOverviewRuler.wordHighlightForeground#99a0b033
editorOverviewRuler.wordHighlightStrongForeground#99a0b066
editorPane.background#00000000
editorRuler.foreground#99a0b066
editorSuggestWidget.background#E4E9F2
editorSuggestWidget.border#495a7933
editorSuggestWidget.focusHighlightForeground#495a79
editorSuggestWidget.foreground#8a95b3
editorSuggestWidget.highlightForeground#7089ef
editorSuggestWidget.selectedBackground#99a0b033
editorSuggestWidget.selectedForeground#634d9a
editorSuggestWidget.selectedIconForeground#634d9a
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#634d9a80
editorWarning.border#00000000
editorWarning.foreground#B8892E
editorWhitespace.foreground#99a0b066
editorWidget.background#E4E9F2
editorWidget.border#495a7933
editorWidget.foreground#8a95b3
editorWidget.resizeBorder#99a0b0
errorForeground#C94A5A
extensionBadge.remoteBackground#906b99
extensionBadge.remoteForeground#F2F4F8
extensionButton.prominentBackground#495a79
extensionButton.prominentForeground#F2F4F8
extensionButton.prominentHoverBackground#7A5C99
extensionIcon.preReleaseForeground#8a95b3
extensionIcon.starForeground#495a79
extensionIcon.verifiedForeground#906b99
focusBorder#99a0b033
foreground#634d9a
git.blame.editorDecorationForeground#99a0b0
gitDecoration.addedResourceForeground#4F8A5B
gitDecoration.conflictingResourceForeground#B8892E
gitDecoration.deletedResourceForeground#C94A5A
gitDecoration.ignoredResourceForeground#abb0ba
gitDecoration.modifiedResourceForeground#8a95b3
gitDecoration.renamedResourceForeground#906b99
gitDecoration.stageDeletedResourceForeground#C94A5A
gitDecoration.stageModifiedResourceForeground#495a79
gitDecoration.submoduleResourceForeground#B8892E
gitDecoration.untrackedResourceForeground#495a79
icon.foreground#8a95b3
input.background#E4E9F2
input.border#495a7933
input.foreground#634d9a
input.placeholderForeground#99a0b0
inputOption.activeBackground#495a7945
inputOption.activeBorder#495a79
inputOption.activeForeground#495a79
inputValidation.errorBackground#F5D9DF
inputValidation.errorBorder#C94A5A
inputValidation.errorForeground#C94A5A
inputValidation.infoBackground#DDE6F5
inputValidation.infoBorder#906b99
inputValidation.infoForeground#906b99
inputValidation.warningBackground#F3E8CF
inputValidation.warningBorder#8a95b3
inputValidation.warningForeground#B8892E
keybindingLabel.background#E4E9F2
keybindingLabel.border#99a0b066
keybindingLabel.bottomBorder#99a0b066
keybindingLabel.foreground#906b99
keybindingTable.headerBackground#E4E9F2
keybindingTable.rowsBackground#EDF1F7
list.activeSelectionBackground#8a95b326
list.activeSelectionForeground#634d9a
list.deemphasizedForeground#8a95b3
list.dropBackground#EDF1F7
list.errorForeground#C94A5A
list.filterMatchBackground#EDF1F7
list.filterMatchBorder#495a79
list.focusBackground#8a95b333
list.focusForeground#634d9a
list.focusOutline#7089ef99
list.highlightForeground#495a79
list.hoverBackground#8a95b31a
list.hoverForeground#7089ef
list.inactiveFocusBackground#99a0b014
list.inactiveSelectionBackground#E4E9F2
list.inactiveSelectionForeground#634d9a
list.invalidItemForeground#C94A5A
list.warningForeground#B8892E
listFilterWidget.background#EDF1F7
listFilterWidget.noMatchesOutline#C94A5A
listFilterWidget.outline#7089ef66
menu.background#EDF1F7
menu.border#E4E9F2cc
menu.foreground#634d9a
menu.selectionBackground#99a0b033
menu.selectionBorder#E4E9F2
menu.selectionForeground#634d9a
menu.separatorBackground#99a0b066
menubar.selectionBackground#99a0b033
menubar.selectionBorder#E4E9F2cc
menubar.selectionForeground#634d9a
merge.border#E4E9F2
merge.commonContentBackground#99a0b033
merge.commonHeaderBackground#99a0b033
merge.currentContentBackground#4F8A5B45
merge.currentHeaderBackground#4F8A5B45
merge.incomingContentBackground#495a7945
merge.incomingHeaderBackground#495a7945
minimap.background#EDF1F7
minimap.errorHighlight#C94A5A80
minimap.findMatchHighlight#99a0b033
minimap.selectionHighlight#99a0b033
minimap.warningHighlight#B8892E80
minimapGutter.addedBackground#4F8A5B
minimapGutter.deletedBackground#C94A5A
minimapGutter.modifiedBackground#8a95b3
minimapSlider.activeBackground#99a0b066
minimapSlider.background#99a0b033
minimapSlider.hoverBackground#99a0b033
notebook.cellBorderColor#906b9980
notebook.cellEditorBackground#EDF1F7
notebook.cellHoverBackground#E4E9F280
notebook.focusedCellBackground#E4E9F2cc
notebook.focusedCellBorder#906b99
notebook.outputContainerBackgroundColor#E4E9F2cc
notificationCenter.border#99a0b033
notificationCenterHeader.background#EDF1F7
notificationCenterHeader.foreground#8a95b3
notificationLink.foreground#906b99
notifications.background#EDF1F7
notifications.border#99a0b033
notifications.foreground#634d9a
notificationsErrorIcon.foreground#C94A5A
notificationsInfoIcon.foreground#906b99
notificationsWarningIcon.foreground#B8892E
notificationToast.border#99a0b033
panel.background#EDF1F7
panel.border#495a7933
panel.dropBorder#E4E9F2
panelInput.border#EDF1F7
panelSection.dropBackground#99a0b033
panelSectionHeader.background#EDF1F7
panelSectionHeader.foreground#634d9a
panelTitle.activeBorder#99a0b066
panelTitle.activeForeground#634d9a
panelTitle.inactiveForeground#4A556F
peekView.border#495a79
peekViewEditor.background#EDF1F7
peekViewEditor.matchHighlightBackground#99a0b066
peekViewResult.background#E4E9F2
peekViewResult.fileForeground#8a95b3
peekViewResult.lineForeground#8a95b3
peekViewResult.matchHighlightBackground#99a0b066
peekViewResult.selectionBackground#99a0b033
peekViewResult.selectionForeground#634d9a
peekViewTitle.background#E4E9F2
peekViewTitleDescription.foreground#8a95b3
pickerGroup.border#99a0b066
pickerGroup.foreground#906b99
ports.iconRunningProcessForeground#495a79
problemsErrorIcon.foreground#C94A5A
problemsInfoIcon.foreground#906b99
problemsWarningIcon.foreground#B8892E
progressBar.background#495a79
quickInput.background#EDF1F7
quickInput.foreground#8a95b3
quickInputList.focusBackground#99a0b033
quickInputList.focusForeground#634d9a
quickInputList.focusIconForeground#634d9a
scrollbar.shadow#F2F4F84d
scrollbarSlider.activeBackground#8a95b380
scrollbarSlider.background#99a0b066
scrollbarSlider.hoverBackground#8a95b387
searchEditor.findMatchBackground#99a0b033
selection.background#99a0b066
settings.focusedRowBackground#EDF1F7
settings.focusedRowBorder#99a0b033
settings.headerForeground#634d9a
settings.modifiedItemIndicator#495a79
settings.rowHoverBackground#EDF1F7
sideBar.background#EDF1F7
sideBar.dropBackground#EDF1F7
sideBar.foreground#4A556F
sideBarSectionHeader.background#E4E9F2
sideBarSectionHeader.border#99a0b033
sideBarSectionHeader.foreground#906b99
sideBarTitle.foreground#8a95b3
statusBar.background#495a79
statusBar.debuggingBackground#C94A5A
statusBar.debuggingForeground#F2F4F8
statusBar.foreground#F2F4F8
statusBar.noFolderBackground#8a95b3
statusBar.noFolderForeground#634d9a
statusBarItem.activeBackground#99a0b066
statusBarItem.errorBackground#8a95b326
statusBarItem.errorForeground#C94A5A
statusBarItem.hoverBackground#99a0b033
statusBarItem.prominentBackground#E4E9F2
statusBarItem.prominentForeground#634d9a
statusBarItem.prominentHoverBackground#99a0b033
statusBarItem.remoteBackground#8a95b3
statusBarItem.remoteForeground#F7F9FC
symbolIcon.arrayForeground#8a95b3
symbolIcon.classForeground#906b99
symbolIcon.colorForeground#7089ef
symbolIcon.constantForeground#8a95b3
symbolIcon.constructorForeground#906b99
symbolIcon.enumeratorForeground#8a95b3
symbolIcon.enumeratorMemberForeground#8a95b3
symbolIcon.eventForeground#495a79
symbolIcon.fieldForeground#8a95b3
symbolIcon.fileForeground#4A556F
symbolIcon.folderForeground#4A556F
symbolIcon.functionForeground#906b99
symbolIcon.interfaceForeground#906b99
symbolIcon.keyForeground#8a95b3
symbolIcon.keywordForeground#495a79
symbolIcon.methodForeground#906b99
symbolIcon.moduleForeground#4A556F
symbolIcon.namespaceForeground#8a95b3
symbolIcon.nullForeground#8a95b3
symbolIcon.numberForeground#8a95b3
symbolIcon.objectForeground#8a95b3
symbolIcon.operatorForeground#495a79
symbolIcon.packageForeground#4A556F
symbolIcon.propertyForeground#8a95b3
symbolIcon.referenceForeground#906b99
symbolIcon.snippetForeground#7089ef
symbolIcon.stringForeground#7089ef
symbolIcon.structForeground#906b99
symbolIcon.textForeground#634d9a
symbolIcon.typeParameterForeground#906b99
symbolIcon.unitForeground#8a95b3
symbolIcon.variableForeground#8a95b3
tab.activeBackground#7089ef1a
tab.activeBorderTop#495a79
tab.activeForeground#634d9acc
tab.activeModifiedBorder#906b99
tab.hoverBackground#99a0b033
tab.inactiveBackground#EDF1F7
tab.inactiveForeground#4A556F
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#99a0b0
tab.unfocusedActiveBackground#E4E9F2
tab.unfocusedHoverBackground#99a0b033
tab.unfocusedInactiveBackground#EDF1F7
tab.unfocusedInactiveModifiedBorder#906b9980
terminal.ansiBlack#F2F4F8
terminal.ansiBlue#495a79
terminal.ansiBrightBlack#99a0b0
terminal.ansiBrightBlue#495a79
terminal.ansiBrightCyan#7A5C99
terminal.ansiBrightGreen#4F8A5B
terminal.ansiBrightMagenta#906b99
terminal.ansiBrightRed#C94A5A
terminal.ansiBrightWhite#634d9a
terminal.ansiBrightYellow#B8892E
terminal.ansiCyan#7A5C99
terminal.ansiGreen#4F8A5B
terminal.ansiMagenta#906b99
terminal.ansiRed#C94A5A
terminal.ansiWhite#99a0b0
terminal.ansiYellow#B8892E
terminal.background#F7F9FC
terminal.dropBackground#99a0b033
terminal.foreground#634d9a
terminal.selectionBackground#495a7926
terminal.tab.activeBorder#634d9a
terminalCursor.background#634d9a
terminalCursor.foreground#7A5C99
textBlockQuote.background#EDF1F7
textBlockQuote.border#99a0b033
textCodeBlock.background#EDF1F7
textLink.activeForeground#906b99e6
textLink.foreground#906b99
textPreformat.foreground#B8892E
textSeparator.foreground#8a95b3
titleBar.activeBackground#EDF1F7
titleBar.activeForeground#634d9a
titleBar.inactiveBackground#F7F9FC
titleBar.inactiveForeground#4A556F
toolbar.activeBackground#99a0b066
toolbar.hoverBackground#99a0b033
tree.indentGuidesStroke#8a95b3
walkThrough.embeddedEditorBackground#F7F9FC
welcomePage.background#F7F9FC
widget.shadow#F2F4F84d
window.activeBorder#EDF1F7
window.inactiveBorder#EDF1F7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abb0ba	italic
constant, constant.numeric, constant.language	#8a95b3	—
entity.name	#906b99	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#495a79	—
entity.other.attribute-name, entity.other.inherited-class	#906b99	italic
entity.name.class, entity.name.struct	#8a95b3	—
entity.name.function	#906b99	italic
invalid	#C94A5A	underline
invalid.deprecated	#4A556F	strikethrough
keyword, keyword.operator	#906b99e6	—
markup.heading	#495a79	bold
markup.bold.markdown, markup.bold	#906b99	bold
markup.italic.markdown, markup.italic	#906b99	italic
markup.link	#7089ef	—
markup.inserted.diff	#4F8A5B	—
markup.deleted.diff	#C94A5A	—
meta.diff.range	#906b99	—
meta.tag, meta.brace	#99a0b0	—
meta.import, meta.export	#495a79	—
meta.directive.vue	#906b9980	italic
meta.property-name.css	#495a79	—
meta.property-value.css	#B8892E	—
meta.tag.other.html	#8a95b3	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#4A556F	—
punctuation.accessor	#7A5C99	—
punctuation.definition.string	#7089ef	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#906b9980	—
string	#7089efcc	—
storage.type, storage.modifier	#495a79	—
support	#495a79	—
support.constant	#B8892E	—
support.type.property-name	#634d9ab3	—
support.type.property-name.json	#634d9acc	—
support.function	#906b99	italic
variable	#634d9a	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#634d9a	—
variable.parameter	#C05A74	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}!`;
}