tailwind theme zinc

Name: tailwind theme zinc
Author: laurent lahmy

Publisher: laurent lahmyThemes in package: 1

tailwind theme zinc

GitHub

VS Code preview

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

tailwind theme zinc — tailwind-theme-zinc

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#333338
activityBar.dropBackground#3f3f46
activityBar.foreground#d4d4d8
activityBarBadge.background#a78bfa
activityBarBadge.foreground#3f3f46
badge.background#a78bfa
badge.foreground#3f3f46
button.background#0f766e
button.foreground#fff
button.hoverBackground#115e59
debugExceptionWidget.background#3f3f46
debugExceptionWidget.border#52525b
debugToolBar.background#3f3f46
diffEditor.insertedLineBackground:#10b98111
diffEditor.insertedTextBackground#10b98155
diffEditor.removedLineBackground:#ef444444
diffEditor.removedTextBackground#ef444466
dropdown.background#3f3f46
dropdown.border#52525b
dropdown.foreground#e4e4e7
editor.background#1F1F22
editor.findMatchBackground#a16207
editor.findMatchHighlightBackground#854d0e
editor.findRangeHighlightBackground#3f3f46
editor.foreground#f4f4f5
editor.hoverHighlightBackground#3f3f46
editor.inactiveSelectionBackground#115e59
editor.lineHighlightBackground#1F1F22
editor.rangeHighlightBackground#3f3f46
editor.selectionBackground#71717a66
editor.selectionHighlightBackground#71717a99
editor.wordHighlightBackground#a78bfa88
editor.wordHighlightStrongBackground#c4b5fd88
editorBracketMatch.border#71717a44
editorCodeLens.foreground#71717a
editorCursor.foreground#ddd6fe
editorError.border#1F1F22
editorError.foreground#dc2626
editorGroup.border#1F1F22
editorGroup.dropBackground#71717a
editorGroup.emptyBackground#3f3f46
editorGroupHeader.noTabsBackground#1F1F22
editorGroupHeader.tabsBackground#1F1F22
editorGutter.addedBackground#10b98155
editorGutter.background#1F1F22
editorGutter.deletedBackground#ef444466
editorGutter.modifiedBackground#f59e0b88
editorHoverWidget.background#3f3f46
editorHoverWidget.border#52525b
editorIndentGuide.activeBackground#39393F
editorIndentGuide.background#2D2D31
editorLineNumber.activeForeground#d4d4d8
editorLineNumber.foreground#71717a
editorLink.activeForeground#f472b6
editorMarkerNavigation.background#3f3f46
editorMarkerNavigationError.background#dc2626
editorMarkerNavigationWarning.background#a78bfa
editorOverviewRuler.addedForeground#10b98188
editorOverviewRuler.border#1F1F22
editorOverviewRuler.commonContentForeground#a78bfa
editorOverviewRuler.currentContentForeground#f472b6
editorOverviewRuler.deletedForeground#ef444488
editorOverviewRuler.errorForeground#ef444488
editorOverviewRuler.findMatchForeground#eab30888
editorOverviewRuler.incomingContentForeground#115e59
editorOverviewRuler.infoForeground#10b98188
editorOverviewRuler.modifiedForeground#f59e0b99
editorOverviewRuler.rangeHighlightForeground#71717a44
editorOverviewRuler.selectionHighlightForeground#71717a55
editorOverviewRuler.warningForeground#4f46e588
editorOverviewRuler.wordHighlightForeground#71717a
editorOverviewRuler.wordHighlightStrongForeground#a1a1aa
editorPane.background#3f3f46
editorRuler.foreground#3f3f46
editorSuggestWidget.background#3f3f46
editorSuggestWidget.border#52525b
editorSuggestWidget.foreground#e4e4e7
editorSuggestWidget.highlightForeground#60a5fa
editorSuggestWidget.selectedBackground#52525b
editorWarning.border#1F1F22
editorWarning.foreground#fbbf24
editorWhitespace.foreground#3f3f46
editorWidget.background#3f3f46
editorWidget.border#52525b
errorForeground#dc2626
extensionButton.prominentBackground#115e59
extensionButton.prominentForeground#3f3f46
extensionButton.prominentHoverBackground#f472b6
focusBorder#c4b5fd
foreground#e4e4e7
gitDecoration.conflictingResourceForeground#ef444488
gitDecoration.deletedResourceForeground#ef444488
gitDecoration.ignoredResourceForeground#71717a88
gitDecoration.modifiedResourceForeground#f59e0b88
gitDecoration.untrackedResourceForeground#71717a88
icon.foreground#a1a1aa
input.background#1F1F22
input.border#18181b
input.foreground#e4e4e7
input.placeholderForeground#71717a
inputOption.activeBorder#a78bfa
inputValidation.errorBackground#3f3f46
inputValidation.errorBorder#dc2626
inputValidation.infoBackground#3f3f46
inputValidation.infoBorder#115e59
inputValidation.warningBackground#3f3f46
inputValidation.warningBorder#ea580c
list.activeSelectionBackground#52525b
list.activeSelectionForeground#e4e4e7
list.dropBackground#bae6fd
list.errorForeground#dc2626
list.focusBackground#bae6fd
list.focusForeground#e4e4e7
list.highlightForeground#a78bfa
list.hoverBackground#3f3f46
list.hoverForeground#e4e4e7
list.inactiveSelectionBackground#1F1F22
list.inactiveSelectionForeground#e4e4e7
list.invalidItemForeground#dc2626
list.warningForeground#ea580c
listFilterWidget.background#3f3f46
listFilterWidget.noMatchesOutline#dc2626
listFilterWidget.outline#115e59
merge.border#8b5cf6
merge.commonContentBackground#6366f188
merge.commonHeaderBackground#6366f188
merge.currentContentBackground#ec489988
merge.currentHeaderBackground#ec489988
merge.incomingContentBackground#14b8a688
merge.incomingHeaderBackground#14b8a688
notification.background#3f3f46
notification.buttonBackground#115e59
notification.buttonForeground#3f3f46
notification.buttonHoverBackground#f472b6
notification.errorBackground#dc2626
notification.errorForeground#3f3f46
notification.foreground#e4e4e7
notification.infoBackground#115e59
notification.infoForeground#3f3f46
notification.warningBackground#fbbf24
notification.warningForeground#3f3f46
panel.background#1F1F22
panelSection.border#1F1F22
panelSectionHeader.border#1F1F22
panelTitle.activeBorder#bae6fd
panelTitle.activeForeground#e4e4e7
panelTitle.inactiveForeground#a78bfa
peekView.border#60a5fa
peekViewEditor.background#3f3f46
peekViewEditor.matchHighlightBackground#a16207
peekViewEditorGutter.background#3f3f46
peekViewResult.background#3f3f46
peekViewResult.fileForeground#e4e4e7
peekViewResult.lineForeground#52525b
peekViewResult.matchHighlightBackground#ea580c
peekViewResult.selectionBackground#bae6fd
peekViewResult.selectionForeground#e4e4e7
peekViewTitle.background#52525b
peekViewTitleDescription.foreground#71717a
peekViewTitleLabel.foreground#e4e4e7
pickerGroup.border#71717a
pickerGroup.foreground#e4e4e7
progressBar.background#34d399
scrollbar.shadow#18181b
scrollbarSlider.activeBackground#71717a66
scrollbarSlider.background#71717a88
scrollbarSlider.hoverBackground#71717a77
selection.background#52525b
settings.focusedRowBackground#3f3f46
settings.headerForeground#e4e4e7
sideBar.background#27272a
sideBar.foreground#e4e4e7
sideBarSectionHeader.background#27272a
sideBarSectionHeader.foreground#e4e4e7
sideBySideEditor.horizontalBorder#1F1F22
sideBySideEditor.verticalBorder#1F1F22
statusBar.background#1F1F22
statusBar.debuggingBackground#18181b
statusBar.debuggingBorder#4f46e5
statusBar.debuggingForeground#d4d4d8
statusBar.foreground#d4d4d8
statusBar.noFolderBackground#18181b
statusBar.noFolderBorder#4f46e5
statusBar.noFolderForeground#d4d4d8
statusBarItem.activeBackground#ec4899
statusBarItem.hoverBackground#22c55e
statusBarItem.prominentBackground#f472b6
statusBarItem.prominentHoverBackground#34d399
tab.activeBackground#333338
tab.activeForeground#fafafa
tab.hoverBackground#3f3f46
tab.inactiveBackground#1F1F22
tab.inactiveForeground#d4d4d8
tab.unfocusedActiveBackground#1F1F22
tab.unfocusedActiveForeground#d4d4d8
tab.unfocusedHoverBackground#3f3f46
tab.unfocusedInactiveForeground#d4d4d8
terminal.ansiBlack#000
terminal.ansiBlue#60a5fa
terminal.ansiBrightBlack#71717a
terminal.ansiBrightBlue#3b82f6
terminal.ansiBrightCyan#22c55e
terminal.ansiBrightGreen#84cc16
terminal.ansiBrightMagenta#fb7185
terminal.ansiBrightRed#dc2626
terminal.ansiBrightWhite#3f3f46
terminal.ansiBrightYellow#fde047
terminal.ansiCyan#115e59
terminal.ansiGreen#34d399
terminal.ansiMagenta#60a5fa
terminal.ansiRed#ef4444
terminal.ansiWhite#3f3f46
terminal.ansiYellow#ea580c
terminal.background#1F1F22
terminal.foreground#e4e4e7
terminal.selectionBackground#18181b
terminalCursor.background#3f3f46
terminalCursor.foreground#71717a
titleBar.activeBackground#1F1F22
titleBar.activeForeground#e4e4e7
titleBar.inactiveBackground#18181b
titleBar.inactiveForeground#71717a
tree.indentGuidesStroke#2D2D31
walkThrough.embeddedEditorBackground#3f3f46
welcomePage.buttonBackground#3f3f46
welcomePage.buttonHoverBackground#52525b
widget.shadow#18181b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#e4e4e7	—
comment	#a1a1aa	—
constant	#60a5fa	—
entity.name.tag	#60a5fa	—
entity.other.attribute-name	#67e8f9	—
entity	#f472b6	—
entity.name.function	#67e8f9	—
invalid	#dc2626	—
keyword	#a78bfa	—
storage	#60a5fa	—
string	#34d399	—
support	#f472b6	—
variable	#e4e4e7	—
markup.heading	#f472b6	—
markup.deleted	#dc2626	—
markup.inserted	#34d399	—
markup.changed	#059669	—
markup.underline	—	underline
markup.underline.link	#115e59	—
markup.list	#e4e4e7	—
markup.raw	#60a5fa	—

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