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 Blue

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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