Skip to main content
Purple Mono | 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 #160d2f activityBar.activeBorder #160d2f activityBar.background #06030d activityBar.border #160d2f activityBar.foreground #a78bfa activityBarBadge.background #7F70FF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle keyword, storage.type, storage.modifier, keyword.control, keyword.other #5A2EFF — constant.character.escape, string.escape, constant.other.placeholder, string.format.placeholder #563FE6 — string, string.quoted.double, string.quoted.single, string.quoted.other, string.interpolated #6C57FF — entity.name.type, entity.name.type.enum, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.alias, entity.name.type.typedef, support.type
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}!`;
}
Purple Mono — Dark Purple
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
activityBarBadge.foreground
#06030d
badge.background #7F70FF
badge.foreground #06030d
breadcrumb.activeSelectionForeground #a78bfa
breadcrumb.background #06030d
breadcrumb.focusForeground #a78bfa
breadcrumb.foreground #a78bfa
breadcrumbPicker.background #06030d
button.background #160d2f
button.foreground #a78bfa
button.hoverBackground #160d2f
button.secondaryBackground #160d2f
button.secondaryForeground #a78bfa
button.secondaryHoverBackground #160d2f
checkbox.background #06030d
checkbox.foreground #7F70FF
debugToolBar.background #06030d
debugToolBar.border #160d2f
diffEditor.border #160d2f
diffEditor.diagonalFill #160d2f55
diffEditor.insertedLineBackground #1f3d2b33
diffEditor.insertedTextBackground #1f3d2b88
diffEditor.removedLineBackground #3d1f2b33
diffEditor.removedTextBackground #3d1f2b88
dropdown.background #06030d
dropdown.border #160d2f
dropdown.foreground #e6e1f0
dropdown.listBackground #06030d
editor.background #06030d
editor.focusedStackFrameHighlightBackground #160d2faa
editor.foreground #7F70FF
editor.inactiveSelectionBackground #160d2f
editor.lineHighlightBackground #160d2f
editor.rangeHighlightBackground #06030d
editor.selectionBackground #160d2f
editor.selectionHighlightBackground #160d2f88
editor.snippetFinalTabstopHighlightBackground #160d2f55
editor.snippetTabstopHighlightBackground #160d2f55
editor.stackFrameHighlightBackground #160d2f88
editor.wordHighlightBackground #7F70FF40
editor.wordHighlightStrongBackground #7F70FF40
editorBracketHighlight.foreground1 #5A50D9
editorBracketHighlight.foreground2 #4F44C1
editorBracketHighlight.foreground3 #473BB0
editorBracketHighlight.foreground4 #4037A3
editorBracketHighlight.foreground5 #3B32A0
editorBracketHighlight.foreground6 #352B8F
editorBracketHighlight.unexpectedBracket.foreground #7F70FF
editorBracketMatch.background #160d2f88
editorBracketMatch.border #5A50D9
editorCursor.background #06030d
editorCursor.foreground #7F70FF
editorError.foreground #f38ba8
editorGroup.background #06030d
editorGroup.border #160d2f
editorGroup.dropBackground #160d2f88
editorGroup.emptyBackground #06030d
editorGroupHeader.border #160d2f
editorGroupHeader.noTabsBackground #06030d
editorGroupHeader.tabsBackground #06030d
editorGroupHeader.tabsBorder #160d2f
editorGutter.addedBackground #1f3d2b
editorGutter.commentRangeForeground #5a3e85
editorGutter.deletedBackground #3d1f2b
editorGutter.modifiedBackground #2a1f0d
editorHoverWidget.background #06030d
editorHoverWidget.border #160d2f
editorHoverWidget.foreground #a78bfa
editorHoverWidget.statusBarBackground #160d2f
editorIndentGuide.activeBackground #160d2f
editorIndentGuide.background #160d2f
editorInfo.foreground #89b4fa
editorInlayHint.background #160d2f
editorInlayHint.foreground #a78bfa
editorInlayHint.parameterForeground #9355fe
editorInlayHint.typeForeground #7b3edb
editorLineHighlight.border #160d2f
editorLineNumber.activeForeground #a78bfa
editorLineNumber.foreground #250f5c
editorLink.activeForeground #7F70FF
editorLink.foreground #7F70FF
editorMarkerNavigation.background #06030d
editorMarkerNavigationError.background #f38ba8
editorMarkerNavigationInfo.background #89b4fa
editorMarkerNavigationWarning.background #f9e2af
editorOverviewRuler.errorForeground #f38ba8
editorOverviewRuler.infoForeground #89b4fa
editorOverviewRuler.warningForeground #f9e2af
editorSuggestWidget.background #06030d
editorSuggestWidget.border #160d2f
editorSuggestWidget.foreground #a78bfa
editorSuggestWidget.highlightForeground #a78bfa
editorSuggestWidget.selectedBackground #160d2f
editorSuggestWidget.selectedForeground #a78bfa
editorWarning.foreground #f9e2af
editorWhitespace.foreground #160d2f
editorWidget.background #06030d
editorWidget.border #160d2f
focusBorder #160d2f
gitDecoration.conflictingResourceForeground #7F70FF
gitDecoration.deletedResourceForeground #7F70FF
gitDecoration.ignoredResourceForeground #a78bfa
gitDecoration.modifiedResourceForeground #7F70FF
gitDecoration.submoduleResourceForeground #7F70FF
gitDecoration.untrackedResourceForeground #a78bfa
gitlens.gutterBackgroundColor #160d2f55
gitlens.gutterForegroundColor #a78bfa
gitlens.gutterUncommittedForegroundColor #a78bfa
gitlens.lineHighlightBackgroundColor #160d2f33
gitlens.lineHighlightOverviewRulerColor #160d2f
gitlens.trailingLineForegroundColor #5a3e85
icon.foreground #a78bfa
input.background #06030d
input.border #160d2f
input.foreground #a78bfa
input.placeholderForeground #a78bfa
inputOption.activeBorder #160d2f
inputValidation.errorBackground #2a0d1f
inputValidation.infoBackground #160d2f
inputValidation.warningBackground #2a1f0d
list.activeSelectionBackground #160d2f88
list.activeSelectionForeground #a78bfa
list.dropBackground #160d2f88
list.errorForeground #f38ba8
list.focusBackground #160d2f
list.focusForeground #a78bfa
list.highlightForeground #a78bfa
list.hoverBackground #160d2f
list.hoverForeground #a78bfa
list.inactiveSelectionBackground #160d2f88
list.inactiveSelectionForeground #a78bfa
list.warningForeground #f9e2af
listFilterWidget.background #06030d
listFilterWidget.noMatchesOutline #f38ba8
menu.background #06030d
menu.foreground #e6e1f0
menu.selectionBackground #160d2f
menu.selectionForeground #e6e1f0
menu.separatorBackground #160d2f
merge.border #160d2f
merge.commonContentBackground #160d2f33
merge.commonHeaderBackground #160d2f55
merge.currentContentBackground #1f3d2b22
merge.currentHeaderBackground #1f3d2b33
merge.incomingContentBackground #1f2a3d22
merge.incomingHeaderBackground #1f2a3d33
minimap.background #06030d
minimap.errorHighlight #f38ba8
minimap.selectionHighlight #160d2f88
minimap.warningHighlight #f9e2af
minimapSlider.activeBackground #160d2faa
minimapSlider.background #160d2f55
minimapSlider.hoverBackground #160d2f88
notificationCenter.border #160d2f
notificationCenterHeader.background #06030d
notificationCenterHeader.foreground #a78bfa
notifications.background #06030d
notifications.border #160d2f
notifications.foreground #e6e1f0
notificationsErrorIcon.foreground #f38ba8
notificationsInfoIcon.foreground #89b4fa
notificationsWarningIcon.foreground #f9e2af
notificationToast.border #160d2f
panel.background #06030d
panel.border #160d2f
panelInput.border #160d2f
panelTitle.activeBorder #7F70FF
panelTitle.activeForeground #a78bfa
panelTitle.inactiveForeground #a78bfa
peekView.border #160d2f
peekViewEditor.background #06030d
peekViewEditor.matchHighlightBackground #160d2f
peekViewResult.background #06030d
peekViewResult.fileForeground #a78bfa
peekViewResult.lineForeground #a78bfa
peekViewResult.selectionBackground #160d2f
peekViewTitle.background #06030d
peekViewTitleDescription.foreground #a78bfa
progressBar.background #7F70FF
quickInput.background #06030d
quickInput.foreground #a78bfa
quickInputTitle.background #06030d
quickInputTitle.foreground #a78bfa
sash.hoverBorder #160d2f
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #160d2faa
scrollbarSlider.background #160d2f55
scrollbarSlider.hoverBackground #160d2f88
settings.checkboxBackground #06030d
settings.dropdownBackground #06030d
settings.dropdownBorder #160d2f
settings.focusedRowBackground #160d2f33
settings.headerForeground #a78bfa
settings.modifiedItemIndicator #7F70FF
settings.numberInputBackground #06030d
settings.numberInputBorder #160d2f
settings.textInputBackground #06030d
settings.textInputBorder #160d2f
sideBar.background #06030d
sideBar.border #160d2f
sideBar.foreground #a78bfa
sideBarSectionHeader.background #06030d
sideBarSectionHeader.border #160d2f
sideBarSectionHeader.foreground #a78bfa
sideBarTitle.foreground #a78bfa
statusBar.background #06030d
statusBar.border #160d2f
statusBar.debuggingBackground #160d2f
statusBar.foreground #a78bfa
statusBar.noFolderBackground #06030d
statusBarItem.hoverBackground #160d2f
statusBarItem.remoteBackground #7F70FF
statusBarItem.remoteForeground #06030d
tab.activeBackground #06030d
tab.activeBorder #7F70FF
tab.activeBorderTop #7F70FF
tab.activeForeground #a78bfa
tab.border #160d2f
tab.hoverBackground #160d2f
tab.inactiveBackground #06030d
tab.inactiveForeground #a78bfa
tab.unfocusedActiveForeground #2d0c69
tab.unfocusedInactiveForeground #400e82
terminal.ansiBlack #06030d
terminal.ansiBlue #5A2EFF
terminal.ansiBrightBlack #7F70FF
terminal.ansiBrightBlue #5A2EFF
terminal.ansiBrightCyan #7F70FF
terminal.ansiBrightGreen #5A2EFF
terminal.ansiBrightMagenta #5A2EFF
terminal.ansiBrightRed #5A2EFF
terminal.ansiBrightWhite #5A2EFF
terminal.ansiBrightYellow #7F70FF
terminal.ansiCyan #7F70FF
terminal.ansiGreen #5A2EFF
terminal.ansiMagenta #5A2EFF
terminal.ansiRed #5A2EFF
terminal.ansiWhite #5A2EFF
terminal.ansiYellow #7F70FF
terminal.background #06030d
terminal.border #160d2f
terminal.dropBackground #160d2f88
terminal.foreground #5A2EFF
terminal.selectionBackground #7F70FF
terminal.tab.activeBorder #160d2f
terminalCursor.background #06030d
terminalCursor.foreground #7F70FF
textLink.activeForeground #7F70FF
textLink.foreground #7F70FF
textPreformat.foreground #7F70FF
titleBar.activeBackground #06030d
titleBar.activeForeground #e6e1f0
titleBar.border #160d2f
titleBar.inactiveBackground #06030d
titleBar.inactiveForeground #9a8ca6
tree.indentGuidesStroke #160d2f
walkThrough.embeddedEditorBackground #06030d
welcomePage.buttonBackground #160d2f
welcomePage.buttonHoverBackground #7F70FF
widget.background #06030d
widget.border #160d2f
widget.foreground #a78bfa
widget.shadow #00000000
window.activeBorder #160d2f
window.inactiveBorder #160d2f #4B3ABF
entity.name.function, support.function #7159FF —
entity.name.type.struct, entity.name.type.typedef #4B3ABF italic
variable, variable.other, variable.other.member #6450E6 —
variable.parameter #5746D9 —
number, constant.numeric, constant.language.boolean, constant.language #6048E6 —
comment, comment.block, comment.line, punctuation.definition.comment #4C3AD6 italic
keyword.operator, punctuation.section.block, punctuation.definition.block #5A2EFF —
entity.name.function.macro, support.function.macro #4D3FCB —
entity.name.function.decorator, support.function.decorator #4B3ABF —
variable.object.property, support.type.property-name, entity.other.attribute-name #6355E6 —
constant.language.enum, variable.other.enummember, entity.name.enum #4C3ED1 —
punctuation.definition.bracket, punctuation.section.brackets, meta.brace #5046E0 —
meta.template.expression, meta.generic #4C3ED1 —
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
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 $