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 — Honkai: Star Rail - Aventurine (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#141618
activityBar.foreground#c9b87a
activityBar.inactiveForeground#4a6068
activityBarBadge.background#4a8a95
activityBarBadge.foreground#141618
badge.background#4a8a95
badge.foreground#141618
breadcrumb.activeSelectionForeground#c9b87a
breadcrumb.background#181a1c
breadcrumb.focusForeground#d8d4cc
breadcrumb.foreground#5a6a70
button.background#2a6e7c
button.foreground#d8d4cc
button.hoverBackground#3a8090
button.secondaryBackground#1c1f22
button.secondaryForeground#d8d4cc
button.secondaryHoverBackground#2a3035
charts.blue#6ab0c0
charts.foreground#d8d4cc
charts.green#80b090
charts.lines#d8d4cc
charts.orange#c0a080
charts.purple#b090a0
charts.red#c07070
charts.yellow#c9b87a
checkbox.background#101214
checkbox.border#2a6e7c
checkbox.foreground#d8d4cc
checkbox.selectBackground#2a6e7c
checkbox.selectBorder#4a8a95
commandCenter.activeBackground#1c1f22
commandCenter.activeBorder#4a8a95
commandCenter.activeForeground#c9b87a
commandCenter.background#181a1c
commandCenter.border#1c1f22
commandCenter.debuggingBackground#2a6e7c20
commandCenter.foreground#d8d4cc
commandCenter.inactiveBorder#1c1f2280
commandCenter.inactiveForeground#4a6068
debugConsole.errorForeground#d08080
debugConsole.infoForeground#6ab0c0
debugConsole.sourceForeground#5a6a70
debugConsole.warningForeground#c9b87a
debugConsoleInputIcon.foreground#c9b87a
debugIcon.breakpointCurrentStackframeForeground#c9b87a
debugIcon.breakpointDisabledForeground#4a6068
debugIcon.breakpointForeground#d08080
debugIcon.breakpointStackframeForeground#80b090
debugIcon.breakpointUnverifiedForeground#c9b87a
debugIcon.continueForeground#80b090
debugIcon.disconnectForeground#d08080
debugIcon.pauseForeground#c9b87a
debugIcon.restartForeground#80b090
debugIcon.startForeground#80b090
debugIcon.stepBackForeground#6ab0c0
debugIcon.stepIntoForeground#6ab0c0
debugIcon.stepOutForeground#6ab0c0
debugIcon.stepOverForeground#6ab0c0
debugIcon.stopForeground#d08080
debugTokenExpression.boolean#c9b87a
debugTokenExpression.error#d08080
debugTokenExpression.name#d8d4cc
debugTokenExpression.number#6ab0c0
debugTokenExpression.string#a0c090
debugTokenExpression.value#6ab0c0
debugToolBar.background#181a1c
debugToolBar.border#1c1f22
debugView.exceptionLabelBackground#c07070
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#c9b87a
debugView.stateLabelForeground#141618
debugView.valueChangedHighlight#6ab0c060
descriptionForeground#5a6a70
diffEditor.diagonalFill#1c1f2240
diffEditor.insertedLineBackground#80b09015
diffEditor.insertedTextBackground#80b09020
diffEditor.insertedTextBorder#80b09000
diffEditor.removedLineBackground#c0707015
diffEditor.removedTextBackground#c0707020
diffEditor.removedTextBorder#c0707000
diffEditorGutter.insertedLineBackground#80b09030
diffEditorGutter.removedLineBackground#c0707030
diffEditorOverview.insertedForeground#80b090
diffEditorOverview.removedForeground#c07070
dropdown.background#101214
dropdown.border#2a6e7c
dropdown.foreground#d8d4cc
dropdown.listBackground#181a1c
editor.background#141618
editor.findMatchBackground#c9b87a40
editor.findMatchHighlightBackground#c9b87a20
editor.focusedStackFrameHighlightBackground#80b09030
editor.foldBackground#2a6e7c15
editor.foreground#d8d4cc
editor.lineHighlightBackground#1c1f22
editor.lineHighlightBorder#2a6e7c30
editor.selectionBackground#2a6e7c50
editor.stackFrameHighlightBackground#c9b87a30
editor.wordHighlightBackground#2a6e7c30
editor.wordHighlightStrongBackground#2a6e7c50
editorBracketHighlight.foreground1#c9b87a
editorBracketHighlight.foreground2#6ab0c0
editorBracketHighlight.foreground3#b090a0
editorBracketHighlight.foreground4#80b090
editorBracketHighlight.foreground5#c0a080
editorBracketHighlight.foreground6#70b0a0
editorBracketHighlight.unexpectedBracket.foreground#d08080
editorBracketMatch.background#4a8a9530
editorBracketMatch.border#4a8a95
editorCodeLens.foreground#5a6a70
editorCursor.foreground#c9b87a
editorError.border#d0808000
editorError.foreground#d08080
editorGroup.border#1c1f22
editorGroup.dropBackground#2a6e7c30
editorGroup.dropIntoPromptBackground#181a1c
editorGroup.dropIntoPromptBorder#4a8a95
editorGroup.dropIntoPromptForeground#d8d4cc
editorGroup.emptyBackground#181a1c
editorGroup.focusedEmptyBorder#4a8a95
editorGroupHeader.tabsBackground#181a1c
editorGutter.addedBackground#6a9a70
editorGutter.deletedBackground#c07070
editorGutter.modifiedBackground#6ab0c0
editorHint.border#80b09000
editorHint.foreground#80b090
editorHoverWidget.background#181a1c
editorHoverWidget.border#2a6e7c50
editorIndentGuide.activeBackground1#4a8a95
editorIndentGuide.background1#1c1f22
editorInfo.border#6ab0c000
editorInfo.foreground#6ab0c0
editorInlayHint.background#1c1f2280
editorInlayHint.foreground#5a6a70
editorInlayHint.parameterForeground#c9b87a
editorInlayHint.typeForeground#6ab0c0
editorLineNumber.activeForeground#c9b87a
editorLineNumber.foreground#4a6068
editorOverviewRuler.addedForeground#80b090
editorOverviewRuler.background#181a1c
editorOverviewRuler.border#1c1f22
editorOverviewRuler.bracketMatchForeground#4a8a95
editorOverviewRuler.commonContentForeground#5a6a70
editorOverviewRuler.currentContentForeground#80b090
editorOverviewRuler.deletedForeground#c07070
editorOverviewRuler.errorForeground#d08080
editorOverviewRuler.findMatchForeground#c9b87a80
editorOverviewRuler.incomingContentForeground#6ab0c0
editorOverviewRuler.infoForeground#6ab0c0
editorOverviewRuler.modifiedForeground#6ab0c0
editorOverviewRuler.rangeHighlightForeground#4a8a9540
editorOverviewRuler.selectionHighlightForeground#4a8a9560
editorOverviewRuler.warningForeground#c9b87a
editorOverviewRuler.wordHighlightForeground#4a8a9560
editorOverviewRuler.wordHighlightStrongForeground#4a8a9580
editorStickyScroll.background#181a1c
editorStickyScrollHover.background#1c1f22
editorSuggestWidget.background#181a1c
editorSuggestWidget.foreground#d8d4cc
editorSuggestWidget.highlightForeground#c9b87a
editorSuggestWidget.selectedBackground#2a6e7c
editorWarning.border#c9b87a00
editorWarning.foreground#c9b87a
editorWhitespace.foreground#2a3035
editorWidget.background#181a1c
editorWidget.border#2a6e7c50
editorWidget.foreground#d8d4cc
errorForeground#d08080
extensionBadge.remoteBackground#4a8a95
extensionBadge.remoteForeground#141618
extensionButton.prominentBackground#2a6e7c
extensionButton.prominentForeground#d8d4cc
extensionButton.prominentHoverBackground#3a8090
extensionIcon.preReleaseForeground#b090a0
extensionIcon.sponsorForeground#6ab0c0
extensionIcon.starForeground#c9b87a
extensionIcon.verifiedForeground#80b090
focusBorder#4a8a95
gitDecoration.addedResourceForeground#80b090
gitDecoration.conflictingResourceForeground#b090a0
gitDecoration.deletedResourceForeground#c07070
gitDecoration.ignoredResourceForeground#4a6068
gitDecoration.modifiedResourceForeground#6ab0c0
gitDecoration.untrackedResourceForeground#c9b87a
icon.foreground#d8d4cc
input.background#101214
input.border#2a6e7c
input.foreground#d8d4cc
input.placeholderForeground#4a6068
inputOption.activeBackground#2a6e7c
inputOption.activeForeground#FFFFFF
keybindingLabel.background#1c1f22
keybindingLabel.border#1c1f22
keybindingLabel.bottomBorder#4a6068
keybindingLabel.foreground#d8d4cc
list.activeSelectionBackground#2a6e7c
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#c9b87a
list.focusBackground#2a6e7c60
list.focusForeground#FFFFFF
list.hoverBackground#1c1f22
list.hoverForeground#d8d4cc
list.inactiveSelectionBackground#2a6e7c40
list.inactiveSelectionForeground#d8d4cc
menu.background#101214
menu.border#1c1f22
menu.foreground#d8d4cc
menu.selectionBackground#2a6e7c
menu.selectionBorder#2a6e7c00
menu.selectionForeground#FFFFFF
menu.separatorBackground#1c1f22
menubar.selectionBackground#1c1f22
menubar.selectionForeground#d8d4cc
merge.border#1c1f22
merge.commonContentBackground#5a6a7020
merge.commonHeaderBackground#5a6a7040
merge.currentContentBackground#80b09020
merge.currentHeaderBackground#80b09040
merge.incomingContentBackground#6ab0c020
merge.incomingHeaderBackground#6ab0c040
mergeEditor.change.background#6ab0c020
mergeEditor.change.word.background#6ab0c040
mergeEditor.conflict.handledFocused.border#80b090
mergeEditor.conflict.handledUnfocused.border#80b09080
mergeEditor.conflict.unhandledFocused.border#c9b87a
mergeEditor.conflict.unhandledUnfocused.border#c9b87a80
minimap.background#181a1c
minimap.selectionHighlight#4a8a9550
notifications.background#181a1c
notifications.border#2a6e7c50
notifications.foreground#d8d4cc
notificationsErrorIcon.foreground#d08080
notificationsInfoIcon.foreground#6ab0c0
notificationsWarningIcon.foreground#c9b87a
panel.background#181a1c
panel.border#2a6e7c50
panelTitle.activeBorder#4a8a95
panelTitle.activeForeground#d8d4cc
panelTitle.inactiveForeground#5a6a70
peekView.border#4a8a95
peekViewEditor.background#181a1c
peekViewResult.background#181a1c
peekViewResult.matchHighlightBackground#c9b87a40
peekViewTitle.background#1c1f22
peekViewTitleLabel.foreground#c9b87a
progressBar.background#4a8a95
quickInput.background#181a1c
quickInput.foreground#d8d4cc
quickInputList.focusBackground#2a6e7c
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#c9b87a
quickInputTitle.background#1c1f22
scrollbarSlider.activeBackground#4a8a95
scrollbarSlider.background#2a6e7c40
scrollbarSlider.hoverBackground#2a6e7c80
selection.background#2a6e7c50
settings.checkboxBackground#101214
settings.checkboxBorder#2a6e7c
settings.checkboxForeground#d8d4cc
settings.dropdownBackground#101214
settings.dropdownBorder#1c1f22
settings.dropdownForeground#d8d4cc
settings.dropdownListBorder#1c1f22
settings.focusedRowBackground#1c1f2240
settings.focusedRowBorder#4a8a9580
settings.headerForeground#d8d4cc
settings.modifiedItemIndicator#4a8a95
settings.numberInputBackground#101214
settings.numberInputBorder#2a6e7c
settings.numberInputForeground#d8d4cc
settings.rowHoverBackground#1c1f2220
settings.sashBorder#1c1f22
settings.textInputBackground#101214
settings.textInputBorder#2a6e7c
settings.textInputForeground#d8d4cc
sideBar.background#181a1c
sideBar.border#1c1f22
sideBar.foreground#d8d4cc
sideBarSectionHeader.background#1c1f22
sideBarSectionHeader.foreground#c9b87a
sideBarTitle.foreground#c9b87a
statusBar.background#1a5864
statusBar.debuggingBackground#4a8a95
statusBar.debuggingForeground#141618
statusBar.foreground#d8d4cc
statusBar.noFolderBackground#141618
statusBar.noFolderForeground#d8d4cc
symbolIcon.arrayForeground#d8d4cc
symbolIcon.booleanForeground#c9b87a
symbolIcon.classForeground#c9b87a
symbolIcon.colorForeground#6ab0c0
symbolIcon.constantForeground#6ab0c0
symbolIcon.constructorForeground#b090a0
symbolIcon.enumeratorForeground#c9b87a
symbolIcon.enumeratorMemberForeground#6ab0c0
symbolIcon.eventForeground#c9b87a
symbolIcon.fieldForeground#6ab0c0
symbolIcon.fileForeground#5a6a70
symbolIcon.folderForeground#5a6a70
symbolIcon.functionForeground#6ab0c0
symbolIcon.interfaceForeground#80b090
symbolIcon.keyForeground#d8d4cc
symbolIcon.keywordForeground#c9b87a
symbolIcon.methodForeground#6ab0c0
symbolIcon.moduleForeground#b090a0
symbolIcon.namespaceForeground#b090a0
symbolIcon.nullForeground#c07070
symbolIcon.numberForeground#6ab0c0
symbolIcon.objectForeground#d8d4cc
symbolIcon.operatorForeground#5a6a70
symbolIcon.packageForeground#b090a0
symbolIcon.propertyForeground#d8d4cc
symbolIcon.referenceForeground#6ab0c0
symbolIcon.snippetForeground#5a6a70
symbolIcon.stringForeground#a0c090
symbolIcon.structForeground#d8d4cc
symbolIcon.textForeground#d8d4cc
symbolIcon.typeParameterForeground#80b090
symbolIcon.unitForeground#6ab0c0
symbolIcon.variableForeground#d8d4cc
tab.activeBackground#141618
tab.activeBorder#4a8a95
tab.activeForeground#c9b87a
tab.border#1c1f22
tab.hoverBackground#1c1f22
tab.hoverForeground#d8d4cc
tab.inactiveBackground#181a1c
tab.inactiveForeground#5a6a70
terminal.ansiBlack#1c1f22
terminal.ansiBlue#6ab0c0
terminal.ansiBrightBlack#5a6a70
terminal.ansiBrightBlue#90c8d8
terminal.ansiBrightCyan#98d0c0
terminal.ansiBrightGreen#a0d0a8
terminal.ansiBrightMagenta#d0b0c0
terminal.ansiBrightRed#e0a0a0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e0d0a0
terminal.ansiCyan#70b0a0
terminal.ansiGreen#80b090
terminal.ansiMagenta#b090a0
terminal.ansiRed#d08080
terminal.ansiWhite#d8d4cc
terminal.ansiYellow#c9b87a
terminal.background#141618
terminal.foreground#d8d4cc
testing.iconErrored#c07070
testing.iconFailed#c07070
testing.iconPassed#80b090
testing.iconQueued#c9b87a
testing.iconSkipped#4a6068
testing.iconUnset#4a6068
testing.peekBorder#c07070
testing.peekHeaderBackground#c0707020
testing.runAction#80b090
textLink.activeForeground#c9b87a
textLink.foreground#6ab0c0
titleBar.activeBackground#181a1c
titleBar.activeForeground#d8d4cc
titleBar.inactiveBackground#141618
titleBar.inactiveForeground#4a6068
walkThrough.embeddedEditorBackground#181a1c
welcomePage.background#141618
welcomePage.progress.background#1c1f22
welcomePage.progress.foreground#4a8a95
welcomePage.tileBackground#181a1c
welcomePage.tileBorder#1c1f22
welcomePage.tileHoverBackground#1c1f22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5a7078	italic
keyword, storage	#c9b87a	bold
entity.name.function, support.function	#6ab0c0	bold
entity.name.type, support.class, support.type, storage.type	#d8d4cc	bold
string	#a0c090	—
constant.character.escape	#6ab0c0	—
variable, support.variable	#d8d4cc	—
constant.numeric, constant.character, constant	#90b8a8	—
constant.language, support.constant, variable.language	#6ab0c0	—
keyword.operator	#8a98a0	—
punctuation	#7a8890	—
entity.name.tag	#c9b87a	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#6ab0c0	italic
meta.selector, entity.name.tag.css	#d8d4cc	—
meta.property-name, support.type.property-name	#c9b87a	—
meta.property-value, support.constant.property-value	#a0c090	—
markup.heading	#c9b87a	bold
markup.bold	#d8d4cc	bold
markup.italic	#d8d4cc	italic
meta.link	#6ab0c0	—
markup.list	#c9b87a	—
markup.inline.raw	#a0c090	—
markup.inserted	#80b090	—
markup.deleted	#c07070	—
markup.changed	#6ab0c0	—

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