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 - Ruan Mei (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#162028
activityBar.foreground#E8E4E0
activityBar.inactiveForeground#6A7A80
activityBarBadge.background#7AAFB8
activityBarBadge.foreground#1A252F
badge.background#7AAFB8
badge.foreground#1A252F
breadcrumb.activeSelectionForeground#8BC0C8
breadcrumb.background#1F2A35
breadcrumb.focusForeground#E8E4E0
breadcrumb.foreground#6A7A80
button.background#7AAFB8
button.foreground#1A252F
button.hoverBackground#8BC0C8
button.secondaryBackground#4A5A60
button.secondaryForeground#E8E4E0
button.secondaryHoverBackground#5A6A70
charts.blue#7AAFB8
charts.foreground#E8E4E0
charts.green#8AAA8A
charts.lines#7AAFB8
charts.orange#C8A070
charts.purple#9A8A9A
charts.red#B08080
charts.yellow#C8A070
checkbox.background#121A22
checkbox.border#7AAFB8
checkbox.foreground#E8E4E0
checkbox.selectBackground#7AAFB8
checkbox.selectBorder#7AAFB8
commandCenter.activeBackground#253540
commandCenter.activeBorder#7AAFB8
commandCenter.activeForeground#7AAFB8
commandCenter.background#1F2A35
commandCenter.border#354550
commandCenter.debuggingBackground#7AAFB820
commandCenter.foreground#E8E4E0
commandCenter.inactiveBorder#35455080
commandCenter.inactiveForeground#6A7A80
debugConsole.errorForeground#B08080
debugConsole.infoForeground#7AAFB8
debugConsole.sourceForeground#6A7A80
debugConsole.warningForeground#C8A070
debugConsoleInputIcon.foreground#7AAFB8
debugIcon.breakpointCurrentStackframeForeground#7AAFB8
debugIcon.breakpointDisabledForeground#5A6A70
debugIcon.breakpointForeground#B08080
debugIcon.breakpointStackframeForeground#8AAA8A
debugIcon.breakpointUnverifiedForeground#C8A070
debugIcon.continueForeground#8AAA8A
debugIcon.disconnectForeground#B08080
debugIcon.pauseForeground#C8A070
debugIcon.restartForeground#8AAA8A
debugIcon.startForeground#8AAA8A
debugIcon.stepBackForeground#7AAFB8
debugIcon.stepIntoForeground#7AAFB8
debugIcon.stepOutForeground#7AAFB8
debugIcon.stepOverForeground#7AAFB8
debugIcon.stopForeground#B08080
debugTokenExpression.boolean#7AAFB8
debugTokenExpression.error#B08080
debugTokenExpression.name#7AAFB8
debugTokenExpression.number#6A8A90
debugTokenExpression.string#8AAA8A
debugTokenExpression.value#7AAFB8
debugToolBar.background#1F2A35
debugToolBar.border#354550
debugView.exceptionLabelBackground#B08080
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#7AAFB8
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#7AAFB860
descriptionForeground#6A7A80
diffEditor.diagonalFill#35455040
diffEditor.insertedLineBackground#8AAA8A15
diffEditor.insertedTextBackground#8AAA8A20
diffEditor.insertedTextBorder#8AAA8A00
diffEditor.removedLineBackground#B0808015
diffEditor.removedTextBackground#B0808020
diffEditor.removedTextBorder#B0808000
diffEditorGutter.insertedLineBackground#8AAA8A30
diffEditorGutter.removedLineBackground#B0808030
diffEditorOverview.insertedForeground#8AAA8A
diffEditorOverview.removedForeground#B08080
dropdown.background#121A22
dropdown.border#4A5A60
dropdown.foreground#E8E4E0
dropdown.listBackground#1F2A35
editor.background#1A252F
editor.findMatchBackground#7AAFB855
editor.findMatchHighlightBackground#7AAFB828
editor.focusedStackFrameHighlightBackground#8AAA8A30
editor.foldBackground#7AAFB812
editor.foreground#E8E4E0
editor.lineHighlightBackground#253540
editor.lineHighlightBorder#7AAFB818
editor.selectionBackground#7AAFB850
editor.stackFrameHighlightBackground#C8A07030
editor.wordHighlightBackground#4A5A6040
editor.wordHighlightStrongBackground#4A5A6060
editorBracketHighlight.foreground1#7AAFB8
editorBracketHighlight.foreground2#8BC0C8
editorBracketHighlight.foreground3#d6c09e
editorBracketHighlight.foreground4#8AAA8A
editorBracketHighlight.foreground5#C8B090
editorBracketHighlight.foreground6#6A8A90
editorBracketHighlight.unexpectedBracket.foreground#B08080
editorBracketMatch.background#7AAFB830
editorBracketMatch.border#7AAFB8
editorCodeLens.foreground#6A7A80
editorCursor.foreground#7AAFB8
editorError.border#B0808000
editorError.foreground#B08080
editorGroup.border#354550
editorGroup.dropBackground#7AAFB830
editorGroup.dropIntoPromptBackground#1F2A35
editorGroup.dropIntoPromptBorder#7AAFB8
editorGroup.dropIntoPromptForeground#E8E4E0
editorGroup.emptyBackground#1F2A35
editorGroup.focusedEmptyBorder#7AAFB8
editorGroupHeader.tabsBackground#1F2A35
editorGutter.addedBackground#8AAA8A
editorGutter.deletedBackground#AA8080
editorGutter.modifiedBackground#7AAFB8
editorHint.border#8AAA8A00
editorHint.foreground#8AAA8A
editorHoverWidget.background#1F2A35
editorHoverWidget.border#354550
editorIndentGuide.activeBackground1#7AAFB8
editorIndentGuide.background1#354550
editorInfo.border#7AAFB800
editorInfo.foreground#7AAFB8
editorInlayHint.background#35455080
editorInlayHint.foreground#6A7A80
editorInlayHint.parameterForeground#7AAFB8
editorInlayHint.typeForeground#7AAFB8
editorLineNumber.activeForeground#7AAFB8
editorLineNumber.foreground#6A7A80
editorOverviewRuler.addedForeground#8AAA8A
editorOverviewRuler.background#1F2A35
editorOverviewRuler.border#354550
editorOverviewRuler.bracketMatchForeground#7AAFB8
editorOverviewRuler.commonContentForeground#5A6A70
editorOverviewRuler.currentContentForeground#8AAA8A
editorOverviewRuler.deletedForeground#B08080
editorOverviewRuler.errorForeground#B08080
editorOverviewRuler.findMatchForeground#7AAFB880
editorOverviewRuler.incomingContentForeground#7AAFB8
editorOverviewRuler.infoForeground#7AAFB8
editorOverviewRuler.modifiedForeground#7AAFB8
editorOverviewRuler.rangeHighlightForeground#7AAFB840
editorOverviewRuler.selectionHighlightForeground#7AAFB860
editorOverviewRuler.warningForeground#C8A070
editorOverviewRuler.wordHighlightForeground#7AAFB860
editorOverviewRuler.wordHighlightStrongForeground#7AAFB880
editorStickyScroll.background#1F2A35
editorStickyScrollHover.background#253540
editorSuggestWidget.background#1F2A35
editorSuggestWidget.foreground#E8E4E0
editorSuggestWidget.highlightForeground#8BC0C8
editorSuggestWidget.selectedBackground#253540
editorWarning.border#C8A07000
editorWarning.foreground#C8A070
editorWhitespace.foreground#4A5A6050
editorWidget.background#1F2A35
editorWidget.border#354550
editorWidget.foreground#E8E4E0
errorForeground#B08080
extensionBadge.remoteBackground#7AAFB8
extensionBadge.remoteForeground#1A252F
extensionButton.prominentBackground#7AAFB8
extensionButton.prominentForeground#1A252F
extensionButton.prominentHoverBackground#8BC0C8
extensionIcon.preReleaseForeground#d6c09e
extensionIcon.sponsorForeground#B08080
extensionIcon.starForeground#C8A070
extensionIcon.verifiedForeground#8AAA8A
focusBorder#7AAFB8
gitDecoration.addedResourceForeground#8AAA8A
gitDecoration.conflictingResourceForeground#C09090
gitDecoration.deletedResourceForeground#B08080
gitDecoration.ignoredResourceForeground#5A6A70
gitDecoration.modifiedResourceForeground#7AAFB8
gitDecoration.untrackedResourceForeground#C0A878
icon.foreground#E8E4E0
input.background#121A22
input.border#4A5A60
input.foreground#E8E4E0
input.placeholderForeground#6A7A80
inputOption.activeBackground#7AAFB8
inputOption.activeForeground#1A252F
keybindingLabel.background#354550
keybindingLabel.border#354550
keybindingLabel.bottomBorder#5A6A70
keybindingLabel.foreground#E8E4E0
list.activeSelectionBackground#7AAFB8
list.activeSelectionForeground#1A252F
list.activeSelectionIconForeground#1A252F
list.focusBackground#253540
list.focusForeground#E8E4E0
list.hoverBackground#253540
list.hoverForeground#E8E4E0
list.inactiveSelectionBackground#35455080
list.inactiveSelectionForeground#E8E4E0
menu.background#121A22
menu.border#354550
menu.foreground#E8E4E0
menu.selectionBackground#7AAFB8
menu.selectionBorder#7AAFB800
menu.selectionForeground#1A252F
menu.separatorBackground#354550
menubar.selectionBackground#253540
menubar.selectionForeground#E8E4E0
merge.border#354550
merge.commonContentBackground#5A6A7020
merge.commonHeaderBackground#5A6A7040
merge.currentContentBackground#8AAA8A20
merge.currentHeaderBackground#8AAA8A40
merge.incomingContentBackground#7AAFB820
merge.incomingHeaderBackground#7AAFB840
mergeEditor.change.background#7AAFB820
mergeEditor.change.word.background#7AAFB840
mergeEditor.conflict.handledFocused.border#8AAA8A
mergeEditor.conflict.handledUnfocused.border#8AAA8A80
mergeEditor.conflict.unhandledFocused.border#C8A070
mergeEditor.conflict.unhandledUnfocused.border#C8A07080
minimap.background#1F2A35
minimap.selectionHighlight#7AAFB860
notifications.background#1F2A35
notifications.border#354550
notifications.foreground#E8E4E0
notificationsErrorIcon.foreground#B08080
notificationsInfoIcon.foreground#7AAFB8
notificationsWarningIcon.foreground#C8A070
panel.background#1F2A35
panel.border#354550
panelTitle.activeBorder#7AAFB8
panelTitle.activeForeground#E8E4E0
panelTitle.inactiveForeground#6A7A80
peekView.border#7AAFB8
peekViewEditor.background#1F2A35
peekViewResult.background#1F2A35
peekViewResult.matchHighlightBackground#7AAFB860
peekViewTitle.background#162028
peekViewTitleLabel.foreground#E8E4E0
progressBar.background#7AAFB8
quickInput.background#1F2A35
quickInput.foreground#E8E4E0
quickInputList.focusBackground#7AAFB8
quickInputList.focusForeground#1A252F
quickInputList.focusIconForeground#1A252F
quickInputTitle.background#162028
scrollbarSlider.activeBackground#7AAFB8
scrollbarSlider.background#4A5A6050
scrollbarSlider.hoverBackground#5A6A70
selection.background#7AAFB850
settings.checkboxBackground#121A22
settings.checkboxBorder#7AAFB8
settings.checkboxForeground#E8E4E0
settings.dropdownBackground#121A22
settings.dropdownBorder#354550
settings.dropdownForeground#E8E4E0
settings.dropdownListBorder#354550
settings.focusedRowBackground#25354040
settings.focusedRowBorder#7AAFB880
settings.headerForeground#E8E4E0
settings.modifiedItemIndicator#7AAFB8
settings.numberInputBackground#121A22
settings.numberInputBorder#4A5A60
settings.numberInputForeground#E8E4E0
settings.rowHoverBackground#25354020
settings.sashBorder#354550
settings.textInputBackground#121A22
settings.textInputBorder#4A5A60
settings.textInputForeground#E8E4E0
sideBar.background#1F2A35
sideBar.border#354550
sideBar.foreground#E8E4E0
sideBarSectionHeader.background#354550
sideBarSectionHeader.foreground#E8E4E0
sideBarTitle.foreground#7AAFB8
statusBar.background#6695a0
statusBar.debuggingBackground#d6c09e
statusBar.debuggingForeground#1A252F
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#162028
statusBar.noFolderForeground#E8E4E0
symbolIcon.arrayForeground#7AAFB8
symbolIcon.booleanForeground#7AAFB8
symbolIcon.classForeground#E8E4E0
symbolIcon.colorForeground#7AAFB8
symbolIcon.constantForeground#6A8A90
symbolIcon.constructorForeground#d6c09e
symbolIcon.enumeratorForeground#C8A070
symbolIcon.enumeratorMemberForeground#6A8A90
symbolIcon.eventForeground#C8A070
symbolIcon.fieldForeground#6A8A90
symbolIcon.fileForeground#6A7A80
symbolIcon.folderForeground#6A7A80
symbolIcon.functionForeground#7AAFB8
symbolIcon.interfaceForeground#8AAA8A
symbolIcon.keyForeground#7AAFB8
symbolIcon.keywordForeground#7AAFB8
symbolIcon.methodForeground#7AAFB8
symbolIcon.moduleForeground#d6c09e
symbolIcon.namespaceForeground#d6c09e
symbolIcon.nullForeground#B08080
symbolIcon.numberForeground#6A8A90
symbolIcon.objectForeground#E8E4E0
symbolIcon.operatorForeground#6A7A80
symbolIcon.packageForeground#d6c09e
symbolIcon.propertyForeground#7AAFB8
symbolIcon.referenceForeground#6A8A90
symbolIcon.snippetForeground#6A7A80
symbolIcon.stringForeground#8AAA8A
symbolIcon.structForeground#E8E4E0
symbolIcon.textForeground#E8E4E0
symbolIcon.typeParameterForeground#8AAA8A
symbolIcon.unitForeground#6A8A90
symbolIcon.variableForeground#E8E4E0
tab.activeBackground#1A252F
tab.activeBorder#7AAFB8
tab.activeForeground#E8E4E0
tab.border#354550
tab.hoverBackground#253540
tab.hoverForeground#E8E4E0
tab.inactiveBackground#1F2A35
tab.inactiveForeground#6A7A80
terminal.ansiBlack#162028
terminal.ansiBlue#6A8A90
terminal.ansiBrightBlack#5A6A70
terminal.ansiBrightBlue#7A9AA0
terminal.ansiBrightCyan#8BC0C8
terminal.ansiBrightGreen#9ABA9A
terminal.ansiBrightMagenta#AA9AAA
terminal.ansiBrightRed#C09090
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E6D0AE
terminal.ansiCyan#7AAFB8
terminal.ansiGreen#8AAA8A
terminal.ansiMagenta#9A8A9A
terminal.ansiRed#B08080
terminal.ansiWhite#E8E4E0
terminal.ansiYellow#d6c09e
terminal.background#1A252F
terminal.foreground#E8E4E0
testing.iconErrored#B08080
testing.iconFailed#B08080
testing.iconPassed#8AAA8A
testing.iconQueued#C8A070
testing.iconSkipped#5A6A70
testing.iconUnset#5A6A70
testing.peekBorder#B08080
testing.peekHeaderBackground#B0808020
testing.runAction#8AAA8A
textLink.activeForeground#A0D0D8
textLink.foreground#8BC0C8
titleBar.activeBackground#162028
titleBar.activeForeground#E8E4E0
titleBar.inactiveBackground#1A252F
titleBar.inactiveForeground#6A7A80
walkThrough.embeddedEditorBackground#1F2A35
welcomePage.background#1A252F
welcomePage.progress.background#354550
welcomePage.progress.foreground#7AAFB8
welcomePage.tileBackground#1F2A35
welcomePage.tileBorder#354550
welcomePage.tileHoverBackground#253540

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6A7A80	italic
keyword, storage	#7AAFB8	bold
entity.name.function, support.function	#8BC0C8	bold
entity.name.type, support.class, support.type, storage.type	#E8E4E0	bold
string	#8AAA8A	—
constant.character.escape	#8BC0C8	—
variable, support.variable	#E8E4E0	—
constant.numeric, constant.character, constant	#d6c09e	—
constant.language, support.constant, variable.language	#8BC0C8	—
keyword.operator	#A0A8A0	—
punctuation	#909890	—
entity.name.tag	#7AAFB8	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#d6c09e	italic
meta.selector, entity.name.tag.css	#E8E4E0	—
meta.property-name, support.type.property-name	#7AAFB8	—
meta.property-value, support.constant.property-value	#8AAA8A	—
markup.heading	#7AAFB8	bold
markup.bold	#E8E4E0	bold
markup.italic	#E8E4E0	italic
meta.link	#d6c09e	—
markup.list	#7AAFB8	—
markup.inline.raw	#8AAA8A	—
markup.inserted	#8AAA8A	—
markup.deleted	#B08080	—
markup.changed	#7AAFB8	—

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