Witch Hazel

Name: Witch Hazel
Author: Thea Flowers

Publisher: Thea FlowersThemes in package: 2

A dark and feminine color scheme

GitHub

Color themes

VS Code preview

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

Witch Hazel — Witch Hazel Hypercolor

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#131218
activityBarBadge.background#81EEFF
activityBarBadge.foreground#131218
badge.background#81EEFF
badge.foreground#131218
breadcrumb.background#8864CB
breadcrumb.foreground#F8F8F0
button.background#81EEFF
button.foreground#131218
debugExceptionWidget.background#CB6488
debugExceptionWidget.border#CB6488
debugTokenExpression.boolean#81FFBE
debugTokenExpression.error#FFA3C3
debugTokenExpression.name#DCC8FF
debugTokenExpression.number#FFF781
debugTokenExpression.string#A3F3FF
debugTokenExpression.value#F8F8F0
debugToolBar.background#CB6488
debugView.exceptionLabelForeground#FF81AD
dropdown.background#464258
dropdown.foreground#F8F8F0
editor.background#282634
editor.findMatchBackground#8864CB
editor.findMatchHighlightBackground#716799AA
editor.findRangeHighlightBackground#8864CBAA
editor.foreground#F8F8F0
editor.lineHighlightBackground#131218
editor.selectionBackground#8077A8
editor.stackFrameHighlightBackground#4E8189
editorCursor.foreground#F8F8F0
editorGroup.border#131218
editorGroup.dropBackground#DCC8FFAA
editorGroupHeader.noTabsBackground#131218
editorGroupHeader.tabsBackground#131218
editorGutter.addedBackground#81FFBE
editorGutter.deletedBackground#FF81AD
editorGutter.modifiedBackground#81EEFF
editorHoverWidget.background#634E89
editorHoverWidget.border#131218
editorHoverWidget.highlightForeground#81EEFF
editorHoverWidget.statusBarBackground#634E89
editorIndentGuide.activeBackground1#634E89
editorIndentGuide.background1#433E56
editorLink.activeForeground#C990A5
editorOverviewRuler.background#131218
editorSuggestWidget.background#3c374d
editorSuggestWidget.border#48425c
editorSuggestWidget.foreground#F8F8F0
editorSuggestWidget.highlightForeground#C8FFE3
editorSuggestWidget.selectedBackground#8077A8
editorWhitespace.foreground#894E63
editorWidget.background#8864CB
editorWidget.foreground#F8F8F0
errorForeground#F8F8F0
focusBorder#634E89
gitDecoration.addedResourceForeground#81FFBE
gitDecoration.deletedResourceForeground#FFA3C3
gitDecoration.ignoredResourceForeground#F8F8F0AA
gitDecoration.modifiedResourceForeground#81EEFF
gitDecoration.renamedResourceForeground#FFF781
gitDecoration.stageDeletedResourceForeground#FF81AD
gitDecoration.stageModifiedResourceForeground#81FFBE
gitDecoration.untrackedResourceForeground#C8F8FF
input.background#131218
input.foreground#F8F8F0
input.placeholderForeground#8077A8
inputValidation.errorBackground#CB6488
inputValidation.errorBorder#CB6488
inputValidation.errorForeground#F8F8F0
list.activeSelectionBackground#634E89
list.dropBackground#4E896BAA
list.focusBackground#AE81FF
list.highlightForeground#FFF781
list.hoverBackground#4E896B
list.inactiveFocusBackground#634E89
list.inactiveSelectionBackground#433E56
list.invalidItemForeground#ff0000
minimap.errorHighlight#FF81AD
minimap.findMatchHighlight#AE81FFAA
minimap.selectionHighlight#AE81FFAA
minimap.warningHighlight#FFF781
minimapGutter.addedBackground#81FFBE
minimapGutter.deletedBackground#FF81AD
minimapGutter.modifiedBackground#81EEFF
notificationCenterHeader.background#8864CB
notificationCenterHeader.foreground#F8F8F0
notifications.background#8864CB
notifications.foreground#F8F8F0
notificationsErrorIcon.foreground#FFA3C3
notificationsInfoIcon.foreground#81FFBE
notificationsWarningIcon.foreground#FFF781
panel.background#131218
panel.border#131218
panelInput.border#AE81FF
panelSection.border#AE81FF
panelSectionHeader.background#AE81FF
panelSectionHeader.border#AE81FF
panelTitle.activeForeground#AE81FF
panelTitle.inactiveForeground#634E89
peekView.border#81EEFF
peekViewEditor.background#131218
peekViewEditor.matchHighlightBackground#4E8189
peekViewResult.background#282634
peekViewResult.matchHighlightBackground#4E8189
peekViewTitle.background#81EEFF
peekViewTitleDescription.foreground#131218
peekViewTitleLabel.foreground#131218
pickerGroup.foreground#81EEFF
quickInput.background#8864CB
quickInputList.focusBackground#131218
scrollbar.shadow#131218
scrollbarSlider.activeBackground#AE81FF
scrollbarSlider.background#AE81FF66
scrollbarSlider.hoverBackground#AE81FFBB
selection.background#c6c4cc
sideBar.background#282634
sideBar.border#131218
sideBar.dropBackground#4E896BAA
sideBar.foreground#F8F8F0
sideBarSectionHeader.background#8864CB
sideBarSectionHeader.border#8864CB
sideBarSectionHeader.foreground#F8F8F0
statusBar.background#8864CB
statusBar.debuggingBackground#FF81AD
statusBar.debuggingForeground#131218
statusBar.foreground#F8F8F0
statusBar.noFolderBackground#8864CB
tab.activeBackground#8864CB
tab.border#131218
tab.hoverBackground#634E89
tab.inactiveBackground#131218
tab.inactiveForeground#F8F8F0
terminal.background#131218
textLink.activeForeground#FF81AD
textLink.foreground#81FFBE
titleBar.activeBackground#131218
titleBar.activeForeground#F8F8F0
titleBar.inactiveBackground#131218
titleBar.inactiveForeground#716799

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F8F8F2	—
comment	#BFBFBF	—
string	#81EEFF	—
constant.character.format.placeholder, constant.other.placeholder, meta.fstring.python variable	#FFA3C3	italic
constant.numeric, keyword.other.unit.hexadecimal, constant.numeric.hex, storage.type.number	#FFF9A3	—
constant.language	#C5A3FF	bold
constant.character, constant.other, entity.name.function.preprocessor	#C5A3FF	bold
variable	#F8F8F2
keyword	#81FFBE	—
storage	#FFB8D1
storage.modifier	#64BECB	bold italic
storage.type	#81FFBE	italic
entity.name.class, meta.class, entity.name.type.class	#A3F3FF	bold
entity.other.inherited-class	#81EEFF	italic
entity.name.function	#DCC8FF
variable.parameter	#FFA3C3	italic
entity.name.tag	#FFA3C3
entity.other.attribute-name	#FFF9A3
support.function	#A3FFCF
support.constant	#A3FFCF
support.type, support.class	#81EEFF	italic
support.other.variable	—
meta.member.access, variable.other.property	—	italic
meta.bracket.square.access	#C8F8FF
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—
markup.heading.markdown	#FFF781	bold
meta.link.inline.markdown	#C8F8FF	—
meta.link.reference.markdown	#C8F8FF	—
string.other.link.title.markdown	#81FFBE	bold
markup.underline.link.markdown	—	italic
markup.underline.link.image.markdown	—	underline italic
markup.bold.markdown	#F8F8F2	bold
markup.italic.markdown	#F8F8F2	italic
meta.image.inline.markdown	#C5A3FF	italic
string.other.link.description.markdown	#A3F3FF	bold italic
markup.inline.raw.string.markdown	#FFFBC8	—
markup.fenced_code.block.markdown	#FF81AD	—
fenced_code.block.language.markdown	—	italic
meta.embedded.block	#F8F8F0	—
punctuation.definition.list.begin.markdown	#AE81FF	—

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