Skip to main content
Home Theme VS Code Pulsar Theme Pulsar inspired pleasant dark theme for Visual Studio Code.
Pulsar Theme | 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.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+
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 } !` ;
}