Dracula Alabaster

Name: Dracula Alabaster
Author: Ryan Olson

Publisher: Ryan OlsonThemes in package: 1

An alabaster version of Dracula

GitHub

VS Code preview

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

Dracula Alabaster — Dracula Alabaster

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#bd93f910
activityBar.activeBorder#ff79c680
activityBar.background#282a36
activityBar.foreground#f8f8f2
activityBar.inactiveForeground#6272a4
activityBarBadge.background#ff79c6
activityBarBadge.foreground#f8f8f2
badge.background#44475a
badge.foreground#f8f8f2
breadcrumb.activeSelectionForeground#f8f8f2
breadcrumb.background#282a36
breadcrumb.focusForeground#f8f8f2
breadcrumb.foreground#6272a4
breadcrumbPicker.background#191a21
button.background#44475a
button.foreground#f8f8f2
button.secondaryBackground#282a36
button.secondaryForeground#f8f8f2
button.secondaryHoverBackground#343746
debugToolBar.background#21222c
diffEditor.insertedTextBackground#50fa7b20
diffEditor.removedTextBackground#ff555550
dropdown.background#343746
dropdown.border#191a21
dropdown.foreground#f8f8f2
editor.background#282a36
editor.findMatchBackground#ffb86c80
editor.findMatchHighlightBackground#f0f0f040
editor.findRangeHighlightBackground#44475a75
editor.foldBackground#21222c80
editor.foreground#f8f8f2
editor.hoverHighlightBackground#8be9fd50
editor.lineHighlightBorder#44475a
editor.rangeHighlightBackground#bd93f915
editor.selectionBackground#44475a
editor.selectionHighlightBackground#424450
editor.snippetFinalTabstopHighlightBackground#282a36
editor.snippetFinalTabstopHighlightBorder#50fa7b
editor.snippetTabstopHighlightBackground#282a36
editor.snippetTabstopHighlightBorder#6272a4
editor.wordHighlightBackground#8be9fd50
editor.wordHighlightStrongBackground#50fa7b50
editorBracketHighlight.foreground1#94948e
editorBracketHighlight.foreground2#94948e
editorBracketHighlight.foreground3#94948e
editorBracketHighlight.foreground4#94948e
editorBracketHighlight.foreground5#94948e
editorBracketHighlight.foreground6#94948e
editorBracketHighlight.unexpectedBracket.foreground#ff5555
editorCodeLens.foreground#6272a4
editorError.foreground#ff5555
editorGroup.dropBackground#44475a70
editorGroupHeader.tabsBackground#21222c
editorGutter.addedBackground#50fa7b80
editorGutter.deletedBackground#ff555580
editorGutter.modifiedBackground#8be9fd80
editorHoverWidget.background#282a36
editorHoverWidget.border#6272a4
editorLineNumber.foreground#6272a4
editorLink.activeForeground#8be9fd
editorMarkerNavigation.background#21222c
editorOverviewRuler.addedForeground#50fa7b80
editorOverviewRuler.border#191a21
editorOverviewRuler.currentContentForeground#50fa7b
editorOverviewRuler.deletedForeground#ff555580
editorOverviewRuler.errorForeground#ff555580
editorOverviewRuler.incomingContentForeground#bd93f9
editorOverviewRuler.infoForeground#8be9fd80
editorOverviewRuler.modifiedForeground#8be9fd80
editorOverviewRuler.selectionHighlightForeground#ffb86c
editorOverviewRuler.warningForeground#ffb86c80
editorOverviewRuler.wordHighlightForeground#8be9fd
editorOverviewRuler.wordHighlightStrongForeground#50fa7b
editorRuler.foreground#ffffff1a
editorSuggestWidget.background#21222c
editorSuggestWidget.foreground#f8f8f2
editorSuggestWidget.selectedBackground#44475a
editorWarning.foreground#8be9fd
editorWhitespace.foreground#ffffff1a
editorWidget.background#21222c
errorForeground#ff5555
extensionButton.prominentBackground#50fa7b90
extensionButton.prominentForeground#f8f8f2
extensionButton.prominentHoverBackground#50fa7b60
focusBorder#6272a4
foreground#f8f8f2
gitDecoration.conflictingResourceForeground#ffb86c
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#6272a4
gitDecoration.modifiedResourceForeground#8be9fd
gitDecoration.untrackedResourceForeground#50fa7b
input.background#282a36
input.border#191a21
input.foreground#f8f8f2
input.placeholderForeground#6272a4
inputOption.activeBorder#bd93f9
inputValidation.errorBorder#ff5555
inputValidation.infoBorder#ff79c6
inputValidation.warningBorder#ffb86c
list.activeSelectionBackground#44475a
list.activeSelectionForeground#f8f8f2
list.dropBackground#44475a
list.errorForeground#ff5555
list.focusBackground#44475a75
list.highlightForeground#8be9fd
list.hoverBackground#44475a75
list.inactiveSelectionBackground#44475a75
list.warningForeground#ffb86c
listFilterWidget.background#343746
listFilterWidget.noMatchesOutline#ff5555
listFilterWidget.outline#424450
merge.currentHeaderBackground#50fa7b90
merge.incomingHeaderBackground#bd93f990
panel.background#282a36
panel.border#bd93f9
panelTitle.activeBorder#ff79c6
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#6272a4
peekView.border#44475a
peekViewEditor.background#282a36
peekViewEditor.matchHighlightBackground#f1fa8c80
peekViewResult.background#21222c
peekViewResult.fileForeground#f8f8f2
peekViewResult.lineForeground#f8f8f2
peekViewResult.matchHighlightBackground#f1fa8c80
peekViewResult.selectionBackground#44475a
peekViewResult.selectionForeground#f8f8f2
peekViewTitle.background#191a21
peekViewTitleDescription.foreground#6272a4
peekViewTitleLabel.foreground#f8f8f2
pickerGroup.border#bd93f9
pickerGroup.foreground#8be9fd
progressBar.background#ff79c6
selection.background#bd93f9
settings.checkboxBackground#21222c
settings.checkboxBorder#191a21
settings.checkboxForeground#f8f8f2
settings.dropdownBackground#21222c
settings.dropdownBorder#191a21
settings.dropdownForeground#f8f8f2
settings.headerForeground#f8f8f2
settings.modifiedItemIndicator#ffb86c
settings.numberInputBackground#21222c
settings.numberInputBorder#191a21
settings.numberInputForeground#f8f8f2
settings.textInputBackground#21222c
settings.textInputBorder#191a21
settings.textInputForeground#f8f8f2
sideBar.background#21222c
sideBarSectionHeader.background#282a36
sideBarTitle.foreground#f8f8f2
statusBar.background#21222c
statusBar.debuggingBackground#ff5555
statusBar.debuggingForeground#191a21
statusBar.foreground#f8f8f2
statusBar.noFolderBackground#191a21
statusBar.noFolderForeground#f8f8f2
statusBarItem.prominentBackground#ff5555
statusBarItem.prominentHoverBackground#ffb86c
statusBarItem.remoteBackground#bd93f9
statusBarItem.remoteForeground#282a36
tab.activeBackground#282a36
tab.activeBorderTop#ff79c680
tab.activeForeground#f8f8f2
tab.border#191a21
tab.inactiveBackground#21222c
tab.inactiveForeground#6272a4
terminal.ansiBlack#21222c
terminal.ansiBlue#bd93f9
terminal.ansiBrightBlack#6272a4
terminal.ansiBrightBlue#d6acff
terminal.ansiBrightCyan#a4ffff
terminal.ansiBrightGreen#69ff94
terminal.ansiBrightMagenta#ff92df
terminal.ansiBrightRed#ff6e6e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffffa5
terminal.ansiCyan#8be9fd
terminal.ansiGreen#50fa7b
terminal.ansiMagenta#ff79c6
terminal.ansiRed#ff5555
terminal.ansiWhite#f8f8f2
terminal.ansiYellow#f1fa8c
terminal.background#282a36
terminal.foreground#f8f8f2
titleBar.activeBackground#282a36
titleBar.activeForeground#f8f8f2
titleBar.inactiveBackground#191a21
titleBar.inactiveForeground#6272a4
walkThrough.embeddedEditorBackground#21222c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#BD93F9	—
meta.diff, meta.diff.header	#6272A4	—
markup.inserted	#50FA7B	—
markup.deleted	#FF5555	—
markup.changed	#FFB86C	—
invalid	#FF5555	underline italic
invalid.deprecated	#F8F8F2	underline italic
entity.name.filename	#F1FA8C	—
markup.error	#FF5555	—
markup.underline	—	underline
markup.bold	#FFB86C	bold
markup.heading	#BD93F9	bold
markup.italic	#F1FA8C	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#FF79C6	—
string	#F1FA8C	—
constant	#BD93F9	—
variable.parameter, meta.definition.variable variable.other.constant	#8BE9FD	—
entity.name, entity.name.type.class, meta.method.declaration storage.type, meta.type.declaration entity.name.type.alias, meta.interface entity.name.type.interface	#50FA7B	—
meta.function-call entity.name.function, meta.template.expression, entity.name.tag, entity.name.type, entity.name.function.tagged-template	#f8f8f2	—
log.error	#FF5555	bold
log.warning	#F1FA8C	bold
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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