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.background #353535 activityBar.foreground #ffffff activityBarBadge.background #3655b5 button.background #565656 dropdown.background #525252 editor.background #1e1e1e 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.
Pulsar Theme — Pulsar Default Pulsar Theme | Coding Theme
editor.foreground
#c5c8c6
editor.lineHighlightBackground #303030
editor.selectionBackground #676b7180
editor.selectionHighlightBackground #575b6180
editor.wordHighlightBackground #4747a180
editor.wordHighlightStrongBackground #6767ce80
editorBracketHighlight.foreground1 #C5C8C6
editorBracketHighlight.foreground2 #E4A05C
editorBracketHighlight.foreground3 #DE535F
editorBracketHighlight.foreground4 #99B2D8
editorCursor.foreground #c07020
editorGroupHeader.tabsBackground #282828
editorIndentGuide.activeBackground #707057
editorIndentGuide.background #505037
editorInlayHint.background #00000000
editorInlayHint.foreground #9A9B99
editorLineNumber.activeForeground #949494
editorWhitespace.foreground #505037
focusBorder #3655b5
inputOption.activeBorder #3655b5
list.activeSelectionBackground #707070
list.highlightForeground #e58520
list.hoverBackground #444444
list.inactiveSelectionBackground #4e4e4e
menu.background #272727
menu.foreground #CCCCCC
minimap.selectionHighlight #676b7180
panelTitle.activeForeground #ffffff
peekView.border #3655b5
pickerGroup.foreground #b0b0b0
ports.iconRunningProcessForeground #CCCCCC
quickInputList.focusBackground #707070
sideBar.background #272727
sideBarSectionHeader.background #505050
statusBar.background #505050
statusBar.debuggingBackground #505050
statusBar.noFolderBackground #505050
statusBarItem.remoteBackground #3655b5
tab.border #303030
tab.inactiveBackground #404040
tab.inactiveForeground #d8d8d8
tab.lastPinnedBorder #505050
terminal.ansiBlack #1e1e1e
terminal.ansiBlue #6A7EC8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #819aff
terminal.ansiBrightCyan #66D9EF
terminal.ansiBrightGreen #A6E22E
terminal.ansiBrightMagenta #AE81FF
terminal.ansiBrightRed #f92672
terminal.ansiBrightWhite #f8f8f2
terminal.ansiBrightYellow #e2e22e
terminal.ansiCyan #56ADBC
terminal.ansiGreen #86B42B
terminal.ansiMagenta #8C6BC8
terminal.ansiRed #C4265E
terminal.ansiWhite #e3e3dd
terminal.ansiYellow #B3B42B
titleBar.activeBackground #505050 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 } !` ;
}