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 - Furina

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#16255f
activityBar.foreground#e8f4fa
activityBar.inactiveForeground#7a9bb8
activityBarBadge.background#5eb3e4
activityBarBadge.foreground#FFFFFF
badge.background#5eb3e4
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#3a7fc4
breadcrumb.background#eef6fb
breadcrumb.focusForeground#1a2840
breadcrumb.foreground#5a7090
button.background#3a7fc4
button.foreground#FFFFFF
button.hoverBackground#2a5f9f
button.secondaryBackground#16255f
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#0f1a3f
charts.blue#667ede
charts.foreground#1a2840
charts.green#4a9a7a
charts.lines#d6ecf8
charts.orange#5eb3e4
charts.purple#7e8fee
charts.red#c84860
charts.yellow#d89850
checkbox.background#FFFFFF
checkbox.border#c5dced
checkbox.foreground#1a2840
checkbox.selectBackground#3a7fc4
checkbox.selectBorder#3a7fc4
commandCenter.activeBackground#d6ecf8
commandCenter.activeBorder#3a7fc4
commandCenter.activeForeground#3a7fc4
commandCenter.background#eef6fb
commandCenter.border#d6ecf8
commandCenter.debuggingBackground#3a7fc420
commandCenter.foreground#1a2840
commandCenter.inactiveBorder#d6ecf880
commandCenter.inactiveForeground#5a7090
debugConsole.errorForeground#c84860
debugConsole.infoForeground#667ede
debugConsole.sourceForeground#5a7090
debugConsole.warningForeground#d89850
debugConsoleInputIcon.foreground#3a7fc4
debugIcon.breakpointCurrentStackframeForeground#3a7fc4
debugIcon.breakpointDisabledForeground#9a9fb8
debugIcon.breakpointForeground#c84860
debugIcon.breakpointStackframeForeground#4a9a7a
debugIcon.breakpointUnverifiedForeground#d89850
debugIcon.continueForeground#4a9a7a
debugIcon.disconnectForeground#c84860
debugIcon.pauseForeground#d89850
debugIcon.restartForeground#4a9a7a
debugIcon.startForeground#4a9a7a
debugIcon.stepBackForeground#3a7fc4
debugIcon.stepIntoForeground#3a7fc4
debugIcon.stepOutForeground#3a7fc4
debugIcon.stepOverForeground#3a7fc4
debugIcon.stopForeground#c84860
debugTokenExpression.boolean#3a7fc4
debugTokenExpression.error#c84860
debugTokenExpression.name#1a2840
debugTokenExpression.number#7e8fee
debugTokenExpression.string#16305f
debugTokenExpression.value#3a7fc4
debugToolBar.background#eef6fb
debugToolBar.border#d6ecf8
debugView.exceptionLabelBackground#c84860
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#3a7fc4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#3a7fc460
descriptionForeground#5a7090
diffEditor.diagonalFill#d6ecf840
diffEditor.insertedLineBackground#4a9a7a15
diffEditor.insertedTextBackground#4a9a7a20
diffEditor.insertedTextBorder#4a9a7a00
diffEditor.removedLineBackground#c8486015
diffEditor.removedTextBackground#c8486020
diffEditor.removedTextBorder#c8486000
diffEditorGutter.insertedLineBackground#4a9a7a30
diffEditorGutter.removedLineBackground#c8486030
diffEditorOverview.insertedForeground#4a9a7a
diffEditorOverview.removedForeground#c84860
dropdown.background#FFFFFF
dropdown.border#c5dced
dropdown.foreground#1a2840
dropdown.listBackground#FFFFFF
editor.background#f5f9fc
editor.findMatchBackground#5eb3e450
editor.findMatchHighlightBackground#5eb3e425
editor.focusedStackFrameHighlightBackground#4a9a7a30
editor.foldBackground#5eb3e415
editor.foreground#1a2840
editor.lineHighlightBackground#eef6fb
editor.lineHighlightBorder#d6ecf820
editor.selectionBackground#5eb3e440
editor.stackFrameHighlightBackground#d8985030
editor.wordHighlightBackground#5eb3e420
editor.wordHighlightStrongBackground#5eb3e440
editorBracketHighlight.foreground1#3a7fc4
editorBracketHighlight.foreground2#5eb3e4
editorBracketHighlight.foreground3#667ede
editorBracketHighlight.foreground4#4a9a7a
editorBracketHighlight.foreground5#d89850
editorBracketHighlight.foreground6#7e8fee
editorBracketHighlight.unexpectedBracket.foreground#c84860
editorBracketMatch.background#5eb3e430
editorBracketMatch.border#3a7fc4
editorCodeLens.foreground#7a9bb8
editorCursor.foreground#3a7fc4
editorError.border#c8486000
editorError.foreground#c84860
editorGroup.border#d6ecf8
editorGroup.dropBackground#3a7fc430
editorGroup.dropIntoPromptBackground#eef6fb
editorGroup.dropIntoPromptBorder#3a7fc4
editorGroup.dropIntoPromptForeground#1a2840
editorGroup.emptyBackground#eef6fb
editorGroup.focusedEmptyBorder#3a7fc4
editorGroupHeader.tabsBackground#eef6fb
editorGutter.addedBackground#4a9a7a
editorGutter.deletedBackground#c84860
editorGutter.modifiedBackground#667ede
editorHint.border#4a9a7a00
editorHint.foreground#4a9a7a
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#d6ecf8
editorIndentGuide.activeBackground1#3a7fc4
editorIndentGuide.background1#d6ecf8
editorInfo.border#3a7fc400
editorInfo.foreground#3a7fc4
editorInlayHint.background#d6ecf880
editorInlayHint.foreground#5a7090
editorInlayHint.parameterForeground#5eb3e4
editorInlayHint.typeForeground#3a7fc4
editorLineNumber.activeForeground#3a7fc4
editorLineNumber.foreground#7a9bb8
editorOverviewRuler.addedForeground#4a9a7a
editorOverviewRuler.background#eef6fb
editorOverviewRuler.border#d6ecf8
editorOverviewRuler.bracketMatchForeground#3a7fc4
editorOverviewRuler.commonContentForeground#5a7090
editorOverviewRuler.currentContentForeground#4a9a7a
editorOverviewRuler.deletedForeground#c84860
editorOverviewRuler.errorForeground#c84860
editorOverviewRuler.findMatchForeground#3a7fc480
editorOverviewRuler.incomingContentForeground#7e8fee
editorOverviewRuler.infoForeground#667ede
editorOverviewRuler.modifiedForeground#7e8fee
editorOverviewRuler.rangeHighlightForeground#3a7fc440
editorOverviewRuler.selectionHighlightForeground#3a7fc460
editorOverviewRuler.warningForeground#d89850
editorOverviewRuler.wordHighlightForeground#3a7fc460
editorOverviewRuler.wordHighlightStrongForeground#3a7fc480
editorStickyScroll.background#eef6fb
editorStickyScrollHover.background#d6ecf8
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#1a2840
editorSuggestWidget.highlightForeground#3a7fc4
editorSuggestWidget.selectedBackground#d6ecf8
editorWarning.border#d8985000
editorWarning.foreground#d89850
editorWhitespace.foreground#c5dced
editorWidget.background#eef6fb
editorWidget.border#d6ecf8
editorWidget.foreground#1a2840
errorForeground#c84860
extensionBadge.remoteBackground#3a7fc4
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#3a7fc4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#16255f
extensionIcon.preReleaseForeground#5eb3e4
extensionIcon.sponsorForeground#3a7fc4
extensionIcon.starForeground#d89850
extensionIcon.verifiedForeground#4a9a7a
focusBorder#3a7fc4
gitDecoration.addedResourceForeground#4a9a7a
gitDecoration.conflictingResourceForeground#c84860
gitDecoration.deletedResourceForeground#c84860
gitDecoration.ignoredResourceForeground#9a9fb8
gitDecoration.modifiedResourceForeground#667ede
gitDecoration.untrackedResourceForeground#d89850
icon.foreground#1a2840
input.background#FFFFFF
input.border#c5dced
input.foreground#1a2840
input.placeholderForeground#7a9bb880
inputOption.activeBackground#3a7fc4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#d6ecf8
keybindingLabel.border#d6ecf8
keybindingLabel.bottomBorder#3a7fc4
keybindingLabel.foreground#1a2840
list.activeSelectionBackground#3a7fc4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#5eb3e430
list.focusForeground#1a2840
list.hoverBackground#d6ecf8
list.hoverForeground#1a2840
list.inactiveSelectionBackground#d6ecf880
list.inactiveSelectionForeground#1a2840
menu.background#FFFFFF
menu.border#d6ecf8
menu.foreground#1a2840
menu.selectionBackground#3a7fc4
menu.selectionBorder#3a7fc400
menu.selectionForeground#FFFFFF
menu.separatorBackground#d6ecf8
menubar.selectionBackground#d6ecf8
menubar.selectionForeground#1a2840
merge.border#d6ecf8
merge.commonContentBackground#5a709020
merge.commonHeaderBackground#5a709040
merge.currentContentBackground#4a9a7a20
merge.currentHeaderBackground#4a9a7a40
merge.incomingContentBackground#7e8fee20
merge.incomingHeaderBackground#7e8fee40
mergeEditor.change.background#7e8fee20
mergeEditor.change.word.background#7e8fee40
mergeEditor.conflict.handledFocused.border#4a9a7a
mergeEditor.conflict.handledUnfocused.border#4a9a7a80
mergeEditor.conflict.unhandledFocused.border#d89850
mergeEditor.conflict.unhandledUnfocused.border#d8985080
minimap.background#eef6fb
minimap.selectionHighlight#5eb3e450
notifications.background#FFFFFF
notifications.border#d6ecf8
notifications.foreground#1a2840
notificationsErrorIcon.foreground#c84860
notificationsInfoIcon.foreground#3a7fc4
notificationsWarningIcon.foreground#d89850
panel.background#eef6fb
panel.border#d6ecf8
panelTitle.activeBorder#3a7fc4
panelTitle.activeForeground#1a2840
panelTitle.inactiveForeground#5a7090
peekView.border#3a7fc4
peekViewEditor.background#eef6fb
peekViewResult.background#eef6fb
peekViewResult.matchHighlightBackground#5eb3e450
peekViewTitle.background#16255f
peekViewTitleLabel.foreground#e8f4fa
progressBar.background#3a7fc4
quickInput.background#eef6fb
quickInput.foreground#1a2840
quickInputList.focusBackground#3a7fc4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#16255f
scrollbarSlider.activeBackground#3a7fc4
scrollbarSlider.background#c5dced50
scrollbarSlider.hoverBackground#c5dced
selection.background#5eb3e450
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#3a7fc4
settings.checkboxForeground#1a2840
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#d6ecf8
settings.dropdownForeground#1a2840
settings.dropdownListBorder#d6ecf8
settings.focusedRowBackground#d6ecf840
settings.focusedRowBorder#3a7fc480
settings.headerForeground#1a2840
settings.modifiedItemIndicator#3a7fc4
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#3a7fc4
settings.numberInputForeground#1a2840
settings.rowHoverBackground#d6ecf820
settings.sashBorder#d6ecf8
settings.textInputBackground#FFFFFF
settings.textInputBorder#3a7fc4
settings.textInputForeground#1a2840
sideBar.background#eef6fb
sideBar.border#d6ecf8
sideBar.foreground#1a2840
sideBarSectionHeader.background#d6ecf8
sideBarSectionHeader.foreground#1a2840
sideBarTitle.foreground#3a7fc4
statusBar.background#3a7fc4
statusBar.debuggingBackground#16255f
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#2a3f5f
statusBar.noFolderForeground#e8f4fa
symbolIcon.arrayForeground#1a2840
symbolIcon.booleanForeground#3a7fc4
symbolIcon.classForeground#667ede
symbolIcon.colorForeground#5eb3e4
symbolIcon.constantForeground#7e8fee
symbolIcon.constructorForeground#3a7fc4
symbolIcon.enumeratorForeground#d89850
symbolIcon.enumeratorMemberForeground#7e8fee
symbolIcon.eventForeground#d89850
symbolIcon.fieldForeground#667ede
symbolIcon.fileForeground#5a7090
symbolIcon.folderForeground#d89850
symbolIcon.functionForeground#3a7fc4
symbolIcon.interfaceForeground#4a9a7a
symbolIcon.keyForeground#1a2840
symbolIcon.keywordForeground#3a7fc4
symbolIcon.methodForeground#3a7fc4
symbolIcon.moduleForeground#667ede
symbolIcon.namespaceForeground#667ede
symbolIcon.nullForeground#c84860
symbolIcon.numberForeground#7e8fee
symbolIcon.objectForeground#1a2840
symbolIcon.operatorForeground#5a7090
symbolIcon.packageForeground#667ede
symbolIcon.propertyForeground#667ede
symbolIcon.referenceForeground#7e8fee
symbolIcon.snippetForeground#5a7090
symbolIcon.stringForeground#16305f
symbolIcon.structForeground#1a2840
symbolIcon.textForeground#1a2840
symbolIcon.typeParameterForeground#4a9a7a
symbolIcon.unitForeground#7e8fee
symbolIcon.variableForeground#667ede
tab.activeBackground#f5f9fc
tab.activeBorder#3a7fc4
tab.activeForeground#3a7fc4
tab.border#d6ecf8
tab.hoverBackground#f5f9fc
tab.hoverForeground#3a7fc4
tab.inactiveBackground#eef6fb
tab.inactiveForeground#5a7090
terminal.ansiBlack#1a2840
terminal.ansiBlue#3a7fc4
terminal.ansiBrightBlack#5a7090
terminal.ansiBrightBlue#4a8fd4
terminal.ansiBrightCyan#7dc5f0
terminal.ansiBrightGreen#5aaa8a
terminal.ansiBrightMagenta#7e8fee
terminal.ansiBrightRed#e86078
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e8a860
terminal.ansiCyan#5eb3e4
terminal.ansiGreen#4a9a7a
terminal.ansiMagenta#667ede
terminal.ansiRed#c84860
terminal.ansiWhite#d6ecf8
terminal.ansiYellow#d89850
terminal.background#f5f9fc
terminal.foreground#1a2840
testing.iconErrored#c84860
testing.iconFailed#c84860
testing.iconPassed#4a9a7a
testing.iconQueued#d89850
testing.iconSkipped#9a9fb8
testing.iconUnset#9a9fb8
testing.peekBorder#c84860
testing.peekHeaderBackground#c8486020
testing.runAction#4a9a7a
textLink.activeForeground#2a5f9f
textLink.foreground#3a7fc4
titleBar.activeBackground#16255f
titleBar.activeForeground#e8f4fa
titleBar.inactiveBackground#eef6fb
titleBar.inactiveForeground#5a7090
walkThrough.embeddedEditorBackground#eef6fb
welcomePage.background#f5f9fc
welcomePage.progress.background#d6ecf8
welcomePage.progress.foreground#3a7fc4
welcomePage.tileBackground#eef6fb
welcomePage.tileBorder#d6ecf8
welcomePage.tileHoverBackground#d6ecf8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a9fb8	italic
keyword, storage	#3a7fc4	bold
keyword.control, keyword.control.flow	#2a5f9f	bold
entity.name.function, support.function	#667ede	bold
entity.name.type, support.class, support.type, storage.type	#16255f	bold
string	#16305f	—
constant.character.escape	#c84860	—
variable, support.variable	#1a2840	—
variable.parameter	#2a4a6f	italic
constant.numeric, constant.character, constant	#7e8fee	—
constant.language, support.constant, variable.language	#3a7fc4	—
keyword.operator	#2a4a6f	—
punctuation	#5a7090	—
entity.name.tag	#3a7fc4	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#5eb3e4	italic
meta.selector, entity.name.tag.css	#1a2840	—
meta.property-name, support.type.property-name	#3a7fc4	—
meta.property-value, support.constant.property-value	#16305f	—
keyword.other.unit	#7e8fee	—
markup.heading	#3a7fc4	bold
markup.bold	#1a2840	bold
markup.italic	#1a2840	italic
meta.link	#5eb3e4	—
markup.list	#3a7fc4	—
markup.inline.raw	#16305f	—
markup.inserted	#4a9a7a	—
markup.deleted	#c84860	—
markup.changed	#7e8fee	—
support.type.property-name.json	#3a7fc4	—
entity.name.tag.yaml	#5eb3e4	—
string.regexp	#c84860	—
meta.decorator, meta.annotation	#d89850	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}!`;
}