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

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#374151
activityBar.border#4B5563
activityBar.dropBackground#374151
activityBar.foreground#D1D5DB
activityBarBadge.background#A78BFA
activityBarBadge.foreground#374151
badge.background#A78BFA
badge.foreground#374151
button.background#319795C0
button.foreground#ffffff
button.hoverBackground#319795
debugExceptionWidget.background#374151
debugExceptionWidget.border#4B5563
debugToolBar.background#374151
diffEditor.insertedTextBackground#34D39920
diffEditor.removedTextBackground#DB277720
dropdown.background#374151
dropdown.border#4B5563
dropdown.foreground#E5E7EB
editor.background#1F2937
editor.findMatchBackground#D69E2E7f
editor.findMatchHighlightBackground#D69E2E3f
editor.findRangeHighlightBackground#374151
editor.foreground#E5E7EB
editor.hoverHighlightBackground#374151
editor.inactiveSelectionBackground#31979533
editor.lineHighlightBackground#37415180
editor.lineHighlightBorder#37415100
editor.rangeHighlightBackground#374151
editor.selectionBackground#A78BFA22
editor.selectionHighlightBackground#374151
editor.wordHighlightBackground#A78BFA7f
editor.wordHighlightStrongBackground#60A5FA7f
editorBracketMatch.background#1F2937
editorBracketMatch.border#4B5563
editorCodeLens.foreground#4a5568
editorCursor.foreground#A78BFA
editorError.border#1F2937
editorError.foreground#e53e3e
editorGroup.border#111827
editorGroup.dropBackground#4B55637f
editorGroup.emptyBackground#374151
editorGroup.focusedEmptyBorder#4B5563
editorGroupHeader.noTabsBackground#1F2937
editorGroupHeader.tabsBackground#1F2937
editorGroupHeader.tabsBorder#111827
editorGutter.addedBackground#34D399
editorGutter.background#1F2937
editorGutter.deletedBackground#DB2777
editorGutter.modifiedBackground#60A5FA
editorHoverWidget.background#374151
editorHoverWidget.border#4B5563
editorIndentGuide.activeBackground#4B5563
editorIndentGuide.background#4B556380
editorLineNumber.activeForeground#D1D5DB
editorLineNumber.foreground#6B7280
editorLink.activeForeground#F472B6
editorMarkerNavigation.background#374151
editorMarkerNavigationError.background#e53e3e
editorMarkerNavigationWarning.background#A78BFA
editorOverviewRuler.addedForeground#34D3997f
editorOverviewRuler.border#4B5563
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#4B5563bf
editorOverviewRuler.selectionHighlightForeground#374151bf
editorOverviewRuler.warningForeground#A78BFA7f
editorOverviewRuler.wordHighlightForeground#4B5563bf
editorOverviewRuler.wordHighlightStrongForeground#a0aec0bf
editorPane.background#374151
editorRuler.foreground#374151
editorSuggestWidget.background#374151
editorSuggestWidget.border#4B5563
editorSuggestWidget.foreground#E5E7EB
editorSuggestWidget.highlightForeground#60A5FA
editorSuggestWidget.selectedBackground#4B5563
editorWarning.border#1F2937
editorWarning.foreground#A78BFA
editorWhitespace.foreground#374151
editorWidget.background#374151
editorWidget.border#4B5563
errorForeground#e53e3e
extensionButton.prominentBackground#319795
extensionButton.prominentForeground#374151
extensionButton.prominentHoverBackground#F472B6
focusBorder#A78BFA
foreground#E5E7EB
gitDecoration.conflictingResourceForeground#EF4444
gitDecoration.deletedResourceForeground#DB2777
gitDecoration.ignoredResourceForeground#9CA3AF
gitDecoration.modifiedResourceForeground#93C5FD
gitDecoration.untrackedResourceForeground#C4B5FD
icon.foreground#9CA3AF
input.background#1F2937
input.border#111827
input.foreground#E5E7EB
input.placeholderForeground#6B7280
inputOption.activeBorder#A78BFA
inputValidation.errorBackground#374151
inputValidation.errorBorder#e53e3e
inputValidation.infoBackground#374151
inputValidation.infoBorder#319795
inputValidation.warningBackground#374151
inputValidation.warningBorder#D69E2E
list.activeSelectionBackground#4B5563
list.activeSelectionForeground#F3F4F6
list.dropBackground#a0aec0
list.errorForeground#e53e3e
list.focusBackground#a0aec0
list.focusForeground#E5E7EB
list.highlightForeground#A78BFA
list.hoverBackground#374151
list.hoverForeground#F3F4F6
list.inactiveSelectionBackground#1F2937
list.inactiveSelectionForeground#F3F4F6
list.invalidItemForeground#e53e3e
list.warningForeground#D69E2E
listFilterWidget.background#374151
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#374151
notification.buttonBackground#319795
notification.buttonForeground#374151
notification.buttonHoverBackground#F472B6
notification.errorBackground#e53e3e
notification.errorForeground#374151
notification.foreground#E5E7EB
notification.infoBackground#319795
notification.infoForeground#374151
notification.warningBackground#A78BFA
notification.warningForeground#374151
panel.background#1F2937
panel.border#111827
panelTitle.activeBorder#a0aec0
panelTitle.activeForeground#E5E7EB
panelTitle.inactiveForeground#718096
peekView.border#60A5FA
peekViewEditor.background#374151
peekViewEditor.matchHighlightBackground#D69E2E7f
peekViewEditorGutter.background#374151
peekViewResult.background#374151
peekViewResult.fileForeground#E5E7EB
peekViewResult.lineForeground#4B5563
peekViewResult.matchHighlightBackground#D69E2E
peekViewResult.selectionBackground#a0aec0
peekViewResult.selectionForeground#E5E7EB
peekViewTitle.background#4B5563
peekViewTitleDescription.foreground#4a5568
peekViewTitleLabel.foreground#E5E7EB
pickerGroup.border#4a5568
pickerGroup.foreground#E5E7EB
progressBar.background#34D399
scrollbar.shadow#000000A0
scrollbarSlider.activeBackground#4a55687f
scrollbarSlider.background#a0aec07f
scrollbarSlider.hoverBackground#7180967f
selection.background#4B5563
settings.focusedRowBackground#37415140
settings.headerForeground#E5E7EB
sideBar.background#2b3544
sideBar.border#111827
sideBar.foreground#E5E7EB
sideBarSectionHeader.background#1F293700
sideBarSectionHeader.foreground#E5E7EB
sideBarTitle.foreground#D1D5DB00
statusBar.background#111827
statusBar.border#11182700
statusBar.debuggingBackground#111827
statusBar.debuggingBorder#A78BFA7f
statusBar.debuggingForeground#D1D5DB
statusBar.foreground#D1D5DB
statusBar.noFolderBackground#111827
statusBar.noFolderBorder#A78BFA7f
statusBar.noFolderForeground#D1D5DB
statusBarItem.activeBackground#F472B680
statusBarItem.hoverBackground#34D39940
statusBarItem.prominentBackground#F472B6
statusBarItem.prominentHoverBackground#34D399
tab.activeBackground#37415140
tab.activeBorder#A78BFA
tab.activeForeground#F9FAFB
tab.border#111827
tab.hoverBackground#374151
tab.inactiveBackground#1F2937
tab.inactiveForeground#D1D5DB
tab.unfocusedActiveBackground#1F2937
tab.unfocusedActiveForeground#D1D5DB
tab.unfocusedHoverBackground#374151
tab.unfocusedInactiveForeground#D1D5DB
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#374151
terminal.ansiBrightYellow#ECC94B
terminal.ansiCyan#319795
terminal.ansiGreen#34D399
terminal.ansiMagenta#60A5FA
terminal.ansiRed#C53030
terminal.ansiWhite#374151
terminal.ansiYellow#D69E2E
terminal.background#1F2937
terminal.foreground#E5E7EB
terminal.selectionBackground#A78BFA22
terminalCursor.background#374151
terminalCursor.foreground#4a5568
titleBar.activeBackground#111827
titleBar.activeForeground#E5E7EB
titleBar.inactiveBackground#111827
titleBar.inactiveForeground#6B7280
tree.indentGuidesStroke#6B7280
walkThrough.embeddedEditorBackground#374151
welcomePage.buttonBackground#374151
welcomePage.buttonHoverBackground#4B5563
widget.shadow#111827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#E5E7EB	—
comment	#9CA3AF	—
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	#E5E7EB	—
markup.heading	#F472B6	—
markup.deleted	#e53e3e	—
markup.inserted	#34D399	—
markup.changed	#D69E2E	—
markup.underline	—	underline
markup.underline.link	#319795	—
markup.list	#E5E7EB	—
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}!`;
}