#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:-24)/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#e46e37ff
activityBar.activeFocusBorder#6ba16bff
activityBar.background#000000ff
activityBar.border#f0f0f020
activityBar.foreground#b7b7b7ff
activityBarBadge.background#e46e37ff
activityBarBadge.foreground#000000ff
badge.background#e46e37ff
badge.foreground#000000ff
button.background#bb8851ff
button.foreground#00000080
button.hoverBackground#5ac5b6ff
diffEditor.insertedTextBackground#5ac5b633
dropdown.background#00000090
dropdown.border#f0f0f022
editor.background#000000ff
editor.findMatchBackground#5ac5b666
editor.findMatchHighlightBackground#f0f0f022
editor.foreground#b7b7b7ff
editor.hoverHighlightBackground#f0f0f022
editor.inactiveSelectionBackground#f0f0f020
editor.lineHighlightBackground#f0f0f008
editor.lineHighlightBorder#f0f0f004
editor.selectionBackground#f0f0f020
editor.selectionHighlightBackground#f0f0f022
editor.selectionHighlightBorder#f0f0f030
editor.wordHighlightBackground#00000000
editor.wordHighlightStrongBackground#00000000
editor.wordHighlightStrongBorder#f0f0f030
editorCodeLens.foreground#f0f0f066
editorCursor.background#f0f0f000
editorCursor.foreground#b7b7b7ff
editorError.foreground#a85a79ff
editorGroup.border#f0f0f020
editorGroup.emptyBackground#00000080
editorGroupHeader.border#f0f0f020
editorGroupHeader.tabsBackground#000000ff
editorGroupHeader.tabsBorder#f0f0f020
editorGutter.addedBackground#bb8851ff
editorGutter.deletedBackground#a85a79ff
editorGutter.modifiedBackground#5ac5b6ff
editorHoverWidget.background#000000ff
editorHoverWidget.border#f0f0f020
editorIndentGuide.background1#f0f0f022
editorLineNumber.activeForeground#b7b7b7ff
editorLineNumber.foreground#f0f0f033
editorLink.activeForeground#5ac5b6ff
editorOverviewRuler.addedForeground#bb885100
editorOverviewRuler.border#f0f0f000
editorOverviewRuler.bracketMatchForeground#5ac5b600
editorOverviewRuler.deletedForeground#f0f0f000
editorOverviewRuler.errorForeground#a85a79ff
editorOverviewRuler.infoForeground#6ba16b00
editorOverviewRuler.modifiedForeground#5ac5b600
editorOverviewRuler.warningForeground#bb8c86ff
editorRuler.foreground#f0f0f066
editorSuggestWidget.background#000000ff
editorSuggestWidget.border#f0f0f020
editorSuggestWidget.foreground#b7b7b7ff
editorSuggestWidget.highlightForeground#5ac5b6ff
editorSuggestWidget.selectedBackground#f0f0f020
editorWarning.foreground#bb8c86ff
editorWhitespace.foreground#f0f0f066
editorWidget.background#000000ff
editorWidget.border#5ac5b600
errorForeground#a85a79ff
extensionButton.prominentBackground#bb8851ff
extensionButton.prominentForeground#00000090
extensionButton.prominentHoverBackground#5ac5b6ff
focusBorder#e46e37ff
gitDecoration.ignoredResourceForeground#f0f0f050
input.background#00000090
input.border#e46e37ff
input.foreground#b7b7b7ff
input.placeholderForeground#f0f0f066
inputOption.activeBackground#00000000
inputOption.activeBorder#e46e37ff
inputValidation.errorBackground#00000090
inputValidation.errorBorder#a85a79ff
inputValidation.infoBackground#00000090
inputValidation.infoBorder#e46e37ff
inputValidation.warningBackground#00000090
inputValidation.warningBorder#bb8c86ff
list.activeSelectionBackground#f0f0f020
list.activeSelectionForeground#b7b7b7ff
list.errorForeground#a85a79ff
list.focusBackground#f0f0f022
list.focusForeground#b7b7b7ff
list.highlightForeground#b7b7b7ff
list.hoverBackground#f0f0f010
list.inactiveSelectionBackground#f0f0f022
list.inactiveSelectionForeground#b7b7b7ff
list.warningForeground#bb8c86ff
menu.background#000000ff
menu.border#f0f0f020
menu.separatorBackground#f0f0f020
notificationCenter.border#f0f0f020
notificationToast.border#f0f0f020
panel.background#000000ff
panel.border#f0f0f020
panelTitle.activeBorder#e46e37ff
peekView.border#f0f0f020
peekViewEditor.background#000000ff
peekViewEditor.matchHighlightBackground#f0f0f022
peekViewEditorGutter.background#000000ff
peekViewEditorStickyScroll.background#000000ff
peekViewResult.background#000000ff
peekViewResult.fileForeground#b7b7b7ff
peekViewResult.lineForeground#b7b7b7ff
peekViewResult.matchHighlightBackground#f0f0f020
peekViewResult.selectionBackground#f0f0f020
peekViewResult.selectionForeground#b7b7b7ff
peekViewTitle.background#000000ff
peekViewTitleDescription.foreground#f0f0f070
peekViewTitleLabel.foreground#b7b7b7ff
pickerGroup.border#f0f0f020
pickerGroup.foreground#5ac5b6ff
progressBar.background#bb8851ff
scrollbar.shadow#f0f0f000
scrollbarSlider.activeBackground#f0f0f070
scrollbarSlider.background#f0f0f010
scrollbarSlider.hoverBackground#f0f0f060
sideBar.background#000000ff
sideBar.border#f0f0f020
sideBar.foreground#f0f0f090
sideBarSectionHeader.background#f0f0f009
sideBarSectionHeader.foreground#b7b7b7ff
sideBarTitle.foreground#b7b7b7ff
statusBar.background#000000ff
statusBar.border#f0f0f020
statusBar.debuggingBackground#00000090
statusBar.foreground#f0f0f090
statusBar.noFolderBackground#00000090
statusBarItem.hoverBackground#f0f0f033
tab.activeBackground#000000ff
tab.activeBorderTop#f0f0f020
tab.activeForeground#b7b7b7ff
tab.activeModifiedBorder#f0f0f020
tab.border#f0f0f000
tab.inactiveBackground#000000ff
tab.inactiveForeground#f0f0f050
tab.inactiveModifiedBorder#f0f0f020
terminal.ansiCyan#5ac5b6ff
terminal.ansiGreen#6ba16bff
terminal.ansiMagenta#bc65b3ff
terminal.ansiRed#a85a79ff
terminal.ansiYellow#bb8851ff
terminal.background#000000ff
terminal.foreground#b7b7b7ff
terminalCursor.background#f0f0f000
terminalCursor.foreground#b7b7b7ff
titleBar.activeBackground#000000ff
titleBar.border#f0f0f020
titleBar.inactiveBackground#000000ff
titleBar.inactiveForeground#f0f0f050
tree.inactiveIndentGuidesStroke#f0f0f000
tree.indentGuidesStroke#f0f0f020
widget.border#f0f0f020
widget.shadow#f0f0f000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, string.comment	#3f3f3fff	—
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	#c19260ff	—
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	#af6784ff	—
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	#c1c1c1ff	—
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	#9397c2ff	—
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	#77a977ff	—
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	#e67b49ff	—
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	#c273baff	—
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	#69cabdff	—
invalid.deprecated, invalid, punctuation.definition.list_item.markdown	#c1c1c1ff	—
punctuation.definition.bold.markdown, punctuation.definition.normal.markdown	#c1c1c1ff	—
entity.name.section.markdown, markup.heading.markdown	#c19260ff	—
token.warn-token	#c29993ff	—
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}!`;
}