Argon

Name: Argon
Author: chaseadamsio

Publisher: chaseadamsioThemes in package: 4

A VS Code Dark Theme with a hint of magenta

Open in VS Code GitHub

Color themes

VS Code preview

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

Argon — Argon

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#20242D
activityBar.foreground#52606B
activityBarBadge.background#C7C8FF
activityBarBadge.foreground#20242D
background#272B34
badge.background#C7C8FF
badge.foreground#20242D
button.background#6CA9FF
descriptionForeground#C7C8FF
diffEditor.insertedTextBackground#A1EF9D33
diffEditor.removedTextBackground#F86F6533
dropdown.background#20242D
editor.background#272B34
editor.findMatchBackground#6CA9FF33
editor.findMatchHighlightBackground#6CA9FF55
editor.findRangeHighlightBackground#67DCF933
editor.foreground#C7C8FF
editor.hoverHighlightBackground#20242D
editor.lineHighlightBackground#2B2E3B
editorBracketMatch.border#757694
editorCodeLens.foreground#52606B
editorCursor.foreground#6CA9FF
editorError.foreground#F86F65
editorGroupHeader.tabsBackground#20242D
editorGutter.addedBackground#A1EF9D
editorGutter.background#272B34
editorGutter.deletedBackground#F86F65
editorGutter.modifiedBackground#6CA9FF
editorHoverWidget.background#20242D
editorHoverWidget.border#404859
editorLineNumber.activeForeground#757694
editorLineNumber.foreground#52606B
editorLink.activeForeground#67DCF9
editorSuggestWidget.background#272B34
editorSuggestWidget.border#404859
editorSuggestWidget.foreground#C7C8FF
editorSuggestWidget.highlightForeground#6CA9FF
editorSuggestWidget.selectedBackground#20242D
editorWarning.foreground#FDC64D
editorWidget.background#20242D
focusBorder#272B34
foreground#C7C8FF
gitDecoration.conflictingResourceForeground#FDC64D
gitDecoration.deletedResourceForeground#F86F65
gitDecoration.ignoredResourceForeground#757694
gitDecoration.modifiedResourceForeground#67DCF9
gitDecoration.untrackedResourceForeground#A1EF9D
input.background#272B34
input.foreground#C7C8FF
input.placeholderForeground#757694
inputOption.activeBorder#6CA9FF
inputValidation.errorBackground#F86F6588
inputValidation.errorBorder#F86F65
inputValidation.infoBackground#6CA9FF88
inputValidation.infoBorder#6CA9FF
inputValidation.warningBackground#FDC64D88
inputValidation.warningBorder#FDC64D
list.activeSelectionBackground#272B34
list.activeSelectionForeground#C7C8FF
list.focusBackground#272B34
list.focusForeground#C7C8FF
list.highlightForeground#6CA9FF
list.hoverBackground#272B34
list.inactiveSelectionBackground#272B34
list.inactiveSelectionForeground#C7C8FF
merge.currentContentBackground#A1EF9D33
merge.currentHeaderBackground#A1EF9D88
merge.incomingContentBackground#6CA9FF33
merge.incomingHeaderBackground#6CA9FF88
notification.background#272B34
notification.buttonBackground#6CA9FF
notification.buttonForeground#272B34
notification.buttonHoverBackground#6CA9FF
notification.errorBackground#272B34
notification.errorForeground#F86F65
notification.foreground#C7C8FF
notification.infoBackground#272B34
notification.infoForeground#67DCF9
notification.warningBackground#272B34
notification.warningForeground#FDC64D
panel.background#20242D
panel.border#20242D
panelTitle.activeForeground#C7C8FF
panelTitle.inactiveForeground#757694
peekView.order#20242D
peekViewEditor.background#20242D
peekViewEditor.matchHighlightBackground#D983F533
peekViewResult.background#20242D
peekViewResult.fileForeground#757694
peekViewResult.lineForeground#757694
peekViewResult.matchHighlightBackground#D983F533
peekViewResult.selectionBackground#272B34
peekViewResult.selectionForeground#C7C8FF
peekViewTitle.background#20242D
peekViewTitleDescription.foreground#C7C8FF
peekViewTitleLabel.foreground#C7C8FF
progressBar.background#6CA9FF
scrollbar.shadow#272B34
selection.background#6CA9FF88
sideBar.background#20242D
sideBar.foreground#C7C8FFCC
sideBarSectionHeader.background#20242D
sideBarSectionHeader.foreground#6CA9FF
sideBarTitle.foreground#6CA9FF
statusBar.background#20242D
statusBar.debuggingBackground#F86F65
statusBar.debuggingForeground#272B34
statusBar.foreground#757694
statusBar.noFolderBackground#20242D
statusBar.noFolderForeground#757694
statusBarItem.hoverBackground#272B34
statusBarItem.prominentBackground#C7C8FF
tab.activeBackground#272B34
tab.activeForeground#C7C8FF
tab.inactiveBackground#20242D
tab.inactiveForeground#757694
terminal.ansiBlack#20242D
terminal.ansiBlue#6CA9FF
terminal.ansiCyan#67DCF9
terminal.ansiGreen#A1EF9D
terminal.ansiMagenta#D983F5
terminal.ansiRed#F86F65
terminal.ansiWhite#C8C8FF
terminal.ansiYellow#FDC64D
terminal.background#272B34
terminal.foreground#C7C8FF
textLink.activeForeground#37CCFF
textLink.foreground#6CA9FF
textSeparator.foreground#757694
titleBar.activeBackground#20242D
titleBar.activeForeground#C7C8FF
titleBar.inactiveForeground#757694
widget.shadow#20242D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#52606B	italic
support.function	#6CA9FF	—
storage.type	#D983F5	italic
support.class	—	bold
punctuation.definition.template-expression	#A1EF9D	bold
meta.brace.round	#C7C8FF	—
constant.language.boolean	#C7C8FF	bold
storage.type.string.go	—	italic
variable.other.object	#67DCF9	bold
variable.object.property	#C7C8FF	bold
meta.import variable.other	#37CCFF	bold
keyword	#D983F5	—
string	#A1EF9D	—
entity.name.function	#37CCFF	—
entity.other.attribute-name	#37CCFF	italic
entity.name.tag, support.type.property-name	#D983F5	—
source.css keyword.other.unit	#C7C8FF	—
support.constant.property-value	#37CCFF	italic
meta.object-literal.key	#D983F5	italic
meta.tag.sgml.doctype	#67DCF9	italic
meta.tag.sgml.doctype punctuation.definition.tag	#C7C8FF	—
meta.tag.sgml.doctype variable.language.documentroot	#FDC64D	—
entity.name.tag.css	#FDC64D	—
markup.quote	#D983F5	italic
markup.heading	#67DCF9	bold
markup.italic	—	italic
markup.bold	—	bold
meta.separator	#67DCF9	—
meta.link.reference.def	#D983F5	—
beginning.punctuation.definition.list	#A1EF9D	—
string.other.link.title	#A1EF9D	—
markup.underline.link	#37CCFF	—
markup.inline.raw	#FDC64D	—
entity.name.type.org	#67DCF9	bold
punctuation.definition.tag.org	#52606B	—
block.language.org	#A1EF9D99	italic
support.type.property-name.org	#67DCF9	—
meta.structure.dictionary.value.org	#A1EF9D	—
punctuation.definition.block.sequence.item	#A1EF9D	—
entity.name.function.go	#67DCF9	italic
support.function.go	#37CCFF	—
string.quoted.double.yaml, string.quoted.single.yaml	#A1EF9D	—
string.unquoted.plain.out.yaml	#C8C8FF	—
entity.name.section.group-title.ini, punctuation.definition.entity.ini	#37CCFF	—
support.type.property-name.json	#C7C8FF	italic
constant.language.json	#37CCFF	italic
string.quoted.double.json	#D983F5	—
string.quoted.double.jsonnet	#D983F5	—
meta.function-call entity.name.function	#C7C8FF	bold
variable.other.object.ts	—	bold
variable.other.object.property.ts	#67DCF9	—
meta.parameters.ts	#C7C8FF	bold
meta.type.annotation.ts	#67DCF9	italic

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