Horizon Extended Theme

Name: Horizon Extended Theme
Author: Lance Wilhelm

Publisher: Lance WilhelmThemes in package: 5

A dark theme based on the Horizon theme. This provides some much need additions included semantic highlighting.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Horizon Extended Theme — Horizon Extended - Light Original

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#ececec
activityBar.foreground#1a1c24
activityBarBadge.background#fe5e78
activityBarBadge.foreground#e4e6e7
badge.background#e4e6e7
badge.foreground#2E303E
breadcrumbPicker.background#e4e6e7
button.background#c0c0c0
button.foreground#333333
debugToolBar.background#e4e6e7
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#e4e6e7
dropdown.border#c0c0c0
dropdown.listBackground#e4e6e7
editor.background#f3f3f3
editor.findMatchBackground#d6d6d6b3
editor.findMatchHighlightBackground#d6d6d6b3
editor.findRangeHighlightBackground#d6d6d6b3
editor.hoverHighlightBackground#d6d6d6b3
editor.lineHighlightBackground#e7e7e7b3
editor.rangeHighlightBackground#d6d6d6b3
editor.selectionBackground#d6d6d6b3
editor.selectionHighlightBackground#d6d6d6b3
editor.wordHighlightBackground#d6d6d6b3
editor.wordHighlightStrongBackground#d6d6d6b3
editorBracketMatch.background#d6d6d6b3
editorBracketMatch.border#d6d6d6b3
editorCodeLens.foreground#d6d6d6b3
editorCursor.background#e4e6e7
editorCursor.foreground#fe5e78
editorError.foreground#fe5e78
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#e4e6e7
editorGutter.addedBackground#03d186b3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#d6d6d6b3
editorLineNumber.activeForeground#fe5e78
editorLineNumber.foreground#d6d6d6b3
editorOverviewRuler.addedForeground#03d186b3
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#e4e6e780
editorOverviewRuler.deletedForeground#F43E5C80
editorOverviewRuler.errorForeground#F43E5CE6
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#21BFC280
editorOverviewRuler.warningForeground#c98c1a
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#fe5e78
editorWarning.foreground#c98c1a
editorWidget.background#e4e6e7
editorWidget.border#b8b9b9
errorForeground#fe5e78
extensionButton.prominentBackground#fe5e78
extensionButton.prominentHoverBackground#fe5e78
focusBorder#fe5e78
foreground#333333
gitDecoration.addedResourceForeground#20b981b3
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#969696
gitDecoration.modifiedResourceForeground#c98c1a
gitDecoration.untrackedResourceForeground#20bd83
input.background#e4e6e7
input.border#c0c0c0
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#cccdce
list.activeSelectionForeground#333333
list.dropBackground#d0d1d6b3
list.errorForeground#fe5e78E6
list.focusBackground#cccdce
list.focusForeground#e4e6e7
list.highlightForeground#fe5e78
list.hoverBackground#cccdce
list.hoverForeground#333333
list.inactiveFocusBackground#cccdce
list.inactiveSelectionBackground#cccdce
list.inactiveSelectionForeground#333333
list.warningForeground#c98c1a
panelTitle.activeBorder#fe5e78
peekView.border#1A1C23
peekViewEditor.background#e4e6e7
peekViewEditor.matchHighlightBackground#d0d1d6b3
peekViewResult.background#e4e6e7
peekViewResult.matchHighlightBackground#d0d1d6b3
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#e4e6e7
pickerGroup.foreground#fe5e78
progressBar.background#fe5e78
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#d0d1d6b3
scrollbarSlider.background#6C6F931A
scrollbarSlider.hoverBackground#6C6F934D
selection.background#e0e0e4b3
sideBar.background#edeeee
sideBar.dropBackground#8386a74d
sideBar.foreground#1a1c24
sideBarSectionHeader.background#e4e6e7
sideBarSectionHeader.foreground#1a1c24
statusBar.background#cdcfd1
statusBar.debuggingBackground#fe5e78
statusBar.debuggingForeground#06060C
statusBar.foreground#333333
statusBar.noFolderBackground#191b22
statusBarItem.hoverBackground#aeafb4
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentForeground#e4e6e7
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#fe5e78
tab.border#e4e6e7
tab.inactiveBackground#e4e6e7
terminal.ansiBlue#26BBD9
terminal.ansiBrightBlue#3FC4DE
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#3FDAA4
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#FBC3A7
terminal.ansiCyan#59E1E3
terminal.ansiGreen#29D398
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#c98c1a
terminal.foreground#333333
terminal.selectionBackground#6C6F934D
terminalCursor.background#e4e6e7
terminalCursor.foreground#d0d1d6b3
textLink.activeForeground#fe5e78
textLink.foreground#fe5e78
titleBar.activeBackground#f3f3f3
titleBar.inactiveBackground#cacaca
walkThrough.embeddedEditorBackground#e4e6e7
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#6d6d6d	italic
comment.block	#6d6d6d	italic
variable	#ee735d	—
constant	#ee735d	—
constant.character.escape	#09929e	—
entity.name	#c98c1a	—
entity.name.function	#09929e	—
entity.name.tag	#E95678E6	—
entity.name.type, storage.type.cs	#c98c1a	—
entity.other.attribute-name	#b86758e6	italic
entity.other.inherited-class	#c98c1a	—
entity.other.attribute-name.id	#09929e	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#cf9172e6	—
entity.name.variable, variable	#d8415a	—
variable.other.constant	#c98c1a	—
keyword	#821eb8	italic
keyword.operator	#333333	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#821eb8	—
keyword.other.unit	#ac5b4de6	—
markup.quote	#c28669b3	italic
markup.heading, entity.name.section	#E95678E6	—
markup.bold	#821eb8	bold
markup.italic	#09929e	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#e67c47e6	—
storage	#821eb8	italic
string.quoted, string.template	#2ca860	—
string.regexp	#c57b6de6	—
string.other.link	#c77769e6	—
support	#c98c1a	—
support.function	#09929e	—
support.variable	#c98c1a	—
support.type.property-name, meta.object-literal.key	#E95678E6	—
support.type.property-name.css	#333333	—
variable.language	#c98c1a	italic
variable.parameter	—	italic
string.template meta.embedded	#333333	—
punctuation.definition.tag	#E95678B3	—
punctuation.separator	#333333	—
punctuation.definition.template-expression	#821eb8	—
punctuation.section.embedded	#821eb8	—
punctuation.definition.list	#ce796be6	—
meta.function-call.generic.python	#09929e	—

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