Neon VerdigrisPlus Theme

Name: Neon VerdigrisPlus Theme
Author: Martin Adelstein

Publisher: Martin AdelsteinThemes in package: 1

A minimal dark a little more colorful monochrome theme with green highlights

GitHub

VS Code preview

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

Neon VerdigrisPlus Theme — Neon Verdigris Plus

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.background#1d2027
activityBar.dropBackground#343d46
activityBar.foreground#65737e
activityBar.inactiveForeground#65737e50
activityBarBadge.background#343d46
activityBarBadge.foreground#00ef97
badge.background#2b303b
badge.foreground#65737e
breadcrumb.activeSelectionForeground#00ef97
breadcrumb.background#2b303b
breadcrumb.focusForeground#eff1f5
breadcrumb.foreground#eff1f5a0
breadcrumbPicker.background#21252d
button.background#343d46
button.foreground#00ef97
button.hoverBackground#4f5b66
debugExceptionWidget.background#1d2027
debugExceptionWidget.border#1d2027
debugToolBar.background#2b303b
descriptionForeground#65737e
diffEditor.insertedTextBackground#47cc9b30
diffEditor.removedTextBackground#cc475630
dropdown.background#343d46
dropdown.border#343d46
dropdown.foreground#a7adba
dropdown.listBackground#21252d
editor.background#262b35
editor.findMatchBackground#65737e
editor.findMatchHighlightBackground#65737ea0
editor.findRangeHighlightBackground#343d46a0
editor.foreground#a7adba
editor.hoverHighlightBackground#4f5b66a0
editor.inactiveSelectionBackground#4f5b66a0
editor.lineHighlightBackground#343d46
editor.lineHighlightBorder#343d46
editor.rangeHighlightBackground#343d46a0
editor.selectionBackground#4f5b66
editor.selectionHighlightBackground#4f5b66a0
editor.snippetFinalTabstopHighlightBorder#00ef97
editor.snippetTabstopHighlightBackground#65737e
editor.wordHighlightBackground#65737ea0
editor.wordHighlightStrongBackground#65737ea0
editorBracketMatch.background#2b303b
editorBracketMatch.border#65737e
editorCodeLens.foreground#4f5b66
editorCursor.background#65737e
editorCursor.foreground#00ef97
editorError.border#00000000
editorError.foreground#cc4756
editorGroup.border#21252d
editorGroup.dropBackground#343d46a0
editorGroup.emptyBackground#21252d
editorGroupHeader.noTabsBackground#21252d
editorGroupHeader.tabsBackground#21252d
editorGutter.addedBackground#47cc9b
editorGutter.background#2b303b
editorGutter.commentRangeForeground#c0c5ce
editorGutter.deletedBackground#cc4756
editorGutter.modifiedBackground#47bacc
editorHint.border#00000000
editorHint.foreground#00ef97
editorHoverWidget.background#21252d
editorHoverWidget.border#21252d
editorIndentGuide.activeBackground#4f5b66
editorIndentGuide.background#343d46
editorInfo.border#00000000
editorInfo.foreground#47bacc
editorLineNumber.activeForeground#4f5b66
editorLineNumber.foreground#4f5b66
editorLink.activeForeground#00ef97
editorMarkerNavigation.background#1d2027
editorMarkerNavigationError.background#cc4756
editorMarkerNavigationInfo.background#47bacc
editorMarkerNavigationWarning.background#bacc47
editorOverviewRuler.addedForeground#47cc9ba0
editorOverviewRuler.border#21252d
editorOverviewRuler.bracketMatchForeground#00ef97a0
editorOverviewRuler.commonContentForeground#65737ea0
editorOverviewRuler.currentContentForeground#47bacca0
editorOverviewRuler.deletedForeground#cc4756a0
editorOverviewRuler.errorForeground#cc4756a0
editorOverviewRuler.findMatchForeground#00ef97a0
editorOverviewRuler.incomingContentForeground#47cc9ba0
editorOverviewRuler.infoForeground#47bacca0
editorOverviewRuler.modifiedForeground#47bacca0
editorOverviewRuler.rangeHighlightForeground#00ef97a0
editorOverviewRuler.selectionHighlightForeground#65737ea0
editorOverviewRuler.warningForeground#bacc47
editorOverviewRuler.wordHighlightForeground#65737ea0
editorOverviewRuler.wordHighlightStrongForeground#65737ea0
editorPane.background#2b303b
editorRuler.foreground#65737e
editorSuggestWidget.background#21252d
editorSuggestWidget.border#21252d
editorSuggestWidget.foreground#65737e
editorSuggestWidget.highlightForeground#a7adba
editorSuggestWidget.selectedBackground#343d46
editorUnnecessaryCode.border#bacc47
editorUnnecessaryCode.opacity#000000a0
editorWarning.border#00000000
editorWarning.foreground#bacc47
editorWhitespace.foreground#343d46
editorWidget.background#21252d
editorWidget.border#21252d
editorWidget.resizeBorder#00ef97
errorForeground#cc4756
extensionButton.prominentBackground#343d46
extensionButton.prominentForeground#00ef97
extensionButton.prominentHoverBackground#4f5b66
focusBorder#00ef97
foreground#eff1f5
gitDecoration.addedResourceForeground#47cc9b
gitDecoration.conflictingResourceForeground#bacc47
gitDecoration.deletedResourceForeground#cc4756
gitDecoration.ignoredResourceForeground#4f5b66c0
gitDecoration.modifiedResourceForeground#47bacc
gitDecoration.submoduleResourceForeground#4f5b66c0
gitDecoration.untrackedResourceForeground#a7adba
gitlens.gutterBackgroundColor#00000000
gitlens.gutterForegroundColor#c0c5ce
gitlens.gutterUncommittedForegroundColor#00ef97
gitlens.lineHighlightBackgroundColor#343d46a0
gitlens.lineHighlightOverviewRulerColor#00ef9750
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#4f5b66
input.background#343d46
input.foreground#dfe1e8
input.placeholderForeground#65737e
inputOption.activeBackground#00ef97
inputOption.activeBorder#00ef97
inputValidation.errorBackground#1d2027
inputValidation.errorBorder#cc4756
inputValidation.infoBackground#1d2027
inputValidation.infoBorder#47bacc
inputValidation.warningBackground#1d2027
inputValidation.warningBorder#bacc47
list.activeSelectionBackground#343d46
list.activeSelectionForeground#a7adba
list.dropBackground#343d46
list.errorForeground#cc4756
list.focusBackground#4f5b66
list.focusForeground#a7adba
list.highlightForeground#00ef97
list.hoverBackground#343d46
list.hoverForeground#a7adba
list.inactiveFocusBackground#343d46
list.inactiveSelectionBackground#2b303b
list.inactiveSelectionForeground#a7adba
list.invalidItemForeground#cc4756
list.warningForeground#bacc47
menu.background#2b303b
menu.foreground#a7adba
menu.selectionBackground#343d46
menu.selectionForeground#a7adba
menu.separatorBackground#4f5b66
menubar.selectionBackground#2b303b
menubar.selectionForeground#00ef97
merge.commonContentBackground#65737e30
merge.commonHeaderBackground#65737e50
merge.currentContentBackground#47bacc30
merge.currentHeaderBackground#47bacc50
merge.incomingContentBackground#47cc9b30
merge.incomingHeaderBackground#47cc9b50
notificationCenterHeader.background#343d46
notificationCenterHeader.foreground#dfe1e8
notificationLink.foreground#00ef97
notifications.background#343d46
notifications.border#343d46
notifications.foreground#dfe1e8
panel.background#21252d
panel.border#21252d
panel.dropBackground#343d46
panelTitle.activeBorder#a7adba
panelTitle.activeForeground#c0c5ce
panelTitle.inactiveForeground#65737e
peekView.border#21252d
peekViewEditor.background#1d2027
peekViewEditor.matchHighlightBackground#4f5b66
peekViewEditorGutter.background#1d2027
peekViewResult.background#21252d
peekViewResult.fileForeground#c0c5ce
peekViewResult.lineForeground#a7adba
peekViewResult.matchHighlightBackground#343d46
peekViewResult.selectionBackground#1d2027
peekViewResult.selectionForeground#00ef97
peekViewTitle.background#21252d
peekViewTitleDescription.foreground#65737e
peekViewTitleLabel.foreground#65737e
pickerGroup.border#00ef97
pickerGroup.foreground#00ef97
progressBar.background#00ef97
scrollbar.shadow#21252d
scrollbarSlider.activeBackground#00ef97a0
scrollbarSlider.background#4f5b6650
scrollbarSlider.hoverBackground#00ef9750
selection.background#a7adba
settings.checkboxBackground#343d46
settings.checkboxBorder#343d46
settings.checkboxForeground#a7adba
settings.dropdownBackground#343d46
settings.dropdownBorder#343d46
settings.dropdownForeground#a7adba
settings.dropdownListBorder#21252d
settings.headerForeground#dfe1e8
settings.modifiedItemIndicator#47bacc
settings.numberInputBackground#343d46
settings.numberInputForeground#dfe1e8
settings.textInputBackground#343d46
settings.textInputForeground#dfe1e8
sideBar.background#262b35
sideBar.dropBackground#2b303b
sideBar.foreground#65737e
sideBarSectionHeader.background#1d2027
sideBarSectionHeader.foreground#65737e
sideBarTitle.foreground#a7adba
statusBar.background#343d46
statusBar.debuggingBackground#6874d5
statusBar.debuggingForeground#2b303b
statusBar.foreground#a7adba
statusBar.noFolderBackground#00ef97
statusBar.noFolderForeground#2b303b
statusBarItem.activeBackground#65737e
statusBarItem.hoverBackground#4f5b66
statusBarItem.prominentBackground#1d2027
statusBarItem.prominentHoverBackground#2b303b
tab.activeBackground#2b303b
tab.activeBorderTop#65737e
tab.activeForeground#a7adba
tab.border#21252d
tab.hoverBackground#343d46
tab.inactiveBackground#21252d
tab.inactiveForeground#65737e
tab.unfocusedActiveBorderTop#2b303b
tab.unfocusedActiveForeground#a7adba
tab.unfocusedHoverBackground#343d46
tab.unfocusedInactiveForeground#65737e
terminal.ansiBlack#343d46
terminal.ansiBlue#8fa1b3
terminal.ansiBrightBlack#343d46
terminal.ansiBrightBlue#8fa1b3
terminal.ansiBrightCyan#96b5b4
terminal.ansiBrightGreen#a3be8c
terminal.ansiBrightMagenta#b48ead
terminal.ansiBrightRed#bf616a
terminal.ansiBrightWhite#eff1f5
terminal.ansiBrightYellow#ab7967
terminal.ansiCyan#96b5b4
terminal.ansiGreen#a3be8c
terminal.ansiMagenta#b48ead
terminal.ansiRed#bf616a
terminal.ansiWhite#eff1f5
terminal.ansiYellow#ab7967
terminal.background#2b303b
terminal.border#21252d
terminal.foreground#eff1f5
terminal.selectionBackground#4f5b66a0
terminalCursor.background#eff1f5
terminalCursor.foreground#eff1f5
textBlockQuote.background#343d46
textBlockQuote.border#00ef97
textCodeBlock.background#343d46
textLink.activeForeground#00ef97
textLink.foreground#a7adba
textPreformat.foreground#00ef97
textSeparator.foreground#00ef97
titleBar.activeBackground#1d2027
titleBar.activeForeground#c0c5ce
titleBar.inactiveBackground#1d2027a0
titleBar.inactiveForeground#c0c5cea0
walkThrough.embeddedEditorBackground#21252d
welcomePage.buttonBackground#21252d
welcomePage.buttonHoverBackground#343d46
widget.shadow#1d2027

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.variable, keyword.operator.assignment, meta.template, punctuation.accessor, support.constant, variable	#a7adba
comment	#65737e	normal
punctuation.definition.comment	#00ef97
string	#00ef97	normal
punctuation.definition.string	—
constant.language, constant.numeric	#00ef97	normal
keyword - keyword.operator, keyword.control, storage	#65737e	normal
storage.type, storage.modifier	#C792EA	bold
keyword.operator	#00ef97	—
entity.name.type, entity.name.class, support.type, support.class	#c0c5ce	bold
variable.language.this	#65737e	—
punctuation.definition.template-expression, entity.tag.embedded	#4d85ff	bold
constant.character.escape	—	bold
meta.definition.function, meta.definition.method	#00ef97	bold
storage.type.function.arrow	#C792EA	bold
meta.function-call	#c0c5ce	normal
variable.parameter	#c0c5ce	normal
keyword.operator.type.annotation, punctuation.definition.parameters, punctuation.definition.seperator, punctuation.separator, punctuation.terminator	#65737e	—
token.debug-token	#6874d5	—
token.info-token	#47bacc	—
token.warn-token	#bacc47	—
token.error-token	#cc4756	—
emphasis	—	normal
strong	—	bold
markup.bold	—	bold
markup.normal	—	normal
markup.underline	—	underline
markup.heading	#00ef97	bold
entity.name.section.markdown	#c0c5ce	—
markup.inline.raw.string.markdown	#dfe1e8	normal
markup.underline.link.markdown	#c0c5ce	bold
beginning.punctuation.definition.list.markdown, punctuation.definition.bold.markdown, punctuation.definition.normal.markdown, punctuation.definition.raw.markdown	#00ef97	bold
support.type.property-name.json	#a7adba
constant.language.json, constant.numeric.json	—	bold
punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json	#00ef97	—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json	#65737e	—
constant.other.groovy	#c0c5ce	bold
constant.other.key.groovy	#c0c5ce	normal
source.terraform.embedded.source	#65737e	normal
entity.other.attribute-name.terraform	#c0c5ce
keyword.other.function.inline.terraform	#dfe1e8	bold
keyword.other.section.begin.terraform, keyword.other.section.end.terraform	#00ef97	bold
punctuation.definition.entity.css, support.type.property-name.css	#4d85ff
entity.other.attribute-name.class.css	#00ef97	bold
entity.name.tag.css, entity.name.tag.reference.scss	#00ef97	bold
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css	#00ef97	—
entity.other.attribute-name.pseudo-element.css	#00ef97	normal
keyword.other.important.css, keyword.other.important.scss	#00ef97	bold
variable.scss	#00ef97	—
entity.name.tag.yaml	#a7adba
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#9e54ff	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#ffac07	—
entity.other.attribute-name, variable.other	#4d85ff	—
keyword.control	#9e54ff	—
constant.other.color, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, variable.other.property	#00bbff	—
meta.tag	#c0c5ce	—

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