Skip to main content
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 #BD93F910 activityBar.activeBorder #FF79C680 activityBar.background #343746 activityBar.foreground #F8F8F2 activityBar.inactiveForeground #6272A4 activityBarBadge.background #FF79C6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source #BDBDBD — keyword, storage.modifier, storage.type, support.type, variable.language.this, variable.object.property, meta.syntax.value.proto #6C95EB — entity.name.function #39CC56 — constant.numeric #EA85D9 — string.quoted.double, string.quoted.single
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Purple Rain Dark Theme — Purple Rain Dark Theme
activityBarBadge.foreground #F8F8F2
badge.background #44475A
badge.foreground #F8F8F2
breadcrumb.activeSelectionForeground #F8F8F2
breadcrumb.background #282A36
breadcrumb.focusForeground #F8F8F2
breadcrumb.foreground #6272A4
breadcrumbPicker.background #191A21
button.background #44475A
button.foreground #F8F8F2
button.secondaryBackground #282A36
button.secondaryForeground #F8F8F2
button.secondaryHoverBackground #343746
debugToolBar.background #21222C
diffEditor.insertedTextBackground #50FA7B20
diffEditor.removedTextBackground #FF555550
dropdown.background #343746
dropdown.border #191A21
dropdown.foreground #F8F8F2
editor.background #282A36
editor.findMatchBackground #FFB86C80
editor.findMatchHighlightBackground #FFFFFF40
editor.findRangeHighlightBackground #44475A75
editor.foldBackground #21222C80
editor.foreground #F8F8F2
editor.hoverHighlightBackground #8BE9FD50
editor.lineHighlightBorder #44475A
editor.rangeHighlightBackground #BD93F915
editor.selectionBackground #44475A
editor.selectionHighlightBackground #424450
editor.snippetFinalTabstopHighlightBackground #282A36
editor.snippetFinalTabstopHighlightBorder #50FA7B
editor.snippetTabstopHighlightBackground #282A36
editor.snippetTabstopHighlightBorder #6272A4
editor.wordHighlightBackground #8BE9FD50
editor.wordHighlightStrongBackground #50FA7B50
editorBracketHighlight.foreground1 #F8F8F2
editorBracketHighlight.foreground2 #FF79C6
editorBracketHighlight.foreground3 #8BE9FD
editorBracketHighlight.foreground4 #50FA7B
editorBracketHighlight.foreground5 #BD93F9
editorBracketHighlight.foreground6 #FFB86C
editorBracketHighlight.unexpectedBracket.foreground #FF5555
editorCodeLens.foreground #675875
editorError.foreground #FF5555
editorGroup.border #BD93F9
editorGroup.dropBackground #44475A70
editorGroupHeader.tabsBackground #191A21
editorGutter.addedBackground #50FA7B80
editorGutter.deletedBackground #FF555580
editorGutter.modifiedBackground #8BE9FD80
editorHoverWidget.background #282A36
editorHoverWidget.border #6272A4
editorIndentGuide.activeBackground1 #67587523
editorIndentGuide.background1 #67587523
editorLineNumber.foreground #6272A4
editorLink.activeForeground #8BE9FD
editorMarkerNavigation.background #21222C
editorOverviewRuler.addedForeground #50FA7B80
editorOverviewRuler.border #191A21
editorOverviewRuler.currentContentForeground #50FA7B
editorOverviewRuler.deletedForeground #FF555580
editorOverviewRuler.errorForeground #FF555580
editorOverviewRuler.incomingContentForeground #BD93F9
editorOverviewRuler.infoForeground #8BE9FD80
editorOverviewRuler.modifiedForeground #8BE9FD80
editorOverviewRuler.selectionHighlightForeground #FFB86C
editorOverviewRuler.warningForeground #FFB86C80
editorOverviewRuler.wordHighlightForeground #8BE9FD
editorOverviewRuler.wordHighlightStrongForeground #50FA7B
editorRuler.foreground #FFFFFF1A
editorSuggestWidget.background #21222C
editorSuggestWidget.foreground #F8F8F2
editorSuggestWidget.selectedBackground #44475A
editorWarning.foreground #8BE9FD
editorWhitespace.foreground #FFFFFF1A
editorWidget.background #21222C
errorForeground #FF5555
extensionButton.prominentBackground #50FA7B90
extensionButton.prominentForeground #F8F8F2
extensionButton.prominentHoverBackground #50FA7B60
focusBorder #6272A4
foreground #F8F8F2
gitDecoration.conflictingResourceForeground #FFB86C
gitDecoration.deletedResourceForeground #FF5555
gitDecoration.ignoredResourceForeground #6272A4
gitDecoration.modifiedResourceForeground #8BE9FD
gitDecoration.untrackedResourceForeground #50FA7B
inlineChat.regionHighlight #343746
input.background #282A36
input.border #191A21
input.foreground #F8F8F2
input.placeholderForeground #6272A4
inputOption.activeBorder #BD93F9
inputValidation.errorBorder #FF5555
inputValidation.infoBorder #FF79C6
inputValidation.warningBorder #FFB86C
list.activeSelectionBackground #44475A
list.activeSelectionForeground #F8F8F2
list.dropBackground #44475A
list.errorForeground #FF5555
list.focusBackground #44475A75
list.highlightForeground #8BE9FD
list.hoverBackground #44475A75
list.inactiveSelectionBackground #44475A75
list.warningForeground #FFB86C
listFilterWidget.background #343746
listFilterWidget.noMatchesOutline #FF5555
listFilterWidget.outline #424450
merge.currentHeaderBackground #50FA7B90
merge.incomingHeaderBackground #BD93F990
panel.background #282A36
panel.border #BD93F9
panelTitle.activeBorder #FF79C6
panelTitle.activeForeground #F8F8F2
panelTitle.inactiveForeground #6272A4
peekView.border #44475A
peekViewEditor.background #282A36
peekViewEditor.matchHighlightBackground #F1FA8C80
peekViewResult.background #21222C
peekViewResult.fileForeground #F8F8F2
peekViewResult.lineForeground #F8F8F2
peekViewResult.matchHighlightBackground #F1FA8C80
peekViewResult.selectionBackground #44475A
peekViewResult.selectionForeground #F8F8F2
peekViewTitle.background #191A21
peekViewTitleDescription.foreground #6272A4
peekViewTitleLabel.foreground #F8F8F2
pickerGroup.border #BD93F9
pickerGroup.foreground #8BE9FD
progressBar.background #FF79C6
selection.background #BD93F9
settings.checkboxBackground #21222C
settings.checkboxBorder #191A21
settings.checkboxForeground #F8F8F2
settings.dropdownBackground #21222C
settings.dropdownBorder #191A21
settings.dropdownForeground #F8F8F2
settings.headerForeground #F8F8F2
settings.modifiedItemIndicator #FFB86C
settings.numberInputBackground #21222C
settings.numberInputBorder #191A21
settings.numberInputForeground #F8F8F2
settings.textInputBackground #21222C
settings.textInputBorder #191A21
settings.textInputForeground #F8F8F2
sideBar.background #21222C
sideBarSectionHeader.background #282A36
sideBarSectionHeader.border #191A21
sideBarTitle.foreground #F8F8F2
statusBar.background #191A21
statusBar.debuggingBackground #FF5555
statusBar.debuggingForeground #191A21
statusBar.foreground #F8F8F2
statusBar.noFolderBackground #191A21
statusBar.noFolderForeground #F8F8F2
statusBarItem.prominentBackground #FF5555
statusBarItem.prominentHoverBackground #FFB86C
statusBarItem.remoteBackground #BD93F9
statusBarItem.remoteForeground #282A36
tab.activeBackground #282A36
tab.activeBorderTop #FF79C680
tab.activeForeground #F8F8F2
tab.border #191A21
tab.inactiveBackground #21222C
tab.inactiveForeground #6272A4
terminal.ansiBlack #21222C
terminal.ansiBlue #BD93F9
terminal.ansiBrightBlack #6272A4
terminal.ansiBrightBlue #D6ACFF
terminal.ansiBrightCyan #A4FFFF
terminal.ansiBrightGreen #69FF94
terminal.ansiBrightMagenta #FF92DF
terminal.ansiBrightRed #FF6E6E
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFFFA5
terminal.ansiCyan #8BE9FD
terminal.ansiGreen #50FA7B
terminal.ansiMagenta #FF79C6
terminal.ansiRed #FF5555
terminal.ansiWhite #F8F8F2
terminal.ansiYellow #F1FA8C
terminal.background #282A36
terminal.foreground #F8F8F2
titleBar.activeBackground #21222C
titleBar.activeForeground #F8F8F2
titleBar.inactiveBackground #191A21
titleBar.inactiveForeground #6272A4
walkThrough.embeddedEditorBackground #21222C keyword.control.anchor.regexp, punctuation.definition.group.no-capture.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, string.regexp #ED94C0 —
punctuation, storage.type.function.arrow, meta.brace.round, meta.brace.square, keyword.operator, statement.captured-options.proto #675875 —
punctuation.definition.comment, comment.line #435850 —
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc #164532 bold
variable.other.jsdoc #6D593A —
entity.name.type.module #C191FF —
entity.name.type.class #C191FF —
entity.name.type.enum #9876AA —
variable.other.enummember, entity.name.type.enum-value #E1BFFF —
entity.name.type.interface #875CB8 —
variable.other.property #66C3CC —
keyword.control.flow, keyword.operator.expression.void, keyword.operator.new, storage.modifier.async, keyword.operator.optional, punctuation.accessor.optional, constant.language #875cb8 —
variable.other.constant #BDBDBD —
constant.character.escape #D688D4 —
variable.other.readwrite #6C95EB —
variable.other.readwrite.alias #C191FF —
variable.local.readonly #BDBDBD —
variable.parameter #FFFFFF —
support.type.builtin #ED94C0 —
variable.other.constant.object, variable.other.constant #C191FF —
entity.name.tag.tsx #C191FF —
entity.other.attribute-name.tsx #91B0EC —
entity.name.tag.yaml #6C95EB —
variable.other.alias.yaml #E1BFFF —
entity.name.type.anchor.yaml #39CC56 —
string.unquoted.plain.out.yaml #BDBDBD —
string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml #FFD49E —
constant.language.merge.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml #C191FF —
entity.name.section.package.proto, entity.name.type.service.proto #C191FF —
entity.name.type.message.proto #875CB8 —
entity.name.type.request.proto, entity.name.type.response.proto #875CB8 —
variable.name.field.proto #66C3CC —
meta.syntax.value.proto #6C95EB —
variable.name.option.proto #875CB8 —
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 } ! ` ;
}
Purple Rain Dark Theme | Coding Theme