BlackPink Theme (Blink)

Name: BlackPink Theme (Blink)
Author: abenavidesh

Publisher: abenavideshThemes in package: 1

Blackpink theme

Open in VS Code GitHub

VS Code preview

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

BlackPink Theme (Blink) — Black Pink Rose

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#ff4081
activityBar.background#1f2b31
activityBar.border#1f2b31
activityBar.foreground#ffffff
activityBar.inactiveForeground#ff4081
activityBarBadge.background#ff4081
activityBarBadge.foreground#FFFFFF
badge.background#1f2b31
badge.foreground#1f2b31
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#e91e63
breadcrumbPicker.background#ffffff
button.background#f50057
button.foreground#1f2b31
button.hoverBackground#273339
button.hoverForeground#F79AAF
button.secondaryBackground#424242
button.secondaryForeground#f8bbd0
button.secondaryHoverBackground#616161
checkbox.background#1f2b31
checkbox.border#1f2b31
debugIcon.breakpointForeground#ff1744
debugToolBar.background#1f2b31
descriptionForeground#e91e63
dropdown.background#424242
dropdown.border#1f2b31
dropdown.foreground#f8bbd0
dropdown.listBackground#424242
editor.background#1f2b31
editor.findMatchBackground#1f2b31
editor.findMatchHighlightBackground#fae17d80
editor.focusedStackFrameHighlightBackground#f48fb1
editor.foldBackground#ff40811a
editor.foreground#f8bbd0
editor.lineHighlightBackground#2a3a42
editor.linkedEditingBackground#ff408112
editor.selectionHighlightBackground#ff408140
editor.stackFrameHighlightBackground#f06292
editor.wordHighlightBackground#007acc
editor.wordHighlightBorder#007acc
editor.wordHighlightStrongBackground#000000
editor.wordHighlightStrongBorder#000000
editorBracketHighlight.unexpectedBracket.foreground#e91e63
editorBracketMatch.background#ff408140
editorBracketMatch.border#ff408199
editorCursor.foreground#ff4081
editorGroup.border#1f2b31
editorGroupHeader.tabsBackground#1f2b31
editorGroupHeader.tabsBorder#1f2b31
editorGutter.addedBackground#f48fb1
editorGutter.deletedBackground#ff1744
editorGutter.modifiedBackground#1f2b31
editorIndentGuide.activeBackground#f8bbd03d
editorIndentGuide.background#f8bbd01f
editorInlayHint.background#f48fb1
editorInlayHint.foreground#e91e63
editorInlayHint.paramBackground#f48fb1
editorInlayHint.paramForeground#e91e63
editorInlayHint.typeBackground#f48fb1
editorInlayHint.typeForeground#e91e63
editorLineNumber.activeForeground#ff4081
editorLineNumber.foreground#41545d
editorWidget.background#1f2b31
errorForeground#ff1744
focusBorder#1f2b31
foreground#f8bbd0
gitDecoration.addedResourceForeground#f48fb1
gitDecoration.conflictingResourceForeground#f06292
gitDecoration.deletedResourceForeground#ff1744
gitDecoration.ignoredResourceForeground#ad1457
gitDecoration.modifiedResourceForeground#1473e6
gitDecoration.submoduleResourceForeground#ad1457
gitDecoration.untrackedResourceForeground#f48fb1
icon.foreground#e91e63
input.background#f50057
input.border#1f2b31
input.foreground#1f2b31
input.placeholderForeground#1f2b31
keybindingLabel.foreground#f8bbd0
list.activeSelectionBackground#000000
list.activeSelectionForeground#f8bbd0
list.focusBackground#616161
list.focusForeground#f8bbd0
list.highlightForeground#e91e63
list.hoverBackground#424242
list.hoverForeground#f8bbd0
list.inactiveFocusBackground#616161
list.inactiveSelectionBackground#424242
list.inactiveSelectionForeground#f8bbd0
menu.background#1f2b31
menu.foreground#f8bbd0
menu.selectionBackground#ff4081
menu.selectionForeground#212121
menu.separatorBackground#1f2b31
notificationCenterHeader.background#1f2b31
notificationCenterHeader.foreground#e91e63
notifications.background#1f2b31
notifications.border#1f2b31
notifications.foreground#f8bbd0
notificationsErrorIcon.foreground#ff1744
notificationsInfoIcon.foreground#1f2b31
notificationsWarningIcon.foreground#1f2b31
panel.background#1f2b31
panel.border#1f2b31
panelInput.border#1f2b31
panelTitle.activeBorder#1f2b31
panelTitle.activeForeground#f8bbd0
panelTitle.inactiveForeground#e91e63
pickerGroup.border#1f2b31
pickerGroup.foreground#e91e63
progressBar.background#1f2b31
quickInput.background#1f2b31
quickInput.foreground#f8bbd0
scrollbar.shadow#e91e6333
scrollbarSlider.activeBackground#e91e63
scrollbarSlider.background#ff4081
scrollbarSlider.hoverBackground#cf1e63
settings.headerForeground#880e4f
settings.modifiedItemIndicator#f06292
sideBar.background#1f2b31
sideBar.border#1f2b31
sideBar.foreground#f8bbd0
sideBarSectionHeader.background#1f2b31
sideBarSectionHeader.border#1f2b31
sideBarSectionHeader.foreground#f8bbd0
sideBarTitle.foreground#f8bbd0
statusBar.background#1f2b31
statusBar.border#1f2b31
statusBar.debuggingBackground#ff1744
statusBar.debuggingForeground#1f2b31
statusBar.focusBorder#ff408180
statusBar.foreground#e91e63
statusBar.noFolderBackground#1f2b31
statusBarItem.activeBackground#f8bbd01f
statusBarItem.focusBorder#1f2b31
statusBarItem.hoverBackground#f8bbd014
statusBarItem.prominentBackground#424242
statusBarItem.remoteForeground#f8bbd0
tab.activeBackground#1f2b31
tab.activeBorder#ff4081
tab.activeBorderTop#1f2b31
tab.activeForeground#f8bbd0
tab.border#1f2b31
tab.hoverBackground#1f2b31
tab.inactiveBackground#1f2b31
tab.inactiveForeground#e91e63
tab.unfocusedActiveBorder#1f2b31
tab.unfocusedActiveBorderTop#1f2b31
tab.unfocusedHoverBackground#424242
terminal.ansiBlack#1f2b31
terminal.ansiBlue#1f2b31
terminal.ansiBrightBlack#e91e63
terminal.ansiBrightBlue#1f2b31
terminal.ansiBrightCyan#1f2b31
terminal.ansiBrightGreen#f48fb1
terminal.ansiBrightMagenta#1f2b31
terminal.ansiBrightRed#ff1744
terminal.ansiBrightWhite#1f2b31
terminal.ansiBrightYellow#f06292
terminal.ansiCyan#1f2b31
terminal.ansiGreen#f48fb1
terminal.ansiMagenta#1f2b31
terminal.ansiRed#ff1744
terminal.ansiWhite#e91e63
terminal.ansiYellow#f06292
terminal.foreground#f8bbd0
textBlockQuote.background#1f2b31
textBlockQuote.border#1f2b31
textCodeBlock.background#424242
textLink.activeForeground#f8bbd0
textLink.foreground#ff4081
textLink.hoverForeground#ffffff
textPreformat.foreground#e91e63
textSeparator.foreground#1f2b31
titleBar.activeBackground#1f2b31
titleBar.activeForeground#e91e63
titleBar.border#1f2b31
titleBar.inactiveBackground#1f2b31
titleBar.inactiveForeground#e91e63
tree.indentGuidesStroke#616161
welcomePage.buttonBackground#ff4081
welcomePage.buttonForeground#ffffff
welcomePage.buttonHoverBackground#f48fb1
welcomePage.menuBackground#212121
welcomePage.menuForeground#f8bbd0
welcomePage.menuHoverBackground#383838
welcomePage.recentEntry.background#212121
welcomePage.recentEntry.border#ff4081
welcomePage.recentEntry.foreground#f8bbd0
welcomePage.tileBackground#212121
welcomePage.tileForeground#f8bbd0
welcomePage.tileHoverBackground#383838

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4d5c63	italic
constant, entity.name.constant, variable.other.constant	#e4d4cd	—
variable, entity.name.variable, variable.other	#80caf7	—
keyword, storage	#c39	bold
storage.type	#2e87f0	bold
keyword.operator	#FF79C6	—
string, punctuation.definition.string, string.quoted.double, string.quoted.single, string.interpolated	#F8F8F2	—
support.function	#FF79C6	—
support.constant	#FF79C6	—
meta.function-call, variable.function	#FFB86C	—
entity.name.function	#FF79C6	—
meta.function, meta.class, meta.block, meta.tag, meta.method	#FF79C6	—
meta.tag, entity.name.tag, support.class.component	#FF6AC1	—
meta.embedded.block	#FF79C6	—
punctuation.separator, punctuation.terminator	#FF79C6	—
punctuation.definition.tag	#FF6AC1	—
punctuation.section.embedded	#FF79C6	—
punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end	#FF6AC1	—
constant.other	#FFB86C	—
support.type, support.class	#FF79C6	—
keyword.control	#FF6AC1	italic
keyword.operator	#FF79C6	—
invalid, invalid.deprecated	#F8F8F0	—
markup.heading, markup.bold	#FF79C6	bold
markup.italic	#FF79C6	italic
markup.underline	#FF79C6	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}!`;
}