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 - Scaramouche (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#2E2538
activityBar.foreground#E0D8E8
activityBar.inactiveForeground#8A8095
activityBarBadge.background#C93C3C
activityBarBadge.foreground#FFFFFF
badge.background#C93C3C
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#C93C3C
breadcrumb.background#25212E
breadcrumb.focusForeground#E0D8E8
breadcrumb.foreground#8A8095
button.background#C93C3C
button.foreground#FFFFFF
button.hoverBackground#FF5C5C
button.secondaryBackground#4A3A60
button.secondaryForeground#E0D8E8
button.secondaryHoverBackground#6A5A78
charts.blue#5A7A90
charts.foreground#E0D8E8
charts.green#6A8A6A
charts.lines#C93C3C
charts.orange#C39382
charts.purple#9A60E0
charts.red#FF4D4D
charts.yellow#B8906A
checkbox.background#141218
checkbox.border#C93C3C
checkbox.foreground#E0D8E8
checkbox.selectBackground#C93C3C
checkbox.selectBorder#C93C3C
commandCenter.activeBackground#3A2A50
commandCenter.activeBorder#C93C3C
commandCenter.activeForeground#C93C3C
commandCenter.background#25212E
commandCenter.border#4A3A60
commandCenter.debuggingBackground#C93C3C20
commandCenter.foreground#E0D8E8
commandCenter.inactiveBorder#4A3A6080
commandCenter.inactiveForeground#8A8095
debugConsole.errorForeground#FF4D4D
debugConsole.infoForeground#8A70B0
debugConsole.sourceForeground#6A5A78
debugConsole.warningForeground#B8906A
debugConsoleInputIcon.foreground#8A70B0
debugIcon.breakpointCurrentStackframeForeground#8A70B0
debugIcon.breakpointDisabledForeground#8A8095
debugIcon.breakpointForeground#FF4D4D
debugIcon.breakpointStackframeForeground#6A8A6A
debugIcon.breakpointUnverifiedForeground#B8906A
debugIcon.continueForeground#6A8A6A
debugIcon.disconnectForeground#FF4D4D
debugIcon.pauseForeground#B8906A
debugIcon.restartForeground#6A8A6A
debugIcon.startForeground#6A8A6A
debugIcon.stepBackForeground#8A70B0
debugIcon.stepIntoForeground#8A70B0
debugIcon.stepOutForeground#8A70B0
debugIcon.stepOverForeground#8A70B0
debugIcon.stopForeground#FF4D4D
debugTokenExpression.boolean#9A60E0
debugTokenExpression.error#FF4D4D
debugTokenExpression.name#9A60E0
debugTokenExpression.number#6A5A78
debugTokenExpression.string#5A7A90
debugTokenExpression.value#8A70B0
debugToolBar.background#25212E
debugToolBar.border#4A3A60
debugView.exceptionLabelBackground#FF4D4D
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#8A70B0
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#8A70B060
descriptionForeground#8A8095
diffEditor.diagonalFill#4A3A6040
diffEditor.insertedLineBackground#6A8A6A15
diffEditor.insertedTextBackground#6A8A6A20
diffEditor.insertedTextBorder#6A8A6A00
diffEditor.removedLineBackground#FF4D4D15
diffEditor.removedTextBackground#FF4D4D20
diffEditor.removedTextBorder#FF4D4D00
diffEditorGutter.insertedLineBackground#6A8A6A30
diffEditorGutter.removedLineBackground#FF4D4D30
diffEditorOverview.insertedForeground#6A8A6A
diffEditorOverview.removedForeground#FF4D4D
dropdown.background#25212E
dropdown.border#4A3A60
dropdown.foreground#E0D8E8
dropdown.listBackground#25212E
editor.background#1E1B24
editor.findMatchBackground#C93C3C45
editor.findMatchHighlightBackground#C93C3C22
editor.focusedStackFrameHighlightBackground#6A8A6A30
editor.foldBackground#8A70B015
editor.foreground#E0D8E8
editor.lineHighlightBackground#3A2A5040
editor.lineHighlightBorder#8A70B018
editor.selectionBackground#8A70B050
editor.stackFrameHighlightBackground#B8906A30
editor.wordHighlightBackground#6A5A7830
editor.wordHighlightStrongBackground#6A5A7850
editorBracketHighlight.foreground1#8A70B0
editorBracketHighlight.foreground2#9A60E0
editorBracketHighlight.foreground3#B080E0
editorBracketHighlight.foreground4#5A7A90
editorBracketHighlight.foreground5#B8906A
editorBracketHighlight.foreground6#6A5A78
editorBracketHighlight.unexpectedBracket.foreground#FF4D4D
editorBracketMatch.background#C93C3C30
editorBracketMatch.border#C93C3C
editorCodeLens.foreground#8A8095
editorCursor.foreground#9A60E0
editorError.border#FF4D4D00
editorError.foreground#FF4D4D
editorGroup.border#4A3A60
editorGroup.dropBackground#8A70B030
editorGroup.dropIntoPromptBackground#25212E
editorGroup.dropIntoPromptBorder#8A70B0
editorGroup.dropIntoPromptForeground#E0D8E8
editorGroup.emptyBackground#25212E
editorGroup.focusedEmptyBorder#8A70B0
editorGroupHeader.tabsBackground#25212E
editorGutter.addedBackground#6A8A6A
editorGutter.deletedBackground#FF4D4D
editorGutter.modifiedBackground#8A70B0
editorHint.border#6A8A6A00
editorHint.foreground#6A8A6A
editorHoverWidget.background#25212E
editorHoverWidget.border#4A3A60
editorIndentGuide.activeBackground1#8A70B0
editorIndentGuide.background1#4A3A60
editorInfo.border#8A70B000
editorInfo.foreground#8A70B0
editorInlayHint.background#4A3A6080
editorInlayHint.foreground#E0D8E8
editorInlayHint.parameterForeground#8A70B0
editorInlayHint.typeForeground#9A60E0
editorLineNumber.activeForeground#9A60E0
editorLineNumber.foreground#8A8095
editorOverviewRuler.addedForeground#6A8A6A
editorOverviewRuler.background#25212E
editorOverviewRuler.border#4A3A60
editorOverviewRuler.bracketMatchForeground#8A70B0
editorOverviewRuler.commonContentForeground#6A5A78
editorOverviewRuler.currentContentForeground#6A8A6A
editorOverviewRuler.deletedForeground#FF4D4D
editorOverviewRuler.errorForeground#FF4D4D
editorOverviewRuler.findMatchForeground#8A70B080
editorOverviewRuler.incomingContentForeground#8A70B0
editorOverviewRuler.infoForeground#8A70B0
editorOverviewRuler.modifiedForeground#8A70B0
editorOverviewRuler.rangeHighlightForeground#8A70B040
editorOverviewRuler.selectionHighlightForeground#8A70B060
editorOverviewRuler.warningForeground#B8906A
editorOverviewRuler.wordHighlightForeground#8A70B060
editorOverviewRuler.wordHighlightStrongForeground#8A70B080
editorStickyScroll.background#25212E
editorStickyScrollHover.background#3A2A50
editorSuggestWidget.background#25212E
editorSuggestWidget.foreground#E0D8E8
editorSuggestWidget.highlightForeground#C93C3C
editorSuggestWidget.selectedBackground#3A2A50
editorWarning.border#B8906A00
editorWarning.foreground#B8906A
editorWhitespace.foreground#6A5A7850
editorWidget.background#25212E
editorWidget.border#4A3A60
editorWidget.foreground#E0D8E8
errorForeground#FF4D4D
extensionBadge.remoteBackground#C93C3C
extensionBadge.remoteForeground#1E1B24
extensionButton.prominentBackground#C93C3C
extensionButton.prominentForeground#1E1B24
extensionButton.prominentHoverBackground#FF5C5C
extensionIcon.preReleaseForeground#C39382
extensionIcon.sponsorForeground#FF4D4D
extensionIcon.starForeground#B8906A
extensionIcon.verifiedForeground#6A8A6A
focusBorder#C93C3C
gitDecoration.addedResourceForeground#6A8A6A
gitDecoration.conflictingResourceForeground#FF6B6B
gitDecoration.deletedResourceForeground#FF4D4D
gitDecoration.ignoredResourceForeground#8A8095
gitDecoration.modifiedResourceForeground#9A60E0
gitDecoration.untrackedResourceForeground#B8906A
icon.foreground#E0D8E8
input.background#141218
input.border#6A5A78
input.foreground#E0D8E8
input.placeholderForeground#8A8095
inputOption.activeBackground#C93C3C
inputOption.activeForeground#FFFFFF
keybindingLabel.background#4A3A60
keybindingLabel.border#4A3A60
keybindingLabel.bottomBorder#8A8095
keybindingLabel.foreground#E0D8E8
list.activeSelectionBackground#8A70B0
list.activeSelectionForeground#1E1B24
list.activeSelectionIconForeground#1E1B24
list.focusBackground#3A2A50
list.focusForeground#E0D8E8
list.hoverBackground#3A2A50
list.hoverForeground#E0D8E8
list.inactiveSelectionBackground#3A2A5080
list.inactiveSelectionForeground#E0D8E8
menu.background#25212E
menu.border#4A3A60
menu.foreground#E0D8E8
menu.selectionBackground#C93C3C
menu.selectionBorder#C93C3C00
menu.selectionForeground#FFFFFF
menu.separatorBackground#4A3A60
menubar.selectionBackground#3A2A50
menubar.selectionForeground#E0D8E8
merge.border#4A3A60
merge.commonContentBackground#6A5A7820
merge.commonHeaderBackground#6A5A7840
merge.currentContentBackground#6A8A6A20
merge.currentHeaderBackground#6A8A6A40
merge.incomingContentBackground#C93C3C20
merge.incomingHeaderBackground#C93C3C40
mergeEditor.change.background#C93C3C20
mergeEditor.change.word.background#C93C3C40
mergeEditor.conflict.handledFocused.border#6A8A6A
mergeEditor.conflict.handledUnfocused.border#6A8A6A80
mergeEditor.conflict.unhandledFocused.border#B8906A
mergeEditor.conflict.unhandledUnfocused.border#B8906A80
minimap.background#25212E
minimap.selectionHighlight#C93C3C60
notifications.background#25212E
notifications.border#4A3A60
notifications.foreground#E0D8E8
notificationsErrorIcon.foreground#FF4D4D
notificationsInfoIcon.foreground#C93C3C
notificationsWarningIcon.foreground#B8906A
panel.background#25212E
panel.border#4A3A60
panelTitle.activeBorder#8A70B0
panelTitle.activeForeground#E0D8E8
panelTitle.inactiveForeground#8A8095
peekView.border#C93C3C
peekViewEditor.background#25212E
peekViewResult.background#25212E
peekViewResult.matchHighlightBackground#C93C3C60
peekViewTitle.background#3A2A50
peekViewTitleLabel.foreground#E0D8E8
progressBar.background#C93C3C
quickInput.background#25212E
quickInput.foreground#E0D8E8
quickInputList.focusBackground#C93C3C
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#3A2A50
scrollbarSlider.activeBackground#C93C3C
scrollbarSlider.background#6A5A7850
scrollbarSlider.hoverBackground#8A8095
selection.background#8A70B050
settings.checkboxBackground#25212E
settings.checkboxBorder#8A70B0
settings.checkboxForeground#E0D8E8
settings.dropdownBackground#25212E
settings.dropdownBorder#4A3A60
settings.dropdownForeground#E0D8E8
settings.dropdownListBorder#4A3A60
settings.focusedRowBackground#3A2A5040
settings.focusedRowBorder#8A70B080
settings.headerForeground#E0D8E8
settings.modifiedItemIndicator#8A70B0
settings.numberInputBackground#141218
settings.numberInputBorder#6A5A78
settings.numberInputForeground#E0D8E8
settings.rowHoverBackground#3A2A5020
settings.sashBorder#4A3A60
settings.textInputBackground#141218
settings.textInputBorder#6A5A78
settings.textInputForeground#E0D8E8
sideBar.background#25212E
sideBar.border#4A3A60
sideBar.foreground#E0D8E8
sideBarSectionHeader.background#4A3A60
sideBarSectionHeader.foreground#E0D8E8
sideBarTitle.foreground#9A60E0
statusBar.background#C93C3C
statusBar.debuggingBackground#B04D4D
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#2E2538
statusBar.noFolderForeground#E0D8E8
symbolIcon.arrayForeground#8A70B0
symbolIcon.booleanForeground#9A60E0
symbolIcon.classForeground#E0D8E8
symbolIcon.colorForeground#8A70B0
symbolIcon.constantForeground#6A5A78
symbolIcon.constructorForeground#B080E0
symbolIcon.enumeratorForeground#B8906A
symbolIcon.enumeratorMemberForeground#6A5A78
symbolIcon.eventForeground#B8906A
symbolIcon.fieldForeground#6A5A78
symbolIcon.fileForeground#6A5A78
symbolIcon.folderForeground#6A5A78
symbolIcon.functionForeground#8A70B0
symbolIcon.interfaceForeground#5A7A90
symbolIcon.keyForeground#8A70B0
symbolIcon.keywordForeground#9A60E0
symbolIcon.methodForeground#8A70B0
symbolIcon.moduleForeground#B080E0
symbolIcon.namespaceForeground#B080E0
symbolIcon.nullForeground#FF4D4D
symbolIcon.numberForeground#6A5A78
symbolIcon.objectForeground#E0D8E8
symbolIcon.operatorForeground#6A5A78
symbolIcon.packageForeground#B080E0
symbolIcon.propertyForeground#8A70B0
symbolIcon.referenceForeground#6A5A78
symbolIcon.snippetForeground#6A5A78
symbolIcon.stringForeground#5A7A90
symbolIcon.structForeground#E0D8E8
symbolIcon.textForeground#E0D8E8
symbolIcon.typeParameterForeground#5A7A90
symbolIcon.unitForeground#6A5A78
symbolIcon.variableForeground#E0D8E8
tab.activeBackground#1E1B24
tab.activeBorder#8A70B0
tab.activeForeground#E0D8E8
tab.border#4A3A60
tab.hoverBackground#3A2A50
tab.hoverForeground#E0D8E8
tab.inactiveBackground#25212E
tab.inactiveForeground#8A8095
terminal.ansiBlack#1E1B24
terminal.ansiBlue#5A7A90
terminal.ansiBrightBlack#6A5A78
terminal.ansiBrightBlue#6A8AA0
terminal.ansiBrightCyan#6A8AA0
terminal.ansiBrightGreen#7AA97A
terminal.ansiBrightMagenta#B080E0
terminal.ansiBrightRed#FF6B6B
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#C8A07A
terminal.ansiCyan#5A7A90
terminal.ansiGreen#6A8A6A
terminal.ansiMagenta#9A60E0
terminal.ansiRed#FF4D4D
terminal.ansiWhite#E0D8E8
terminal.ansiYellow#B8906A
terminal.background#1E1B24
terminal.foreground#E0D8E8
testing.iconErrored#FF4D4D
testing.iconFailed#FF4D4D
testing.iconPassed#6A8A6A
testing.iconQueued#B8906A
testing.iconSkipped#8A8095
testing.iconUnset#8A8095
testing.peekBorder#FF4D4D
testing.peekHeaderBackground#FF4D4D20
testing.runAction#6A8A6A
textLink.activeForeground#FF6B6B
textLink.foreground#C93C3C
titleBar.activeBackground#2E2538
titleBar.activeForeground#E0D8E8
titleBar.inactiveBackground#1E1B24
titleBar.inactiveForeground#8A8095
walkThrough.embeddedEditorBackground#25212E
welcomePage.background#1E1B24
welcomePage.progress.background#4A3A60
welcomePage.progress.foreground#8A70B0
welcomePage.tileBackground#25212E
welcomePage.tileBorder#4A3A60
welcomePage.tileHoverBackground#3A2A50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A8095	italic
keyword, storage	#C93C3C	bold
entity.name.function, support.function	#8A70B0	bold
entity.name.type, support.class, support.type, storage.type	#E0D8E8	bold
string	#90A0E0	—
constant.character.escape	#9A60E0	—
variable, support.variable	#E0D8E8	—
constant.numeric, constant.character, constant	#8A70B0	—
constant.language, support.constant, variable.language	#C93C3C	—
keyword.operator	#6A5A78	—
punctuation	#8A8095	—
entity.name.tag	#9A60E0	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#8A70B0	italic
meta.selector, entity.name.tag.css	#E0D8E8	—
meta.property-name, support.type.property-name	#9A60E0	—
meta.property-value, support.constant.property-value	#5A7A90	—
markup.heading	#9A60E0	bold
markup.bold	#E0D8E8	bold
markup.italic	#E0D8E8	italic
meta.link	#8A70B0	—
markup.list	#9A60E0	—
markup.inline.raw	#5A7A90	—
markup.inserted	#6A8A6A	—
markup.deleted	#FF4D4D	—
markup.changed	#8A70B0	—

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