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 - Yae Miko

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#c06090
activityBar.foreground#fdf8f9
activityBar.inactiveForeground#f4c8e2
activityBarBadge.background#e6a2c2
activityBarBadge.foreground#4a3840
badge.background#e6a2c2
badge.foreground#4a3840
breadcrumb.activeSelectionForeground#c06090
breadcrumb.background#f8eff2
breadcrumb.focusForeground#4a3840
breadcrumb.foreground#b89898
button.background#c06090
button.foreground#FFFFFF
button.hoverBackground#a04878
button.secondaryBackground#f0dce4
button.secondaryForeground#4a3840
button.secondaryHoverBackground#e0c8d4
charts.blue#785888
charts.foreground#4a3840
charts.green#609070
charts.lines#c06090
charts.orange#c08868
charts.purple#886898
charts.red#a85060
charts.yellow#987050
checkbox.background#FFFFFF
checkbox.border#c06090
checkbox.foreground#4a3840
checkbox.selectBackground#c06090
checkbox.selectBorder#c06090
commandCenter.activeBackground#f0dce4
commandCenter.activeBorder#c06090
commandCenter.activeForeground#c06090
commandCenter.background#f8eff2
commandCenter.border#ead8e0
commandCenter.debuggingBackground#e6a2c220
commandCenter.foreground#4a3840
commandCenter.inactiveBorder#ead8e080
commandCenter.inactiveForeground#b89898
debugConsole.errorForeground#a85060
debugConsole.infoForeground#886898
debugConsole.sourceForeground#886878
debugConsole.warningForeground#987050
debugConsoleInputIcon.foreground#c06090
debugIcon.breakpointCurrentStackframeForeground#c06090
debugIcon.breakpointDisabledForeground#c0b0b8
debugIcon.breakpointForeground#a85060
debugIcon.breakpointStackframeForeground#609070
debugIcon.breakpointUnverifiedForeground#987050
debugIcon.continueForeground#609070
debugIcon.disconnectForeground#a85060
debugIcon.pauseForeground#987050
debugIcon.restartForeground#609070
debugIcon.startForeground#609070
debugIcon.stepBackForeground#886898
debugIcon.stepIntoForeground#886898
debugIcon.stepOutForeground#886898
debugIcon.stepOverForeground#886898
debugIcon.stopForeground#a85060
debugTokenExpression.boolean#c06090
debugTokenExpression.error#a85060
debugTokenExpression.name#c06090
debugTokenExpression.number#785888
debugTokenExpression.string#a06080
debugTokenExpression.value#886898
debugToolBar.background#f8eff2
debugToolBar.border#ead8e0
debugView.exceptionLabelBackground#a85060
debugView.exceptionLabelForeground#FFFFFF
debugView.stateLabelBackground#c06090
debugView.stateLabelForeground#FFFFFF
debugView.valueChangedHighlight#88689860
descriptionForeground#b89898
diffEditor.diagonalFill#ead8e040
diffEditor.insertedLineBackground#60907015
diffEditor.insertedTextBackground#60907020
diffEditor.insertedTextBorder#60907000
diffEditor.removedLineBackground#a8506015
diffEditor.removedTextBackground#a8506020
diffEditor.removedTextBorder#a8506000
diffEditorGutter.insertedLineBackground#60907030
diffEditorGutter.removedLineBackground#a8506030
diffEditorOverview.insertedForeground#609070
diffEditorOverview.removedForeground#a85060
dropdown.background#FFFFFF
dropdown.border#ead8e0
dropdown.foreground#4a3840
dropdown.listBackground#FFFFFF
editor.background#fdf8f9
editor.findMatchBackground#e6a2c250
editor.findMatchHighlightBackground#e6a2c225
editor.focusedStackFrameHighlightBackground#60907030
editor.foldBackground#e6a2c210
editor.foreground#4a3840
editor.lineHighlightBackground#f8eff2
editor.lineHighlightBorder#e6a2c220
editor.selectionBackground#e6a2c240
editor.stackFrameHighlightBackground#98705030
editor.wordHighlightBackground#e6a2c220
editor.wordHighlightStrongBackground#e6a2c240
editorBracketHighlight.foreground1#c06090
editorBracketHighlight.foreground2#886898
editorBracketHighlight.foreground3#c08868
editorBracketHighlight.foreground4#609070
editorBracketHighlight.foreground5#987050
editorBracketHighlight.foreground6#785888
editorBracketHighlight.unexpectedBracket.foreground#a85060
editorBracketMatch.background#e6a2c230
editorBracketMatch.border#c06090
editorCodeLens.foreground#b89898
editorCursor.foreground#c06090
editorError.border#a8506000
editorError.foreground#a85060
editorGroup.border#ead8e0
editorGroup.dropBackground#e6a2c230
editorGroup.dropIntoPromptBackground#f8eff2
editorGroup.dropIntoPromptBorder#c06090
editorGroup.dropIntoPromptForeground#4a3840
editorGroup.emptyBackground#f8eff2
editorGroup.focusedEmptyBorder#c06090
editorGroupHeader.tabsBackground#f8eff2
editorGutter.addedBackground#609070
editorGutter.deletedBackground#a85060
editorGutter.modifiedBackground#886898
editorHint.border#60907000
editorHint.foreground#609070
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#ead8e0
editorIndentGuide.activeBackground1#c06090
editorIndentGuide.background1#f0dce4
editorInfo.border#88689800
editorInfo.foreground#886898
editorInlayHint.background#f0dce480
editorInlayHint.foreground#886878
editorInlayHint.parameterForeground#c06090
editorInlayHint.typeForeground#886898
editorLineNumber.activeForeground#c06090
editorLineNumber.foreground#b89898
editorOverviewRuler.addedForeground#609070
editorOverviewRuler.background#f8eff2
editorOverviewRuler.border#ead8e0
editorOverviewRuler.bracketMatchForeground#c06090
editorOverviewRuler.commonContentForeground#886878
editorOverviewRuler.currentContentForeground#609070
editorOverviewRuler.deletedForeground#a85060
editorOverviewRuler.errorForeground#a85060
editorOverviewRuler.findMatchForeground#c0609080
editorOverviewRuler.incomingContentForeground#886898
editorOverviewRuler.infoForeground#886898
editorOverviewRuler.modifiedForeground#886898
editorOverviewRuler.rangeHighlightForeground#e6a2c240
editorOverviewRuler.selectionHighlightForeground#e6a2c260
editorOverviewRuler.warningForeground#987050
editorOverviewRuler.wordHighlightForeground#e6a2c260
editorOverviewRuler.wordHighlightStrongForeground#e6a2c280
editorStickyScroll.background#f8eff2
editorStickyScrollHover.background#f0dce4
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.foreground#4a3840
editorSuggestWidget.highlightForeground#c06090
editorSuggestWidget.selectedBackground#f0dce4
editorWarning.border#98705000
editorWarning.foreground#987050
editorWhitespace.foreground#ead8e0
editorWidget.background#f8eff2
editorWidget.border#ead8e0
editorWidget.foreground#4a3840
errorForeground#a85060
extensionBadge.remoteBackground#e6a2c2
extensionBadge.remoteForeground#4a3840
extensionButton.prominentBackground#c06090
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#a04878
extensionIcon.preReleaseForeground#886898
extensionIcon.sponsorForeground#c06090
extensionIcon.starForeground#987050
extensionIcon.verifiedForeground#609070
focusBorder#c06090
gitDecoration.addedResourceForeground#609070
gitDecoration.conflictingResourceForeground#c06090
gitDecoration.deletedResourceForeground#a85060
gitDecoration.ignoredResourceForeground#c0b0b8
gitDecoration.modifiedResourceForeground#886898
gitDecoration.untrackedResourceForeground#987050
icon.foreground#c06090
input.background#FFFFFF
input.border#e6a2c2
input.foreground#4a3840
input.placeholderForeground#b89898
inputOption.activeBackground#c06090
inputOption.activeForeground#FFFFFF
keybindingLabel.background#f0dce4
keybindingLabel.border#ead8e0
keybindingLabel.bottomBorder#b89898
keybindingLabel.foreground#4a3840
list.activeSelectionBackground#c06090
list.activeSelectionForeground#FFFFFF
list.activeSelectionIconForeground#FFFFFF
list.focusBackground#e6a2c240
list.focusForeground#4a3840
list.hoverBackground#f0dce4
list.hoverForeground#4a3840
list.inactiveSelectionBackground#e6a2c230
list.inactiveSelectionForeground#4a3840
menu.background#FFFFFF
menu.border#ead8e0
menu.foreground#4a3840
menu.selectionBackground#c06090
menu.selectionBorder#c0609000
menu.selectionForeground#FFFFFF
menu.separatorBackground#ead8e0
menubar.selectionBackground#f0dce4
menubar.selectionForeground#4a3840
merge.border#ead8e0
merge.commonContentBackground#88687820
merge.commonHeaderBackground#88687840
merge.currentContentBackground#60907020
merge.currentHeaderBackground#60907040
merge.incomingContentBackground#88689820
merge.incomingHeaderBackground#88689840
mergeEditor.change.background#e6a2c220
mergeEditor.change.word.background#e6a2c240
mergeEditor.conflict.handledFocused.border#609070
mergeEditor.conflict.handledUnfocused.border#60907080
mergeEditor.conflict.unhandledFocused.border#987050
mergeEditor.conflict.unhandledUnfocused.border#98705080
minimap.background#f8eff2
minimap.selectionHighlight#e6a2c240
notifications.background#FFFFFF
notifications.border#ead8e0
notifications.foreground#4a3840
notificationsErrorIcon.foreground#a85060
notificationsInfoIcon.foreground#886898
notificationsWarningIcon.foreground#987050
panel.background#f8eff2
panel.border#ead8e0
panelTitle.activeBorder#c06090
panelTitle.activeForeground#4a3840
panelTitle.inactiveForeground#886878
peekView.border#c06090
peekViewEditor.background#f8eff2
peekViewResult.background#f8eff2
peekViewResult.matchHighlightBackground#e6a2c240
peekViewTitle.background#c06090
peekViewTitleLabel.foreground#fdf8f9
progressBar.background#c06090
quickInput.background#f8eff2
quickInput.foreground#4a3840
quickInputList.focusBackground#c06090
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#c06090
scrollbarSlider.activeBackground#c06090
scrollbarSlider.background#e6a2c240
scrollbarSlider.hoverBackground#e6a2c280
selection.background#e6a2c2
settings.checkboxBackground#FFFFFF
settings.checkboxBorder#c06090
settings.checkboxForeground#4a3840
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#ead8e0
settings.dropdownForeground#4a3840
settings.dropdownListBorder#ead8e0
settings.focusedRowBackground#f0dce440
settings.focusedRowBorder#c0609080
settings.headerForeground#4a3840
settings.modifiedItemIndicator#c06090
settings.numberInputBackground#FFFFFF
settings.numberInputBorder#e6a2c2
settings.numberInputForeground#4a3840
settings.rowHoverBackground#f0dce420
settings.sashBorder#ead8e0
settings.textInputBackground#FFFFFF
settings.textInputBorder#e6a2c2
settings.textInputForeground#4a3840
sideBar.background#f8eff2
sideBar.border#ead8e0
sideBar.foreground#4a3840
sideBarSectionHeader.background#f0dce4
sideBarSectionHeader.foreground#4a3840
sideBarTitle.foreground#c06090
statusBar.background#c06090
statusBar.debuggingBackground#886898
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#fdf8f9
statusBar.noFolderBackground#c06090
statusBar.noFolderForeground#fdf8f9
symbolIcon.arrayForeground#4a3840
symbolIcon.booleanForeground#c06090
symbolIcon.classForeground#c06090
symbolIcon.colorForeground#e6a2c2
symbolIcon.constantForeground#785888
symbolIcon.constructorForeground#c06090
symbolIcon.enumeratorForeground#987050
symbolIcon.enumeratorMemberForeground#785888
symbolIcon.eventForeground#987050
symbolIcon.fieldForeground#785888
symbolIcon.fileForeground#886878
symbolIcon.folderForeground#886878
symbolIcon.functionForeground#886898
symbolIcon.interfaceForeground#609070
symbolIcon.keyForeground#4a3840
symbolIcon.keywordForeground#c06090
symbolIcon.methodForeground#886898
symbolIcon.moduleForeground#c06090
symbolIcon.namespaceForeground#c06090
symbolIcon.nullForeground#a85060
symbolIcon.numberForeground#785888
symbolIcon.objectForeground#4a3840
symbolIcon.operatorForeground#886878
symbolIcon.packageForeground#c06090
symbolIcon.propertyForeground#4a3840
symbolIcon.referenceForeground#785888
symbolIcon.snippetForeground#886878
symbolIcon.stringForeground#a06080
symbolIcon.structForeground#4a3840
symbolIcon.textForeground#4a3840
symbolIcon.typeParameterForeground#609070
symbolIcon.unitForeground#785888
symbolIcon.variableForeground#4a3840
tab.activeBackground#fdf8f9
tab.activeBorder#c06090
tab.activeForeground#c06090
tab.border#ead8e0
tab.hoverBackground#fdf8f9
tab.hoverForeground#c06090
tab.inactiveBackground#f8eff2
tab.inactiveForeground#886878
terminal.ansiBlack#4a3840
terminal.ansiBlue#785888
terminal.ansiBrightBlack#886878
terminal.ansiBrightBlue#9078a0
terminal.ansiBrightCyan#78a0a8
terminal.ansiBrightGreen#78a888
terminal.ansiBrightMagenta#d078a0
terminal.ansiBrightRed#c06878
terminal.ansiBrightWhite#e0c8d4
terminal.ansiBrightYellow#b08860
terminal.ansiCyan#608890
terminal.ansiGreen#609070
terminal.ansiMagenta#c06090
terminal.ansiRed#a85060
terminal.ansiWhite#b89898
terminal.ansiYellow#987050
terminal.background#fdf8f9
terminal.foreground#4a3840
testing.iconErrored#a85060
testing.iconFailed#a85060
testing.iconPassed#609070
testing.iconQueued#987050
testing.iconSkipped#c0b0b8
testing.iconUnset#c0b0b8
testing.peekBorder#a85060
testing.peekHeaderBackground#a8506020
testing.runAction#609070
textLink.activeForeground#a04878
textLink.foreground#c06090
titleBar.activeBackground#c06090
titleBar.activeForeground#fdf8f9
titleBar.inactiveBackground#f8eff2
titleBar.inactiveForeground#886878
walkThrough.embeddedEditorBackground#f8eff2
welcomePage.background#fdf8f9
welcomePage.progress.background#ead8e0
welcomePage.progress.foreground#c06090
welcomePage.tileBackground#f8eff2
welcomePage.tileBorder#ead8e0
welcomePage.tileHoverBackground#f0dce4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#988890	italic
keyword, storage	#c06090	bold
entity.name.function, support.function	#785888	bold
entity.name.type, support.class, support.type, storage.type	#4a3840	bold
string	#905870	—
constant.character.escape	#c06090	—
variable, support.variable	#4a3840	—
constant.numeric, constant.character, constant	#785888	—
constant.language, support.constant, variable.language	#c06090	—
keyword.operator	#685060	—
punctuation	#785868	—
entity.name.tag	#c06090	—
entity.other.attribute-name, meta.tag entity.other.attribute-name	#886898	italic
meta.selector, entity.name.tag.css	#4a3840	—
meta.property-name, support.type.property-name	#c06090	—
meta.property-value, support.constant.property-value	#905870	—
markup.heading	#c06090	bold
markup.bold	#4a3840	bold
markup.italic	#4a3840	italic
meta.link	#886898	—
markup.list	#c06090	—
markup.inline.raw	#905870	—
markup.inserted	#609070	—
markup.deleted	#a85060	—
markup.changed	#886898	—

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