True Pink Theme

Name: True Pink Theme
Author: ProgCat

Publisher: ProgCatThemes in package: 1

Splashing pink on your screen doesn't mean it is a good pink theme.

Open in VS Code GitHub

VS Code preview

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

True Pink Theme — TruePink

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#fafafa
activityBar.activeBorder#fdabab
activityBar.activeFocusBorder#fdabab
activityBar.background#f7f7f7
activityBar.border#bbbbbb62
activityBar.dropBackground#f7f7f7
activityBar.foreground#fdabab
activityBar.inactiveForeground#8a8a8a
activityBarBadge.background#fd9999
button.background#b4b3b3
button.foreground#f7f7f7
button.hoverBackground#fd99998c
debugIcon.breakpointCurrentStackframeForeground#ff0000
debugIcon.breakpointDisabledForeground#c0c0c0
debugIcon.breakpointForeground#fd9999
debugIcon.breakpointStackframeForeground#ff0000
debugIcon.breakpointUnverifiedForeground#ff0000
descriptionForeground#fd9999
diffEditor.diagonalFill#cbcbcb
diffEditor.insertedTextBackground#61afee31
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#fdabab5e
diffEditor.removedTextBorder#00000000
diffEditorGutter.insertedLineBackground#62abe65a
diffEditorGutter.removedLineBackground#fdabab90
dropdown.background#f7f7f7
dropdown.foreground#2c2c2c
dropdown.listBackground#f7f7f7
editor.background#f7f7f7
editor.findMatchBackground#ffabab55
editor.findMatchHighlightBackground#ffabab55
editor.foreground#2c2c2c
editor.inactiveSelectionBackground#ffabab55
editor.lineHighlightBackground#fd999928
editor.lineHighlightBorder#ff000000
editor.selectionBackground#ffc3c3a2
editor.selectionForeground#ffa1a1
editor.selectionHighlightBackground#ff000000
editor.selectionHighlightBorder#ff9f9f
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#ff8e8e
editor.wordHighlightStrongBackground#ffe5e5
editor.wordHighlightStrongBorder#ff9f9f
editorBracketHighlight.foreground1#2c2c2c
editorBracketHighlight.foreground2#2c2c2c
editorBracketHighlight.foreground3#2c2c2c
editorBracketHighlight.foreground4#61aeee
editorBracketHighlight.foreground5#fd9999
editorBracketHighlight.foreground6#61aeee
editorBracketHighlight.unexpectedBracket.foreground#afb2b8
editorBracketPairGuide.activeBackground1#fdb7b7
editorBracketPairGuide.activeBackground2#fdb7b7
editorBracketPairGuide.activeBackground3#fdb7b7
editorBracketPairGuide.activeBackground4#fdb7b7
editorBracketPairGuide.activeBackground5#fdb7b7
editorBracketPairGuide.activeBackground6#fdb7b7
editorCursor.foreground#fd9999
editorGroup.border#fdababc7
editorGroup.dropBackground#fd99992a
editorGroupHeader.tabsBackground#f1f1f1
editorIndentGuide.activeBackground#fd999973
editorIndentGuide.background#c0c0c0
editorLineNumber.activeForeground#c0c0c0
editorLineNumber.foreground#c0c0c0
editorLink.activeForeground#61aeee
editorMarkerNavigation.background#c0c0c0
editorOverviewRuler.selectionHighlightForeground#ffabab55
editorSuggestWidget.background#f7f7f7
editorSuggestWidget.foreground#2c2c2c
editorSuggestWidget.highlightForeground#61aeee
editorSuggestWidget.selectedBackground#fdababa8
editorWidget.background#f7f7f7
list.activeSelectionBackground#ffffffb7
list.activeSelectionForeground#fdabab
list.dropBackground#e9dfdf
list.errorForeground#61aeee
list.filterMatchBackground#ff000000
list.filterMatchBorder#ff000000
list.focusBackground#f7f7f7
list.focusForeground#fdabab
list.highlightForeground#61aeee
list.hoverBackground#f7f7f7
list.hoverForeground#fdabab
list.inactiveFocusBackground#ffffff
list.inactiveSelectionBackground#f5f4f4
list.inactiveSelectionForeground#fdabab
list.invalidItemForeground#fdabab
list.warningForeground#ccaa6c
listFilterWidget.background#ffffff
listFilterWidget.noMatchesOutline#ff0000
listFilterWidget.outline#fdfdfd
menu.selectionBackground#f7f7f7
menubar.selectionBackground#f7f7f7
menubar.selectionForeground#fdabab
minimap.errorHighlight#f2747f
minimap.findMatchHighlight#fdabab
minimap.selectionHighlight#00000000
minimap.warningHighlight#FFA500
notificationCenterHeader.background#f7f7f7
progressBar.background#fd99997e
scrollbar.shadow#fdabab6b
scrollbarSlider.activeBackground#fdababce
scrollbarSlider.background#fdabab63
scrollbarSlider.hoverBackground#fdabab8e
selection.background#ffd8d8
settings.checkboxBackground#f7f7f7
settings.checkboxBorder#6b6b6b67
settings.checkboxForeground#2c2c2c
settings.dropdownBackground#f7f7f7
settings.dropdownBorder#6b6b6b67
settings.dropdownForeground#2c2c2c
settings.dropdownListBorder#6b6b6b67
settings.headerForeground#fd9999
settings.modifiedItemIndicator#fd9999
settings.numberInputBackground#f7f7f7
settings.numberInputBorder#6b6b6b67
settings.numberInputForeground#2c2c2c
settings.textInputBackground#f7f7f7
settings.textInputBorder#6b6b6b67
settings.textInputForeground#2c2c2c
sideBar.background#f1f1f1
sideBar.border#ececec
sideBar.dropBackground#e2a6a6
sideBar.foreground#797979
sideBarSectionHeader.background#fd999983
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#2c2c2c
statusBar.background#f7f7f7
statusBar.border#2c2c2c0e
statusBar.debuggingBackground#fdabab
statusBar.debuggingBorder#2c2c2c0e
statusBar.debuggingForeground#2c2c2c
statusBar.foreground#2c2c2c
statusBar.noFolderBackground#f7f7f7
statusBar.noFolderBorder#2c2c2c0e
statusBar.noFolderForeground#2c2c2c
statusBarItem.activeBackground#dadada
statusBarItem.hoverBackground#00000000
statusBarItem.prominentBackground#f7f7f7
statusBarItem.prominentForeground#2c2c2c
statusBarItem.prominentHoverBackground#f7f7f7
statusBarItem.remoteBackground#fdabab
statusBarItem.remoteForeground#f7f7f7
tab.activeForeground#fd9999
tab.inactiveForeground#c0c0c0
tab.unfocusedActiveForeground#c0c0c0
textLink.activeForeground#fd9999
textLink.foreground#61aeee
textPreformat.foreground#ccaa6c
titleBar.activeBackground#f7f7f7
tree.indentGuidesStroke#000000
welcomePage.background#f7f7f7
welcomePage.buttonBackground#e2e2e2
welcomePage.buttonHoverBackground#fdabab80
window.activeBorder#fdabab
window.inactiveBorder#2c2c2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#a1a4aa	—
punctuation.definition.string.begin, punctuation.definition.string.end	#e6a1a1	—
string.quoted, punctuation.definition.string	#fd9999	—
constant.other.placeholder, constant.character.format.placeholder.other.python	#fd9999	bold underline
constant.numeric, storage.type.number, keyword.other.unit	#FFA500
entity.name.function.definition, entity.name.function.python	#f2747f	bold
meta.function-call.generic, entity.name.function.call, entity.name.function.member, support.function.builtin	#f2747f	—
variable.parameter	#72C7D2	—
keyword.operator	#2c2c2c	—
variable.other.enummember	#2c2c2c	—
meta.tail.enum, meta.tail.struct	#2c2c2c	bold
keyword.control.directive	#98c379	bold
entity.name.type.class, entity.name.type.constructor, entity.name.type.destructor, entity.name.scope-resolution.function.definition	#61aeee	bold
entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor	#2c2c2c	—
keyword.operator.assignment	#2c2c2c	—
entity.name.function.preprocessor	#FFA500	bold
keyword.operator.new	#f2747f	bold
constant.other.caps	#ccaa6c	—
meta.member.access	#2c2c2c	—
punctuation.separator.arguments, punctuation.separator.parameters, punctuation.separator.element, punctuation.separator.comma, punctuation.separator.delimiter.comma	#61aeee	—
keyword.operator.comparison	#EB1165	—
punctuation.separator.pointer-access	#61aeee	bold
keyword.control	#c678dd	—
storage.modifier, storage.type, support.type, keyword.other.typedef, keyword.other.using	#c678dd	bold
constant.character.escape	#FFA500	—
constant.language	#72C7D2	—
storage.modifier.array.bracket.square	#2c2c2c
keyword.reserved.vhdl, entity.name.tag.vhdl, support.constant.std_standard.vhdl	#c678dd	—
keyword.operator.vhdl	#e6a1a1	—
meta.block.type_statement.vhdl, entity.name.type.vhdl	#61aeee	—
entity.name.type.ieee_std_logic_1164.vhdl, meta.block.subtype_indication.vhdl	#f2747f	bold
support.type.exception.python	#2c2c2c	—
entity.name.function.decorator.python	#98c379	—
support.variable.magic.python, support.function.magic.python	#ccaa6c	—
variable.parameter.function.language.special.self.python, variable.language.special.self.python	#fd9999	—
storage.type.function.python	#c678dd
keyword.operator.logical.python	#c678dd	—
markup.heading.markdown	#f2747f	bold
markup.underline.link.markdown	#ccaa6c	underline
markup.bold.markdown	#ccaa6c	bold
markup.quote.markdown	#98c379	italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown, meta.link.inline.markdown	#61aeee	bold
punctuation.definition.list.begin.markdown, meta.separator.markdown	#c678dd	bold
markup.raw.block.markdown, markup.fenced_code.block.markdown	#72C7D2
markup.inline.raw.string.markdown	#FFA500
markup.inline.raw.string.markdown	—	bold
punctuation.definition.metadata.markdown	#2c2c2c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	—
entity.name.function.js	#f2747f	bold
variable.language.this.js	#fd9999	—
keyword.other.class.cs, keyword.other.using.cs, keyword.other.namespace.cs	#c678dd	bold
keyword.type.cs	#c678dd	bold
keyword.other.new.cs	#f2747f	bold
entity.name.function.cs	#f2747f	—
keyword.other.this.cs	#fd9999	—
keyword.other.enum.cs	#C678DD	bold
keyword.operator.null-conditional.cs	#F2747F	bold
meta.preprocessor.cs	#98c379	bold
entity.name.variable.preprocessor.symbol.cs, string.unquoted.preprocessor.message.cs	#FFA500	bold
entity.name.type, support.class	#61aeee	bold
variable.language.this, variable.language.super, variable.language.self	#fd9999	—
meta.definition.function entity.name.function, meta.definition.method entity.name.function	#f2747f	bold
entity.name.function, support.function	#f2747f	—
storage.type.function.arrow	#2c2c2c	—
keyword.operator.relational, keyword.operator.comparison	#EB1165	—
meta.decorator entity.name.function, meta.decorator punctuation.decorator, entity.name.function.decorator	#98c379	—
string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#fd9999	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#61aeee	—
entity.name.type.parameter	#61aeee	bold
entity.name.tag.css	#c678dd	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#61aeee	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#98c379	—
support.constant.property-value.css, meta.property-value.css support.constant.property-value	#72C7D2	—
constant.other.color.rgb-value.css, support.constant.color.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css	#FFA500	—
support.function.misc.css, support.function.gradient.css, support.function.calc.css, support.function.transform.css	#f2747f	—
keyword.other.important.css	#2c2c2c	bold
entity.name.tag	#c678dd	—
entity.other.attribute-name.html, entity.other.attribute-name	#f2747f	—
constant.character.entity.html, constant.character.entity	#FFA500	—
keyword.other.definition.ini, support.type.property-name.toml, entity.name.tag.toml	#f2747f
entity.name.section.group-title.ini, support.type.property-name.table.toml, support.type.property-name.array.toml	#c678dd	bold
storage.modifier.import.java, storage.modifier.package.java	#2c2c2c
entity.name.type.primitive.rust, entity.name.type.numeric.rust	#c678dd	—
keyword.other.rust, keyword.other.fn.rust, keyword.other.crate.rust	#c678dd	—
entity.name.function.macro.rust, entity.name.function.macro.rules.rust	#f2747f	—
keyword.other.import.java, keyword.other.package.java, keyword.reserved.java, keyword.module.java	#c678dd	—
keyword.const.go, keyword.function.go, keyword.interface.go, keyword.map.go, keyword.package.go, keyword.struct.go, keyword.type.go, keyword.var.go, keyword.channel.go	#c678dd	—
keyword.other.namespace.php, keyword.other.class.php, keyword.other.new.php, keyword.other.clone.php, keyword.other.use.php, keyword.other.use-as.php, keyword.other.use-insteadof.php, keyword.other.function.use.php, keyword.other.type.php, keyword.other.type.never.php, keyword.definition.arrow.php	#c678dd	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#98c379	—
keyword.other.shell, keyword.other.sql, keyword.other.DML.sql, keyword.other.DML.II.sql, keyword.other.DDL.create.II.sql, keyword.other.create.sql, keyword.other.alias.sql, keyword.other.order.sql, keyword.other.table.sql, keyword.other.data-integrity.sql, keyword.other.cascade.sql, keyword.other.authorization.sql, keyword.other.object-comments.sql, keyword.other.LUW.sql, keyword.other.special-method.ruby	#c678dd	—