Horizon Ultimate Themes

Name: Horizon Ultimate Themes
Author: Horizon

Publisher: HorizonThemes in package: 49

A collection of Horizon Themes with Core and Gamers editions, all paired with Horizon Icons and HorizonTags.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Horizon Ultimate Themes — Genshin Impact - Yae Miko (Dark)

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#181014
activityBar.foreground#e8dce4
activityBar.inactiveForeground#786068
activityBarBadge.background#c88098
activityBarBadge.foreground#1c1418
badge.background#a07088
badge.foreground#1a1418
breadcrumb.activeSelectionForeground#d090a8
breadcrumb.background#1e181c
breadcrumb.focusForeground#e8d8e0
breadcrumb.foreground#786870
button.background#804868
button.foreground#e8d8e0
button.hoverBackground#905878
button.secondaryBackground#2a2024
button.secondaryForeground#e8d8e0
button.secondaryHoverBackground#3a2830
charts.blue#9090b0
charts.foreground#e8d8e0
charts.green#90a890
charts.lines#e8d8e0
charts.orange#c0a080
charts.purple#b090a8
charts.red#a07080
charts.yellow#c0b090
checkbox.background#141012
checkbox.border#804868
checkbox.foreground#e8d8e0
checkbox.selectBackground#804868
checkbox.selectBorder#a07088
commandCenter.activeBackground#2a2024
commandCenter.activeBorder#a07088
commandCenter.activeForeground#d090a8
commandCenter.background#1e181c
commandCenter.border#2a2024
commandCenter.debuggingBackground#80486820
commandCenter.foreground#e8d8e0
commandCenter.inactiveBorder#2a202480
commandCenter.inactiveForeground#685860
debugConsole.errorForeground#c08090
debugConsole.infoForeground#9090b0
debugConsole.sourceForeground#786870
debugConsole.warningForeground#c0b090
debugConsoleInputIcon.foreground#d090a8
debugIcon.breakpointCurrentStackframeForeground#d090a8
debugIcon.breakpointDisabledForeground#685860
debugIcon.breakpointForeground#c08090
debugIcon.breakpointStackframeForeground#90a890
debugIcon.breakpointUnverifiedForeground#c0b090
debugIcon.continueForeground#90a890
debugIcon.disconnectForeground#c08090
debugIcon.pauseForeground#c0b090
debugIcon.restartForeground#90a890
debugIcon.startForeground#90a890
debugIcon.stepBackForeground#9090b0
debugIcon.stepIntoForeground#9090b0
debugIcon.stepOutForeground#9090b0
debugIcon.stepOverForeground#9090b0
debugIcon.stopForeground#c08090
debugTokenExpression.boolean#b0a0c0
debugTokenExpression.error#c08090
debugTokenExpression.name#e8d8e0
debugTokenExpression.number#9090b0
debugTokenExpression.string#d0b0c0
debugTokenExpression.value#c0a0b0
debugToolBar.background#1e181c
debugToolBar.border#2a2024
debugView.exceptionLabelBackground#a07080
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#d090a8
debugView.stateLabelForeground#1a1418
debugView.valueChangedHighlight#a0708860
descriptionForeground#786870
diffEditor.diagonalFill#2a202440
diffEditor.insertedLineBackground#90a89015
diffEditor.insertedTextBackground#90a89020
diffEditor.insertedTextBorder#90a89000
diffEditor.removedLineBackground#a0708015
diffEditor.removedTextBackground#a0708020
diffEditor.removedTextBorder#a0708000
diffEditorGutter.insertedLineBackground#90a89030
diffEditorGutter.removedLineBackground#a0708030
diffEditorOverview.insertedForeground#90a890
diffEditorOverview.removedForeground#a07080
dropdown.background#141012
dropdown.border#804868
dropdown.foreground#e8d8e0
dropdown.listBackground#1e181c
editor.background#1c1418
editor.findMatchBackground#a0708840
editor.findMatchHighlightBackground#a0708820
editor.focusedStackFrameHighlightBackground#90a89030
editor.foldBackground#80486815
editor.foreground#e8dce4
editor.lineHighlightBackground#261c22
editor.lineHighlightBorder#88507030
editor.selectionBackground#88507050
editor.stackFrameHighlightBackground#c0b09030
editor.wordHighlightBackground#80486830
editor.wordHighlightStrongBackground#80486850
editorBracketHighlight.foreground1#d090a8
editorBracketHighlight.foreground2#b0a0c0
editorBracketHighlight.foreground3#c0a0b0
editorBracketHighlight.foreground4#90a890
editorBracketHighlight.foreground5#c0b090
editorBracketHighlight.foreground6#9090b0
editorBracketHighlight.unexpectedBracket.foreground#c08090
editorBracketMatch.background#80486830
editorBracketMatch.border#a07088
editorCodeLens.foreground#786870
editorCursor.foreground#e6a2c2
editorError.border#c0809000
editorError.foreground#c08090
editorGroup.border#2a2024
editorGroup.dropBackground#80486830
editorGroup.dropIntoPromptBackground#1e181c
editorGroup.dropIntoPromptBorder#a07088
editorGroup.dropIntoPromptForeground#e8d8e0
editorGroup.emptyBackground#1e181c
editorGroup.focusedEmptyBorder#a07088
editorGroupHeader.tabsBackground#201820
editorGutter.addedBackground#809080
editorGutter.deletedBackground#a07080
editorGutter.modifiedBackground#8080a0
editorHint.border#90a89000
editorHint.foreground#90a890
editorHoverWidget.background#1e181c
editorHoverWidget.border#2a2024
editorIndentGuide.activeBackground1#c88098
editorIndentGuide.background1#2e2228
editorInfo.border#9090b000
editorInfo.foreground#9090b0
editorInlayHint.background#2a202480
editorInlayHint.foreground#786870
editorInlayHint.parameterForeground#d090a8
editorInlayHint.typeForeground#b0a0c0
editorLineNumber.activeForeground#e6a2c2
editorLineNumber.foreground#786068
editorOverviewRuler.addedForeground#90a890
editorOverviewRuler.background#1e181c
editorOverviewRuler.border#2a2024
editorOverviewRuler.bracketMatchForeground#a07088
editorOverviewRuler.commonContentForeground#786870
editorOverviewRuler.currentContentForeground#90a890
editorOverviewRuler.deletedForeground#a07080
editorOverviewRuler.errorForeground#c08090
editorOverviewRuler.findMatchForeground#a0708880
editorOverviewRuler.incomingContentForeground#9090b0
editorOverviewRuler.infoForeground#9090b0
editorOverviewRuler.modifiedForeground#9090b0
editorOverviewRuler.rangeHighlightForeground#80486840
editorOverviewRuler.selectionHighlightForeground#80486860
editorOverviewRuler.warningForeground#c0b090
editorOverviewRuler.wordHighlightForeground#80486860
editorOverviewRuler.wordHighlightStrongForeground#80486880
editorStickyScroll.background#1e181c
editorStickyScrollHover.background#2a2024
editorSuggestWidget.background#1e181c
editorSuggestWidget.foreground#e8d8e0
editorSuggestWidget.highlightForeground#d090a8
editorSuggestWidget.selectedBackground#804868
editorWarning.border#c0b09000
editorWarning.foreground#c0b090
editorWhitespace.foreground#3c2830
editorWidget.background#1e181c
editorWidget.border#2a2024
editorWidget.foreground#e8d8e0
errorForeground#c08090
extensionBadge.remoteBackground#a07088
extensionBadge.remoteForeground#1a1418
extensionButton.prominentBackground#804868
extensionButton.prominentForeground#e8d8e0
extensionButton.prominentHoverBackground#905878
extensionIcon.preReleaseForeground#b090a8
extensionIcon.sponsorForeground#d090a8
extensionIcon.starForeground#c0b090
extensionIcon.verifiedForeground#90a890
focusBorder#a07088
gitDecoration.addedResourceForeground#90a890
gitDecoration.conflictingResourceForeground#b090a8
gitDecoration.deletedResourceForeground#a07080
gitDecoration.ignoredResourceForeground#685860
gitDecoration.modifiedResourceForeground#9090b0
gitDecoration.untrackedResourceForeground#c0b090
icon.foreground#e8d8e0
input.background#161014
input.border#804868
input.foreground#e8d8e0
input.placeholderForeground#685860
inputOption.activeBackground#804868
inputOption.activeForeground#FFFFFF
keybindingLabel.background#2a2024
keybindingLabel.border#2a2024
keybindingLabel.bottomBorder#685860
keybindingLabel.foreground#e8d8e0
list.activeSelectionBackground#885070
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#f6b6d9
list.focusBackground#885070
list.focusForeground#FFFFFF
list.hoverBackground#2e2228
list.hoverForeground#e8dce4
list.inactiveSelectionBackground#88507050
list.inactiveSelectionForeground#e8dce4
menu.background#141012
menu.border#2a2024
menu.foreground#e8d8e0
menu.selectionBackground#804868
menu.selectionBorder#80486800
menu.selectionForeground#FFFFFF
menu.separatorBackground#2a2024
menubar.selectionBackground#2a2024
menubar.selectionForeground#e8d8e0
merge.border#2a2024
merge.commonContentBackground#78687020
merge.commonHeaderBackground#78687040
merge.currentContentBackground#90a89020
merge.currentHeaderBackground#90a89040
merge.incomingContentBackground#9090b020
merge.incomingHeaderBackground#9090b040
mergeEditor.change.background#9090b020
mergeEditor.change.word.background#9090b040
mergeEditor.conflict.handledFocused.border#90a890
mergeEditor.conflict.handledUnfocused.border#90a89080
mergeEditor.conflict.unhandledFocused.border#c0b090
mergeEditor.conflict.unhandledUnfocused.border#c0b09080
minimap.background#1e181c
minimap.selectionHighlight#80486850
notifications.background#1e181c
notifications.border#2a2024
notifications.foreground#e8d8e0
notificationsErrorIcon.foreground#c08090
notificationsInfoIcon.foreground#9090b0
notificationsWarningIcon.foreground#c0b090
panel.background#201820
panel.border#2e2228
panelTitle.activeBorder#c88098
panelTitle.activeForeground#e8dce4
panelTitle.inactiveForeground#887078
peekView.border#a07088
peekViewEditor.background#1e181c
peekViewResult.background#1e181c
peekViewResult.matchHighlightBackground#a0708850
peekViewTitle.background#2a2024
peekViewTitleLabel.foreground#e8d8e0
progressBar.background#a07088
quickInput.background#1e181c
quickInput.foreground#e8d8e0
quickInputList.focusBackground#804868
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#e0c0d0
quickInputTitle.background#2a2024
scrollbarSlider.activeBackground#a07088
scrollbarSlider.background#80486850
scrollbarSlider.hoverBackground#804868
selection.background#885070
settings.checkboxBackground#141012
settings.checkboxBorder#804868
settings.checkboxForeground#e8d8e0
settings.dropdownBackground#141012
settings.dropdownBorder#2a2024
settings.dropdownForeground#e8d8e0
settings.dropdownListBorder#2a2024
settings.focusedRowBackground#2a202440
settings.focusedRowBorder#a0708880
settings.headerForeground#e8d8e0
settings.modifiedItemIndicator#a07088
settings.numberInputBackground#141012
settings.numberInputBorder#804868
settings.numberInputForeground#e8d8e0
settings.rowHoverBackground#2a202420
settings.sashBorder#2a2024
settings.textInputBackground#141012
settings.textInputBorder#804868
settings.textInputForeground#e8d8e0
sideBar.background#201820
sideBar.border#2e2228
sideBar.foreground#e8dce4
sideBarSectionHeader.background#2e2228
sideBarSectionHeader.foreground#e8dce4
sideBarTitle.foreground#e6a2c2
statusBar.background#9070b0
statusBar.debuggingBackground#c88098
statusBar.debuggingForeground#1c1418
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1c1418
statusBar.noFolderForeground#e8dce4
symbolIcon.arrayForeground#e8d8e0
symbolIcon.booleanForeground#b0a0c0
symbolIcon.classForeground#b0a0c0
symbolIcon.colorForeground#d090a8
symbolIcon.constantForeground#9090b0
symbolIcon.constructorForeground#d090a8
symbolIcon.enumeratorForeground#c0b090
symbolIcon.enumeratorMemberForeground#9090b0
symbolIcon.eventForeground#c0b090
symbolIcon.fieldForeground#9090b0
symbolIcon.fileForeground#786870
symbolIcon.folderForeground#786870
symbolIcon.functionForeground#d090a8
symbolIcon.interfaceForeground#90a890
symbolIcon.keyForeground#e8d8e0
symbolIcon.keywordForeground#d090a8
symbolIcon.methodForeground#d090a8
symbolIcon.moduleForeground#b090a8
symbolIcon.namespaceForeground#b090a8
symbolIcon.nullForeground#a07080
symbolIcon.numberForeground#9090b0
symbolIcon.objectForeground#e8d8e0
symbolIcon.operatorForeground#786870
symbolIcon.packageForeground#b090a8
symbolIcon.propertyForeground#e8d8e0
symbolIcon.referenceForeground#9090b0
symbolIcon.snippetForeground#786870
symbolIcon.stringForeground#d0b0c0
symbolIcon.structForeground#e8d8e0
symbolIcon.textForeground#e8d8e0
symbolIcon.typeParameterForeground#90a890
symbolIcon.unitForeground#9090b0
symbolIcon.variableForeground#e8d8e0
tab.activeBackground#1c1418
tab.activeBorder#c88098
tab.activeForeground#e6a2c2
tab.border#2e2228
tab.hoverBackground#2e2228
tab.hoverForeground#e8dce4
tab.inactiveBackground#201820
tab.inactiveForeground#887078
terminal.ansiBlack#2a2024
terminal.ansiBlue#9090b0
terminal.ansiBrightBlack#786870
terminal.ansiBrightBlue#b0b0d0
terminal.ansiBrightCyan#b0c8d0
terminal.ansiBrightGreen#b0c8b0
terminal.ansiBrightMagenta#d0b0c8
terminal.ansiBrightRed#e0a0b0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e0d0a0
terminal.ansiCyan#90a8b0
terminal.ansiGreen#90a890
terminal.ansiMagenta#b090a8
terminal.ansiRed#c08090
terminal.ansiWhite#e8d8e0
terminal.ansiYellow#c0b090
terminal.background#1a1418
terminal.foreground#e8d8e0
testing.iconErrored#a07080
testing.iconFailed#a07080
testing.iconPassed#90a890
testing.iconQueued#c0b090
testing.iconSkipped#685860
testing.iconUnset#685860
testing.peekBorder#a07080
testing.peekHeaderBackground#a0708020
testing.runAction#90a890
textLink.activeForeground#e0c0d0
textLink.foreground#c0a0b0
titleBar.activeBackground#201820
titleBar.activeForeground#e8dce4
titleBar.inactiveBackground#1c1418
titleBar.inactiveForeground#786068
walkThrough.embeddedEditorBackground#1e181c
welcomePage.background#1a1418
welcomePage.progress.background#2a2024
welcomePage.progress.foreground#a07088
welcomePage.tileBackground#1e181c
welcomePage.tileBorder#2a2024
welcomePage.tileHoverBackground#2a2024

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#786068	italic
keyword, storage	#d090a8	bold
entity.name.function, support.function	#c0a8c8	bold
entity.name.type, support.class, support.type, storage.type	#e8d8e0	bold
string	#d0b0c0	—
constant.character.escape	#d090a8	—
variable, support.variable	#e8d8e0	—
constant.numeric, constant.character, constant	#b0a0c0	—
constant.language, support.constant, variable.language	#c0a0b0	—
keyword.operator	#a08898	—
punctuation	#907880	—
entity.name.tag	#d090a8	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#c0a8c8	italic
meta.selector, entity.name.tag.css	#e8d8e0	—
meta.property-name, support.type.property-name	#d090a8	—
meta.property-value, support.constant.property-value	#d0b0c0	—
markup.heading	#d090a8	bold
markup.bold	#e8d8e0	bold
markup.italic	#e8d8e0	italic
meta.link	#b0a0c0	—
markup.list	#d090a8	—
markup.inline.raw	#d0b0c0	—
markup.inserted	#90a890	—
markup.deleted	#a07080	—
markup.changed	#9090b0	—

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}!`;
}