Catppuccin vscode theme

Name: Catppuccin vscode theme
Author: siriscmv

Publisher: siriscmvThemes in package: 16

Soothing pastel theme

GitHub

Color themes

VS Code preview

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

Catppuccin vscode theme — Catppuccin Mocha Darker

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.activeBorder#cba6f7b3
activityBar.background#010101
activityBar.border#010101
activityBar.foreground#6c7086cc
activityBar.inactiveForeground#6c708699
activityBarBadge.background#cba6f7
activityBarBadge.foreground#010101
badge.background#cba6f733
badge.foreground#cba6f7
button.background#cba6f7
button.foreground#010101
button.hoverBackground#c6a1f2
button.secondaryBackground#6c708633
button.secondaryForeground#cdd6f4
button.secondaryHoverBackground#6c708680
debugConsoleInputIcon.foreground#cba6f7
debugExceptionWidget.background#010101
debugExceptionWidget.border#000000
debugIcon.breakpointDisabledForeground#f5c2e780
debugIcon.breakpointForeground#f5c2e7
debugToolBar.background#010101
descriptionForeground#6c7086
diffEditor.diagonalFill#000000
diffEditor.insertedTextBackground#a6e3a11f
diffEditor.removedTextBackground#f38ba81f
dropdown.background#010101
dropdown.border#6c708645
dropdown.foreground#6c7086
editor.background#010101
editor.findMatchBackground#9399b2
editor.findMatchBorder#9399b2
editor.findMatchHighlightBackground#9399b266
editor.findMatchHighlightBorder#858ba366
editor.findRangeHighlightBackground#9399b240
editor.foreground#cdd6f4
editor.inactiveSelectionBackground#89b4fa21
editor.lineHighlightBackground#000000
editor.rangeHighlightBackground#9399b233
editor.selectionBackground#89b4fa40
editor.selectionHighlightBackground#a6e3a126
editor.selectionHighlightBorder#a6e3a100
editor.snippetTabstopHighlightBackground#a6e3a133
editor.wordHighlightBackground#89b4fa14
editor.wordHighlightBorder#89b4fa80
editor.wordHighlightStrongBackground#a6e3a114
editor.wordHighlightStrongBorder#a6e3a180
editorBracketMatch.background#bac2de4d
editorBracketMatch.border#bac2de4d
editorCodeLens.foreground#74c7ec80
editorCursor.foreground#cba6f7
editorError.foreground#f38ba8
editorGroup.background#010101
editorGroup.border#000000
editorGroupHeader.noTabsBackground#010101
editorGroupHeader.tabsBackground#010101
editorGroupHeader.tabsBorder#010101
editorGutter.addedBackground#a6e3a1cc
editorGutter.deletedBackground#f38ba8cc
editorGutter.modifiedBackground#89b4facc
editorHoverWidget.background#010101
editorHoverWidget.border#000000
editorIndentGuide.activeBackground#31324459
editorIndentGuide.background#3132442e
editorLineNumber.activeForeground#cba6f7
editorLineNumber.foreground#bac2de66
editorLink.activeForeground#cba6f7
editorMarkerNavigation.background#010101
editorOverviewRuler.addedForeground#a6e3a1
editorOverviewRuler.border#000000
editorOverviewRuler.bracketMatchForeground#bac2deb3
editorOverviewRuler.deletedForeground#f38ba8
editorOverviewRuler.errorForeground#f38ba8
editorOverviewRuler.findMatchForeground#9399b2
editorOverviewRuler.modifiedForeground#89b4fa
editorOverviewRuler.warningForeground#cba6f7
editorOverviewRuler.wordHighlightForeground#89b4fa66
editorOverviewRuler.wordHighlightStrongForeground#a6e3a166
editorRuler.foreground#3132442e
editorSuggestWidget.background#010101
editorSuggestWidget.border#000000
editorSuggestWidget.highlightForeground#cba6f7
editorSuggestWidget.selectedBackground#9399b226
editorWarning.foreground#cba6f7
editorWhitespace.foreground#bac2de66
editorWidget.background#010101
editorWidget.border#000000
errorForeground#f38ba8
extensionButton.prominentBackground#cba6f7
extensionButton.prominentForeground#020202
extensionButton.prominentHoverBackground#c6a1f2
focusBorder#cba6f7b3
foreground#6c7086
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground#f38ba8b3
gitDecoration.ignoredResourceForeground#6c708680
gitDecoration.modifiedResourceForeground#89b4fab3
gitDecoration.submoduleResourceForeground#cba6f7b3
gitDecoration.untrackedResourceForeground#a6e3a1b3
icon.foreground#6c7086
input.background#020202
input.border#6c708645
input.foreground#cdd6f4
input.placeholderForeground#6c708680
inputOption.activeBackground#cba6f733
inputOption.activeBorder#cba6f74d
inputOption.activeForeground#cba6f7
inputValidation.errorBackground#020202
inputValidation.errorBorder#f38ba8
inputValidation.infoBackground#010101
inputValidation.infoBorder#89dceb
inputValidation.warningBackground#010101
inputValidation.warningBorder#f9e2af
keybindingLabel.background#6c70861a
keybindingLabel.border#cdd6f41a
keybindingLabel.bottomBorder#cdd6f41a
keybindingLabel.foreground#cdd6f4
list.activeSelectionBackground#9399b226
list.activeSelectionForeground#cdd6f4
list.deemphasizedForeground#f38ba8
list.errorForeground#f38ba8
list.filterMatchBackground#858ba366
list.filterMatchBorder#9399b266
list.focusBackground#9399b226
list.focusForeground#cdd6f4
list.focusOutline#9399b226
list.highlightForeground#cba6f7
list.hoverBackground#9399b226
list.inactiveSelectionBackground#9399b21f
list.inactiveSelectionForeground#6c7086
list.invalidItemForeground#6c70864d
listFilterWidget.background#010101
listFilterWidget.noMatchesOutline#f38ba8
listFilterWidget.outline#cba6f7
minimap.background#010101
minimap.errorHighlight#f38ba8
minimap.findMatchHighlight#9399b2
minimap.selectionHighlight#89b4fa40
minimapGutter.addedBackground#a6e3a1
minimapGutter.deletedBackground#f38ba8
minimapGutter.modifiedBackground#89b4fa
panel.background#010101
panel.border#000000
panelTitle.activeBorder#cba6f7
panelTitle.activeForeground#cdd6f4
panelTitle.inactiveForeground#6c7086
peekView.border#9399b226
peekViewEditor.background#010101
peekViewEditor.matchHighlightBackground#9399b266
peekViewEditor.matchHighlightBorder#858ba366
peekViewResult.background#010101
peekViewResult.fileForeground#cdd6f4
peekViewResult.lineForeground#6c7086
peekViewResult.matchHighlightBackground#9399b266
peekViewResult.selectionBackground#9399b226
peekViewTitle.background#9399b226
peekViewTitleDescription.foreground#6c7086
peekViewTitleLabel.foreground#cdd6f4
pickerGroup.border#000000
pickerGroup.foreground#6c708680
progressBar.background#cba6f7
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#cba6f7b3
scrollbarSlider.background#cba6f766
scrollbarSlider.hoverBackground#cba6f799
selection.background#89b4fa40
settings.headerForeground#cdd6f4
settings.modifiedItemIndicator#89b4fa
sideBar.background#010101
sideBar.border#010101
sideBarSectionHeader.background#010101
sideBarSectionHeader.border#010101
sideBarSectionHeader.foreground#cba6f7
sideBarTitle.foreground#cba6f7
statusBar.background#010101
statusBar.border#010101
statusBar.debuggingBackground#f5c2e7
statusBar.debuggingForeground#020202
statusBar.foreground#6c7086
statusBar.noFolderBackground#010101
statusBarItem.activeBackground#6c708633
statusBarItem.hoverBackground#6c708633
statusBarItem.prominentBackground#000000
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#cba6f7
statusBarItem.remoteForeground#020202
tab.activeBackground#010101
tab.activeBorder#cba6f7
tab.activeForeground#cdd6f4
tab.border#010101
tab.inactiveBackground#010101
tab.inactiveForeground#6c7086
tab.unfocusedActiveBorder#6c7086
tab.unfocusedActiveForeground#6c7086
tab.unfocusedInactiveForeground#6c7086
terminal.ansiBlack#11111b
terminal.ansiBlue#84aff5
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#89b4fa
terminal.ansiBrightCyan#94e2d5
terminal.ansiBrightGreen#a6e3a1
terminal.ansiBrightMagenta#cba6f7
terminal.ansiBrightRed#f38ba8
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f9e2af
terminal.ansiCyan#8fddd0
terminal.ansiGreen#a6e3a1
terminal.ansiMagenta#c6a1f2
terminal.ansiRed#ee86a3
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f4ddaa
terminal.background#010101
terminal.foreground#cdd6f4
textBlockQuote.background#010101
textLink.activeForeground#cba6f7
textLink.foreground#cba6f7
textPreformat.foreground#cdd6f4
titleBar.activeBackground#010101
titleBar.activeForeground#cdd6f4
titleBar.border#010101
titleBar.inactiveBackground#010101
titleBar.inactiveForeground#6c7086
tree.indentGuidesStroke#31324459
walkThrough.embeddedEditorBackground#010101
welcomePage.buttonBackground#cba6f766
welcomePage.progress.background#000000
welcomePage.tileBackground#010101
welcomePage.tileShadow#000000b3
widget.shadow#000000b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#cdd6f4	—
comment	#74c7ec80	italic
string, constant.other.symbol	#a6e3a1	—
string.regexp, constant.character, constant.other	#94e2d5	—
constant.numeric	#cba6f7	—
constant.language	#cba6f7	—
variable, variable.parameter.function-call	#cdd6f4	—
variable.member	#f38ba8	—
variable.language	#89dceb	italic
storage	#fab387	—
keyword	#fab387	—
keyword.operator	#f5c2e7	—
punctuation.separator, punctuation.terminator	#cdd6f4b3	—
punctuation.section	#cdd6f4	—
punctuation.accessor	#f5c2e7	—
punctuation.definition.template-expression	#fab387	—
punctuation.section.embedded	#fab387	—
meta.embedded	#cdd6f4	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#89b4fa	—
entity.other.inherited-class	#89dceb	—
storage.type.function	#fab387	—
source.java storage.type.primitive	#89dceb	—
entity.name.function	#f9e2af	—
variable.parameter, meta.parameter	#cba6f7	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#f9e2af	—
support.function, support.macro	#f38ba8	—
entity.name.import, entity.name.package	#a6e3a1	—
entity.name	#89b4fa	—
entity.name.tag, meta.tag.sgml	#89dceb	—
support.class.component	#89b4fa	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#89dceb80	—
entity.other.attribute-name	#f9e2af	—
support.constant	#f5c2e7	italic
support.type, support.class, source.go storage.type	#89dceb	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#f5e0dc	—
invalid	#f38ba8	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#f9e2af	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#89b4fa	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#74c7ec80	—
support.type.property-name	#89dceb	normal
constant.numeric.line-number.find-in-files - match	#74c7ec80	—
constant.numeric.line-number.match	#fab387	—
entity.name.filename.find-in-files	#a6e3a1	—
message.error	#f38ba8	—
markup.heading, markup.heading entity.name	#a6e3a1	bold
markup.underline.link, string.other.link	#89dceb	—
markup.italic	#f38ba8	italic
markup.bold	#f38ba8	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#74c7ec80	bold
markup.quote	#94e2d5	italic
markup.list punctuation.definition.list.begin	#f9e2af	—
markup.inserted	#a6e3a1	—
markup.changed	#89b4fa	—
markup.deleted	#f38ba8	—
markup.strike	#f5e0dc	—
markup.table	#89dceb	—
text.html.markdown markup.inline.raw	#f5c2e7	—
text.html.markdown meta.dummy.line-break	#74c7ec80	—
punctuation.definition.markdown	#74c7ec80	—

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