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 (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#0f0f1a
activityBar.foreground#c1d0d2
activityBar.inactiveForeground#6a6888
activityBarBadge.background#c673c9
activityBarBadge.foreground#FFFFFF
badge.background#c673c9
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#c673c9
breadcrumb.background#18182a
breadcrumb.focusForeground#e0dce8
breadcrumb.foreground#7878a0
button.background#6c46c4
button.foreground#FFFFFF
button.hoverBackground#8058d8
button.secondaryBackground#3a3858
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#4a4878
charts.blue#5a78c8
charts.foreground#e0dce8
charts.green#68b878
charts.lines#252540
charts.orange#e0a070
charts.purple#c673c9
charts.red#e06888
charts.yellow#d8b868
checkbox.background#1a1a2e
checkbox.border#3a3858
checkbox.foreground#e0dce8
checkbox.selectBackground#6c46c4
checkbox.selectBorder#6c46c4
commandCenter.activeBackground#252540
commandCenter.activeBorder#6c46c4
commandCenter.activeForeground#c1d0d2
commandCenter.background#18182a
commandCenter.border#252540
commandCenter.debuggingBackground#151c6e40
commandCenter.foreground#e0dce8
commandCenter.inactiveBorder#25254080
commandCenter.inactiveForeground#7878a0
debugConsole.errorForeground#e06888
debugConsole.infoForeground#5a78c8
debugConsole.sourceForeground#8080a0
debugConsole.warningForeground#d8b868
debugConsoleInputIcon.foreground#c673c9
debugIcon.breakpointCurrentStackframeForeground#c673c9
debugIcon.breakpointDisabledForeground#5a5878
debugIcon.breakpointForeground#e06888
debugIcon.breakpointStackframeForeground#68b878
debugIcon.breakpointUnverifiedForeground#d8b868
debugIcon.continueForeground#68b878
debugIcon.disconnectForeground#e06888
debugIcon.pauseForeground#d8b868
debugIcon.restartForeground#68b878
debugIcon.startForeground#68b878
debugIcon.stepBackForeground#5a78c8
debugIcon.stepIntoForeground#5a78c8
debugIcon.stepOutForeground#5a78c8
debugIcon.stepOverForeground#5a78c8
debugIcon.stopForeground#e06888
debugTokenExpression.boolean#c673c9
debugTokenExpression.error#e06888
debugTokenExpression.name#e0dce8
debugTokenExpression.number#a8a0d8
debugTokenExpression.string#c673c9
debugTokenExpression.value#c1d0d2
debugToolBar.background#1a1a2e
debugToolBar.border#252540
debugView.exceptionLabelBackground#e06888
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#6c46c4
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#c1d0d260
descriptionForeground#8080a0
diffEditor.diagonalFill#2a2a4040
diffEditor.insertedLineBackground#68b87815
diffEditor.insertedTextBackground#68b87820
diffEditor.insertedTextBorder#68b87800
diffEditor.removedLineBackground#e0688815
diffEditor.removedTextBackground#e0688820
diffEditor.removedTextBorder#e0688800
diffEditorGutter.insertedLineBackground#68b87830
diffEditorGutter.removedLineBackground#e0688830
diffEditorOverview.insertedForeground#68b878
diffEditorOverview.removedForeground#e06888
dropdown.background#1a1a2e
dropdown.border#3a3858
dropdown.foreground#e0dce8
dropdown.listBackground#18182a
editor.background#151520
editor.findMatchBackground#c673c950
editor.findMatchHighlightBackground#c673c930
editor.focusedStackFrameHighlightBackground#68b87830
editor.foldBackground#3a385815
editor.foreground#e0dce8
editor.lineHighlightBackground#1c1c2a
editor.lineHighlightBorder#2a2a4020
editor.selectionBackground#6c46c440
editor.stackFrameHighlightBackground#d8b86830
editor.wordHighlightBackground#3a385825
editor.wordHighlightStrongBackground#3a385845
editorBracketHighlight.foreground1#c673c9
editorBracketHighlight.foreground2#c1d0d2
editorBracketHighlight.foreground3#6c46c4
editorBracketHighlight.foreground4#68b878
editorBracketHighlight.foreground5#d8b868
editorBracketHighlight.foreground6#5a78c8
editorBracketHighlight.unexpectedBracket.foreground#e06888
editorBracketMatch.background#6c46c440
editorBracketMatch.border#c673c9
editorCodeLens.foreground#5a5878
editorCursor.foreground#c673c9
editorError.border#e0688800
editorError.foreground#e06888
editorGroup.border#252540
editorGroup.dropBackground#6c46c430
editorGroup.dropIntoPromptBackground#1a1a2e
editorGroup.dropIntoPromptBorder#6c46c4
editorGroup.dropIntoPromptForeground#e0dce8
editorGroup.emptyBackground#18182a
editorGroup.focusedEmptyBorder#6c46c4
editorGroupHeader.tabsBackground#18182a
editorGutter.addedBackground#68b878
editorGutter.deletedBackground#e06888
editorGutter.modifiedBackground#c1d0d2
editorHint.border#68b87800
editorHint.foreground#68b878
editorHoverWidget.background#1a1a2e
editorHoverWidget.border#252540
editorIndentGuide.activeBackground1#6c46c4
editorIndentGuide.background1#2a2a40
editorInfo.border#5a78c800
editorInfo.foreground#5a78c8
editorInlayHint.background#2a2a4080
editorInlayHint.foreground#8080a0
editorInlayHint.parameterForeground#c673c9
editorInlayHint.typeForeground#c1d0d2
editorLineNumber.activeForeground#c673c9
editorLineNumber.foreground#5a5878
editorOverviewRuler.addedForeground#68b878
editorOverviewRuler.background#18182a
editorOverviewRuler.border#252540
editorOverviewRuler.bracketMatchForeground#c673c9
editorOverviewRuler.commonContentForeground#8080a0
editorOverviewRuler.currentContentForeground#68b878
editorOverviewRuler.deletedForeground#e06888
editorOverviewRuler.errorForeground#e06888
editorOverviewRuler.findMatchForeground#c673c980
editorOverviewRuler.incomingContentForeground#6c46c4
editorOverviewRuler.infoForeground#5a78c8
editorOverviewRuler.modifiedForeground#c1d0d2
editorOverviewRuler.rangeHighlightForeground#3a385840
editorOverviewRuler.selectionHighlightForeground#6c46c460
editorOverviewRuler.warningForeground#d8b868
editorOverviewRuler.wordHighlightForeground#3a385860
editorOverviewRuler.wordHighlightStrongForeground#3a385880
editorStickyScroll.background#18182a
editorStickyScrollHover.background#1f1f35
editorSuggestWidget.background#1a1a2e
editorSuggestWidget.foreground#e0dce8
editorSuggestWidget.highlightForeground#c673c9
editorSuggestWidget.selectedBackground#3a3860
editorWarning.border#d8b86800
editorWarning.foreground#d8b868
editorWhitespace.foreground#3a3850
editorWidget.background#18182a
editorWidget.border#252540
editorWidget.foreground#e0dce8
errorForeground#e06888
extensionBadge.remoteBackground#c673c9
extensionBadge.remoteForeground#FFFFFF
extensionButton.prominentBackground#6c46c4
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#8058d8
extensionIcon.preReleaseForeground#c673c9
extensionIcon.sponsorForeground#5a78c8
extensionIcon.starForeground#d8b868
extensionIcon.verifiedForeground#68b878
focusBorder#6c46c4
gitDecoration.addedResourceForeground#68b878
gitDecoration.conflictingResourceForeground#c673c9
gitDecoration.deletedResourceForeground#e06888
gitDecoration.ignoredResourceForeground#5a5878
gitDecoration.modifiedResourceForeground#c1d0d2
gitDecoration.untrackedResourceForeground#d8b868
icon.foreground#e0dce8
input.background#1a1a2e
input.border#3a3858
input.foreground#e0dce8
input.placeholderForeground#5a588080
inputOption.activeBackground#6c46c4
inputOption.activeForeground#FFFFFF
keybindingLabel.background#2a2a40
keybindingLabel.border#2a2a40
keybindingLabel.bottomBorder#6c46c4
keybindingLabel.foreground#e0dce8
list.activeSelectionBackground#6c46c4
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#3a3860
list.focusForeground#e0dce8
list.hoverBackground#252540
list.hoverForeground#e0dce8
list.inactiveSelectionBackground#3a3858
list.inactiveSelectionForeground#e0dce8
menu.background#1a1a2e
menu.border#252540
menu.foreground#e0dce8
menu.selectionBackground#6c46c4
menu.selectionBorder#6c46c400
menu.selectionForeground#FFFFFF
menu.separatorBackground#252540
menubar.selectionBackground#3a3860
menubar.selectionForeground#e0dce8
merge.border#252540
merge.commonContentBackground#5a587820
merge.commonHeaderBackground#5a587840
merge.currentContentBackground#68b87820
merge.currentHeaderBackground#68b87840
merge.incomingContentBackground#6c46c420
merge.incomingHeaderBackground#6c46c440
mergeEditor.change.background#c673c920
mergeEditor.change.word.background#c673c940
mergeEditor.conflict.handledFocused.border#68b878
mergeEditor.conflict.handledUnfocused.border#68b87880
mergeEditor.conflict.unhandledFocused.border#d8b868
mergeEditor.conflict.unhandledUnfocused.border#d8b86880
minimap.background#18182a
minimap.selectionHighlight#6c46c450
notifications.background#1a1a2e
notifications.border#252540
notifications.foreground#e0dce8
notificationsErrorIcon.foreground#e06888
notificationsInfoIcon.foreground#5a78c8
notificationsWarningIcon.foreground#d8b868
panel.background#18182a
panel.border#252540
panelTitle.activeBorder#6c46c4
panelTitle.activeForeground#e0dce8
panelTitle.inactiveForeground#7878a0
peekView.border#6c46c4
peekViewEditor.background#1a1a2e
peekViewResult.background#18182a
peekViewResult.matchHighlightBackground#c673c950
peekViewTitle.background#531774
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#6c46c4
quickInput.background#18182a
quickInput.foreground#e0dce8
quickInputList.focusBackground#6c46c4
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#531774
scrollbarSlider.activeBackground#6c46c4
scrollbarSlider.background#3a385850
scrollbarSlider.hoverBackground#4a4878
selection.background#6c46c4
settings.checkboxBackground#1a1a2e
settings.checkboxBorder#6c46c4
settings.checkboxForeground#e0dce8
settings.dropdownBackground#1a1a2e
settings.dropdownBorder#252540
settings.dropdownForeground#e0dce8
settings.dropdownListBorder#252540
settings.focusedRowBackground#18182a40
settings.focusedRowBorder#6c46c480
settings.headerForeground#e0dce8
settings.modifiedItemIndicator#c673c9
settings.numberInputBackground#1a1a2e
settings.numberInputBorder#6c46c4
settings.numberInputForeground#e0dce8
settings.rowHoverBackground#18182a20
settings.sashBorder#252540
settings.textInputBackground#1a1a2e
settings.textInputBorder#6c46c4
settings.textInputForeground#e0dce8
sideBar.background#18182a
sideBar.border#252540
sideBar.foreground#e0dce8
sideBarSectionHeader.background#1f1f35
sideBarSectionHeader.foreground#e0dce8
sideBarTitle.foreground#c673c9
statusBar.background#531774
statusBar.debuggingBackground#151c6e
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#1a1a2e
statusBar.noFolderForeground#e0dce8
symbolIcon.arrayForeground#e0dce8
symbolIcon.booleanForeground#c673c9
symbolIcon.classForeground#c1d0d2
symbolIcon.colorForeground#c673c9
symbolIcon.constantForeground#a8a0d8
symbolIcon.constructorForeground#c1d0d2
symbolIcon.enumeratorForeground#d8b868
symbolIcon.enumeratorMemberForeground#a8a0d8
symbolIcon.eventForeground#d8b868
symbolIcon.fieldForeground#68b8c8
symbolIcon.fileForeground#8080a0
symbolIcon.folderForeground#6c46c4
symbolIcon.functionForeground#c1d0d2
symbolIcon.interfaceForeground#68b878
symbolIcon.keyForeground#e0dce8
symbolIcon.keywordForeground#c673c9
symbolIcon.methodForeground#c1d0d2
symbolIcon.moduleForeground#6c46c4
symbolIcon.namespaceForeground#6c46c4
symbolIcon.nullForeground#e06888
symbolIcon.numberForeground#a8a0d8
symbolIcon.objectForeground#e0dce8
symbolIcon.operatorForeground#8080a0
symbolIcon.packageForeground#6c46c4
symbolIcon.propertyForeground#68b8c8
symbolIcon.referenceForeground#a8a0d8
symbolIcon.snippetForeground#8080a0
symbolIcon.stringForeground#c673c9
symbolIcon.structForeground#e0dce8
symbolIcon.textForeground#e0dce8
symbolIcon.typeParameterForeground#68b878
symbolIcon.unitForeground#a8a0d8
symbolIcon.variableForeground#68b8c8
tab.activeBackground#151520
tab.activeBorder#6c46c4
tab.activeForeground#c1d0d2
tab.border#252540
tab.hoverBackground#1c1c30
tab.hoverForeground#c1d0d2
tab.inactiveBackground#18182a
tab.inactiveForeground#7878a0
terminal.ansiBlack#1a1a2e
terminal.ansiBlue#5a78c8
terminal.ansiBrightBlack#5a5878
terminal.ansiBrightBlue#78a0e8
terminal.ansiBrightCyan#80d0e0
terminal.ansiBrightGreen#80d090
terminal.ansiBrightMagenta#e090e0
terminal.ansiBrightRed#f080a0
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#f0d080
terminal.ansiCyan#68b8c8
terminal.ansiGreen#68b878
terminal.ansiMagenta#c673c9
terminal.ansiRed#e06888
terminal.ansiWhite#e0dce8
terminal.ansiYellow#d8b868
terminal.background#151520
terminal.foreground#e0dce8
testing.iconErrored#e06888
testing.iconFailed#e06888
testing.iconPassed#68b878
testing.iconQueued#d8b868
testing.iconSkipped#5a5878
testing.iconUnset#5a5878
testing.peekBorder#e06888
testing.peekHeaderBackground#e0688820
testing.runAction#68b878
textLink.activeForeground#d8e4e8
textLink.foreground#c1d0d2
titleBar.activeBackground#0f0f1a
titleBar.activeForeground#e0dce8
titleBar.inactiveBackground#18182a
titleBar.inactiveForeground#8080a0
walkThrough.embeddedEditorBackground#1a1a2e
welcomePage.background#151520
welcomePage.progress.background#252540
welcomePage.progress.foreground#c673c9
welcomePage.tileBackground#1a1a2e
welcomePage.tileBorder#252540
welcomePage.tileHoverBackground#252540

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6a6890	italic
keyword, storage	#c673c9	bold
keyword.control, keyword.control.flow	#d890d8	bold
entity.name.function, support.function	#c1d0d2	bold
entity.name.type, support.class, support.type, storage.type	#88c8d8	bold
string	#dba8dc	—
constant.character.escape	#e090e0	—
variable, support.variable	#e0dce8	—
variable.parameter	#a8c8d8	italic
constant.numeric, constant.character, constant	#a8a0d8	—
constant.language, support.constant, variable.language	#c673c9	—
keyword.operator	#9898b8	—
punctuation	#8888a8	—
entity.name.tag	#c673c9	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#88c8d8	italic
meta.selector, entity.name.tag.css	#e0dce8	—
meta.property-name, support.type.property-name	#c673c9	—
meta.property-value, support.constant.property-value	#dba8dc	—
keyword.other.unit	#a8a0d8	—
markup.heading	#c673c9	bold
markup.bold	#e0dce8	bold
markup.italic	#e0dce8	italic
meta.link	#c1d0d2	—
markup.list	#c673c9	—
markup.inline.raw	#dba8dc	—
markup.inserted	#68b878	—
markup.deleted	#e06888	—
markup.changed	#c1d0d2	—
support.type.property-name.json	#c1d0d2	—
entity.name.tag.yaml	#88c8d8	—
string.regexp	#e090e0	—
meta.decorator, meta.annotation	#d8b868	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}!`;
}