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 Neo

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#bc384e
activityBarBadge.foreground#e2e3e9
badge.background#e2e3e9
badge.foreground#2E303E
breadcrumbPicker.background#e2e3e9
button.background#c0c0c0
button.foreground#333333
debugToolBar.background#e2e3e9
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#e2e3e9
dropdown.border#c0c0c0
dropdown.listBackground#e2e3e9
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#e2e3e9
editorCursor.foreground#bc384e
editorError.foreground#bc384e
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#e2e3e9
editorGutter.addedBackground#5a9438dd
editorGutter.deletedBackground#c91d39dd
editorGutter.modifiedBackground#9c6d16dd
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#d6d6d6b3
editorLineNumber.activeForeground#bc384e
editorLineNumber.foreground#d6d6d6b3
editorOverviewRuler.addedForeground#5a9438dd
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#e2e3e980
editorOverviewRuler.deletedForeground#c91d39dd
editorOverviewRuler.errorForeground#F43E5CE6
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#9c6d16dd
editorOverviewRuler.warningForeground#9c6d16dd
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#bc384e
editorWarning.foreground#9c6d16dd
editorWidget.background#e2e3e9
editorWidget.border#b8b9b9
errorForeground#bc384e
extensionButton.prominentBackground#bc384e
extensionButton.prominentHoverBackground#bc384e
focusBorder#bc384e
foreground#333333
gitDecoration.addedResourceForeground#5a9438
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#969696
gitDecoration.modifiedResourceForeground#9c6d16
gitDecoration.untrackedResourceForeground#5a9438
input.background#e2e3e9
input.border#c0c0c0
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#cccdce
list.activeSelectionForeground#333333
list.dropBackground#d0d1d6b3
list.errorForeground#bc384eE6
list.focusBackground#cccdce
list.focusForeground#e2e3e9
list.highlightForeground#bc384e
list.hoverBackground#cccdce
list.hoverForeground#333333
list.inactiveFocusBackground#cccdce
list.inactiveSelectionBackground#cccdce
list.inactiveSelectionForeground#333333
list.warningForeground#9c6d16
panelTitle.activeBorder#bc384e
peekView.border#1A1C23
peekViewEditor.background#e2e3e9
peekViewEditor.matchHighlightBackground#d0d1d6b3
peekViewResult.background#e2e3e9
peekViewResult.matchHighlightBackground#d0d1d6b3
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#e2e3e9
pickerGroup.foreground#bc384e
progressBar.background#bc384e
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#e2e3e9
sideBarSectionHeader.foreground#1a1c24
statusBar.background#cdcfd1
statusBar.debuggingBackground#bc384e
statusBar.debuggingForeground#06060C
statusBar.foreground#333333
statusBar.noFolderBackground#191b22
statusBarItem.hoverBackground#aeafb4
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentForeground#e2e3e9
statusBarItem.prominentHoverBackground#6C6F93
tab.activeBorder#bc384e
tab.border#e2e3e9
tab.inactiveBackground#e2e3e9
terminal.ansiBlack#565c75
terminal.ansiBlue#389ea8
terminal.ansiBrightBlack#414557
terminal.ansiBrightBlue#21b1be
terminal.ansiBrightCyan#f9c199
terminal.ansiBrightGreen#99d279
terminal.ansiBrightMagenta#b774dc
terminal.ansiBrightRed#f6637c
terminal.ansiBrightWhite#f88e7c
terminal.ansiBrightYellow#f8d28a
terminal.ansiCyan#e9c4a9
terminal.ansiGreen#9ec08a
terminal.ansiMagenta#b08ec2
terminal.ansiRed#d68492
terminal.ansiWhite#e39d90
terminal.ansiYellow#e0caa3
terminal.foreground#333333
terminal.selectionBackground#6C6F934D
terminalCursor.background#e2e3e9
terminalCursor.foreground#d0d1d6b3
textLink.activeForeground#bc384e
textLink.foreground#bc384e
titleBar.activeBackground#f3f3f3
titleBar.inactiveBackground#cacaca
walkThrough.embeddedEditorBackground#e2e3e9
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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