Skip to main content
inkpot | 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.background #392e5e activityBar.border #1b1b33 activityBar.dropBackground #392e5e activityBar.foreground #b7b7f7 activityBar.inactiveForeground #9387C2 activityBarBadge.background #9387C2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #00ff00 bold text, source, variable, string constant.other.placeholder #5ED378 — keyword.control, keyword.other #c080d0 — meta.preprocessor, keyword.control.import #409090 — string
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#1b1b33
badge.background #392e5e
badge.foreground #00ff00
breadcrumb.activeSelectionForeground #b7b7f7
breadcrumb.background #463B75
breadcrumb.focusForeground #b7b7f7
breadcrumb.foreground #b7b7f7
breadcrumbPicker.background #463B75
button.background #392e5e
button.foreground #b7b7f7
button.hoverBackground #9387C2
debugExceptionWidget.background #392e5e
debugExceptionWidget.border #392e5e
debugToolBar.background #392e5e
debugToolBar.border #392e5e
descriptionForeground #b7b7f7
diffEditor.border #9387C2
diffEditor.insertedTextBackground #00ff0050
diffEditor.insertedTextBorder #00ff0000
diffEditor.removedTextBackground #9387C250
diffEditor.removedTextBorder #9387C200
dropdown.background #392e5e
dropdown.border #392e5e
dropdown.foreground #b7b7f7
dropdown.listBackground #392e5e
editor.background #1b1b33
editor.findMatchBackground #b7b7f760
editor.findMatchBorder #b7b7f795
editor.findMatchHighlightBackground #b7b7f760
editor.findMatchHighlightBorder #b7b7f760
editor.findRangeHighlightBackground #b7b7f760
editor.findRangeHighlightBorder #b7b7f760
editor.focusedStackFrameHighlightBackground #392e5e
editor.foreground #9387C2
editor.hoverHighlightBackground #00ff0050
editor.inactiveSelectionBackground #b7b7f750
editor.lineHighlightBackground #1b1b33
editor.lineHighlightBorder #1b1b33
editor.rangeHighlightBackground #ff000000
editor.rangeHighlightBorder #ff000000
editor.selectionBackground #b7b7f760
editor.selectionForeground #b7b7f750
editor.selectionHighlightBackground #b7b7f760
editor.selectionHighlightBorder #b7b7f700
editor.snippetFinalTabstopHighlightBackground #392e5e
editor.snippetFinalTabstopHighlightBorder #392e5e
editor.snippetTabstopHighlightBackground #392e5e
editor.snippetTabstopHighlightBorder #392e5e
editor.stackFrameHighlightBackground #392e5e
editor.wordHighlightBackground #b7b7f760
editor.wordHighlightBorder #b7b7f795
editor.wordHighlightStrongBackground #b7b7f770
editor.wordHighlightStrongBorder #b7b7f795
editorBracketMatch.background #ff8bff60
editorBracketMatch.border #ff8bff60
editorCodeLens.foreground #9387C2
editorCursor.background #00ff00
editorCursor.foreground #00ff00
editorError.border #ff0000
editorError.foreground #ff0000
editorGroup.border #392e5e
editorGroup.dropBackground #392e5e
editorGroup.emptyBackground #392e5e
editorGroup.focusedEmptyBorder #392e5e
editorGroupHeader.noTabsBackground #392e5e
editorGroupHeader.tabsBackground #392e5e
editorGroupHeader.tabsBorder #392e5e
editorGutter.background #392e5e
editorHint.border #409090
editorHint.foreground #409090
editorHoverWidget.background #392e5e
editorHoverWidget.border #9387C2
editorIndentGuide.activeBackground #9387C2
editorIndentGuide.background #9387C2
editorInfo.border #9387C2
editorInfo.foreground #9387C2
editorLineNumber.activeForeground #00ff00
editorLineNumber.foreground #9387C2
editorLink.activeForeground #9387C2
editorMarkerNavigation.background #392e5e
editorMarkerNavigationError.background #9387C2
editorMarkerNavigationInfo.background #409090
editorMarkerNavigationWarning.background #f0ad6d
editorOverviewRuler.addedForeground #409090
editorOverviewRuler.border #00000000
editorOverviewRuler.bracketMatchForeground #ff8bff
editorOverviewRuler.commonContentForeground #ff0000
editorOverviewRuler.currentContentForeground #ff0000
editorOverviewRuler.deletedForeground #f0ad6d
editorOverviewRuler.errorForeground #ff0000
editorOverviewRuler.findMatchForeground #9387C2
editorOverviewRuler.incomingContentForeground #ff0000
editorOverviewRuler.infoForeground #9387C2
editorOverviewRuler.modifiedForeground #ff0000
editorOverviewRuler.rangeHighlightForeground #9387C2
editorOverviewRuler.selectionHighlightForeground #9387C2
editorOverviewRuler.warningForeground #f0ad6d
editorOverviewRuler.wordHighlightForeground #9387C2
editorOverviewRuler.wordHighlightStrongForeground #9387C2
editorPane.background #392e5e
editorRuler.foreground #9387C2
editorSuggestWidget.background #392e5e
editorSuggestWidget.border #9387C2
editorSuggestWidget.foreground #b7b7f7
editorSuggestWidget.highlightForeground #ff8bff
editorSuggestWidget.selectedBackground #9387C2
editorUnnecessaryCode.border #b7b7f7
editorUnnecessaryCode.opacity #b7b7f760
editorWarning.border #f0ad6d
editorWarning.foreground #f0ad6d
editorWhitespace.foreground #b7b7f7
editorWidget.background #392e5e
editorWidget.border #392e5e
editorWidget.resizeBorder #392e5e
errorForeground #f0ad6d
extensionButton.prominentBackground #392e5e
extensionButton.prominentForeground #8b8bcd
extensionButton.prominentHoverBackground #392e5e50
focusBorder #9387C2
foreground #b7b7f7
gitDecoration.addedResourceForeground #ff0000
gitDecoration.conflictingResourceForeground #ff0000
gitDecoration.deletedResourceForeground #ff0000
gitDecoration.ignoredResourceForeground #ff0000
gitDecoration.modifiedResourceForeground #ff0000
gitDecoration.submoduleResourceForeground #ff0000
gitDecoration.untrackedResourceForeground #ff0000
input.background #392e5e
input.border #392e5e
input.foreground #b7b7f7
input.placeholderForeground #b7b7f7
inputOption.activeBackground #392e5e
inputOption.activeBorder #392e5e
inputValidation.errorBackground #392e5e
inputValidation.errorBorder #392e5e
inputValidation.errorForeground #ff0000
inputValidation.infoBackground #392e5e
inputValidation.infoBorder #392e5e
inputValidation.infoForeground #409090
inputValidation.warningBackground #392e5e
inputValidation.warningBorder #392e5e
inputValidation.warningForeground #f0ad6d
list.activeSelectionBackground #b7b7f750
list.activeSelectionForeground #eeeeee
list.dropBackground #8b8bcd
list.errorForeground #00ff00
list.focusBackground #b7b7f750
list.focusForeground #b7b7f7
list.highlightForeground #b7b7f7
list.hoverBackground #b7b7f750
list.hoverForeground #b7b7f7
list.inactiveFocusBackground #b7b7f750
list.inactiveSelectionBackground #b7b7f750
list.inactiveSelectionForeground #b7b7f7
list.invalidItemForeground #ff0000
list.warningForeground #f0ad6d
listFilterWidget.background #b7b7f750
listFilterWidget.noMatchesOutline #b7b7f7
listFilterWidget.outline #b7b7f7
menu.background #392e5e
menu.foreground #b7b7f7
menu.selectionBackground #8b8bcd
menu.selectionBorder #9387C2
menu.selectionForeground #b7b7f7
menu.separatorBackground #b7b7f7
menubar.selectionBackground #8b8bcd
menubar.selectionBorder #9387C2
menubar.selectionForeground #b7b7f7
merge.border #ff0000
merge.commonContentBackground #ff0000
merge.commonHeaderBackground #ff0000
merge.currentContentBackground #ff0000
merge.currentHeaderBackground #ff0000
merge.incomingContentBackground #ff0000
merge.incomingHeaderBackground #ff0000
minimap.findMatchHighlight #00ff00
notificationCenter.border #392e5e
notificationCenterHeader.background #392e5e
notificationCenterHeader.foreground #b7b7f7
notificationLink.foreground #00ff00
notifications.background #392e5e
notifications.border #392e5e
notifications.foreground #b7b7f7
notificationToast.border #392e5e
panel.background #1b1b33
panel.border #392e5e
panel.dropBackground #ff8bff
panelInput.border #00ff00
panelTitle.activeBorder #392e5e
panelTitle.activeForeground #00ff00
panelTitle.inactiveForeground #b7b7f7
peekView.border #9387C2
peekViewEditor.background #1b1b33
peekViewEditor.matchHighlightBackground #b7b7f760
peekViewEditor.matchHighlightBorder #b7b7f700
peekViewEditorGutter.background #392e5e
peekViewResult.background #392e5e
peekViewResult.fileForeground #392e5e
peekViewResult.lineForeground #392e5e
peekViewResult.matchHighlightBackground #b7b7f760
peekViewResult.selectionBackground #b7b7f760
peekViewResult.selectionForeground #b7b7f7
peekViewTitle.background #392e5e
peekViewTitleDescription.foreground #b7b7f7
peekViewTitleLabel.foreground #ff8bff
pickerGroup.border #392e5e
pickerGroup.foreground #00ff00
progressBar.background #00ff00
scrollbar.shadow #392e5e
scrollbarSlider.activeBackground #392e5e
scrollbarSlider.background #392e5e
scrollbarSlider.hoverBackground #392e5e
selection.background #b7b7f780
settings.checkboxBackground #3e3e75
settings.checkboxBorder #3e3e75
settings.checkboxForeground #b7b7f7
settings.dropdownBackground #3e3e75
settings.dropdownBorder #3e3e75
settings.dropdownForeground #b7b7f7
settings.dropdownListBorder #3e3e75
settings.headerForeground #b7b7f7
settings.modifiedItemIndicator #3e3e75
settings.numberInputBackground #3e3e75
settings.numberInputBorder #3e3e75
settings.numberInputForeground #b7b7f7
settings.textInputBackground #3e3e75
settings.textInputBorder #3e3e75
settings.textInputForeground #b7b7f7
sideBar.background #1b1b33
sideBar.border #392e5e
sideBar.dropBackground #392e5e
sideBar.foreground #b7b7f7
sideBarSectionHeader.background #392e5e
sideBarSectionHeader.border #392e5e
sideBarSectionHeader.foreground #b7b7f7
sideBarTitle.foreground #b7b7f7
statusBar.background #2f234c
statusBar.border #3e3e75
statusBar.debuggingBackground #2f234c
statusBar.debuggingBorder #2f234c
statusBar.debuggingForeground #b7b7f7
statusBar.foreground #b7b7f7
statusBar.noFolderBackground #2f234c
statusBar.noFolderBorder #2f234c
statusBar.noFolderForeground #b7b7f7
statusBarItem.activeBackground #ff8bff50
statusBarItem.hoverBackground #ff8bff50
statusBarItem.prominentBackground #ff8bff50
statusBarItem.prominentForeground #b7b7f7
statusBarItem.prominentHoverBackground #ff8bff50
tab.activeBackground #b7b7f780
tab.activeBorder #3e3e7580
tab.activeBorderTop #3e3e7580
tab.activeForeground #eeeeee
tab.activeModifiedBorder #3e3e7580
tab.border #392e5e
tab.hoverBackground #b7b7f750
tab.hoverBorder #3e3e7580
tab.inactiveBackground #463B75
tab.inactiveForeground #b7b7f7
tab.inactiveModifiedBorder #b7b7f780
tab.unfocusedActiveBackground #392e5e
tab.unfocusedActiveBorder #3e3e7580
tab.unfocusedActiveBorderTop #3e3e7580
tab.unfocusedActiveForeground #eeeeee
tab.unfocusedActiveModifiedBorder #3e3e7580
tab.unfocusedHoverBackground #3e3e7580
tab.unfocusedHoverBorder #3e3e7580
tab.unfocusedInactiveForeground #b7b7f7
tab.unfocusedInactiveModifiedBorder #3e3e7580
terminal.ansiBlack #00482a28
terminal.ansiBlue #00cc6374
terminal.ansiBrightBlack #003dde66
terminal.ansiBrightBlue #00fbd677
terminal.ansiBrightCyan #003c3cee
terminal.ansiBrightGreen #00f993dd
terminal.ansiBrightMagenta #006cb8ff
terminal.ansiBrightRed #00dee4e4
terminal.ansiBrightWhite #00969a9a
terminal.ansiBrightYellow #00c47262
terminal.ansiCyan #007bfa50
terminal.ansiGreen #00fde98b
terminal.ansiMagenta #005555ff
terminal.ansiRed #00c679ff
terminal.ansiWhite #008cfcfc
terminal.ansiYellow #00f2f8f8
terminal.background #1b1b33
terminal.border #392e5e
terminal.foreground #00ff00
terminal.selectionBackground #b7b7f780
terminalCursor.background #00ff00
terminalCursor.foreground #00ff00
textBlockQuote.background #f0ad6d
textBlockQuote.border #f0ad6d
textCodeBlock.background #00ff00
textLink.activeForeground #00ff00
textLink.foreground #00ff00
textPreformat.foreground #ff8bff
textSeparator.foreground #00ff00
titleBar.activeBackground #392e5e
titleBar.activeForeground #b7b7f7
titleBar.border #392e5e
titleBar.inactiveBackground #392e5e
titleBar.inactiveForeground #b7b7f7
tree.indentGuidesStroke #b7b7f7
walkThrough.embeddedEditorBackground #392e5e
welcomePage.background #1b1b33
welcomePage.buttonBackground #3e3e75
welcomePage.buttonHoverBackground #3e3e7580
widget.shadow #000000 storage.type, support.type #ff8bff —
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...
main*
Button.tsx
31
~/my-project
$
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 }!` ;
}