Tailwind Colour Themes

Name: Tailwind Colour Themes
Author: Lucia Lovelace

Publisher: Lucia LovelaceThemes in package: 4

A set of matching themes based on the Tailwind colour scheme, based on Tailwind Breeze by Praveen Puglia.

GitHub

Color themes

VS Code preview

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

Tailwind Colour Themes — Tailwind Moon Gray

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#3F3F46
activityBar.border#52525B
activityBar.dropBackground#3F3F46
activityBar.foreground#D4D4D8
activityBarBadge.background#A78BFA
activityBarBadge.foreground#3F3F46
badge.background#A78BFA
badge.foreground#3F3F46
button.background#319795C0
button.foreground#ffffff
button.hoverBackground#319795
debugExceptionWidget.background#3F3F46
debugExceptionWidget.border#52525B
debugToolBar.background#3F3F46
diffEditor.insertedTextBackground#34D39920
diffEditor.removedTextBackground#DB277720
dropdown.background#3F3F46
dropdown.border#52525B
dropdown.foreground#E4E4E7
editor.background#27272A
editor.findMatchBackground#D69E2E7f
editor.findMatchHighlightBackground#D69E2E3f
editor.findRangeHighlightBackground#3F3F46
editor.foreground#E4E4E7
editor.hoverHighlightBackground#3F3F46
editor.inactiveSelectionBackground#31979533
editor.lineHighlightBackground#3F3F4680
editor.lineHighlightBorder#3F3F4600
editor.rangeHighlightBackground#3F3F46
editor.selectionBackground#A78BFA22
editor.selectionHighlightBackground#3F3F46
editor.wordHighlightBackground#A78BFA7f
editor.wordHighlightStrongBackground#60A5FA7f
editorBracketMatch.background#27272A
editorBracketMatch.border#52525B
editorCodeLens.foreground#4a5568
editorCursor.foreground#A78BFA
editorError.border#27272A
editorError.foreground#e53e3e
editorGroup.border#18181B
editorGroup.dropBackground#52525B7f
editorGroup.emptyBackground#3F3F46
editorGroup.focusedEmptyBorder#52525B
editorGroupHeader.noTabsBackground#27272A
editorGroupHeader.tabsBackground#27272A
editorGroupHeader.tabsBorder#18181B
editorGutter.addedBackground#34D399
editorGutter.background#27272A
editorGutter.deletedBackground#DB2777
editorGutter.modifiedBackground#60A5FA
editorHoverWidget.background#3F3F46
editorHoverWidget.border#52525B
editorIndentGuide.activeBackground#52525B
editorIndentGuide.background#52525B80
editorLineNumber.activeForeground#D4D4D8
editorLineNumber.foreground#71717A
editorLink.activeForeground#F472B6
editorMarkerNavigation.background#3F3F46
editorMarkerNavigationError.background#e53e3e
editorMarkerNavigationWarning.background#A78BFA
editorOverviewRuler.addedForeground#34D3997f
editorOverviewRuler.border#52525B
editorOverviewRuler.commonContentForeground#A78BFA
editorOverviewRuler.currentContentForeground#F472B6
editorOverviewRuler.deletedForeground#e53e3e7f
editorOverviewRuler.errorForeground#e53e3e7f
editorOverviewRuler.findMatchForeground#D69E2Ebf
editorOverviewRuler.incomingContentForeground#319795
editorOverviewRuler.infoForeground#3197957f
editorOverviewRuler.modifiedForeground#60A5FA7f
editorOverviewRuler.rangeHighlightForeground#52525Bbf
editorOverviewRuler.selectionHighlightForeground#3F3F46bf
editorOverviewRuler.warningForeground#A78BFA7f
editorOverviewRuler.wordHighlightForeground#52525Bbf
editorOverviewRuler.wordHighlightStrongForeground#a0aec0bf
editorPane.background#3F3F46
editorRuler.foreground#3F3F46
editorSuggestWidget.background#3F3F46
editorSuggestWidget.border#52525B
editorSuggestWidget.foreground#E4E4E7
editorSuggestWidget.highlightForeground#60A5FA
editorSuggestWidget.selectedBackground#52525B
editorWarning.border#27272A
editorWarning.foreground#A78BFA
editorWhitespace.foreground#3F3F46
editorWidget.background#3F3F46
editorWidget.border#52525B
errorForeground#e53e3e
extensionButton.prominentBackground#319795
extensionButton.prominentForeground#3F3F46
extensionButton.prominentHoverBackground#F472B6
focusBorder#A78BFA
foreground#E4E4E7
gitDecoration.conflictingResourceForeground#EF4444
gitDecoration.deletedResourceForeground#DB2777
gitDecoration.ignoredResourceForeground#A1A1AA
gitDecoration.modifiedResourceForeground#93C5FD
gitDecoration.untrackedResourceForeground#C4B5FD
icon.foreground#A1A1AA
input.background#27272A
input.border#18181B
input.foreground#E4E4E7
input.placeholderForeground#71717A
inputOption.activeBorder#A78BFA
inputValidation.errorBackground#3F3F46
inputValidation.errorBorder#e53e3e
inputValidation.infoBackground#3F3F46
inputValidation.infoBorder#319795
inputValidation.warningBackground#3F3F46
inputValidation.warningBorder#D69E2E
list.activeSelectionBackground#52525B
list.activeSelectionForeground#F4F4F5
list.dropBackground#a0aec0
list.errorForeground#e53e3e
list.focusBackground#a0aec0
list.focusForeground#E4E4E7
list.highlightForeground#A78BFA
list.hoverBackground#3F3F46
list.hoverForeground#F4F4F5
list.inactiveSelectionBackground#27272A
list.inactiveSelectionForeground#F4F4F5
list.invalidItemForeground#e53e3e
list.warningForeground#D69E2E
listFilterWidget.background#3F3F46
listFilterWidget.noMatchesOutline#e53e3e
listFilterWidget.outline#319795
merge.border#718096
merge.commonContentBackground#A78BFA4c
merge.commonHeaderBackground#A78BFA4c
merge.currentContentBackground#F472B64c
merge.currentHeaderBackground#F472B64c
merge.incomingContentBackground#3197954c
merge.incomingHeaderBackground#3197954c
notification.background#3F3F46
notification.buttonBackground#319795
notification.buttonForeground#3F3F46
notification.buttonHoverBackground#F472B6
notification.errorBackground#e53e3e
notification.errorForeground#3F3F46
notification.foreground#E4E4E7
notification.infoBackground#319795
notification.infoForeground#3F3F46
notification.warningBackground#A78BFA
notification.warningForeground#3F3F46
panel.background#27272A
panel.border#18181B
panelTitle.activeBorder#a0aec0
panelTitle.activeForeground#E4E4E7
panelTitle.inactiveForeground#718096
peekView.border#60A5FA
peekViewEditor.background#3F3F46
peekViewEditor.matchHighlightBackground#D69E2E7f
peekViewEditorGutter.background#3F3F46
peekViewResult.background#3F3F46
peekViewResult.fileForeground#E4E4E7
peekViewResult.lineForeground#52525B
peekViewResult.matchHighlightBackground#D69E2E
peekViewResult.selectionBackground#a0aec0
peekViewResult.selectionForeground#E4E4E7
peekViewTitle.background#52525B
peekViewTitleDescription.foreground#4a5568
peekViewTitleLabel.foreground#E4E4E7
pickerGroup.border#4a5568
pickerGroup.foreground#E4E4E7
progressBar.background#34D399
scrollbar.shadow#000000A0
scrollbarSlider.activeBackground#4a55687f
scrollbarSlider.background#a0aec07f
scrollbarSlider.hoverBackground#7180967f
selection.background#52525B
settings.focusedRowBackground#3F3F4640
settings.headerForeground#E4E4E7
sideBar.background#2f2f33
sideBar.border#18181B
sideBar.foreground#E4E4E7
sideBarSectionHeader.background#27272A00
sideBarSectionHeader.foreground#E4E4E7
sideBarTitle.foreground#D4D4D800
statusBar.background#18181B
statusBar.border#18181B00
statusBar.debuggingBackground#18181B
statusBar.debuggingBorder#A78BFA7f
statusBar.debuggingForeground#D4D4D8
statusBar.foreground#D4D4D8
statusBar.noFolderBackground#18181B
statusBar.noFolderBorder#A78BFA7f
statusBar.noFolderForeground#D4D4D8
statusBarItem.activeBackground#F472B680
statusBarItem.hoverBackground#34D39940
statusBarItem.prominentBackground#F472B6
statusBarItem.prominentHoverBackground#34D399
tab.activeBackground#3F3F4640
tab.activeBorder#A78BFA
tab.activeForeground#FAFAFA
tab.border#18181B
tab.hoverBackground#3F3F46
tab.inactiveBackground#27272A
tab.inactiveForeground#D4D4D8
tab.unfocusedActiveBackground#27272A
tab.unfocusedActiveForeground#D4D4D8
tab.unfocusedHoverBackground#3F3F46
tab.unfocusedInactiveForeground#D4D4D8
terminal.ansiBlack#000000
terminal.ansiBlue#60A5FA
terminal.ansiBrightBlack#4a5568
terminal.ansiBrightBlue#4299E1
terminal.ansiBrightCyan#38B2AC
terminal.ansiBrightGreen#48BB78
terminal.ansiBrightMagenta#ED64A6
terminal.ansiBrightRed#E53E3E
terminal.ansiBrightWhite#3F3F46
terminal.ansiBrightYellow#ECC94B
terminal.ansiCyan#319795
terminal.ansiGreen#34D399
terminal.ansiMagenta#60A5FA
terminal.ansiRed#C53030
terminal.ansiWhite#3F3F46
terminal.ansiYellow#D69E2E
terminal.background#27272A
terminal.foreground#E4E4E7
terminal.selectionBackground#A78BFA22
terminalCursor.background#3F3F46
terminalCursor.foreground#4a5568
titleBar.activeBackground#18181B
titleBar.activeForeground#E4E4E7
titleBar.inactiveBackground#18181B
titleBar.inactiveForeground#71717A
tree.indentGuidesStroke#71717A
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	#e53e3e	—
keyword	#A78BFA	—
storage	#60A5FA	—
string	#34D399	—
support	#F472B6	—
variable	#E4E4E7	—
markup.heading	#F472B6	—
markup.deleted	#e53e3e	—
markup.inserted	#34D399	—
markup.changed	#D69E2E	—
markup.underline	—	underline
markup.underline.link	#319795	—
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}!`;
}