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 Ice

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ffffff
activityBar.border#edf2f7
activityBar.foreground#4a5568
activityBarBadge.background#805ad5
activityBarBadge.foreground#ffffff
badge.background#805ad5
badge.foreground#ffffff
button.background#319795
button.foreground#ffffff
button.hoverBackground#d53f8c
debugExceptionWidget.background#f7fafc
debugExceptionWidget.border#edf2f7
debugToolBar.background#f7fafc
diffEditor.insertedTextBackground#38a16920
diffEditor.removedTextBackground#e53e3e20
dropdown.background#f7fafc
dropdown.border#edf2f7
dropdown.foreground#1a202c
editor.background#ffffff
editor.findMatchBackground#d69e2e7f
editor.findMatchHighlightBackground#d69e2e3f
editor.findRangeHighlightBackground#f7fafc
editor.foreground#1a202c
editor.hoverHighlightBackground#edf2f7
editor.inactiveSelectionBackground#31979533
editor.lineHighlightBackground#eff6ff
editor.lineHighlightBorder#dbeafe
editor.rangeHighlightBackground#f7fafc
editor.selectionBackground#805ad522
editor.selectionHighlightBackground#f7fafc
editor.wordHighlightBackground#805ad57f
editor.wordHighlightStrongBackground#3182ce7f
editorBracketHighlight.foreground1#3182ce
editorBracketHighlight.foreground2#805ad5
editorBracketHighlight.foreground3#d53f8c
editorBracketHighlight.foreground4#805ad5
editorBracketHighlight.foreground5#3182ce
editorBracketHighlight.foreground6#0891b2
editorBracketHighlight.unexpectedBracket.foreground#ef4444
editorBracketMatch.background#f7fafc
editorBracketMatch.border#edf2f7
editorCodeLens.foreground#4a5568
editorCursor.foreground#805ad5
editorError.border#ffffff
editorError.foreground#e53e3e
editorGroup.border#edf2f7
editorGroup.dropBackground#edf2f77f
editorGroup.emptyBackground#ffffff
editorGroup.focusedEmptyBorder#edf2f7
editorGroupHeader.noTabsBackground#e2e8f0
editorGroupHeader.tabsBackground#e2e8f0
editorGroupHeader.tabsBorder#edf2f7
editorGutter.addedBackground#38a169
editorGutter.background#ffffff
editorGutter.deletedBackground#e53e3e
editorGutter.modifiedBackground#d69e2e
editorHoverWidget.background#f7fafc
editorHoverWidget.border#edf2f7
editorIndentGuide.activeBackground#93c5fd
editorIndentGuide.background#e5e7eb
editorLineNumber.foreground#cbd5e0
editorLink.activeForeground#d53f8c
editorMarkerNavigation.background#f7fafc
editorMarkerNavigationError.background#e53e3e
editorMarkerNavigationWarning.background#805ad5
editorOverviewRuler.addedForeground#38a1697f
editorOverviewRuler.border#edf2f7
editorOverviewRuler.commonContentForeground#805ad5
editorOverviewRuler.currentContentForeground#d53f8c
editorOverviewRuler.deletedForeground#e53e3e7f
editorOverviewRuler.errorForeground#e53e3e7f
editorOverviewRuler.findMatchForeground#d69e2ebf
editorOverviewRuler.incomingContentForeground#319795
editorOverviewRuler.infoForeground#3197957f
editorOverviewRuler.modifiedForeground#d69e2e7f
editorOverviewRuler.rangeHighlightForeground#edf2f7bf
editorOverviewRuler.selectionHighlightForeground#f7fafcbf
editorOverviewRuler.warningForeground#805ad57f
editorOverviewRuler.wordHighlightForeground#edf2f7bf
editorOverviewRuler.wordHighlightStrongForeground#a0aec0bf
editorPane.background#ffffff
editorRuler.foreground#f7fafc
editorSuggestWidget.background#f7fafc
editorSuggestWidget.border#edf2f7
editorSuggestWidget.foreground#1a202c
editorSuggestWidget.highlightForeground#3182ce
editorSuggestWidget.selectedBackground#edf2f7
editorWarning.border#ffffff
editorWarning.foreground#805ad5
editorWhitespace.foreground#f7fafc
editorWidget.background#f7fafc
editorWidget.border#edf2f7
errorForeground#e53e3e
extensionButton.prominentBackground#319795
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#d53f8c
focusBorder#805ad5
foreground#1a202c
gitDecoration.conflictingResourceForeground#d53f8c
gitDecoration.deletedResourceForeground#e53e3e
gitDecoration.ignoredResourceForeground#a0aec0
gitDecoration.modifiedResourceForeground#d69e2e
gitDecoration.untrackedResourceForeground#805ad5
input.background#f7fafc
input.border#edf2f7
input.foreground#1a202c
input.placeholderForeground#cbd5e0
inputOption.activeBorder#805ad5
inputValidation.errorBackground#f7fafc
inputValidation.errorBorder#e53e3e
inputValidation.infoBackground#f7fafc
inputValidation.infoBorder#319795
inputValidation.warningBackground#f7fafc
inputValidation.warningBorder#d69e2e
list.activeSelectionBackground#38a1697f
list.activeSelectionForeground#718096
list.dropBackground#a0aec0
list.errorForeground#e53e3e
list.focusBackground#a0aec0
list.focusForeground#1a202c
list.highlightForeground#805ad5
list.hoverBackground#f7fafc
list.hoverForeground#4a5568
list.inactiveSelectionBackground#edf2f7
list.inactiveSelectionForeground#a0aec0
list.invalidItemForeground#e53e3e
list.warningForeground#d69e2e
listFilterWidget.background#f7fafc
listFilterWidget.noMatchesOutline#e53e3e
listFilterWidget.outline#319795
merge.border#718096
merge.commonContentBackground#805ad54c
merge.commonHeaderBackground#805ad54c
merge.currentContentBackground#d53f8c4c
merge.currentHeaderBackground#d53f8c4c
merge.incomingContentBackground#3197954c
merge.incomingHeaderBackground#3197954c
panel.background#ffffff
panel.border#edf2f7
panelTitle.activeBorder#a0aec0
panelTitle.activeForeground#1a202c
panelTitle.inactiveForeground#718096
peekView.border#3182ce
peekViewEditor.background#f7fafc
peekViewEditor.matchHighlightBackground#d69e2e7f
peekViewEditorGutter.background#f7fafc
peekViewResult.background#f7fafc
peekViewResult.fileForeground#1a202c
peekViewResult.lineForeground#edf2f7
peekViewResult.matchHighlightBackground#d69e2e
peekViewResult.selectionBackground#a0aec0
peekViewResult.selectionForeground#1a202c
peekViewTitle.background#edf2f7
peekViewTitleDescription.foreground#4a5568
peekViewTitleLabel.foreground#1a202c
pickerGroup.border#4a5568
pickerGroup.foreground#1a202c
progressBar.background#38a169
scrollbar.shadow#1a202c66
scrollbarSlider.activeBackground#4a55687f
scrollbarSlider.background#a0aec07f
scrollbarSlider.hoverBackground#7180967f
selection.background#edf2f7
sideBar.background#ffffff
sideBar.border#edf2f7
sideBar.foreground#1a202c
sideBarSectionHeader.background#edf2f7
sideBarSectionHeader.foreground#1a202c
sideBarTitle.foreground#4a5568
statusBar.background#ffffff
statusBar.border#edf2f7
statusBar.debuggingBackground#ffffff
statusBar.debuggingBorder#805ad57f
statusBar.debuggingForeground#db2777
statusBar.foreground#319795
statusBar.noFolderBackground#ffffff
statusBar.noFolderBorder#805ad57f
statusBar.noFolderForeground#6d28d9
statusBarItem.activeBackground#cbd5e0
statusBarItem.hoverBackground#edf2f7
statusBarItem.prominentBackground#d53f8c
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#38a169
tab.activeBackground#ffffff
tab.activeBorder#805ad5
tab.activeForeground#1a202c
tab.border#edf2f7
tab.hoverBackground#ffffff
tab.inactiveBackground#edf2f7
tab.inactiveForeground#718096
tab.unfocusedActiveForeground#a0aec0
tab.unfocusedHoverBackground#edf2f7
tab.unfocusedInactiveForeground#718096
terminal.ansiBlack#000000
terminal.ansiBlue#3182ce
terminal.ansiBrightBlack#4a5568
terminal.ansiBrightBlue#4299e1
terminal.ansiBrightCyan#38b2ac
terminal.ansiBrightGreen#48bb78
terminal.ansiBrightMagenta#ed64a6
terminal.ansiBrightRed#e53e3e
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ecc94b
terminal.ansiCyan#319795
terminal.ansiGreen#38a169
terminal.ansiMagenta#3182ce
terminal.ansiRed#c53030
terminal.ansiWhite#ffffff
terminal.ansiYellow#d69e2e
terminal.background#ffffff
terminal.foreground#1a202c
terminal.selectionBackground#e2e8f0
terminalCursor.background#f7fafc
terminalCursor.foreground#4a5568
titleBar.activeBackground#ffffff
titleBar.activeForeground#4a5568
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#a0aec0
tree.indentGuidesStroke#f7fafc
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#1a202c66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#A0AEC0	—
constant	#3182CE	—
entity	#D53F8C	—
invalid	#E53E3E	—
keyword	#805AD5	—
storage	#3182CE	—
string	#38A169	—
support	#D53F8C	—
variable	#1A202C	—
markup.heading	#D53F8C	—
markup.deleted	#E53E3E	—
markup.inserted	#38A169	—
markup.changed	#D69E2E	—
markup.underline	—	underline
markup.underline.link	#319795	—
markup.list	#1A202C	—
markup.raw	#3182CE	—
entity.name.function, entity.other.attribute-name	#0891B2	—
entity.name.tag	#3182CE	—
meta.decorator, meta.decorator variable.other.readwrite	#0891B2	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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