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: Kusanali Dawnbloom

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#b4baab	italic
constant, constant.numeric, constant.language	#8c7b4a	—
entity.name	#606c38	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#4c701a	—
entity.other.attribute-name, entity.other.inherited-class	#606c38	italic
entity.name.class, entity.name.struct	#8c7b4a	—
entity.name.function	#606c38	italic
invalid	#ae2012	underline
invalid.deprecated	#4a5a4a	strikethrough
keyword, keyword.operator	#606c38e6	—
markup.heading	#4c701a	bold
markup.bold.markdown, markup.bold	#606c38	bold
markup.italic.markdown, markup.italic	#606c38	italic
markup.link	#bc6c25	—
markup.inserted.diff	#2d6a4f	—
markup.deleted.diff	#ae2012	—
meta.diff.range	#606c38	—
meta.tag, meta.brace	#5b6b5b	—
meta.import, meta.export	#4c701a	—
meta.directive.vue	#606c3880	italic
meta.property-name.css	#4c701a	—
meta.property-value.css	#9b7a01	—
meta.tag.other.html	#8c7b4a	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#4a5a4a	—
punctuation.accessor	#2d4c3b	—
punctuation.definition.string	#bc6c25	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#606c3880	—
string	#bc6c25cc	—
storage.type, storage.modifier	#4c701a	—
support	#4c701a	—
support.constant	#9b7a01	—
support.type.property-name	#202b20b3	—
support.type.property-name.json	#202b20cc	—
support.function	#606c38	italic
variable	#202b20	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#202b20	—
variable.parameter	#556b2f	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}!`;
}