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: Lava Glaze Inferno

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7d6359	italic
constant, constant.numeric, constant.language	#ff8c42	—
entity.name	#ffb347	—
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type	#eb7347	—
entity.other.attribute-name, entity.other.inherited-class	#ffb347	italic
entity.name.class, entity.name.struct	#ff8c42	—
entity.name.function	#ffb347	italic
invalid	#ff4757	underline
invalid.deprecated	#a68a6e	strikethrough
keyword, keyword.operator	#ffb347e6	—
markup.heading	#eb7347	bold
markup.bold.markdown, markup.bold	#ffb347	bold
markup.italic.markdown, markup.italic	#ffb347	italic
markup.link	#ff4757	—
markup.inserted.diff	#d4a574	—
markup.deleted.diff	#ff4757	—
meta.diff.range	#ffb347	—
meta.tag, meta.brace	#46362dff	—
meta.import, meta.export	#eb7347	—
meta.directive.vue	#ffb34780	italic
meta.property-name.css	#eb7347	—
meta.property-value.css	#ff6b35	—
meta.tag.other.html	#ff8c42	—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor	#a68a6e	—
punctuation.accessor	#a68a6e	—
punctuation.definition.string	#ff4757	—
punctuation.definition.tag, punctuation.separator.key-value.html, punctuation.definition.generic.begin.html, punctuation.definition.section.embedded	#ffb34780	—
string	#ff4757cc	—
storage.type, storage.modifier	#eb7347	—
support	#eb7347	—
support.constant	#ff6b35	—
support.type.property-name	#f4d4b2b3	—
support.type.property-name.json	#f4d4b2cc	—
support.function	#ffb347	italic
variable	#f4d4b2	—
variable.other, variable.other.property, variable.other.object.property, variable.language, variable.function, variable.argument, meta.object-literal.key	#f4d4b2	—
variable.parameter	#d4a574	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}!`;
}