Voodoo

Name: Voodoo
Author: liamsheppard

Publisher: liamsheppardThemes in package: 1

A dark, supernatural and neon-inspired theme

Open in VS Code GitHub

VS Code preview

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

Voodoo — Voodoo

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#1e2035
activityBar.foreground#fff
activityBarBadge.background#93ff66
activityBarBadge.foreground#1e2035
button.background#6e61ff
button.foreground#fff
button.hoverBackground#6e61ffdd
debugToolBar.background#1e2035
diffEditor.insertedTextBackground#00ea8c22
diffEditor.removedTextBackground#ef476f44
dropdown.background#434770
dropdown.border#515587
dropdown.foreground#d3d4d9
editor.background#25273e
editor.findMatchBackground#3535ffee
editor.findMatchHighlightBackground#3535ff55
editor.findRangeHighlightBackground#3535ff55
editor.foldBackground#1e203588
editor.foreground#d3d4d9
editor.hoverHighlightBackground#93ff6622
editor.lineHighlightBackground#1e2035
editor.lineHighlightBorder#1e2035
editor.rangeHighlightBackground#3535ff55
editor.selectionBackground#3535ffbb
editor.selectionHighlightBackground#3535ff55
editor.wordHighlightBackground#3535ff55
editor.wordHighlightStrongBackground#3535ff99
editorBracketMatch.background#3535ff55
editorBracketMatch.border#fff
editorCodeLens.foreground#525889
editorCursor.foreground#93ff66
editorError.foreground#ef476f
editorGroup.border#434770
editorGroup.dropBackground#1e203588
editorGroup.emptyBackground#1e2035
editorGroupHeader.tabsBackground#1e2035
editorGutter.addedBackground#00ea8caa
editorGutter.background#25273e
editorGutter.deletedBackground#ef476faa
editorGutter.modifiedBackground#6e61ffaa
editorHoverWidget.background#1e2035
editorHoverWidget.border#1e2035
editorHoverWidget.foreground#d3d4d9
editorIndentGuide.background#6e61ff33
editorLineNumber.foreground#434770
editorLink.activeForeground#6e61ff
editorMarkerNavigation.background#525889
editorMarkerNavigationError.background#ef476f
editorMarkerNavigationWarning.background#f1d302
editorOverviewRuler.addedForeground#00ea8caa
editorOverviewRuler.border#515587
editorOverviewRuler.bracketMatchForeground#d3d4d9aa
editorOverviewRuler.deletedForeground#ef476faa
editorOverviewRuler.errorForeground#ef476faa
editorOverviewRuler.findMatchForeground#3535ffaa
editorOverviewRuler.modifiedForeground#6e61ffaa
editorOverviewRuler.warningForeground#f1d302aa
editorSuggestWidget.background#1e2035
editorSuggestWidget.border#1e2035
editorSuggestWidget.highlightForeground#6e61ff
editorWarning.foreground#f1d302
editorWhitespace.foreground#6e61ff33
editorWidget.background#25273e
errorForeground#93ff66
extensionButton.prominentBackground#6e61ff
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#6e61ffdd
focusBorder#434770
gitDecoration.addedResourceForeground#93ff66
gitDecoration.conflictingResourceForeground#f1d302
gitDecoration.deletedResourceForeground#ef476f
gitDecoration.ignoredResourceForeground#525889
gitDecoration.modifiedResourceForeground#6e61ff
gitDecoration.untrackedResourceForeground#00ea8c
gitlens.trailingLineForegroundColor#51557D
input.background#434770
input.border#434770
input.foreground#fff
inputOption.activeBorder#93ff66
list.activeSelectionBackground#93ff66
list.activeSelectionForeground#1e2035
list.errorForeground#ef476f
list.focusBackground#17192b
list.highlightForeground#6e61ff
list.hoverBackground#00000088
list.inactiveSelectionBackground#00000044
list.inactiveSelectionForeground#93ff66
list.warningForeground#f1d302
merge.currentHeaderBackground#00ea8c77
merge.incomingHeaderBackground#6e61ff99
minimap.errorHighlight#ef476f
minimap.findMatchHighlight#3535ff
minimap.selectionHighlight#93ff66
minimap.warningHighlight#f1d302
panel.background#1e2035
panel.border#515587
panelTitle.activeBorder#93ff66
panelTitle.activeForeground#93ff66
panelTitle.inactiveForeground#525889
peekView.border#1e2035
peekViewEditor.background#1e2035
peekViewEditor.matchHighlightBackground#3535ff55
peekViewEditorGutter.background#1e2035
peekViewResult.matchHighlightBackground#3535ff55
peekViewTitle.background#1e2035
pickerGroup.border#6e61ff33
pickerGroup.foreground#525889
scrollbarSlider.activeBackground#434770dd
scrollbarSlider.background#43477066
scrollbarSlider.hoverBackground#434770aa
sideBar.background#17192b
sideBarSectionHeader.background#17192b
statusBar.background#1e2035
statusBar.debuggingBackground#ef476f
tab.activeBackground#25273e
tab.activeForeground#93ff66
tab.border#1e2035
tab.inactiveBackground#1e2035
tab.inactiveForeground#434770
terminal.ansiBlack#525889
terminal.ansiBlue#18a5fc
terminal.ansiBrightBlack#525889
terminal.ansiBrightBlue#18a5fc
terminal.ansiBrightCyan#00ea8c
terminal.ansiBrightGreen#93ff66
terminal.ansiBrightMagenta#6e61ff
terminal.ansiBrightRed#ef476f
terminal.ansiBrightWhite#e5e9f0
terminal.ansiBrightYellow#f1d302
terminal.ansiCyan#00ea8c
terminal.ansiGreen#93ff66
terminal.ansiMagenta#6e61ff
terminal.ansiRed#ef476f
terminal.ansiWhite#e5e9f0
terminal.ansiYellow#f1d302
textLink.foreground#18a5fc
titleBar.activeBackground#1e2035
tree.indentGuidesStroke#434770

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#515587	—
string	#93ff66	—
constant.numeric	#f1d302	—
storage	#6e61ff
storage.type	#6e61ff	italic
meta.function-call.arguments variable.parameter.function-call	#00ea8c
constant.language	#ef476f	—
constant.character, constant.other	#ef476f	—
entity.name.class, entity.name.type	#ef476f	italic
keyword.operator.new	#f1d302	—
entity.other.inherited-class	#ef476f	italic
entity.name.tag	#ef476f
entity.other.attribute-name	#6e61ff	italic
entity.name.function, meta.function-call.generic	#f1d302
support.function	#f1d302
support.constant	#f1d302
support.type, support.class	#00ea8c
invalid	#d3d4d9	—
variable.scss, variable.argument.css	#ef476f	—
meta.property-value.css, meta.property-value.scss	#ef476f	—
meta.diff, meta.diff.header	#e5e9f0	italic
markup.changed	#6e61ff	—
markup.deleted	#ef476f	—
markup.inserted	#00ea8c	—
keyword.fragment.graphql, keyword.on.graphql	#6e61ff	—
variable.graphql	#00ea8c	—
variable.parameter.graphql	#f1d302	—
text.haml punctuation.definition.tag	#6e61ff
text.html.basic constant.character.entity.html	#f1d302	—
text.html.basic constant.other.inline-data	#ef476f	italic
keyword.control.trycatch	#ef476f	—
keyword.other.debugger	#ef476f	italic
keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison	#ef476f
support.function.console	#6e61ff	italic
meta.object-literal.key	#00ea8c	—
storage.type.class.jsdoc	#00ea8c	—
comment.block.documentation.js storage.type.class.jsdoc	#00ea8c99	—
comment.block.documentation.js entity.name.type.instance.jsdoc	#ef476f99	—
comment.block.documentation.js variable.other.jsdoc	#6e61ff99	—
support.type.primitive	#6e61ff	—
keyword.control.default, keyword.control.export, keyword.control.import, meta.import	#6e61ff	italic
meta.import variable.other.readwrite.alias	#00ea8c
keyword.control.conditional, keyword.control.switch, keyword.control.flow	#6e61ff	—
variable.language.this	#6e61ff	—
keyword.control.loop	#ef476f	—
meta.template.expression	#d3d4d9	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#ef476f	—
meta.object.type meta.definition.property	#f1d302
string.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp	#f1d302	—
string.regexp punctuation	#ef476f	—
string.regexp keyword.control.anchor, string.regexp keyword.operator	#6e61ff	—
variable.other.constant, variable.other.constant.property	#ef476f	—
keyword.operator.expression.typeof, keyword.operator.spread, keyword.operator.rest	#6e61ff	—
markup.quote, markup.bold	#6e61ff	—
markup.italic	—	italic
beginning.punctuation.definition.list.markdown, meta.separator.markdown	#515587	—
markup.heading.markdown	#00ea8c	—
markup.fenced_code.block, markup.inline.raw	#ef476f	—
meta.link.inline.markdown	#6e61ff	—
meta.link.inline.markdown markup.underline.link.markdown	#93ff66	—
markup.heading.setext	#f1d302	—
keyword.codetag.notation	#00ea8c	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#ef476f
support.class.component	#00ea8c
source.ruby string.regexp.classic	#f1d302	—
source.ruby string.regexp.classic punctuation.definition.string	#ef476f	—
source.ruby punctuation.definition.variable	#ef476f
source.ruby keyword.operator.assignment.augmented, source.ruby keyword.operator.logical	#ef476f
source.ruby keyword.control, source.ruby keyword.other.special-method	#6e61ff
source.shell keyword.control	#6e61ff	—
source.shell keyword.operator	#ef476f	—
source.shell string variable.other.bracket, source.shell string string.interpolated.dollar	#d3d4d9	—
source.shell punctuation.definition, source.shell string variable.other.bracket punctuation.definition, source.shell string string.interpolated.dollar punctuation.definition	#ef476f	—
source.shell comment.line.number-sign.shebang.shell	#f1d302	—
source.shell punctuation.definition.comment.shebang.shell	#ef476f	—
source.shell constant.character.escape.newline	#515587	—
source.shell punctuation.definition.comment	#515587	—
source.ts meta.import.ts variable.other.readwrite.alias.ts, source.ts meta.import-equals.external.ts variable.other.readwrite.alias.ts, source.tsx meta.import.tsx variable.other.readwrite.alias.tsx, source.tsx meta.import-equals.external.tsx variable.other.readwrite.alias.tsx	#00ea8c	—
source.ts keyword.operator.logical.ts, source.ts keyword.operator.relational.ts, source.ts keyword.operator.comparison.ts, source.tsx keyword.operator.logical.tsx, source.tsx keyword.operator.relational.tsx, source.tsx keyword.operator.comparison.tsx	#ef476f
source.ts meta.object-literal.key.ts, source.tsx meta.object-literal.key.tsx	#00ea8c	—
source.ts meta.type.annotation.ts keyword.operator.expression.typeof.ts, source.tsx meta.type.annotation.tsx keyword.operator.expression.typeof.tsx	#6e61ff	—
source.ts meta.definition.property.ts, source.tsx meta.definition.property.tsx	#f1d302	—
source.ts keyword.control.require.ts, source.tsx keyword.control.require.tsx	#f1d302	—
source.ts punctuation.definition.template-expression.begin, source.ts punctuation.definition.template-expression.end, source.tsx punctuation.definition.template-expression.begin, source.tsx punctuation.definition.template-expression.end	#ef476f	—
keyword.operator.optional, keyword.operator.definiteassignment	#ef476f	—
source.yaml entity.name.tag	#00ea8c	—
source.yaml string.unquoted.plain.out.yaml	#d3d4d9	—

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