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 - Yumemizuki Mizuki (High Contrast)

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

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#0a0a12
activityBar.border#7c56d4
activityBar.foreground#d8e8ec
activityBar.inactiveForeground#7878a0
activityBarBadge.background#e090e8
activityBarBadge.foreground#0a0a12
badge.background#e090e8
badge.foreground#0a0a12
breadcrumb.activeSelectionForeground#e090e8
breadcrumb.background#0c0c16
breadcrumb.focusForeground#f0ecf8
breadcrumb.foreground#9090b0
button.background#7c56d4
button.border#e090e8
button.foreground#FFFFFF
button.hoverBackground#9068e8
button.secondaryBackground#303050
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#404070
charts.blue#5888e8
charts.foreground#f0ecf8
charts.green#58d870
charts.lines#7c56d4
charts.orange#f0b070
charts.purple#e090e8
charts.red#f86898
charts.yellow#f8d858
checkbox.background#0a0a12
checkbox.border#7c56d4
checkbox.foreground#f0ecf8
checkbox.selectBackground#7c56d4
checkbox.selectBorder#e090e8
commandCenter.activeBackground#1a1a30
commandCenter.activeBorder#e090e8
commandCenter.activeForeground#d8e8ec
commandCenter.background#0c0c16
commandCenter.border#7c56d4
commandCenter.debuggingBackground#1a248860
commandCenter.foreground#f0ecf8
commandCenter.inactiveBorder#7c56d480
commandCenter.inactiveForeground#9090b0
contrastActiveBorder#e090e8
contrastBorder#7c56d4
debugConsole.errorForeground#f86898
debugConsole.infoForeground#5888e8
debugConsole.sourceForeground#a0a0c0
debugConsole.warningForeground#f8d858
debugConsoleInputIcon.foreground#e090e8
debugIcon.breakpointCurrentStackframeForeground#e090e8
debugIcon.breakpointDisabledForeground#6868a0
debugIcon.breakpointForeground#f86898
debugIcon.breakpointStackframeForeground#58d870
debugIcon.breakpointUnverifiedForeground#f8d858
debugIcon.continueForeground#58d870
debugIcon.disconnectForeground#f86898
debugIcon.pauseForeground#f8d858
debugIcon.restartForeground#58d870
debugIcon.startForeground#58d870
debugIcon.stepBackForeground#5888e8
debugIcon.stepIntoForeground#5888e8
debugIcon.stepOutForeground#5888e8
debugIcon.stepOverForeground#5888e8
debugIcon.stopForeground#f86898
debugTokenExpression.boolean#e090e8
debugTokenExpression.error#f86898
debugTokenExpression.name#f0ecf8
debugTokenExpression.number#c8c0f0
debugTokenExpression.string#e090e8
debugTokenExpression.value#d8e8ec
debugToolBar.background#0a0a12
debugToolBar.border#7c56d4
debugView.exceptionLabelBackground#f86898
debugView.exceptionLabelForeground#0a0a12
debugView.stateLabelBackground#7c56d4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#d8e8ec80
descriptionForeground#a0a0c0
diffEditor.diagonalFill#30305060
diffEditor.insertedLineBackground#58d87020
diffEditor.insertedTextBackground#58d87030
diffEditor.insertedTextBorder#58d87080
diffEditor.removedLineBackground#f8689820
diffEditor.removedTextBackground#f8689830
diffEditor.removedTextBorder#f8689880
diffEditorGutter.insertedLineBackground#58d87040
diffEditorGutter.removedLineBackground#f8689840
diffEditorOverview.insertedForeground#58d870
diffEditorOverview.removedForeground#f86898
dropdown.background#0a0a12
dropdown.border#7c56d4
dropdown.foreground#f0ecf8
dropdown.listBackground#0c0c16
editor.background#0a0a12
editor.findMatchBackground#e090e860
editor.findMatchBorder#e090e8
editor.findMatchHighlightBackground#e090e840
editor.findMatchHighlightBorder#e090e880
editor.focusedStackFrameHighlightBackground#58d87040
editor.foldBackground#4a408020
editor.foreground#f0ecf8
editor.lineHighlightBackground#141420
editor.lineHighlightBorder#7c56d480
editor.selectionBackground#7c56d460
editor.stackFrameHighlightBackground#f8d85840
editor.wordHighlightBackground#4a408040
editor.wordHighlightBorder#d8e8ec80
editor.wordHighlightStrongBackground#4a408060
editorBracketHighlight.foreground1#e090e8
editorBracketHighlight.foreground2#d8e8ec
editorBracketHighlight.foreground3#9068e8
editorBracketHighlight.foreground4#58d870
editorBracketHighlight.foreground5#f8d858
editorBracketHighlight.foreground6#5888e8
editorBracketHighlight.unexpectedBracket.foreground#f86898
editorBracketMatch.background#7c56d450
editorBracketMatch.border#e090e8
editorCodeLens.foreground#7878a0
editorCursor.foreground#e090e8
editorError.border#f86898
editorError.foreground#f86898
editorGroup.border#7c56d4
editorGroup.dropBackground#7c56d440
editorGroup.dropIntoPromptBackground#0a0a12
editorGroup.dropIntoPromptBorder#e090e8
editorGroup.dropIntoPromptForeground#f0ecf8
editorGroup.emptyBackground#0c0c16
editorGroup.focusedEmptyBorder#e090e8
editorGroupHeader.tabsBackground#0c0c16
editorGroupHeader.tabsBorder#7c56d4
editorGutter.addedBackground#58d870
editorGutter.deletedBackground#f86898
editorGutter.modifiedBackground#d8e8ec
editorHint.border#58d870
editorHint.foreground#58d870
editorHoverWidget.background#0a0a12
editorHoverWidget.border#7c56d4
editorIndentGuide.activeBackground1#e090e8
editorIndentGuide.background1#303050
editorInfo.border#5888e8
editorInfo.foreground#5888e8
editorInlayHint.background#303050
editorInlayHint.foreground#a0a0c0
editorInlayHint.parameterForeground#e090e8
editorInlayHint.typeForeground#d8e8ec
editorLineNumber.activeForeground#e090e8
editorLineNumber.foreground#7878a0
editorOverviewRuler.addedForeground#58d870
editorOverviewRuler.background#0c0c16
editorOverviewRuler.border#7c56d4
editorOverviewRuler.bracketMatchForeground#e090e8
editorOverviewRuler.commonContentForeground#a0a0c0
editorOverviewRuler.currentContentForeground#58d870
editorOverviewRuler.deletedForeground#f86898
editorOverviewRuler.errorForeground#f86898
editorOverviewRuler.findMatchForeground#e090e8
editorOverviewRuler.incomingContentForeground#7c56d4
editorOverviewRuler.infoForeground#5888e8
editorOverviewRuler.modifiedForeground#d8e8ec
editorOverviewRuler.rangeHighlightForeground#4a408060
editorOverviewRuler.selectionHighlightForeground#7c56d480
editorOverviewRuler.warningForeground#f8d858
editorOverviewRuler.wordHighlightForeground#4a408080
editorOverviewRuler.wordHighlightStrongForeground#4a4080a0
editorStickyScroll.background#0c0c16
editorStickyScrollHover.background#141420
editorSuggestWidget.background#0a0a12
editorSuggestWidget.border#7c56d4
editorSuggestWidget.foreground#f0ecf8
editorSuggestWidget.highlightForeground#e090e8
editorSuggestWidget.selectedBackground#4a4080
editorWarning.border#f8d858
editorWarning.foreground#f8d858
editorWhitespace.foreground#404060
editorWidget.background#0c0c16
editorWidget.border#7c56d4
editorWidget.foreground#f0ecf8
errorForeground#f86898
extensionBadge.remoteBackground#e090e8
extensionBadge.remoteForeground#0a0a12
extensionButton.prominentBackground#7c56d4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#9068e8
extensionIcon.preReleaseForeground#e090e8
extensionIcon.sponsorForeground#5888e8
extensionIcon.starForeground#f8d858
extensionIcon.verifiedForeground#58d870
focusBorder#e090e8
gitDecoration.addedResourceForeground#58d870
gitDecoration.conflictingResourceForeground#e090e8
gitDecoration.deletedResourceForeground#f86898
gitDecoration.ignoredResourceForeground#6868a0
gitDecoration.modifiedResourceForeground#d8e8ec
gitDecoration.untrackedResourceForeground#f8d858
icon.foreground#f0ecf8
input.background#0a0a12
input.border#7c56d4
input.foreground#f0ecf8
input.placeholderForeground#6868a0
inputOption.activeBackground#7c56d4
inputOption.activeBorder#e090e8
inputOption.activeForeground#FFFFFF
keybindingLabel.background#303050
keybindingLabel.border#7c56d4
keybindingLabel.bottomBorder#e090e8
keybindingLabel.foreground#f0ecf8
list.activeSelectionBackground#7c56d4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#4a4080
list.focusForeground#f0ecf8
list.focusOutline#e090e8
list.hoverBackground#1a1a30
list.hoverForeground#f0ecf8
list.inactiveSelectionBackground#4a4070
list.inactiveSelectionForeground#f0ecf8
menu.background#0a0a12
menu.border#7c56d4
menu.foreground#f0ecf8
menu.selectionBackground#7c56d4
menu.selectionBorder#e090e8
menu.selectionForeground#FFFFFF
menu.separatorBackground#7c56d4
menubar.selectionBackground#4a4080
menubar.selectionForeground#f0ecf8
merge.border#7c56d4
merge.commonContentBackground#68688830
merge.commonHeaderBackground#68688850
merge.currentContentBackground#58d87030
merge.currentHeaderBackground#58d87050
merge.incomingContentBackground#7c56d430
merge.incomingHeaderBackground#7c56d450
mergeEditor.change.background#e090e830
mergeEditor.change.word.background#e090e850
mergeEditor.conflict.handledFocused.border#78f890
mergeEditor.conflict.handledUnfocused.border#58d870
mergeEditor.conflict.unhandledFocused.border#fff088
mergeEditor.conflict.unhandledUnfocused.border#f8d858
minimap.background#0c0c16
minimap.selectionHighlight#7c56d480
notifications.background#0a0a12
notifications.border#7c56d4
notifications.foreground#f0ecf8
notificationsErrorIcon.foreground#f86898
notificationsInfoIcon.foreground#5888e8
notificationsWarningIcon.foreground#f8d858
panel.background#0c0c16
panel.border#7c56d4
panelTitle.activeBorder#e090e8
panelTitle.activeForeground#f0ecf8
panelTitle.inactiveForeground#9090b0
peekView.border#e090e8
peekViewEditor.background#0c0c16
peekViewResult.background#0a0a12
peekViewResult.matchHighlightBackground#e090e860
peekViewTitle.background#6c2894
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#e090e8
quickInput.background#0a0a12
quickInput.foreground#f0ecf8
quickInputList.focusBackground#7c56d4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#6c2894
scrollbarSlider.activeBackground#7c56d4
scrollbarSlider.background#4a408080
scrollbarSlider.hoverBackground#6a60a0
selection.background#7c56d4
settings.checkboxBackground#0a0a12
settings.checkboxBorder#7c56d4
settings.checkboxForeground#f0ecf8
settings.dropdownBackground#0a0a12
settings.dropdownBorder#7c56d4
settings.dropdownForeground#f0ecf8
settings.dropdownListBorder#7c56d4
settings.focusedRowBackground#0c0c1660
settings.focusedRowBorder#e090e8
settings.headerForeground#f0ecf8
settings.modifiedItemIndicator#e090e8
settings.numberInputBackground#0a0a12
settings.numberInputBorder#7c56d4
settings.numberInputForeground#f0ecf8
settings.rowHoverBackground#0c0c1640
settings.sashBorder#7c56d4
settings.textInputBackground#0a0a12
settings.textInputBorder#7c56d4
settings.textInputForeground#f0ecf8
sideBar.background#0c0c16
sideBar.border#7c56d4
sideBar.foreground#f0ecf8
sideBarSectionHeader.background#181828
sideBarSectionHeader.foreground#f0ecf8
sideBarTitle.foreground#e090e8
statusBar.background#6c2894
statusBar.border#e090e8
statusBar.debuggingBackground#1a2488
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0a0a12
statusBar.noFolderForeground#f0ecf8
symbolIcon.arrayForeground#f0ecf8
symbolIcon.booleanForeground#e090e8
symbolIcon.classForeground#d8e8ec
symbolIcon.colorForeground#e090e8
symbolIcon.constantForeground#c8c0f0
symbolIcon.constructorForeground#d8e8ec
symbolIcon.enumeratorForeground#f8d858
symbolIcon.enumeratorMemberForeground#c8c0f0
symbolIcon.eventForeground#f8d858
symbolIcon.fieldForeground#58d8e8
symbolIcon.fileForeground#a0a0c0
symbolIcon.folderForeground#7c56d4
symbolIcon.functionForeground#d8e8ec
symbolIcon.interfaceForeground#58d870
symbolIcon.keyForeground#f0ecf8
symbolIcon.keywordForeground#e090e8
symbolIcon.methodForeground#d8e8ec
symbolIcon.moduleForeground#7c56d4
symbolIcon.namespaceForeground#7c56d4
symbolIcon.nullForeground#f86898
symbolIcon.numberForeground#c8c0f0
symbolIcon.objectForeground#f0ecf8
symbolIcon.operatorForeground#a0a0c0
symbolIcon.packageForeground#7c56d4
symbolIcon.propertyForeground#58d8e8
symbolIcon.referenceForeground#c8c0f0
symbolIcon.snippetForeground#a0a0c0
symbolIcon.stringForeground#e090e8
symbolIcon.structForeground#f0ecf8
symbolIcon.textForeground#f0ecf8
symbolIcon.typeParameterForeground#58d870
symbolIcon.unitForeground#c8c0f0
symbolIcon.variableForeground#58d8e8
tab.activeBackground#0a0a12
tab.activeBorder#e090e8
tab.activeBorderTop#e090e8
tab.activeForeground#d8e8ec
tab.border#303050
tab.hoverBackground#141420
tab.hoverForeground#d8e8ec
tab.inactiveBackground#0c0c16
tab.inactiveForeground#9090b0
terminal.ansiBlack#0c0c16
terminal.ansiBlue#5888e8
terminal.ansiBrightBlack#7878a0
terminal.ansiBrightBlue#88b8ff
terminal.ansiBrightCyan#88f0f8
terminal.ansiBrightGreen#78f890
terminal.ansiBrightMagenta#f0a8f0
terminal.ansiBrightRed#ff88b0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#fff088
terminal.ansiCyan#58d8e8
terminal.ansiGreen#58d870
terminal.ansiMagenta#e090e8
terminal.ansiRed#f86898
terminal.ansiWhite#f0ecf8
terminal.ansiYellow#f8d858
terminal.background#0a0a12
terminal.border#7c56d4
terminal.foreground#f0ecf8
testing.iconErrored#f86898
testing.iconFailed#f86898
testing.iconPassed#58d870
testing.iconQueued#f8d858
testing.iconSkipped#6868a0
testing.iconUnset#6868a0
testing.peekBorder#f86898
testing.peekHeaderBackground#f8689830
testing.runAction#58d870
textLink.activeForeground#FFFFFF
textLink.foreground#d8e8ec
titleBar.activeBackground#0a0a12
titleBar.activeForeground#f0ecf8
titleBar.border#7c56d4
titleBar.inactiveBackground#0c0c16
titleBar.inactiveForeground#a0a0c0
walkThrough.embeddedEditorBackground#0c0c16
welcomePage.background#0a0a12
welcomePage.progress.background#303050
welcomePage.progress.foreground#e090e8
welcomePage.tileBackground#0c0c16
welcomePage.tileBorder#7c56d4
welcomePage.tileHoverBackground#1a1a30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7878a0	italic
keyword, storage	#e090e8	bold
keyword.control, keyword.control.flow	#f0a8f0	bold
entity.name.function, support.function	#d8e8ec	bold
entity.name.type, support.class, support.type, storage.type	#88e0f0	bold
string	#f0c0f0	—
constant.character.escape	#f8a8f8	—
variable, support.variable	#f0ecf8	—
variable.parameter	#b8e0f0	italic
constant.numeric, constant.character, constant	#c8c0f0	—
constant.language, support.constant, variable.language	#e090e8	—
keyword.operator	#b0b0d0	—
punctuation	#a0a0c0	—
entity.name.tag	#e090e8	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#88e0f0	italic
meta.selector, entity.name.tag.css	#f0ecf8	—
meta.property-name, support.type.property-name	#e090e8	—
meta.property-value, support.constant.property-value	#f0c0f0	—
keyword.other.unit	#c8c0f0	—
markup.heading	#e090e8	bold
markup.bold	#f0ecf8	bold
markup.italic	#f0ecf8	italic
meta.link	#d8e8ec	—
markup.list	#e090e8	—
markup.inline.raw	#f0c0f0	—
markup.inserted	#58d870	—
markup.deleted	#f86898	—
markup.changed	#d8e8ec	—
support.type.property-name.json	#d8e8ec	—
entity.name.tag.yaml	#88e0f0	—
string.regexp	#f8a8f8	—
meta.decorator, meta.annotation	#f8d858	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}!`;
}