Drab Neon

Name: Drab Neon
Author: Brian Buie

Publisher: Brian BuieThemes in package: 1

It's neat.

GitHub

VS Code preview

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

Drab Neon — Drab Neon 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.activeBackground#262A31
activityBar.activeBorder#DE79B2
activityBar.background#1E2227
activityBar.border#000000
activityBar.foreground#DE79B2
activityBar.inactiveForeground#546685
activityBarBadge.background#DE79B2
activityBarBadge.foreground#000000
badge.background#DE79B2
badge.foreground#000000
disabledForeground#546685
editor.background#262A31
editor.findMatchBackground#5A9ED766
editor.findMatchHighlightBackground#5A9ED733
editor.foldBackground#22262C
editor.foreground#B0ACBE
editor.lineHighlightBackground#DE79B20D
editor.selectionBackground#DE79B259
editor.selectionHighlightBackground#B0ACBE26
editorBracketHighlight.foreground1#DE79B2
editorBracketHighlight.foreground2#9872C3
editorBracketHighlight.foreground3#5A9ED7
editorBracketHighlight.unexpectedBracket.foreground#CD6F77
editorBracketMatch.border#262A31
editorCursor.foreground#B0ACBE
editorGroup.border#000000
editorGroup.dropBackground#DE79B211
editorGroupHeader.tabsBackground#1E2227
editorGutter.addedBackground#6EC97966
editorGutter.deletedBackground#CD6F7766
editorGutter.modifiedBackground#5A9ED7
editorHoverWidget.background#1E2227
editorHoverWidget.border#262A31
editorHoverWidget.foreground#B0ACBE
editorInfo.border#000000
editorLineNumber.activeForeground#7D6C93
editorLineNumber.foreground#546685
editorOverviewRuler.addedForeground#262A31
editorOverviewRuler.deletedForeground#262A31
editorOverviewRuler.errorForeground#CD6F77
editorOverviewRuler.findMatchForeground#5A9ED733
editorOverviewRuler.modifiedForeground#262A31
editorOverviewRuler.selectionHighlightForeground#DE79B233
editorWidget.background#1E2227
editorWidget.border#262A31
editorWidget.foreground#B0ACBE
errorForeground#BF7D83
focusBorder#262A31
gitDecoration.addedResourceForeground#6EC979
gitDecoration.ignoredResourceForeground#546685
gitDecoration.modifiedResourceForeground#5A9ED7
gitDecoration.renamedResourceForeground#5A9ED7
gitDecoration.stageModifiedResourceForeground#5A9ED7
gitDecoration.untrackedResourceForeground#6EC979
icon.foreground#B0ACBE
input.background#191B20
input.foreground#B0ACBE
list.activeSelectionBackground#DE79B20D
list.activeSelectionForeground#B0ACBE
list.activeSelectionIconForeground#B0ACBE
list.deemphasizedForeground#546685
list.dropBackground#DE79B212
list.errorForeground#CD6F77
list.filterMatchBackground#CD6F77
list.focusBackground#DE79B20D
list.focusForeground#DE79B2
list.focusHighlightForeground#DE79B2
list.highlightForeground#DE79B2
list.hoverBackground#DE79B20D
list.hoverForeground#B0ACBE
list.inactiveFocusBackground#DE79B20D
list.inactiveSelectionBackground#DE79B20D
list.inactiveSelectionForeground#B0ACBE
list.inactiveSelectionIconForeground#B0ACBE
list.warningForeground#B7B767
minimap.errorHighlight#CD6F77
minimap.findMatchHighlight#DE79B20D
minimapGutter.addedBackground#6EC979
minimapGutter.modifiedBackground#5A9ED7
panel.background#262A31
panel.border#000000
panelSection.dropBackground#DE79B211
panelTitle.activeBorder#DE79B2
panelTitle.activeForeground#B0ACBE
panelTitle.inactiveForeground#546685
peekView.border#9872C3
peekViewEditor.background#1D1E26
peekViewEditor.matchHighlightBackground#DE79B266
peekViewResult.background#1A1A21
peekViewResult.lineForeground#546685
peekViewResult.matchHighlightBackground#DE79B266
peekViewTitleDescription.foreground#546685
scrollbar.shadow#262A31
scrollbarSlider.activeBackground#393F4A
scrollbarSlider.background#313740
scrollbarSlider.hoverBackground#353B45
searchEditor.findMatchBackground#DE79B20D
sideBar.background#1E2227
sideBar.border#000000
sideBar.foreground#B0ACBE
sideBarSectionHeader.background#1E2227
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#B0ACBE
sideBarTitle.foreground#B0ACBE
statusBar.background#1E2227
statusBar.border#000000
statusBar.debuggingBackground#DE79B211
statusBar.foreground#B0ACBE
tab.activeBackground#262A31
tab.activeForeground#B0ACBE
tab.hoverBackground#262A31
tab.inactiveBackground#1E2227
tab.inactiveForeground#B0ACBE
tab.unfocusedActiveForeground#B0ACBE
tab.unfocusedHoverBackground#262A31
tab.unfocusedInactiveBackground#1E2227
tab.unfocusedInactiveForeground#B0ACBE
terminal.ansiBlack#000000
terminal.ansiBlue#5A9ED7
terminal.ansiBrightBlack#1E2227
terminal.ansiBrightBlue#A4C9E9
terminal.ansiBrightCyan#8BD1CE
terminal.ansiBrightGreen#B2E2B8
terminal.ansiBrightMagenta#F2CCE1
terminal.ansiBrightRed#E5B5B9
terminal.ansiBrightWhite#EAE9EE
terminal.ansiBrightYellow#D3D3A1
terminal.ansiCyan#52BAB6
terminal.ansiGreen#6EC979
terminal.ansiMagenta#DE79B2
terminal.ansiRed#CD6F77
terminal.ansiWhite#B0ACBE
terminal.ansiYellow#B7B767
terminal.background#262A31
terminal.foreground#B0ACBE
terminal.selectionBackground#DE79B259
titleBar.activeBackground#1E2227
titleBar.activeForeground#B0ACBE
titleBar.border#000000
titleBar.inactiveBackground#1E2227
titleBar.inactiveForeground#B0ACBE
tree.indentGuidesStroke#262A31
widget.shadow#262A31

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, punctuation.definition.keyword, keyword.expressions-and-types.swift, keyword.operator.new, keyword.operator.of, keyword.operator.delete, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special, storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, storage.modifier	#9872C3	—
keyword.operator, storage.type.function.arrow, punctuation.terminator.statement, punctuation.terminator.rule, meta.delimiter.comma	#9872C3	—
support.variable.other.property, support.function.magic, support.function.method, support.variable, support.type.object.module, support.type.object.module keyword.operator, variable.other.predefined, support.type.property-name, string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp, constant.character.escape, constant.character.string.escape, constant.regexp, constant.other.date, constant.other.timestamp, variable.other.alias.yaml	#52BAB6	—
support.constant.property-value.css, support.constant.font-name.css, support.constant.vendored.property-value.css, support.constant.color.w3c-standard-color-name.css, support.function.misc.css, support.function.transform.css	#DFA465	—
constant.other.key.perl, variable.other.object, meta.selectionset.graphql variable, meta.function-call variable.other.readwrite, constant.other.database-name.sql, constant.other.table-name.sql	#B0ACBE	—
entity.name.tag.yaml, constant.other.object.key, meta.property.object, entity.name.function.accessor, variable.other.property, support.type.property-name	#B0ACBE	—
support.type.property-name.json, entity.other.attribute-name, meta.property-name support.type.property-name, meta.structure.dictionary.json punctuation.support.type.property-name	#DE79B2	—
entity.name.function.method, entity.name.function, entity.name.fragment.graphql, variable.fragment.graphql, support.function	#5A9ED7	—
constant, string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, meta.property-value.css, keyword.other.unit	#B7B767	—
entity.name.type.class, entity.name.class, entity.other.inherited-class, variable.other.class, variable.language.this, entity.name.type.instance	#DFA465	—
variable.parameter, meta.function.parameters, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, meta.selectionset.graphql meta.arguments variable	#B0ACBE	italic
entity.name.tag.html, entity.name.tag.css, entity.name.tag.reference.scss, entity.name.tag.tsx, entity.name.tag.open.jsx, entity.name.tag.open.tsx, entity.name.tag.close.jsx, entity.name.tag.close.tsx, support.class.component.open, support.class.component.close, punctuation.definition.tag, meta.selector, meta.attribute-selector.scss, meta.selector entity.other.attribute-name	#6EC979	—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#9872C3	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.brace.square, meta.brace.curly, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#B0ACBE	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment, storage.type.class.jsdoc, entity.name.type.instance.jsdoc	#546685	italic
keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml	#9872C3	italic
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#B0ACBE	—
log.error	#CD6F77	—
log.warning	#B7B767	—
log.info	#52BAB6	—
log.debug	#546685	—
log.constant	#B0ACBE	—
emphasis, markup.italic	—	italic
strong, markup.bold	—	bold
markup.inserted	#6EC979	—
markup.deleted	#CD6F77	—
markup.error	#CD6F77	—
markup.changed	#B7B767	—
markup.underline	—	underline
invalid	#CD6F77	underline italic
markup.heading, markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#DE79B2	bold
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#5A9ED7	—
markup.inline.raw, markup.raw.restructuredtext	#6EC979	—
markup.underline.link, markup.underline.link.image	#5A9ED7	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#52BAB6	—
entity.name.directive.restructuredtext, markup.quote, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#B7B767	italic
meta.separator.markdown	#9872C3	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#6EC979	—
punctuation.definition.constant.restructuredtext	#DE79B2	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#B0ACBE	—

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