Skip to main content
PinkCode Theme | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #51515133 activityBar.activeBorder #333A45 activityBar.activeFocusBorder #ee77a5 activityBar.background #181c24 activityBar.border #333A45 activityBar.dropBorder #cd84c8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #818287 — constant #cd84c8 — entity #ee77a5 — invalid #cd84c8 — keyword
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
PinkCode Theme — Pink Code Theme
activityBar.foreground
#ee77a5
activityBar.inactiveForeground #bdb1b1
activityBarBadge.background #ee77a5
activityBarBadge.foreground #181c24
badge.background #ee77a5
badge.foreground #181c24
breadcrumb.activeSelectionForeground #e5e5e5
breadcrumb.background #181c24
breadcrumb.focusForeground #e5e5e5
breadcrumb.foreground #ee77a5
breadcrumbPicker.background #181c24
button.background #212020
button.foreground #e5e5e5
button.hoverBackground #cd84c8
button.secondaryBackground #181c24
button.secondaryForeground #cd84c8
button.secondaryHoverBackground #777676
checkbox.background #cd84c8
checkbox.border #515151
checkbox.foreground #181c24
debugConsole.errorForeground #cd84c8
debugConsole.infoForeground #cd84c8
debugConsole.sourceForeground #ee77a5
debugConsole.warningForeground #e5e5e5
debugConsoleInputIcon.foreground #e5e5e5
debugExceptionWidget.background #515151
debugExceptionWidget.border #515151
debugIcon.breakpointCurrentStackframeForeground #c4bfa2
debugIcon.breakpointDisabledForeground #e5e5e5
debugIcon.breakpointForeground #cd84c8
debugIcon.breakpointStackframeForeground #cd84c8
debugIcon.breakpointUnverifiedForeground #ee77a5
debugIcon.continueForeground #c4bfa2
debugIcon.disconnectForeground #e5e5e5
debugIcon.pauseForeground #cd84c8
debugIcon.restartForeground #cd84c8
debugIcon.startForeground #c4bfa2
debugIcon.stepBackForeground #e5e5e5
debugIcon.stepIntoForeground #e5e5e5
debugIcon.stepOutForeground #e5e5e5
debugIcon.stepOverForeground #e5e5e5
debugIcon.stopForeground #cd84c8
debugToolBar.background #515151
debugToolBar.border #181c24
descriptionForeground #81657f
diffEditor.border #515151
diffEditor.diagonalFill #5151517f
diffEditor.insertedTextBackground #c4bfa220
diffEditor.removedTextBackground #cd84c820
dropdown.background #515151
dropdown.border #515151
dropdown.foreground #CD84C8
dropdown.listBackground #515151
editor.background #181c24
editor.focusedStackFrameHighlightBackground #c4bfa23f
editor.foldBackground #51515166
editor.foreground #e5e5e5
editor.inactiveSelectionBackground #cd84c833
editor.lineHighlightBackground #070708
editor.lineHighlightBorder #181c24
editor.rangeHighlightBackground #5bbbec33
editor.selectionBackground #cd84c833
editor.selectionForeground #e5e5e5
editor.snippetFinalTabstopHighlightBackground #20202b7f
editor.snippetTabstopHighlightBackground #5151517f
editor.stackFrameHighlightBackground #e5e5e53f
editor.symbolHighlightBackground #ee77a533
editor.wordHighlightBackground #ee77a533
editor.wordHighlightStrongBackground #cd84c833
editorBracketMatch.background #515151
editorBracketMatch.border #333A45
editorCodeLens.foreground #ee77a5
editorCursor.background #181c24
editorCursor.foreground #CD84C8
editorError.foreground #cd84c8
editorGroup.border #333A45
editorGroup.dropBackground #20202b7f
editorGroup.emptyBackground #181c24
editorGroup.focusedEmptyBorder #515151
editorGroupHeader.border #333A45
editorGroupHeader.noTabsBackground #333A45
editorGroupHeader.tabsBackground #323232
editorGroupHeader.tabsBorder #181c24
editorGutter.addedBackground #91d680
editorGutter.background #181c24
editorGutter.commentRangeForeground #323232
editorGutter.deletedBackground #df4d6c
editorGutter.foldingControlForeground #ee77a5
editorGutter.modifiedBackground #cdc884
editorHint.foreground #cd84c8
editorHoverWidget.background #181c24
editorHoverWidget.border #cd84c8
editorHoverWidget.foreground #e5e5e5
editorHoverWidget.statusBarBackground #cd84c833
editorIndentGuide.activeBackground1 #afa6a6
editorIndentGuide.background1 #515151
editorInfo.border #ee77a5
editorInfo.foreground #cd84c8
editorLightBulb.foreground #ee77a5
editorLightBulbAutoFix.foreground #cd84c8
editorLineNumber.activeForeground #ee77a5
editorLineNumber.foreground #768485
editorLink.activeForeground #e5e5e5
editorMarkerNavigation.background #515151
editorMarkerNavigationError.background #cd84c8
editorMarkerNavigationInfo.background #cd84c8
editorMarkerNavigationWarning.background #e5e5e5
editorOverviewRuler.addedForeground #5bec6e7f
editorOverviewRuler.border #515151
editorOverviewRuler.bracketMatchForeground #323232
editorOverviewRuler.commonContentForeground #ee77a5
editorOverviewRuler.currentContentForeground #e5e5e5
editorOverviewRuler.deletedForeground #fad7107f
editorOverviewRuler.errorForeground #f505257f
editorOverviewRuler.findMatchForeground #5bbbecbf
editorOverviewRuler.incomingContentForeground #cd84c8
editorOverviewRuler.infoForeground #cd84c87f
editorOverviewRuler.modifiedForeground #c4bfa27f
editorOverviewRuler.rangeHighlightForeground #20202bbf
editorOverviewRuler.selectionHighlightForeground #515151bf
editorOverviewRuler.warningForeground #e5e5e57f
editorOverviewRuler.wordHighlightForeground #20202bbf
editorOverviewRuler.wordHighlightStrongForeground #323232bf
editorPane.background #181c24
editorRuler.foreground #515151
editorSuggestWidget.background #181c24
editorSuggestWidget.foreground #e5e5e5
editorSuggestWidget.highlightForeground #cd84c8
editorSuggestWidget.selectedBackground #3b3b3b
editorUnnecessaryCode.opacity #0000007f
editorWarning.border #323232
editorWarning.foreground #e5e5e5
editorWhitespace.foreground #515151
editorWidget.background #181c24
editorWidget.border #515151
editorWidget.foreground #e5e5e5
editorWidget.resizeBorder #cd84c8
errorForeground #cd84c8
extensionBadge.remoteBackground #cd84c8
extensionBadge.remoteForeground #e5e5e5
extensionButton.prominentBackground #cd84c8
extensionButton.prominentForeground #e5e5e5
extensionButton.prominentHoverBackground #e5e5e5
focusBorder #323232
foreground #e5e5e5
gitDecoration.addedResourceForeground #8491cd
gitDecoration.conflictingResourceForeground #ee77a5
gitDecoration.deletedResourceForeground #cd8484
gitDecoration.ignoredResourceForeground #939393
gitDecoration.modifiedResourceForeground #95cd84
gitDecoration.untrackedResourceForeground #cd84c8
icon.foreground #cd84c8
input.background #515151
input.border #515151
input.foreground #e5e5e5
input.placeholderForeground #e5e5e5
inputOption.activeBackground #181c24
inputOption.activeBorder #cd84c8
inputOption.activeForeground #e5e5e5
inputValidation.errorBackground #515151
inputValidation.errorBorder #cd84c8
inputValidation.errorForeground #cd84c8
inputValidation.infoBackground #515151
inputValidation.infoBorder #cd84c8
inputValidation.infoForeground #cd84c8
inputValidation.warningBackground #515151
inputValidation.warningBorder #e5e5e5
inputValidation.warningForeground #e5e5e5
list.activeSelectionBackground #ee77a533
list.activeSelectionForeground #e5e5e5
list.activeSelectionIconForeground #cd84c8
list.deemphasizedForeground #e5e5e5
list.dropBackground #515151
list.errorForeground #cd84c8
list.filterMatchBackground #5bbbec33
list.filterMatchBorder #5bbbec33
list.focusBackground #3232323f
list.focusForeground #e5e5e5
list.highlightForeground #cd84c8
list.hoverBackground #51515133
list.hoverForeground #e5e5e5
list.inactiveFocusBackground #5151513f
list.inactiveSelectionBackground #20202b3f
list.inactiveSelectionForeground #e5e5e5
list.invalidItemForeground #cd84c8
list.warningForeground #5bbbec
listFilterWidget.background #515151
listFilterWidget.noMatchesOutline #cd84c8
listFilterWidget.outline #cd84c8
menu.background #272C35
menu.foreground #ee77a5
menu.selectionBackground #81657f
menu.selectionForeground #e5e5e5
menu.separatorBackground #323232
menubar.selectionBackground #515151
menubar.selectionForeground #e5e5e5
merge.border #e5e5e5
merge.commonContentBackground #ee77a54c
merge.commonHeaderBackground #ee77a54c
merge.currentContentBackground #e5e5e54c
merge.currentHeaderBackground #e5e5e54c
merge.incomingContentBackground #cd84c84c
merge.incomingHeaderBackground #cd84c84c
notificationCenterHeader.background #181c24
notificationCenterHeader.foreground #323232
notificationLink.foreground #cd84c8
notifications.background #181c24
notifications.border #cd84c8
notifications.foreground #e5e5e5
notificationsErrorIcon.foreground #cd84c8
notificationsInfoIcon.foreground #cd84c8
notificationsWarningIcon.foreground #e5e5e5
notificationToast.border #323232
panel.background #181c24
panel.border #515151
panel.dropBorder #cd84c8
panelSection.border #515151
panelSection.dropBackground #5151513f
panelSectionHeader.background #181c24
panelSectionHeader.border #181c24
panelSectionHeader.foreground #323232
panelTitle.activeBorder #e5e5e5
panelTitle.activeForeground #cd84c8
panelTitle.inactiveForeground #e5e5e5
peekView.border #cd84c8
peekViewEditor.background #5151517f
peekViewEditor.matchHighlightBackground #5bbbec7f
peekViewEditorGutter.background #5151517f
peekViewResult.background #515151
peekViewResult.fileForeground #323232
peekViewResult.lineForeground #181c24
peekViewResult.matchHighlightBackground #5bbbec
peekViewResult.selectionBackground #ee77a5
peekViewResult.selectionForeground #e5e5e5
peekViewTitle.background #515151
peekViewTitleDescription.foreground #ee77a5
peekViewTitleLabel.foreground #e5e5e5
pickerGroup.border #181c24
pickerGroup.foreground #e5e5e5
problemsErrorIcon.foreground #cd84c8
problemsInfoIcon.foreground #cd84c8
problemsWarningIcon.foreground #e5e5e5
progressBar.background #c4bfa2
quickInput.background #515151
quickInput.foreground #e5e5e5
quickInputTitle.background #181c24
sash.hoverBorder #cd84c8
scrollbar.shadow #181c24
scrollbarSlider.activeBackground #ee77a57f
scrollbarSlider.background #3232327f
scrollbarSlider.hoverBackground #e5e5e57f
selection.background #cd84c8
sideBar.background #181c24
sideBar.border #333A45
sideBar.dropBackground #5151513f
sideBar.foreground #818287
sideBarSectionHeader.background #181c24
sideBarSectionHeader.border #333A45
sideBarSectionHeader.foreground #e5e5e5
sideBarTitle.foreground #ee77a5
statusBar.background #181c24
statusBar.border #181c24
statusBar.debuggingBackground #868271
statusBar.debuggingBorder #181c24
statusBar.debuggingForeground #181c24
statusBar.foreground #e9afe5
statusBar.noFolderBackground #ee77a5
statusBar.noFolderBorder #181c24
statusBar.noFolderForeground #181c24
statusBarItem.activeBackground #5bbbec33
statusBarItem.errorBackground #cd84c8
statusBarItem.errorForeground #181c24
statusBarItem.hoverBackground #181c24
statusBarItem.prominentBackground #5bbbec33
statusBarItem.prominentHoverBackground #181c24
statusBarItem.remoteBackground #181c24
statusBarItem.remoteForeground #e5e5e5
tab.activeBackground #181c24
tab.activeForeground #e5e5e5
tab.activeModifiedBorder #ee77a5
tab.border #333A45
tab.hoverBackground #1e2531
tab.hoverForeground #ee77a5
tab.inactiveBackground #2b323f
tab.inactiveForeground #e5e5e5
tab.inactiveModifiedBorder #ee77a5
tab.lastPinnedBorder #cd84c8
tab.unfocusedActiveBackground #181c24
tab.unfocusedActiveForeground #e5e5e5
tab.unfocusedActiveModifiedBorder #ee77a5
tab.unfocusedHoverBackground #51515180
tab.unfocusedHoverForeground #e5e5e5
tab.unfocusedInactiveBackground #323232
tab.unfocusedInactiveForeground #e5e5e5
tab.unfocusedInactiveModifiedBorder #ee77a5
terminal.ansiBlack #181c24
terminal.ansiBlue #cd84c8
terminal.ansiBrightBlack #515151
terminal.ansiBrightBlue #cd84c8
terminal.ansiBrightCyan #e5e5e5
terminal.ansiBrightGreen #e5e5e5
terminal.ansiBrightMagenta #cd84c8
terminal.ansiBrightRed #e5e5e5
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #e9ec5b
terminal.ansiCyan #e5e5e5
terminal.ansiGreen #c4bfa2
terminal.ansiMagenta #cd84c8
terminal.ansiRed #cd84c8
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #ddec5b
terminal.background #181c24
terminal.foreground #B1B1B3
terminal.selectionBackground #cd84c87f
terminalCursor.background #515151
terminalCursor.foreground #ee77a5
textBlockQuote.background #515151
textBlockQuote.border #515151
textCodeBlock.background #cd84c8
textLink.activeForeground #e5e5e5
textLink.foreground #cd84c8
textPreformat.foreground #e5e5e5
textSeparator.foreground #e5e5e5
titleBar.activeBackground #181c24
titleBar.activeForeground #ee77a5
titleBar.inactiveBackground #181c24
titleBar.inactiveForeground #323232
tree.indentGuidesStroke #515151
walkThrough.embeddedEditorBackground #181c24
welcomePage.background #181c24
welcomePage.progress.background #cd84c8
welcomePage.progress.foreground #e5e5e5
widget.shadow #181c24
#ee77a5
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 }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 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
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*
Button.tsx
31
$
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 }!` ;
}