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

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.background#2c435d
activityBar.foreground#FAF8F5
activityBar.inactiveForeground#9AB0B5
activityBarBadge.background#6695a0
activityBarBadge.foreground#FFFFFF
badge.background#6695a0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#4A7A85
breadcrumb.background#F0ECE8
breadcrumb.focusForeground#2c435d
breadcrumb.foreground#677e7c
button.background#6695a0
button.foreground#FFFFFF
button.hoverBackground#4A7A85
button.secondaryBackground#677e7c
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#2c435d
charts.blue#4A7A85
charts.foreground#2c435d
charts.green#7A9A7A
charts.lines#6695a0
charts.orange#C8A070
charts.purple#8A7A90
charts.red#A07070
charts.yellow#B8A060
checkbox.background#FFFFFF
checkbox.border#6695a0
checkbox.foreground#2c435d
checkbox.selectBackground#6695a0
checkbox.selectBorder#6695a0
commandCenter.activeBackground#E8E5E0
commandCenter.activeBorder#6695a0
commandCenter.activeForeground#4A7A85
commandCenter.background#F0ECE8
commandCenter.border#E0DCD5
commandCenter.debuggingBackground#6695a020
commandCenter.foreground#2c435d
commandCenter.inactiveBorder#E0DCD580
commandCenter.inactiveForeground#677e7c
debugConsole.errorForeground#A07070
debugConsole.infoForeground#6695a0
debugConsole.sourceForeground#677e7c
debugConsole.warningForeground#B8A060
debugConsoleInputIcon.foreground#6695a0
debugIcon.breakpointCurrentStackframeForeground#6695a0
debugIcon.breakpointDisabledForeground#8A9090
debugIcon.breakpointForeground#A07070
debugIcon.breakpointStackframeForeground#7A9A7A
debugIcon.breakpointUnverifiedForeground#B8A060
debugIcon.continueForeground#7A9A7A
debugIcon.disconnectForeground#A07070
debugIcon.pauseForeground#B8A060
debugIcon.restartForeground#7A9A7A
debugIcon.startForeground#7A9A7A
debugIcon.stepBackForeground#6695a0
debugIcon.stepIntoForeground#6695a0
debugIcon.stepOutForeground#6695a0
debugIcon.stepOverForeground#6695a0
debugIcon.stopForeground#A07070
debugTokenExpression.boolean#4A7A85
debugTokenExpression.error#A07070
debugTokenExpression.name#4A7A85
debugTokenExpression.number#677e7c
debugTokenExpression.string#5A8870
debugTokenExpression.value#6695a0
debugToolBar.background#F0ECE8
debugToolBar.border#E0DCD5
debugView.exceptionLabelBackground#A07070
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#6695a0
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#6695a060
descriptionForeground#677e7c
diffEditor.diagonalFill#E0DCD540
diffEditor.insertedLineBackground#7A9A7A15
diffEditor.insertedTextBackground#7A9A7A20
diffEditor.insertedTextBorder#7A9A7A00
diffEditor.removedLineBackground#A0707015
diffEditor.removedTextBackground#A0707020
diffEditor.removedTextBorder#A0707000
diffEditorGutter.insertedLineBackground#7A9A7A30
diffEditorGutter.removedLineBackground#A0707030
diffEditorOverview.insertedForeground#7A9A7A
diffEditorOverview.removedForeground#A07070
dropdown.background#FFFFFF
dropdown.border#d6c09e
dropdown.foreground#2c435d
dropdown.listBackground#FFFFFF
editor.background#FAF8F5
editor.findMatchBackground#6695a045
editor.findMatchHighlightBackground#6695a022
editor.focusedStackFrameHighlightBackground#7A9A7A30
editor.foldBackground#6695a012
editor.foreground#2c435d
editor.lineHighlightBackground#E8E5E020
editor.lineHighlightBorder#d6c09e30
editor.selectionBackground#6695a040
editor.stackFrameHighlightBackground#B8A06030
editor.wordHighlightBackground#d6c09e30
editor.wordHighlightStrongBackground#d6c09e50
editorBracketHighlight.foreground1#6695a0
editorBracketHighlight.foreground2#4A7A85
editorBracketHighlight.foreground3#d6c09e
editorBracketHighlight.foreground4#7A9A7A
editorBracketHighlight.foreground5#677e7c
editorBracketHighlight.foreground6#2c435d
editorBracketHighlight.unexpectedBracket.foreground#A07070
editorBracketMatch.background#6695a030
editorBracketMatch.border#6695a0
editorCodeLens.foreground#8A9090
editorCursor.foreground#4A7A85
editorError.border#A0707000
editorError.foreground#A07070
editorGroup.border#E0DCD5
editorGroup.dropBackground#6695a030
editorGroup.dropIntoPromptBackground#F0ECE8
editorGroup.dropIntoPromptBorder#6695a0
editorGroup.dropIntoPromptForeground#2c435d
editorGroup.emptyBackground#F0ECE8
editorGroup.focusedEmptyBorder#6695a0
editorGroupHeader.tabsBackground#F0ECE8
editorGutter.addedBackground#7A9A7A
editorGutter.deletedBackground#A07070
editorGutter.modifiedBackground#6695a0
editorHint.border#7A9A7A00
editorHint.foreground#7A9A7A
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#E0DCD5
editorIndentGuide.activeBackground1#6695a0
editorIndentGuide.background1#E0DCD5
editorInfo.border#6695a000
editorInfo.foreground#6695a0
editorInlayHint.background#E0DCD580
editorInlayHint.foreground#677e7c
editorInlayHint.parameterForeground#6695a0
editorInlayHint.typeForeground#4A7A85
editorLineNumber.activeForeground#4A7A85
editorLineNumber.foreground#8A9090
editorOverviewRuler.addedForeground#7A9A7A
editorOverviewRuler.background#F0ECE8
editorOverviewRuler.border#E0DCD5
editorOverviewRuler.bracketMatchForeground#6695a0
editorOverviewRuler.commonContentForeground#677e7c
editorOverviewRuler.currentContentForeground#7A9A7A
editorOverviewRuler.deletedForeground#A07070
editorOverviewRuler.errorForeground#A07070
editorOverviewRuler.findMatchForeground#6695a080
editorOverviewRuler.incomingContentForeground#6695a0
editorOverviewRuler.infoForeground#6695a0
editorOverviewRuler.modifiedForeground#6695a0
editorOverviewRuler.rangeHighlightForeground#6695a040
editorOverviewRuler.selectionHighlightForeground#6695a060
editorOverviewRuler.warningForeground#B8A060
editorOverviewRuler.wordHighlightForeground#6695a060
editorOverviewRuler.wordHighlightStrongForeground#6695a080
editorStickyScroll.background#F0ECE8
editorStickyScrollHover.background#E8E5E0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#2c435d
editorSuggestWidget.highlightForeground#4A7A85
editorSuggestWidget.selectedBackground#E8E5E0
editorWarning.border#B8A06000
editorWarning.foreground#B8A060
editorWhitespace.foreground#d6c09e50
editorWidget.background#F0ECE8
editorWidget.border#E0DCD5
editorWidget.foreground#2c435d
errorForeground#A07070
extensionBadge.remoteBackground#6695a0
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#6695a0
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#4A7A85
extensionIcon.preReleaseForeground#d6c09e
extensionIcon.sponsorForeground#A07070
extensionIcon.starForeground#B8A060
extensionIcon.verifiedForeground#7A9A7A
focusBorder#6695a0
gitDecoration.addedResourceForeground#5A8A5A
gitDecoration.conflictingResourceForeground#B08080
gitDecoration.deletedResourceForeground#A07070
gitDecoration.ignoredResourceForeground#8A9090
gitDecoration.modifiedResourceForeground#4A7A85
gitDecoration.untrackedResourceForeground#9A8860
icon.foreground#2c435d
input.background#FFFFFF
input.border#d6c09e
input.foreground#2c435d
input.placeholderForeground#8A909080
inputOption.activeBackground#6695a0
inputOption.activeForeground#FFFFFF
keybindingLabel.background#E0DCD5
keybindingLabel.border#E0DCD5
keybindingLabel.bottomBorder#677e7c
keybindingLabel.foreground#2c435d
list.activeSelectionBackground#6695a0
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#6695a025
list.focusForeground#2c435d
list.hoverBackground#E8E5E0
list.hoverForeground#2c435d
list.inactiveSelectionBackground#E0DCD590
list.inactiveSelectionForeground#2c435d
menu.background#FFFFFF
menu.border#E0DCD5
menu.foreground#2c435d
menu.selectionBackground#6695a0
menu.selectionBorder#6695a000
menu.selectionForeground#FFFFFF
menu.separatorBackground#E0DCD5
menubar.selectionBackground#E8E5E0
menubar.selectionForeground#2c435d
merge.border#E0DCD5
merge.commonContentBackground#677e7c20
merge.commonHeaderBackground#677e7c40
merge.currentContentBackground#7A9A7A20
merge.currentHeaderBackground#7A9A7A40
merge.incomingContentBackground#6695a020
merge.incomingHeaderBackground#6695a040
mergeEditor.change.background#6695a020
mergeEditor.change.word.background#6695a040
mergeEditor.conflict.handledFocused.border#7A9A7A
mergeEditor.conflict.handledUnfocused.border#7A9A7A80
mergeEditor.conflict.unhandledFocused.border#B8A060
mergeEditor.conflict.unhandledUnfocused.border#B8A06080
minimap.background#F0ECE8
minimap.selectionHighlight#6695a050
notifications.background#FFFFFF
notifications.border#E0DCD5
notifications.foreground#2c435d
notificationsErrorIcon.foreground#A07070
notificationsInfoIcon.foreground#6695a0
notificationsWarningIcon.foreground#B8A060
panel.background#F0ECE8
panel.border#E0DCD5
panelTitle.activeBorder#6695a0
panelTitle.activeForeground#2c435d
panelTitle.inactiveForeground#677e7c
peekView.border#6695a0
peekViewEditor.background#F0ECE8
peekViewResult.background#F0ECE8
peekViewResult.matchHighlightBackground#6695a050
peekViewTitle.background#2c435d
peekViewTitleLabel.foreground#FAF8F5
progressBar.background#6695a0
quickInput.background#F0ECE8
quickInput.foreground#2c435d
quickInputList.focusBackground#6695a0
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#2c435d
scrollbarSlider.activeBackground#6695a0
scrollbarSlider.background#d6c09e50
scrollbarSlider.hoverBackground#d6c09e
selection.background#6695a040
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#6695a0
settings.checkboxForeground#2c435d
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#E0DCD5
settings.dropdownForeground#2c435d
settings.dropdownListBorder#E0DCD5
settings.focusedRowBackground#E8E5E040
settings.focusedRowBorder#6695a080
settings.headerForeground#2c435d
settings.modifiedItemIndicator#6695a0
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#d6c09e
settings.numberInputForeground#2c435d
settings.rowHoverBackground#E8E5E020
settings.sashBorder#E0DCD5
settings.textInputBackground#FFFFFF
settings.textInputBorder#d6c09e
settings.textInputForeground#2c435d
sideBar.background#F0ECE8
sideBar.border#E0DCD5
sideBar.foreground#2c435d
sideBarSectionHeader.background#E0DCD5
sideBarSectionHeader.foreground#2c435d
sideBarTitle.foreground#677e7c
statusBar.background#6695a0
statusBar.debuggingBackground#d6c09e
statusBar.debuggingForeground#2c435d
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#677e7c
statusBar.noFolderForeground#FAF8F5
symbolIcon.arrayForeground#6695a0
symbolIcon.booleanForeground#4A7A85
symbolIcon.classForeground#2c435d
symbolIcon.colorForeground#6695a0
symbolIcon.constantForeground#677e7c
symbolIcon.constructorForeground#d6c09e
symbolIcon.enumeratorForeground#B8A060
symbolIcon.enumeratorMemberForeground#677e7c
symbolIcon.eventForeground#B8A060
symbolIcon.fieldForeground#677e7c
symbolIcon.fileForeground#677e7c
symbolIcon.folderForeground#677e7c
symbolIcon.functionForeground#6695a0
symbolIcon.interfaceForeground#7A9A7A
symbolIcon.keyForeground#6695a0
symbolIcon.keywordForeground#4A7A85
symbolIcon.methodForeground#6695a0
symbolIcon.moduleForeground#d6c09e
symbolIcon.namespaceForeground#d6c09e
symbolIcon.nullForeground#A07070
symbolIcon.numberForeground#677e7c
symbolIcon.objectForeground#2c435d
symbolIcon.operatorForeground#677e7c
symbolIcon.packageForeground#d6c09e
symbolIcon.propertyForeground#6695a0
symbolIcon.referenceForeground#677e7c
symbolIcon.snippetForeground#677e7c
symbolIcon.stringForeground#5A8870
symbolIcon.structForeground#2c435d
symbolIcon.textForeground#2c435d
symbolIcon.typeParameterForeground#7A9A7A
symbolIcon.unitForeground#677e7c
symbolIcon.variableForeground#2c435d
tab.activeBackground#FFFFFF
tab.activeBorder#6695a0
tab.activeForeground#2c435d
tab.border#E0DCD5
tab.hoverBackground#FFFFFF
tab.hoverForeground#4A7A85
tab.inactiveBackground#F0ECE8
tab.inactiveForeground#677e7c
terminal.ansiBlack#2c435d
terminal.ansiBlue#4A7A85
terminal.ansiBrightBlack#677e7c
terminal.ansiBrightBlue#7AA0A8
terminal.ansiBrightCyan#7AAFB8
terminal.ansiBrightGreen#8AAA8A
terminal.ansiBrightMagenta#9A8A9A
terminal.ansiBrightRed#B08080
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#d6c09e
terminal.ansiCyan#6695a0
terminal.ansiGreen#7A9A7A
terminal.ansiMagenta#8A7A90
terminal.ansiRed#A07070
terminal.ansiWhite#E0DCD5
terminal.ansiYellow#C8A878
terminal.background#FFFFFF
terminal.foreground#2c435d
testing.iconErrored#A07070
testing.iconFailed#A07070
testing.iconPassed#7A9A7A
testing.iconQueued#B8A060
testing.iconSkipped#8A9090
testing.iconUnset#8A9090
testing.peekBorder#A07070
testing.peekHeaderBackground#A0707020
testing.runAction#7A9A7A
textLink.activeForeground#2c435d
textLink.foreground#4A7A85
titleBar.activeBackground#2c435d
titleBar.activeForeground#FAF8F5
titleBar.inactiveBackground#3A5570
titleBar.inactiveForeground#9AB0B5
walkThrough.embeddedEditorBackground#F0ECE8
welcomePage.background#FAF8F5
welcomePage.progress.background#E0DCD5
welcomePage.progress.foreground#6695a0
welcomePage.tileBackground#F0ECE8
welcomePage.tileBorder#E0DCD5
welcomePage.tileHoverBackground#E8E5E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A9090	italic
keyword, storage	#4A7A85	bold
entity.name.function, support.function	#6695a0	bold
entity.name.type, support.class, support.type, storage.type	#2c435d	bold
string	#5A8870	—
constant.character.escape	#2c435d	—
variable, support.variable	#2c435d	—
constant.numeric, constant.character, constant	#C8A070	—
constant.language, support.constant, variable.language	#4A7A85	—
keyword.operator	#677e7c	—
punctuation	#8A9090	—
entity.name.tag	#4A7A85	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#6695a0	italic
meta.selector, entity.name.tag.css	#2c435d	—
meta.property-name, support.type.property-name	#4A7A85	—
meta.property-value, support.constant.property-value	#5A8870	—
markup.heading	#4A7A85	bold
markup.bold	#2c435d	bold
markup.italic	#2c435d	italic
meta.link	#6695a0	—
markup.list	#4A7A85	—
markup.inline.raw	#5A8870	—
markup.inserted	#5A8A5A	—
markup.deleted	#A07070	—
markup.changed	#6695a0	—

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