#Vlad

Name: #Vlad
Author: 0x416C65

Publisher: 0x416C65Themes in package: 2

This represents a unique adaptation of Dracula's authentic theme, tweaked to exude a darker ambiance.

GitHub

Color themes

VS Code preview

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

#Vlad — #Vlad - Titan - H(0:12)/S(0:0)/L(0:0)

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.activeBorder#e69b49ff
activityBar.activeFocusBorder#77a981ff
activityBar.background#000000ff
activityBar.border#fafafa20
activityBar.foreground#c1c1c1ff
activityBarBadge.background#e69b49ff
activityBarBadge.foreground#000000ff
badge.background#e69b49ff
badge.foreground#000000ff
button.background#c1a560ff
button.foreground#00000080
button.hoverBackground#69c4caff
diffEditor.insertedTextBackground#69c4ca33
dropdown.background#00000090
dropdown.border#fafafa22
editor.background#000000ff
editor.findMatchBackground#69c4ca66
editor.findMatchHighlightBackground#fafafa22
editor.foreground#c1c1c1ff
editor.hoverHighlightBackground#fafafa22
editor.inactiveSelectionBackground#fafafa20
editor.lineHighlightBackground#fafafa08
editor.lineHighlightBorder#fafafa04
editor.selectionBackground#fafafa20
editor.selectionHighlightBackground#fafafa22
editor.selectionHighlightBorder#fafafa30
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editor.wordHighlightStrongBorder#fafafa30
editorCodeLens.foreground#fafafa66
editorCursor.background#fafafa00
editorCursor.foreground#c1c1c1ff
editorError.foreground#af6775ff
editorGroup.border#fafafa20
editorGroup.emptyBackground#00000080
editorGroupHeader.border#fafafa20
editorGroupHeader.tabsBackground#000000ff
editorGroupHeader.tabsBorder#fafafa20
editorGutter.addedBackground#c1a560ff
editorGutter.deletedBackground#af6775ff
editorGutter.modifiedBackground#69c4caff
editorHoverWidget.background#000000ff
editorHoverWidget.border#fafafa20
editorIndentGuide.background1#fafafa22
editorLineNumber.activeForeground#c1c1c1ff
editorLineNumber.foreground#fafafa33
editorLink.activeForeground#69c4caff
editorOverviewRuler.addedForeground#c1a56000
editorOverviewRuler.border#fafafa00
editorOverviewRuler.bracketMatchForeground#69c4ca00
editorOverviewRuler.deletedForeground#fafafa00
editorOverviewRuler.errorForeground#af6775ff
editorOverviewRuler.infoForeground#77a98100
editorOverviewRuler.modifiedForeground#69c4ca00
editorOverviewRuler.warningForeground#c2a293ff
editorRuler.foreground#fafafa66
editorSuggestWidget.background#000000ff
editorSuggestWidget.border#fafafa20
editorSuggestWidget.foreground#c1c1c1ff
editorSuggestWidget.highlightForeground#69c4caff
editorSuggestWidget.selectedBackground#fafafa20
editorWarning.foreground#c2a293ff
editorWhitespace.foreground#fafafa66
editorWidget.background#000000ff
editorWidget.border#69c4ca00
errorForeground#af6775ff
extensionButton.prominentBackground#c1a560ff
extensionButton.prominentForeground#00000090
extensionButton.prominentHoverBackground#69c4caff
focusBorder#e69b49ff
gitDecoration.ignoredResourceForeground#fafafa50
input.background#00000090
input.border#e69b49ff
input.foreground#c1c1c1ff
input.placeholderForeground#fafafa66
inputOption.activeBackground#00000000
inputOption.activeBorder#e69b49ff
inputValidation.errorBackground#00000090
inputValidation.errorBorder#af6775ff
inputValidation.infoBackground#00000090
inputValidation.infoBorder#e69b49ff
inputValidation.warningBackground#00000090
inputValidation.warningBorder#c2a293ff
list.activeSelectionBackground#fafafa20
list.activeSelectionForeground#c1c1c1ff
list.errorForeground#af6775ff
list.focusBackground#fafafa22
list.focusForeground#c1c1c1ff
list.highlightForeground#c1c1c1ff
list.hoverBackground#fafafa10
list.inactiveSelectionBackground#fafafa22
list.inactiveSelectionForeground#c1c1c1ff
list.warningForeground#c2a293ff
menu.background#000000ff
menu.border#fafafa20
menu.separatorBackground#fafafa20
notificationCenter.border#fafafa20
notificationToast.border#fafafa20
panel.background#000000ff
panel.border#fafafa20
panelTitle.activeBorder#e69b49ff
peekView.border#fafafa20
peekViewEditor.background#000000ff
peekViewEditor.matchHighlightBackground#fafafa22
peekViewEditorGutter.background#000000ff
peekViewEditorStickyScroll.background#000000ff
peekViewResult.background#000000ff
peekViewResult.fileForeground#c1c1c1ff
peekViewResult.lineForeground#c1c1c1ff
peekViewResult.matchHighlightBackground#fafafa20
peekViewResult.selectionBackground#fafafa20
peekViewResult.selectionForeground#c1c1c1ff
peekViewTitle.background#000000ff
peekViewTitleDescription.foreground#fafafa70
peekViewTitleLabel.foreground#c1c1c1ff
pickerGroup.border#fafafa20
pickerGroup.foreground#69c4caff
progressBar.background#c1a560ff
scrollbar.shadow#fafafa00
scrollbarSlider.activeBackground#fafafa70
scrollbarSlider.background#fafafa10
scrollbarSlider.hoverBackground#fafafa60
sideBar.background#000000ff
sideBar.border#fafafa20
sideBar.foreground#fafafa90
sideBarSectionHeader.background#fafafa09
sideBarSectionHeader.foreground#c1c1c1ff
sideBarTitle.foreground#c1c1c1ff
statusBar.background#000000ff
statusBar.border#fafafa20
statusBar.debuggingBackground#00000090
statusBar.foreground#fafafa90
statusBar.noFolderBackground#00000090
statusBarItem.hoverBackground#fafafa33
tab.activeBackground#000000ff
tab.activeBorderTop#fafafa20
tab.activeForeground#c1c1c1ff
tab.activeModifiedBorder#fafafa20
tab.border#fafafa00
tab.inactiveBackground#000000ff
tab.inactiveForeground#fafafa50
tab.inactiveModifiedBorder#fafafa20
terminal.ansiCyan#69c4caff
terminal.ansiGreen#77a981ff
terminal.ansiMagenta#c273aaff
terminal.ansiRed#af6775ff
terminal.ansiYellow#c1a560ff
terminal.background#000000ff
terminal.foreground#c1c1c1ff
terminalCursor.background#fafafa00
terminalCursor.foreground#c1c1c1ff
titleBar.activeBackground#000000ff
titleBar.border#fafafa20
titleBar.inactiveBackground#000000ff
titleBar.inactiveForeground#fafafa50
tree.inactiveIndentGuidesStroke#fafafa00
tree.indentGuidesStroke#fafafa20
widget.border#fafafa20
widget.shadow#fafafa00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#494949ff	—
constant.numeric.css, entity.name.filename.find-in-files, keyword.operator.other.elixir, markup.changed, markup.inserted, markup.normal, markup.normal.markdown, source.elixir entity.name.function, string.template.js, string, support.constant.css, support.constant.less, support.constant.sass, support.constant.scss, unit.css, unit.less, unit.sass, unit.scss, variable.other.constant.elixir, variable.other.constant.elixir	#c7ae6fff	—
markup.deleted, meta.separator.markdown, punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts, support.dictionary.json, variable.readwrite.other.block, variable.readwrite	#b67481ff	—
entity.name.function-call, entity.name.variable, entity.name.variable.local, keyword.operator.assignment.python, keyword.other.base, keyword.other.this, meta.export variable.other.readwrite, meta.function-call.js, meta.import variable.other.readwrite, meta.object-literal.key, meta.object-literal.key.js, meta.paragraph.markdown, meta.tag.attributes.js, meta.template.expression.js, support.variable, support.variable.UnityEngine, variable.language.base, variable.object.property, variable.other.constant.property, variable.other.object.property, variable.other.property	#cbcbcbff	—
constant.character, constant.language, constant.numeric.css, constant.numeric, constant.other, keyword.control.svelte, markup.underline.link.markdown, string.embedded.begin, string.embedded.end, support.constant, variable.language.this, variable.language, variable.object.constant, variable.other.alias, variable.other.constant, variable.other.object, variable.other.readwrite, variable.parameter	#a5a0caff	—
entity.name.function, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name, entity.other.inherited-class, function.css, function.less, function.sass, function.scss, function.support.builtin, function.support.core, markup.quote.markdown, meta.function-call.arguments.python, meta.function-call.generic.python, meta.function-call.python, meta.function-call.python, punctuation.definition.heading.markdown, punctuation.section.property-list.begin.bracket.curly.css, string.embedded, support.function	#84b18dff	—
constant.numeric.less, constant.numeric.sass, constant.numeric.scss, keyword.operator.constructor, parameter.variable.function.elixir, variable.css.string, variable.less.string, variable.sass.string, variable.scss.string	#e9a55bff	—
constant.character.escape, entity.name.tag.class.js, entity.name.tag.class.jsx, entity.name.tag.class, entity.name.tag.css, entity.name.tag.id, entity.name.tag, fenced_code.block.language.markdown, keyword.control, keyword.operator.logical, keyword.operator, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword, punctuation.accessor.optional, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.key-value, storage.type, storage, variable.less	#c881b2ff	—
constant.numeric.line-number.find-in-files - match, constant.other.symbol.elixir, entity.name.class, entity.name.module, entity.name.type, markup.inline.raw.string.markdown, markup.raw.block.markdown, markup.raw.inline.markdown, meta.diff.header, meta.diff, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir.punctuation.binary.elixir, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, storage.identifier, string.detected-link, string.other.link.title.markdown, support.class, support.other.variable, support.type.property-name.css, support.type.property-name.less, support.type.property-name.sass, support.type.property-name.scss, support.type, variable.other.block	#79cad0ff	—
invalid.deprecated, invalid, punctuation.definition.list_item.markdown	#cbcbcbff	—
punctuation.definition.bold.markdown, punctuation.definition.normal.markdown	#cbcbcbff	—
entity.name.section.markdown, markup.heading.markdown	#c7ae6fff	—
token.warn-token	#caada0ff	—
entity.name.class, entity.name.type.class, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def, storage, support.constant, support.function.magic, support.function, support.type.property-name, support.variable, variable.other.predefined	—
comment, emphasis, entity.name.directive.restructuredtext, entity.other.inherited-class, keyword.expressions-and-types.swift, keyword.other.this, keyword.primitive-datatypes.swift, keyword.type.cs, markup.italic, markup.quote, meta.decorator variable.other.property, meta.decorator variable.other.readwrite, 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.ocaml, storage.type.php, string.comment, variable.language punctuation.definition.variable.php, variable.language, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	—	italic
keyword.control.new, keyword.operator.new, markup.bold, markup.heading, strong	—	bold
markup.underline	—	underline
invalid.deprecated, invalid, variable.other.alias.yaml	—	italic underline

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