Horizons Edge Theme

Name: Horizons Edge Theme
Author: Darren Potter

Publisher: Darren PotterThemes in package: 1

An alright theme 👍

GitHub

VS Code preview

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

Horizons Edge Theme — Horizons Edge Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffcc77
activityBar.background#191919
activityBar.border#222222
activityBar.foreground#dddddd
activityBar.inactiveForeground#ffffff66
activityBarBadge.background#ffcc77
activityBarBadge.foreground#333333
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#1c1c1c
breadcrumb.focusForeground#eeeeee
breadcrumb.foreground#cccccccc
button.background#ffcc77
button.foreground#333333
button.hoverBackground#cfa65e
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#3c3c3c
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#333333
debugExceptionWidget.border#ffcc77
debugToolBar.background#333333
debugToolBar.border#ffcc77
diffEditor.border#444444
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedTextBackground#ff000033
dropdown.background#3c3c3c
dropdown.border#00000000
dropdown.foreground#cccccc
editor.background#191919
editor.findMatchBackground#4b3c22
editor.findMatchBorder#ffcc7752
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#eeeeee
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0a
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#4b3c22
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#ffcc77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#4b3c22
editorBracketHighlight.foreground1#FFCC77
editorBracketHighlight.foreground2#359FF4
editorBracketHighlight.foreground3#54A857
editorBracketHighlight.foreground4#FFA07A
editorBracketHighlight.foreground5#C792EA
editorBracketHighlight.foreground6#ff869a
editorBracketHighlight.unexpectedBracket.foreground#ff5555
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.foreground#ffcc77
editorError.background#b73a3400
editorError.border#ffffff00
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.dropBackground#25375daa
editorGroup.emptyBackground#191919
editorGroupHeader.tabsBackground#222222
editorGutter.addedBackground#81b88b
editorGutter.background#1c1c1c
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#7da9f1
editorHoverWidget.background#252526
editorHoverWidget.border#ffcc774e
editorHoverWidget.foreground#cccccc
editorIndentGuide.activeBackground#ffffff1f
editorIndentGuide.background#404040
editorInfo.background#4490bf00
editorInfo.border#4490bf00
editorInfo.foreground#4490bf
editorInlayHint.typeForeground#d5ec8b
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#858585
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#2d2d30
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#2d2d2d
editorSuggestWidget.background#252526
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#ffcc77
editorSuggestWidget.selectedBackground#4b3c22
editorSuggestWidget.selectedForeground#ffffff
editorUnnecessaryCode.opacity#00000045
editorWarning.background#a9904000
editorWarning.border#ffffff00
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.foreground#cccccc
editorWidget.resizeBorder#5f5f5f
extensionButton.prominentBackground#ffcc77
extensionButton.prominentForeground#000000
extensionButton.prominentHoverBackground#ffcc77aa
focusBorder#ffcc77
foreground#dddddd
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#bada55
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#5c5c5c
gitDecoration.modifiedResourceForeground#7da9f1
gitDecoration.stageDeletedResourceForeground#c74e39
gitDecoration.stageModifiedResourceForeground#7da9f1
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#ff9100
icon.foreground#dddddd
input.background#3c3c3c
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#ffcc7746
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
inputValidation.errorBackground#a22d44
inputValidation.errorBorder#ab395b
inputValidation.infoBackground#051336
inputValidation.infoBorder#384078
inputValidation.warningBackground#5b7e7a
inputValidation.warningBorder#5b7e7a
list.activeSelectionBackground#4b3c22
list.activeSelectionForeground#ffffff
list.dropBackground#383b3d
list.focusBackground#4b3c22
list.focusForeground#cccccc
list.highlightForeground#ffcc77
list.hoverBackground#ffffff10
list.hoverForeground#cccccc
list.inactiveSelectionBackground#37373d
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#4b3c22
listFilterWidget.noMatchesOutline#ffcc77
listFilterWidget.outline#ffcc77
menu.background#252526
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#4b3c22
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#cccccc
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403b
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384b
merge.incomingHeaderBackground#395f8f
minimap.background#191919
minimap.errorHighlight#f48771
minimap.findMatchHighlight#4b3c22
minimap.selectionHighlight#4b3c22
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#383838
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#cccccc
notifications.background#252526
notifications.border#303031
notifications.foreground#cccccc
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#ffcc7772
panel.background#1e1e1e
panel.border#80808059
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#ffcc77
peekViewEditor.background#4b3c2240
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#4b3c2240
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#ffcc77
ports.iconRunningProcessForeground#80a2c2
progressBar.background#ffcc77
quickInputList.focusBackground#4b3c22
quickInputList.focusForeground#ffffff
scrollbar.shadow#222222
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#ffffff10
scrollbarSlider.hoverBackground#646464b3
selection.background#8c6a13
settings.focusedRowBackground#ffffff07
settings.headerForeground#dddddd
sideBar.background#191919
sideBar.border#222222
sideBar.dropBackground#383b3d
sideBar.foreground#cccccc
sideBarSectionHeader.background#222222
sideBarSectionHeader.border#cccccc33
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#cccccc
statusBar.background#333333
statusBar.debuggingBackground#cc6633
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#68217a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#0063a5
statusBarItem.prominentHoverBackground#0063a5dd
statusBarItem.remoteBackground#ffcc77
statusBarItem.remoteForeground#333333
tab.activeBackground#191919
tab.activeBorder#ffcc77
tab.activeForeground#ffffff
tab.border#2d2d2d
tab.inactiveBackground#2d2d2d
tab.inactiveForeground#ffffff90
tab.lastPinnedBorder#2b3c5d
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#cccccc
terminal.selectionBackground#ffffff40
terminalCursor.background#ffcc77
terminalCursor.foreground#333333
textLink.foreground#ffcc77
titleBar.activeBackground#222222
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#3c3c3c99
titleBar.inactiveForeground#cccccc99
tree.indentGuidesStroke#585858
walkThrough.embeddedEditorBackground#00000050
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.array, meta.brace, meta.export.js variable.other, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.function-call.php punctuation, meta.js punctuation.definition.js, meta.object-literal.key, object.comma, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.constant, punctuation.python, punctuation.section.array, punctuation.terminator.expression, source.go meta.function-call.go, string.other.link, support.class.js, support.type.object.console.js, support.type.property-name.json, terminator.js, variable.instance, variable.js, variable.object.property, variable.other.constant, variable.other.instance, variable.other.js, variable.other.meta.export.js, variable.other.object, variable.other.php, variable.other.property.js.jsx, variable.other.property.php, variable.other.readwrite, variable.other.ruby, variable.other.ts, variable.other.tsx, variable.parameter.function.coffee, variable.parameter.url.sass, variable.parameter.url.scss, variable.parameter, variable.readwrite.instance, variable.sass, variable.scss, variable.ts, variable.tsx, variable, source.css	#EEEEEE
constant.other.color, entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, entity.other.attribute-name.id, entity.name.function, entity.name.function.js, entity.name.tag, entity.name.tag.tsx, entity.name.tag.js, entity.name.type.class, keyword.other.unit, meta.property-values.css, meta.tag.other, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.property-value.css, punctuation.definition.tag, string.template meta.template.expression, entity.quasi.element.js, support.function, support.class.php	#ffcc77
constant.character.escape, constant.other.color.rgb-value punctuation.definition.constant, entity.name.type.svelte, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.wildcard, keyword.control.at-rule, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.export, keyword.control.flow, keyword.control.from, keyword.control.if.scss, keyword.control.import, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.module.js, keyword.control.module.ruby, keyword.control.ruby, keyword.operator, keyword.other.debugger, keyword.other.new, keyword.other.special-method, keyword, meta.attribute-selector.css entity.other.attribute-name.attribute, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute.prefetch.svelte, meta.delimiter.comma.js, meta.scope.tag.svelte:body.svelte entity.name.tag.svelte, meta.scope.tag.svelte:head.svelte entity.name.tag.svelte, meta.scope.tag.svelte:component.svelte entity.name.tag.svelte, meta.scope.tag.svelte:element.svelte entity.name.tag.svelte, meta.scope.tag.svelte:fragment.svelte entity.name.tag.svelte, meta.scope.tag.svelte:options.svelte entity.name.tag.svelte, meta.scope.tag.svelte:self.svelte entity.name.tag.svelte, meta.scope.tag.svelte:window.svelte entity.name.tag.svelte, punctuation.accessor, punctuation.definition.typeparameters, punctuation.separator.key-value.css, punctuation.separator.key-value, punctuation.separator.label.ts, punctuation.terminator.rule.css, punctuation.terminator.statement, storage.modifier.async.ts, support.constant.media, support.type.object.module.js, variable.function.svelte, meta.tag.component.astro, meta.selector.css	#FFA07A
beginning.punctuation.definition.list.markdown, constant.character.numeric, constant.numeric, constant.other, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, entity.other.attribute-name.class, markup.changed, markup.heading.markdown, markup.heading.setext, markup.heading, markup.inline.raw.markdown, markup.quote.markdown, meta.attribute, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.decorator punctuation.decorator, meta.diff.header.from-file, meta.diff.header.git, meta.diff.header.to-file, meta.function punctuation.separator.comma, meta.function-call.arguments.python, meta.function-call, meta.link.inline.markdown punctuation.definition.string, meta.method, meta.structure.dictionary.value.json string.quoted.double, meta.tag.attributes.js, meta.tag.js meta.jsx.children.tsx, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.directive.class.svelte, meta.var.expr, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.markdown, source.css.scss meta.at-rule variable, source.elixir constant.other.keywords.elixir, source.elixir constant.other.symbol.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir support.type.elixir, source.groovy.embedded, source.python variable.language.special, storage.modifier, storage.type.class, storage.type.cs, storage.type.extends, storage.type.function, storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, storage.type.ts, support.class.node.ts, support.class.node.tsx, variable.function, variable.parameter.function.js, variable.parameter.function.python	#77aaff
entity.name.type.alias.ts, entity.name.type.js, entity.name.type.module.js, entity.name.type.ts, meta.function-call.generic.python, meta.function-call.python, storage.type.enum.ts, storage.type.interface.ts, storage.type.type.ts, support.type.builtin.ts, support.type.primitive	#5CBE79
entity.name.function.decorator.python, entity.name.tag.custom, entity.other.attribute-name.id.html, markup.inserted.diff, punctuation.definition.string, source.elixir entity.name.function, source.elixir punctuation.definition.string, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir variable.other.readwrite.module.elixir, string.quoted, string.template, support.constant.json, support.variable.dom, variable.other.global.php punctuation.definition.variable, variable.other.global.php	#8EA765
meta.tag.any.slot.start.html entity.name.tag.html, meta.attribute.client:idle.html, meta.attribute.client:load.html, meta.attribute.client:visible.html, meta.attribute.client:media.html, meta.attribute.client:only.html, keyword.control.conditional.svelte, keyword.control.default, keyword.control.flow.svelte, keyword.control.svelte, keyword.other.animation.svelte, meta.attribute.sveltekit.svelte, punctuation.definition.keyword.svelte, variable.language.prototype, variable.language.this	#78F0E5
entity.name.tag.doctype, keyword.control.conditional, keyword.control.switch, keyword.control.trycatch, keyword.operator.bitwise, meta.delimiter.period, meta.selector, meta.tag.sgml.doctype.html, meta.tag.sgml.doctype, source.elixir .punctuation.binary.elixir, source.go keyword	#FF99FF
italic, markup.italic.markdown	#FF99FF	italic
constant.language.symbol.hashkey.ruby, constant.other.object.key.js, entity.name.label.ts, entity.name.tag.less, entity.name.tag.sass, entity.name.tag.scss, entity.name.tag.yaml, keyword.control.operator, meta.property-list entity.name.tag.reference, meta.property-list entity.name.tag, meta.property-name, punctuation.definition.metadata.markdown, raw, string.quoted.double.json punctuation.definition.string.json, support.constant.meta.property-value, support.constant.vendor.property-value, support.type.property-name, support.type.vendor.property-name, support.variable.property, variable.assignment.coffee, variable.other.jsdoc, variable.other.phpdoc, variable.parameter.function	#7FDBCA	—
constant.character, constant.language.boolean, constant.language.null, constant.language.python, constant.language, constant.other, entity.name.tag.css, entity.name.tag.custom.css, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, source.go constant.language.go, source.go constant.other.placeholder.go, support.constant.font-name.css, support.constant.math, support.constant.property-value.css	#E06666
meta.jsx, text.svelte, source.astro	#eeeeee	bold
comment, comment.line.double-slash	#6A6B72	italic
markup.inline.raw, support.class, support.constant, support.type	#9966B8
invalid, invalid.deprecated	#A22D44
meta.diff, meta.diff.header	#E0EDDD
markup.deleted	#DC322F
markup.changed	#CB4B16
markup.inserted	#219186	—
markup.quote, markup.bold, markup.italic	#22AA44	—
markup.bold	—	bold
markup.italic	—	italic
markup.deleted.diff	#EF535090
string.regexp, string.regexp keyword.other	#5CA7E4	—
support.type, support.class, support.class.component.tsx	#EE7575
invalid	#FFFFFF	—
invalid.deprecated	#FFFFFF	—
object	#CDEBF7	—
invalid.broken	#020E14	—
invalid.unimplemented	#FFFFFF	—
invalid.illegal	#FFFFFF	—
variable.interpolation	#EC5F67	—
punctuation.section.embedded	#D3423E	—
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.definition.parameters, punctuation.separator.arguments	#D9F5DD	—
quote	#697098
entity.name.type.namespace.cs	#B2CCD6	—
markup.bold.markdown, bold	#8EA765	bold
markup.underline.link.markdown, markup.underline.link.image.markdown, entity.other.attribute-name.id	#FF869A	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6

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