TapTap Theme

Name: TapTap Theme
Author: TapTap Developer Services

Publisher: TapTap Developer ServicesThemes in package: 1

TapTap theme for VS Code

Open in VS Code

VS Code preview

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

TapTap Theme — TapTap

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#F8883B
activityBar.background#1D2127
activityBar.border#1D2127
activityBar.foreground#CFD0D2
activityBar.inactiveForeground#6C6F73
activityBarBadge.background#F66A0A
activityBarBadge.foreground#fff
badge.background#C55508
badge.foreground#A1E5E9
breadcrumb.activeSelectionForeground#B7B8BA
breadcrumb.focusForeground#CFD0D2
breadcrumb.foreground#8E9093
breadcrumbPicker.background#2b3036
button.background#0D767C
button.foreground#D0F2F4
button.hoverBackground#119EA5
button.secondaryBackground#34373D
button.secondaryForeground#fff
button.secondaryHoverBackground#4C5054
checkbox.background#34373D
checkbox.border#1D2127
debugToolBar.background#2b3036
descriptionForeground#8E9093
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#1D2127
dropdown.border#1D2127
dropdown.foreground#CFD0D2
dropdown.listBackground#1D2127
editor.background#1D2127
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#58606915
editor.foreground#CFD0D2
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2b3036
editor.linkedEditingBackground#3392FF22
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#A1E5E9
editorGroup.border#1D2127
editorGroupHeader.tabsBackground#191C21
editorGroupHeader.tabsBorder#1D2127
editorGutter.addedBackground#51C93E
editorGutter.deletedBackground#E25D5D
editorGutter.modifiedBackground#43CBD2
editorIndentGuide.activeBackground#34373D
editorIndentGuide.background#1D2127
editorLineNumber.activeForeground#CFD0D2
editorLineNumber.foreground#34373D
editorOverviewRuler.border#1D2127
editorWhitespace.foreground#34373D
editorWidget.background#191C21
errorForeground#E98585
focusBorder#119EA5
foreground#B7B8BA
gitDecoration.addedResourceForeground#74D465
gitDecoration.conflictingResourceForeground#74A1EF
gitDecoration.deletedResourceForeground#E25D5D
gitDecoration.ignoredResourceForeground#6C6F73
gitDecoration.modifiedResourceForeground#72D8DD
gitDecoration.submoduleResourceForeground#6C6F73
gitDecoration.untrackedResourceForeground#74D465
input.background#1D2127
input.border#1D2127
input.foreground#CFD0D2
input.placeholderForeground#8E9093
list.activeSelectionBackground#39414a
list.activeSelectionForeground#CFD0D2
list.focusBackground#0D767C
list.hoverBackground#282e34
list.hoverForeground#CFD0D2
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#CFD0D2
notificationCenterHeader.background#1D2127
notificationCenterHeader.foreground#8E9093
notifications.background#1D2127
notifications.border#1D2127
notifications.foreground#CFD0D2
notificationsErrorIcon.foreground#E25D5D
notificationsInfoIcon.foreground#72D8DD
notificationsWarningIcon.foreground#74A1EF
panel.background#191C21
panel.border#1D2127
panelInput.border#1D2127
panelTitle.activeBorder#F8883B
panelTitle.activeForeground#CFD0D2
panelTitle.inactiveForeground#8E9093
peekViewEditor.background#191C2188
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#191C21
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#34373D
pickerGroup.foreground#CFD0D2
progressBar.background#14BEC7
quickInput.background#1D2127
quickInput.foreground#CFD0D2
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#CFD0D2
settings.modifiedItemIndicator#14BEC7
sideBar.background#191C21
sideBar.border#1D2127
sideBar.foreground#B7B8BA
sideBarSectionHeader.background#191C21
sideBarSectionHeader.border#1D2127
sideBarSectionHeader.foreground#CFD0D2
sideBarTitle.foreground#CFD0D2
statusBar.background#1D2127
statusBar.border#1D2127
statusBar.debuggingBackground#124446
statusBar.debuggingForeground#fff
statusBar.foreground#B7B8BA
statusBar.noFolderBackground#1D2127
statusBarItem.prominentBackground#282e34
tab.activeBackground#1D2127
tab.activeBorder#1D2127
tab.activeBorderTop#F8883B
tab.activeForeground#CFD0D2
tab.border#1D2127
tab.hoverBackground#1D2127
tab.inactiveBackground#191C21
tab.inactiveForeground#8E9093
tab.unfocusedActiveBorder#1D2127
tab.unfocusedActiveBorderTop#1D2127
tab.unfocusedHoverBackground#1D2127
terminal.foreground#B7B8BA
textBlockQuote.background#1D2127
textBlockQuote.border#34373D
textCodeBlock.background#1D2127
textLink.activeForeground#A1E5E9
textLink.foreground#72D8DD
textPreformat.foreground#B7B8BA
textSeparator.foreground#4C5054
titleBar.activeBackground#1D2127
titleBar.activeForeground#CFD0D2
titleBar.border#1D2127
titleBar.inactiveBackground#191C21
titleBar.inactiveForeground#8E9093
tree.indentGuidesStroke#1D2127
welcomePage.buttonBackground#1D2127
welcomePage.buttonHoverBackground#34373D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6C6F73	—
constant, entity.name.constant, variable.other.constant, variable.language	#72D8DD	—
entity, entity.name	#FAA66C	—
variable.parameter.function	#CFD0D2	—
entity.name.tag	#97DF8B	—
keyword	#E98585	—
storage, storage.type	#E98585	—
storage.modifier.package, storage.modifier.import, storage.type.java	#CFD0D2	—
string, punctuation.definition.string, string punctuation.section.embedded source	#B9EBED	—
support	#72D8DD	—
meta.property-name	#72D8DD	—
variable	#74A1EF	—
variable.other	#CFD0D2	—
invalid.broken	#F1AEAE	italic
invalid.deprecated	#F1AEAE	italic
invalid.illegal	#F1AEAE	italic
invalid.unimplemented	#F1AEAE	italic
carriage-return	#1D2127	italic underline
message.error	#F1AEAE	—
string source	#CFD0D2	—
string variable	#72D8DD	—
source.regexp, string.regexp	#D0F2F4	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#D0F2F4	—
string.regexp constant.character.escape	#97DF8B	bold
support.constant	#72D8DD	—
support.variable	#72D8DD	—
meta.module-reference	#72D8DD	—
punctuation.definition.list.begin.markdown	#74A1EF	—
markup.heading, markup.heading entity.name	#72D8DD	bold
markup.quote	#97DF8B	—
markup.italic	#CFD0D2	italic
markup.bold	#CFD0D2	bold
markup.raw	#72D8DD	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#F1AEAE	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#97DF8B	—
markup.changed, punctuation.definition.changed	#74A1EF	—
markup.ignored, markup.untracked	#1D2127	—
meta.diff.range	#FAA66C	bold
meta.diff.header	#72D8DD	—
meta.separator	#72D8DD	bold
meta.output	#72D8DD	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#B7B8BA	—
brackethighlighter.unmatched	#F1AEAE	—
constant.other.reference.link, string.other.link	#D0F2F4	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}!`;
}