Purple-Dark-Horizon

Name: Purple-Dark-Horizon
Author: Ricardo Amorim

Publisher: Ricardo AmorimThemes in package: 1

Fork of "Dark Horizon", inspired in Victor's Dark Horizon, but focusing on being a purple color theme.

Open in VS Code GitHub

VS Code preview

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

Purple-Dark-Horizon — Purple Dark Horizon

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.activeBackground#16161C
activityBar.background#080808
activityBar.foreground#9f46e7
activityBarBadge.background#9f46e7
activityBarBadge.foreground#06060C
badge.background#2E303E
badge.foreground#D5D8DA
breadcrumbPicker.background#232530
button.background#2E303E
debugToolBar.background#1C1E26
diffEditor.insertedTextBackground#09F7A01A
diffEditor.removedTextBackground#F43E5C1A
dropdown.background#232530
dropdown.listBackground#2E303E
editor.background#0e0e0e
editor.findMatchBackground#000000
editor.findMatchHighlightBackground#1b1b1b
editor.findRangeHighlightBackground#6C6F931A
editor.hoverHighlightBackground#6C6F934D
editor.inactiveSelectionBackground#352a3b
editor.lineHighlightBackground#080808
editor.rangeHighlightBackground#2E303E80
editor.selectionBackground#a42aeb3d
editor.selectionHighlightBackground#1b1b1b
editor.wordHighlightBackground#a42aeb3d
editor.wordHighlightStrongBackground#a42aeb3d
editorBracketMatch.background#6C6F9380
editorBracketMatch.border#6C6F9300
editorCodeLens.foreground#6C6F9380
editorCursor.background#1C1E26
editorCursor.foreground#FB8B24
editorError.foreground#F43E5C
editorGroup.border#1A1C23
editorGroup.dropBackground#6C6F934D
editorGroupHeader.tabsBackground#0e0e0e
editorGutter.addedBackground#09F7A0B3
editorGutter.deletedBackground#F43E5CB3
editorGutter.modifiedBackground#21BFC2B3
editorIndentGuide.activeBackground#2E303E
editorIndentGuide.background#1f1f1f57
editorLineNumber.activeForeground#D5D8DA80
editorLineNumber.foreground#D5D8DA1A
editorOverviewRuler.addedForeground#09F7A080
editorOverviewRuler.border#2E303EB3
editorOverviewRuler.bracketMatchForeground#D5D8DA80
editorOverviewRuler.deletedForeground#F43E5C80
editorOverviewRuler.errorForeground#F43E5CE6
editorOverviewRuler.findMatchForeground#6C6F93
editorOverviewRuler.modifiedForeground#21BFC280
editorOverviewRuler.warningForeground#27D79780
editorRuler.foreground#6C6F934D
editorSuggestWidget.highlightForeground#E95378
editorWarning.foreground#27D797B3
editorWhitespace.foreground#1f1f1f
editorWidget.background#141414
editorWidget.border#232530
errorForeground#F43E5C
extensionButton.prominentBackground#E95378
extensionButton.prominentHoverBackground#E9436D
focusBorder#1A1C23
foreground#D5D8DA
gitDecoration.addedResourceForeground#27D797B3
gitDecoration.deletedResourceForeground#F43E5C
gitDecoration.ignoredResourceForeground#D5D8DA4D
gitDecoration.modifiedResourceForeground#FAB38E
gitDecoration.untrackedResourceForeground#27D797
input.background#141414
inputOption.activeBorder#E9436D80
inputValidation.errorBackground#F43E5C80
inputValidation.errorBorder#F43E5C00
list.activeSelectionBackground#2E303E80
list.activeSelectionForeground#D5D8DA
list.dropBackground#6C6F9380
list.errorForeground#F43E5CE6
list.focusBackground#2E303E80
list.focusForeground#D5D8DA
list.highlightForeground#E95378
list.hoverBackground#2E303E80
list.hoverForeground#D5D8DA
list.inactiveFocusBackground#2E303E80
list.inactiveSelectionBackground#2E303E4D
list.inactiveSelectionForeground#D5D8DA
list.warningForeground#bd792cb3
panelTitle.activeBorder#E95378
peekView.border#1A1C23
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#6C6F9380
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#6C6F9380
peekViewResult.selectionBackground#2E303E80
peekViewTitle.background#232530
pickerGroup.foreground#E95378E6
progressBar.background#992de0
scrollbar.shadow#16161C
scrollbarSlider.activeBackground#ae56e9d0
scrollbarSlider.background#ae56e93b
scrollbarSlider.hoverBackground#ae56e978
selection.background#6C6F9380
sideBar.background#0e0e0e
sideBar.dropBackground#6C6F934D
sideBar.foreground#D5D8DA80
sideBarSectionHeader.background#0e0e0e
sideBarSectionHeader.foreground#D5D8DAB3
statusBar.background#8130df
statusBar.debuggingBackground#e03d63
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffff
statusBar.noFolderBackground#1C1E26
statusBarItem.hoverBackground#9a4df1
statusBarItem.prominentBackground#2E303E
statusBarItem.prominentHoverBackground#6C6F93
statusBarItem.remoteBackground#874acc
statusBarItem.remoteForeground#ffffff
tab.activeBackground#70328db2
tab.activeBorder#a653e9
tab.border#1C1E2600
tab.inactiveBackground#0e0e0e
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#FAB795
terminal.foreground#D5D8DA
terminal.selectionBackground#6C6F934D
terminalCursor.background#D5D8DA
terminalCursor.foreground#6C6F9380
textLink.activeForeground#9143e9
textLink.foreground#a153e9
titleBar.activeBackground#0e0e0e
titleBar.inactiveBackground#1C1E26
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BBBBBB4D	italic
constant.character.escape	#25B0BCE6	—
entity.name	#FAC29AE6	—
entity.name.function	#FDB849	—
entity.name.tag	#569cd6	bold
entity.name.type, storage.type.cs	#02f5a5	—
entity.other.attribute-name	#4ec9b0	—
entity.other.inherited-class	#FAB795E6	—
entity.other.attribute-name.id	#25B0BCE6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
variable	#9cdcfe	—
entity.name.type.class.ts, entity.name.type.interface.ts	#E0AAFF	—
variable.other.constant.property.ts, variable.other.constant.object.property.ts	#FFFFFF	—
variable.other.constant, variable.other.enummember	#BD93F9	—
meta.definition.function, meta.definition.method	#50FA7B	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#fab050	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter	#FFB86C	italic
header	#BD93F9	—
keyword.other.this, variable.language, variable.parameter.function.language.special	#BD93F9	—
support.variable.property.js	#BD93F9	—
keyword.other.unit	#F09483E6	—
markup.quote	#FAB795B3	italic
markup.heading, entity.name.section	#E95678E6	—
markup.bold	#B877DBE6	bold
markup.italic	#25B0BCE6	italic
markup.inline.raw, markup.fenced_code.block	#F09483E6	—
markup.underline.link	#FAB795E6	—
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language	#f08bfd	bold
storage.type	#3cc1d3	italic bold
text.html.derivative	#ced4da	—
string.quoted, string.template, constant, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.numeric.decimal, constant.language.null	#eaac8b	—
string.regexp	#F09483E6	—
string.other.link	#F09483E6	—
support	#b547ff	italic
support.function	#25B0BCE6	—
support.variable	#E95678E6	—
support.type.property-name, meta.object-literal.key	#bf56e9e6
support.type.property-name.css	#d9d9d9	—
variable.parameter	—	italic
string.template meta.embedded	#BBBBBB	—
punctuation.definition.tag, punctuation.separator	#ffffff42	—
punctuation.definition.template-expression	#B877DBE6	—
punctuation.section.embedded	#B877DBE6	—
punctuation.definition.list	#F09483E6	—

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