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: Celestine Bardlight

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#abbab6	italic
constant, constant.numeric, constant.language	#00827d	—
entity.name	#26824e	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#31a586	—
entity.other.attribute-name, entity.other.inherited-class	#26824e	italic
entity.name.class, entity.name.struct	#00827d	—
entity.name.function	#26824e	italic
invalid	#bf5530	underline
invalid.deprecated	#4a8276	strikethrough
keyword, keyword.operator	#26824ee6	—
markup.heading	#31a586	bold
markup.bold.markdown, markup.bold	#26824e	bold
markup.italic.markdown, markup.italic	#26824e	italic
markup.link	#a66d32	—
markup.inserted.diff	#26834f	—
markup.deleted.diff	#bf5530	—
meta.diff.range	#26824e	—
meta.tag, meta.brace	#76a599	—
meta.import, meta.export	#31a586	—
meta.directive.vue	#26824e80	italic
meta.property-name.css	#31a586	—
meta.property-value.css	#a66d32	—
meta.tag.other.html	#00827d	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#4a8276	—
punctuation.accessor	#2d72a6	—
punctuation.definition.string	#a66d32	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#26824e80	—
string	#a66d32cc	—
storage.type, storage.modifier	#31a586	—
support	#31a586	—
support.constant	#a66d32	—
support.type.property-name	#1a3a38b3	—
support.type.property-name.json	#1a3a38cc	—
support.function	#26824e	italic
variable	#1a3a38	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#1a3a38	—
variable.parameter	#4a8276	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}!`;
}