Skip to main content
Home Theme VS Code Pulsar Theme Pulsar inspired pleasant dark theme for Visual Studio Code.
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.activeBorder #46954A activityBar.background #353535 activityBar.foreground #E7E9E8 activityBarBadge.background #347d39 activityBarBadge.foreground #E7E9E8 badge.background #347d39 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #C5C8C6 — comment, punctuation.definition.comment #9A9B99 italic variable, entity.name.variable, text.html.derivative entity.name.type, string meta.interpolation #C5C8C6 — string, punctuation.definition.string #9AA83A — string.regexp, string.regexp punctuation.definition.string, string.regexp constant.character, string.regexp keyword, string.regexp keyword.operator, string.regexp punctuation.definition
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#E7E9E8
button.background #347D39
button.foreground #E7E9E8
button.hoverBackground #46954A
button.secondaryForeground #E7E9E8
diffEditor.insertedLineBackground #487e0246
diffEditor.insertedTextBackground #7bd88f22
diffEditor.removedTextBackground #e5534b26
diffEditorOverview.insertedForeground #487e02
diffEditorOverview.removedForeground #f47067bd
dropdown.foreground #C5C8C6
dropdown.listBackground #2a2a2a
editor.background #1E1E1E
editor.findMatchBackground #64b84d5e
editor.findMatchBorder #c8ddc237
editor.findMatchHighlightBackground #64b84d47
editor.foreground #C5C8C6
editor.hoverHighlightBackground #575b6180
editor.lineHighlightBackground #303030
editor.selectionBackground #404040
editor.selectionHighlightBackground #404040
editor.wordHighlightBackground #575b6180
editor.wordHighlightStrongBackground #575b6180
editorBracketHighlight.foreground1 #C5C8C6
editorBracketHighlight.foreground2 #E4A05C
editorBracketHighlight.foreground3 #DE535F
editorBracketHighlight.foreground4 #99B2D8
editorBracketMatch.background #c5c8c64b
editorCodeLens.foreground #f6f6f666
editorCursor.foreground #E5534B
editorError.foreground #c24038
editorGroupHeader.noTabsBackground #282828
editorGroupHeader.tabsBackground #282828
editorGutter.addedBackground #487e02
editorGutter.deletedBackground #f47067bd
editorGutter.modifiedBackground #578fbe
editorIndentGuide.activeBackground #f6f6f65d
editorIndentGuide.background #505037
editorInfo.foreground #00809b
editorInlayHint.background #00000000
editorInlayHint.foreground #9A9B99
editorLightBulb.foreground #cca700
editorLightBulbAutoFix.foreground #00809b
editorLineNumber.activeForeground #C5C8C6
editorLineNumber.foreground #6a6a6a
editorLink.activeForeground #65b84d
editorMarkerNavigationError.background #c24038
editorMarkerNavigationInfo.background #00809b
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.addedForeground #487e02
editorOverviewRuler.border #f6f6f622
editorOverviewRuler.deletedForeground #f47067bd
editorOverviewRuler.errorForeground #c24038
editorOverviewRuler.findMatchForeground #46954A
editorOverviewRuler.infoForeground #00809b
editorOverviewRuler.modifiedForeground #578fbe
editorOverviewRuler.warningForeground #cca700
editorRuler.foreground #f6f6f622
editorSuggestWidget.focusHighlightForeground #E5534B
editorSuggestWidget.highlightForeground #E5534B
editorSuggestWidget.selectedBackground #45903133
editorSuggestWidget.selectedForeground #C5C8C6
editorSuggestWidget.selectedIconForeground #C5C8C6
editorWarning.foreground #cca700
editorWhitespace.foreground #505037
editorWidget.resizeBorder #459031
errorForeground #c24038
focusBorder #6dd1745a
foreground #C5C8C6
gitDecoration.addedResourceForeground #57ab5a
gitDecoration.conflictingResourceForeground #cc6b2c
gitDecoration.deletedResourceForeground #e5534b
gitDecoration.ignoredResourceForeground #545d68
gitDecoration.modifiedResourceForeground #c69026
gitDecoration.submoduleResourceForeground #768390
gitDecoration.untrackedResourceForeground #57ab5a
icon.foreground #C5C8C6
input.background #1f1f1f
input.border #444444
inputOption.activeBorder #6dd1745a
inputOption.activeForeground #E7E9E8
list.activeSelectionBackground #347d398a
list.activeSelectionForeground #E7E9E8
list.dropBackground #f6f6f622
list.focusBackground #45903133
list.focusHighlightForeground #E5534B
list.focusOutline #45903133
list.highlightForeground #E5534B
list.hoverBackground #45903133
list.inactiveSelectionBackground #4e4e4e
menu.background #2a2a2a
menu.border #444444
menu.foreground #C5C8C6
menubar.selectionBackground #45903133
minimap.errorHighlight #c24038
minimap.findMatchHighlight #46954A
minimap.selectionHighlight #46954A
minimap.warningHighlight #cca700
minimapGutter.addedBackground #487e02
minimapGutter.deletedBackground #f47067bd
minimapGutter.modifiedBackground #578fbe
notificationsErrorIcon.foreground #c24038
notificationsInfoIcon.foreground #00809b
notificationsWarningIcon.foreground #cca700
panelTitle.activeBorder #46954A
panelTitle.activeForeground #E7E9E8
peekView.border #459031dd
peekViewEditor.background #2a2a2a
peekViewEditor.matchHighlightBackground #64b84d47
peekViewEditorGutter.background #2a2a2a
peekViewResult.background #1E1E1E
peekViewResult.matchHighlightBackground #64b84d47
peekViewResult.selectionBackground #347d398a
peekViewResult.selectionForeground #E7E9E8
peekViewTitle.background #1E1E1E
peekViewTitleLabel.foreground #C5C8C6
pickerGroup.border #444444
pickerGroup.foreground #65b84d
problemsErrorIcon.foreground #c24038
problemsInfoIcon.foreground #00809b
problemsWarningIcon.foreground #cca700
progressBar.background #347d39
selection.background #404040
sideBar.background #272727
sideBarTitle.foreground #E7E9E8
statusBar.background #505050
statusBar.debuggingBackground #a22821
statusBar.debuggingForeground #E7E9E8
statusBar.focusBorder #6dd1745a
statusBar.foreground #E7E9E8
statusBar.noFolderBackground #505050
statusBar.noFolderForeground #E7E9E8
statusBarItem.activeBackground #347d398a
statusBarItem.hoverBackground #45903133
statusBarItem.remoteBackground #347d39
statusBarItem.remoteForeground #E7E9E8
tab.activeBackground #1f1f1f
tab.activeBorder #46954A
tab.activeForeground #E7E9E8
tab.border #303030
tab.hoverBackground #45903133
tab.inactiveBackground #2a2a2a
tab.inactiveForeground #C5C8C6
terminal.ansiBlack #545d68
terminal.ansiBlue #539bf5
terminal.ansiBrightBlack #636e7b
terminal.ansiBrightBlue #6cb6ff
terminal.ansiBrightCyan #56d4dd
terminal.ansiBrightGreen #6bc46d
terminal.ansiBrightMagenta #dcbdfb
terminal.ansiBrightRed #ff938a
terminal.ansiBrightWhite #cdd9e5
terminal.ansiBrightYellow #daaa3f
terminal.ansiCyan #39c5cf
terminal.ansiGreen #57ab5a
terminal.ansiMagenta #b083f0
terminal.ansiRed #f47067
terminal.ansiWhite #909dab
terminal.ansiYellow #c69026
textLink.activeForeground #65B84D
textLink.foreground #46954A
titleBar.activeForeground #C5C8C6
tree.indentGuidesStroke #f6f6f644 constant.numeric, constant.other.color, constant.other.color punctuation.definition #6089B4 —
constant.numeric keyword.other.unit #9A9B99 —
constant.language, constant.other.boolean, source.php support.constant.core #E4A05C —
keyword, keyword.operator.new, keyword.operator.logical, text.html.derivative keyword.operator.expression.of, storage, punctuation.definition.template-expression, punctuation.section.embedded, meta.interpolation punctuation.definition.interpolation, text.html.derivative punctuation.definition.block, text.html.derivative punctuation.definition.interpolation, constant.character, constant.other.placeholder, source.python storage.type.string, source.php string.quoted punctuation.definition.variable, source.go keyword.type #CE6700 —
keyword.operator, punctuation, constant.language.import-export-all, keyword.control.ternary, source.r keyword.other #C5C8C6 —
support.type, keyword.type, entity.name.type.numeric, entity.name.type.primitive, storage.type.numeric, storage.type.string, storage.type.boolean, storage.type.primitive, storage.type.built-in, source.r storage.type #B2A3BD —
meta.decorator punctuation.decorator, meta.decorator variable, meta.decorator meta.function-call entity.name.function, meta.function.decorator punctuation.definition.decorator, meta.function.decorator entity.name.function.decorator, meta.function.decorator support.type, meta.declaration.annotation storage.type.annotation, meta.declaration.annotation punctuation.definition.annotation, source.rust meta.attribute, source.rust meta.attribute punctuation.definition.attribute, source.rust meta.attribute punctuation.brackets.attribute #DE535F —
variable.other.enummember, entity.name.variable.enum-member, constant.other.enum #E4A05C —
constant.language.symbol, constant.other.symbol #A8C2B0 —
variable.language.self, variable.language.this, variable.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.self, variable.parameter.function.language.special.cls, variable.language.super, keyword.other.this, keyword.other.base, source.python meta.function-call support.type, source.java variable.language #DE535F —
variable.parameter, comment.block.documentation variable, meta.function.parameters variable, meta.function.definition variable, entity.name.variable.parameter #A8C2B0 —
comment.block.documentation, comment.block.documentation punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string, comment.block.javadoc, comment.block.javadoc punctuation.definition.comment, source.julia string.quoted.triple.double #A5C261 italic
comment.block.documentation storage, comment.block.documentation punctuation.definition, comment.block.javadoc keyword.other.documentation.javadoc #E4A05C italic
comment.block.documentation variable, comment.block.javadoc variable.parameter — underline italic
comment.block.documentation entity.name.type #C5C8C6 italic
entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.module, entity.name.type.trait, entity.name.type.struct, entity.name.type.namespace, entity.name.function, meta.function support.function.magic, meta.type.declaration entity.name.type, source.rust meta.macro.rules entity.name.function.macro #FFC66D —
entity.name.function, variable.function, support.function, variable.language.super, source.python meta.function-call.generic, source.python meta.function-call support.type — italic
meta.function-call entity.name.function, meta.function-call support.function, meta.function-call variable.parameter.function-call, meta.function.call entity.name.function, meta.method-call entity.name.function, entity.name.function.call, entity.name.function.member, text.html.derivative entity.name.function, source.rust meta.macro entity.name.function.macro #C5C8C6 —
entity.name.namespace, entity.name.module, entity.name.scope-resolution, entity.name.package, source.php support.other.namespace #D0B344
entity.name.type, entity.other.inherited-class, support.type.exception, support.class, source.java storage.type #99B2D8
support.type.property-name.json #A8C2B0 —
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json #9A9B99 —
entity.name.tag, meta.tag.sgml.doctype keyword #A8C2B0 —
entity.other.attribute-name, source.vue meta.attribute keyword.control #FFC66D —
punctuation.definition.tag #9A9B99 —
entity.other.attribute-name punctuation.definition, text.html.derivative punctuation.attribute-shorthand #CE6700 —
source.css entity.other.attribute-name, source.css entity.name.tag #E4A05C —
source.css support.type.property-name, source.css support.type.vendored.property-name #A8C2B0 —
source.css meta.property-value #C5C8C6 italic
source.css entity.other.attribute-name punctuation.definition, source.css entity.name.tag.reference, source.css punctuation.definition.keyword #CE6700 —
source.css variable #B2A3BD —
source.toml keyword.key #A8C2B0 —
source.toml punctuation.definition.table #9A9B99 —
source.powershell keyword.operator.comparison, source.shell keyword.operator.logical #DE535F —
keyword.other.DML.sql #99B2D8 —
source.rust meta.macro.rules entity.name.function.macro.rules #B2A3BD —
source.rust entity.name.type.option, source.rust entity.name.type.result #E4A05C —
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime #D0B344 —
source.java storage.modifier.import #C5C8C6 —
source.php string.quoted variable punctuation.definition.variable #C5C8C6 —
source.go string entity.name.import #9AA83A —
source.cs entity.name.function #C5C8C6 —
source.cpp meta.body.function.definition variable #C5C8C6 —
source.cpp string.quoted.other.lt-gt.include, source.c string.quoted.other.lt-gt.include #D0B344 —
source.cpp string.quoted.other.lt-gt.include punctuation.definition.string, source.c string.quoted.other.lt-gt.include punctuation.definition.string #9A9B99 —
markdown.heading, markup.heading, markup.heading.markdown punctuation.definition.heading.markdown #CE6700 —
markup.heading entity.name #FFC66D —
markup punctuation.definition.italic, markup punctuation.definition.bold, markup punctuation.definition.underline, markup punctuation.definition.strikethrough #9A9B99
markup.bold markup.italic, markup.italic markup.bold — bold italic
markup.underline — underline
markup.strikethrough — strikethrough
markup.list punctuation.definition.list #E4A05C —
markup.underline.link #9A9B99 italic underline
string.other.link.title, meta.image string.other.link.description, meta.link.reference #99B2D8 —
meta.link punctuation.definition, meta.image punctuation.definition #CE6700 —
string.other.link.description.title #9AA83A —
markup.inline.raw, markup.inline.raw punctuation.definition #DE535F —
markup.raw.block, markup.fenced_code.block #B2A3BD —
markup.fenced_code.block meta.embedded.block #C5C8C6 —
fenced_code.block.language #D0B344 italic
markup.quote punctuation.definition, markup.fenced_code.block punctuation.definition.markdown #CE6700 —
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 } !` ;
}
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Dark+
Pulsar Theme | Coding Theme
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
Button.tsx
Modal.tsx
hooks
utils
index.ts
public
README.md
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
31
32
33
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 $
package.json
tsconfig.json
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 } !` ;
}