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 #33c7c413 activityBar.activeBorder #269299 activityBar.activeFocusBorder #269299 activityBar.background #212a2f activityBar.dropBorder #269299 activityBar.inactiveForeground #8b9eae tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle invalid #F07171 — meta.embedded, source.groovy.embedded, meta.template.expression #b4cce1 — variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable #b4cce1 — comment, punctuation.definition.comment #465966 italic
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Pastel Noir — Pastel Noir
activityBarBadge.background #B4CCE1
activityBarBadge.foreground #000000
badge.background #B4CCE1
badge.foreground #000000
button.background #a89c94
button.foreground #000000
button.hoverBackground #827872
checkbox.background #334049
diffEditor.insertedTextBackground #B4CCE130
diffEditor.removedTextBackground #F0717135
dropdown.background #334049
dropdown.border #3a4953
editor.background #2a353c
editor.findMatchBorder #269299
editor.findMatchHighlightBackground #b4cce130
editor.foldBackground #a89c9430
editor.foreground #b4cce1
editor.lineHighlightBackground #334049
editor.selectionBackground #33c7c430
editorBracketMatch.background #263037
editorBracketMatch.border #269492
editorCursor.background #000000
editorCursor.foreground #269299
editorError.foreground #F07171
editorGroup.border #212a2f
editorGroup.dropBackground #33c7c430
editorGroupHeader.noTabsBackground #334049
editorGroupHeader.tabsBackground #334049
editorGutter.addedBackground #B4CCE1
editorGutter.deletedBackground #F07171
editorGutter.modifiedBackground #B4CCE1
editorHoverWidget.border #3c4b56
editorIndentGuide.activeBackground #269299
editorIndentGuide.background #3c4b56
editorInfo.foreground #B4CCE1
editorLineNumber.activeForeground #a5b5c0
editorLineNumber.foreground #546a78
editorLink.activeForeground #269299
editorMarkerNavigation.background #2a353c
editorMarkerNavigationError.background #F07171
editorMarkerNavigationInfo.background #B4CCE1
editorMarkerNavigationWarning.background #FA8D3E
editorOverviewRuler.addedForeground #B4CCE1
editorOverviewRuler.border #3c4b56
editorOverviewRuler.bracketMatchForeground #269299
editorOverviewRuler.deletedForeground #B4CCE1
editorOverviewRuler.errorForeground #F07171
editorOverviewRuler.infoForeground #B4CCE1
editorOverviewRuler.modifiedForeground #B4CCE1
editorOverviewRuler.selectionHighlightForeground #269299
editorOverviewRuler.warningForeground #FA8D3E
editorPane.background #232c32
editorRuler.foreground #3c4b56
editorSuggestWidget.background #334049
editorSuggestWidget.border #3c4b56
editorSuggestWidget.highlightForeground #B4CCE1
editorWarning.foreground #FA8D3E
editorWhitespace.foreground #4e626f
editorWidget.background #2a353c
editorWidget.resizeBorder #3c4b56
errorForeground #F07171
extensionButton.prominentBackground #a89c94
extensionButton.prominentForeground #000000
extensionButton.prominentHoverBackground #756d67
focusBorder #269299
foreground #b4cce1
gitDecoration.addedResourceForeground #B4CCE1
gitDecoration.deletedResourceForeground #F07171
gitDecoration.modifiedResourceForeground #B4CCE1
gitDecoration.stageDeletedResourceForeground #F07171
gitDecoration.stageModifiedResourceForeground #B4CCE1
input.background #334049
input.border #3a4953
inputValidation.errorBackground #F0717190
inputValidation.errorBorder #F07171
inputValidation.errorForeground #000000
inputValidation.infoBackground #B4CCE190
inputValidation.infoBorder #B4CCE1
inputValidation.infoForeground #000000
inputValidation.warningBackground #FA8D3E90
inputValidation.warningBorder #FA8D3E
inputValidation.warningForeground #000000
list.activeSelectionBackground #33c7c420
list.errorForeground #F07171
list.focusBackground #33c7c430
list.highlightForeground #B4CCE1
list.hoverBackground #35424b
list.inactiveSelectionBackground #33c7c425
list.warningForeground #FA8D3E
menu.background #2a353c
menu.foreground #b4cce1
menu.selectionBackground #33c7c4DD
menu.selectionForeground #000000
menu.separatorBackground #4e626f
minimap.errorHighlight #F07171
minimap.selectionHighlight #33c7c480
minimap.warningHighlight #FA8D3E
minimapGutter.addedBackground #B4CCE1
minimapGutter.deletedBackground #F07171
minimapGutter.modifiedBackground #B4CCE1
notifications.background #2a353c
notificationsErrorIcon.foreground #F07171
notificationsInfoIcon.foreground #B4CCE1
notificationsWarningIcon.foreground #FA8D3E
panel.dropBorder #269299
panelTitle.activeBorder #269299
peekViewResult.background #334049
peekViewTitle.background #212a2f
pickerGroup.border #181e23
pickerGroup.foreground #269299
problemsErrorIcon.foreground #F07171
problemsInfoIcon.foreground #B4CCE1
problemsWarningIcon.foreground #FA8D3E
progressBar.background #269299
scrollbar.shadow #151a1e
scrollbarSlider.activeBackground #4e626f40
scrollbarSlider.background #60788850
scrollbarSlider.hoverBackground #718fa240
selection.background #33c7c480
settings.modifiedItemIndicator #B4CCE1
sideBar.background #262f36
sideBarSectionHeader.background #2f3a43
statusBar.background #212a2f
statusBarItem.hoverBackground #334149
statusBarItem.prominentBackground #269299
statusBarItem.prominentForeground #000000
statusBarItem.prominentHoverBackground #2caeab
tab.activeBackground #2a353c
tab.activeBorder #269299
tab.activeModifiedBorder #B4CCE1
tab.border #3c4b56
tab.hoverBackground #3c4b56
tab.inactiveBackground #334049
tab.lastPinnedBorder #33c7c450
terminal.selectionBackground #269299
terminalCursor.background #000000
terminalCursor.foreground #269299
textLink.activeForeground #a89c94
textLink.foreground #6983A5
textPreformat.foreground #b1729a
textSeparator.foreground #181e23
titleBar.activeBackground #334049
titleBar.border #37444e
titleBar.inactiveBackground #2a353c
widget.shadow #151a1e string, punctuation.definition.string
constant.character.escape #6983A5 —
keyword, constant.language.import-export-all #b1729a —
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type #6983A5 —
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new #6983A5 —
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class #a89c94 —
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded #B4CCE1 —
constant.numeric, constant.language #7DBFEF —
variable.parameter, parameter.variable, meta.function.parameter variable, source.rust meta.type_params.rust #B4CCE1 —
punctuation, meta.brace #8192a1 —
variable.language.this, variable.language.special.self #6983A5 —
comment.block.documentation entity.name.type #B4CCE1 —
variable.language.super #a89c94 —
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype #8192a1 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #b1729a —
constant.character.entity, punctuation.definition.entity #7DBFEF —
entity.name.section.markdown, markup.heading.setext #b1729a —
punctuation.definition.list #b1729a —
meta.separator.markdown #b1729a —
markup.inline.raw #6983A5 —
meta.link punctuation.definition.string, meta.image punctuation.definition.string #8192a1 —
link, markup.underline.link, constant.other.reference.link.markdown #a89c94 —
entity.name.tag.css, entity.name.tag.wildcard #269299 —
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity #b1729a —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color #6983A5 —
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #a89c94 —
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric #269299 —
meta.property-name, support.type.property-name #7DBFEF —
meta.property-value, meta.property-value constant.other, support.constant.property-value #a89c94 —
variable.parameter.url #7DBFEF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #b1729a —
entity.name.section #a89c94 —
support.type.property-name.json #b1729a —
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 } !` ;
}
Pastel Noir | Coding Theme