Skip to main content
Home Theme VS Code Galastri Dark Theme For VS Code Theme for VS Code based on Delkos Dark Theme for Brackets
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 #0099ff62 activityBar.background #181818 activityBar.border #202020 activityBarBadge.background #1568a0 diffEditor.diagonalFill #839ed81f diffEditor.insertedTextBackground #15ca8e1f tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle source.php, source.php punctuation, source.php keyword.operator, source.php string punctuation.section.array, source.php punctuation.terminator #ffffff source.php meta.function-call support.function, source.php support.function, support.function.construct.output, source.php keyword.control.exit, source.php keyword.control.import.include #ebebeb bold italic source.php comment, source.php comment keyword.other, source.php comment punctuation, source.php comment support.class punctuation.separator.inheritance, source.php comment support.other.namespace, source.php comment support.other.namespace punctuation.separator.inheritance, source.php comment support.other, source.php comment.block.documentation support.class, source.php comment.block.documentation support punctuation, source.php comment.block.documentation punctuation, source.php comment.block.documentation punctuation.definition #95927e
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Galastri Dark Theme For VS Code — Galastri Dark Theme
diffEditor.removedTextBackground #ff00552f
dropdown.background #282a2b
dropdown.border #282a2b
editor.background #161616
editor.findMatchBackground #ffcc23
editor.findMatchHighlightBackground #fffa9f
editor.foldBackground #00000000
editor.foreground #ffffff
editor.inactiveSelectionBackground #0099ff4f
editor.lineHighlightBackground #0099ff1e
editor.selectionBackground #0099ff4f
editor.selectionHighlightBackground #0099ff4f
editor.selectionHighlightBorder #0099ff36
editorBracketMatch.background #db179a
editorBracketMatch.border #00000000
editorGroupHeader.tabsBackground #1a1a1a
editorIndentGuide.activeBackground #273d4b9c
editorIndentGuide.background #ffffff06
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #464646
editorOverviewRuler.background #151515
editorOverviewRuler.border #232323
editorOverviewRuler.findMatchForeground #fffbb5a4
extensionButton.prominentBackground #0cbd82
extensionButton.prominentForeground #0b0b0b
extensionButton.prominentHoverBackground #0ae99f
focusBorder #0000005b
input.background #282a2b
input.border #282a2b
list.focusOutline #00000000
list.hoverBackground #373a3b6c
list.inactiveSelectionBackground #0b476f
list.inactiveSelectionForeground #ffffff
menu.background #101010
menu.border #101010
menu.foreground #acacac
menu.separatorBackground #3a3a3a
menubar.selectionBackground #0b476f
menubar.selectionBorder #00000000
minimap.background #181818
minimap.findMatchHighlight #fffbb59a
minimap.selectionHighlight #0099ff
minimapSlider.activeBackground #ffffff1e
minimapSlider.background #ffffff19
minimapSlider.hoverBackground #ffffff1e
panel.background #181818
panel.border #222222
scrollbar.shadow #0000001f
scrollbarSlider.activeBackground #ffffff47
scrollbarSlider.background #ffffff32
scrollbarSlider.hoverBackground #ffffff47
settings.focusedRowBackground #282d303d
sideBar.background #181818
sideBar.border #222222
sideBar.foreground #acacac
statusBar.background #262626
statusBar.debuggingBackground #fcce00
statusBar.debuggingForeground #0b0b0b
statusBar.foreground #868686
statusBar.noFolderBackground #262626
statusBar.noFolderForeground #868686
statusBarItem.hoverBackground #00000038
statusBarItem.remoteBackground #106399
statusBarItem.remoteForeground #ffffff
tab.activeBackground #0b476f36
tab.activeBorderTop #103955
tab.border #00000000
tab.hoverBackground #1e77b333
tab.inactiveBackground #1a1a1a
titleBar.activeBackground #1a1a1a
titleBar.border #161616
titleBar.inactiveBackground #1a1a1a source.php meta.trait entity.name, source.php meta.interface entity.name, source.php meta.namespace entity.name, source.php meta.namespace entity.name punctuation, source.php meta.function entity.name, source.php meta.function support.function.magic, source.php meta.function support.function.constructor, source.php meta.function punctuation.definition.variable, source.php meta.class entity.name.type.class, source.php meta.use entity.other.alias, source.php meta.function variable #e7c500 bold
source.php storage.modifier.reference, source.php keyword.operator.nullable-type #00e78f bold
source.php constant.numeric, source.php constant.numeric punctuation #ff6161 bold
source.php string, source.php string punctuation, source.php string keyword, source.php string keyword.operator, source.php string source.sql, source.php string source.sql keyword.other, source.php string source.sql constant.numeric, source.php string source.sql support.function #ffa2ea
source.php constant.language #b086ee bold
source.php storage, source.php keyword.other, source.php meta.namespace, source.php meta.function, source.php meta.use keyword, source.php meta.class storage, source.php meta.class keyword.other.new, source.php keyword.control, source.php keyword.other.new, source.php keyword.operator.type, source.php meta.function.parameter.typehinted punctuation.separator.delimiter, source.php meta.function.parameter.typehinted storage.type #80b7ff
source.php keyword.operator.logical #80b7ff underline
source.php variable, source.php variable punctuation.definition #46d4ff
source.php support.class, source.php meta.other.inherited-class, source.php meta.method-call entity.name.function, source.php meta.function-call entity.name.function, source.php meta.function-call support.other.namespace, source.php support.class punctuation.separator.inheritance, source.php support.other.namespace, source.php support.other.namespace punctuation.separator.inheritance, source.php meta.function-call support.class, source.php string.unquoted.index, source.php meta.use support, source.php meta.use support punctuation, source.php meta.class support, source.php meta.class support punctuation, source.php meta.method-call, source.php variable.other.property #aaeaaa
source.php constant.other, source.php support.constant #7ece7e bold
source.css, source.css punctuation #ffffff
source.css comment #95927e
source.css comment punctuation #95927e
source.css entity.other.attribute-name, source.css entity.other.attribute-name punctuation #e0e0e0
source.css meta.attribute-selector entity.other.attribute-name, source.css meta.attribute-selector entity.other.attribute-name #80fff9
source.css entity.other.attribute-name.pseudo-element punctuation.definition, source.css entity.other.attribute-name.pseudo-class punctuation.definition #e0e0e0 underline
source.css entity.other.attribute-name.pseudo-element, source.css entity.other.attribute-name.pseudo-class #64fff7
source.css meta.property-value, source.css meta.at-rule variable.parameter #aaeaaa
source.css meta.property-list, source.css meta.at-rule support.type.property-name #c7e58a
source.css meta.at-rule keyword.control, source.css meta.at-rule keyword.control punctuation #e7c500 bold
source.css constant.numeric #ff6161
source.css string, source.css string punctuation #ffa2ea
source.css entity.name #ec4fb8 bold
source.css meta.at-rule entity.other #ec4fb8
source.css support.constant, source.css constant.other.color, source.css constant.other.color punctuation, source.css invalid.deprecated, source.css support.function #b086ee bold
source.css keyword.other.important #80b7ff
text.html, text.html meta.tag.metadata.processing.xml entity.name, text.html meta.tag.metadata.processing.xml punctuation.definition.tag, text.html meta.attribute punctuation.section.embedded.begin.php, text.html meta.attribute punctuation.section.embedded.end.php, text.xml, text.xml meta.tag.preprocessor.xml entity.name, text.xml meta.tag.preprocessor.xml punctuation.definition.tag #ffffff
text.html comment, text.xml comment #95927e
text.html meta.attribute string, text.xml string #ffa2ea
text.html meta.tag entity.name, text.html punctuation.definition.tag, text.html entity.name.tag.style, text.html entity.name.tag.script, text.html meta.tag punctuation.definition.tag, text.xml meta.tag entity.name, text.xml meta.tag punctuation.definition.tag #ec4fb8
text.html meta.attribute entity.other, text.xml entity.other.attribute-name #8ae5c9
text.html.twig, text.html.twig punctuation, text.html.twig keyword.operator.assignment #ffffff
text.html.twig meta.tag.template support.function #ebebeb bold italic
text.html.twig comment.block punctuation #95927e
text.html.twig punctuation.section.tag #e7c500 italic
text.html.twig string, text.html.twig string punctuation.definition #ffa2ea
text.html.twig meta.tag entity.other, text.html.twig entity.other.attribute-name.html #8ae5c9
text.html.twig variable #46d4ff
text.html.twig variable.other.property #aaeaaa
text.html.twig meta.tag.template keyword.control, text.html.twig meta.tag.template keyword.operator #80b7ff
text.html.twig meta.tag.template constant.language #b086ee bold
text.html.twig meta.tag.template constant.numeric #ff6161 bold
text.html.php.blade, text.html.php.blade meta.directive #ffffff
text.html.php.blade support.function.construct.begin, text.html.php.blade support.function.construct.end #e7c500 bold
text.html.php.blade keyword.blade, text.html.php.blade punctuation.section.embedded.begin, text.html.php.blade punctuation.section.embedded.end, text.html.php.blade entity.name.function.blade #80b7ff
text.html.php.blade punctuation.definition.variable #46d4ff
text.html.php.blade source.php entity.name.class #aaeaaa
text.html.php.blade string #ffa2ea
source.latte, source.latte keyword, source.latte keyword.control.print #ffffff
source.latte keyword.other.function-name #ffffff bold italic
source.latte comment #95927e
source.latte string #ffa2ea
source.latte meta.tag entity.name, source.latte punctuation.definition.tag, source.latte entity.name.tag.style, source.latte entity.name.tag.script, source.latte meta.tag punctuation.definition.tag #ec4fb8
source.latte variable.other.property.latte, source.latte keyword.control.pair.latte #aaeaaa
source.latte meta.attribute entity.other #8ae5c9
source.latte variable #46d4ff
source.latte tag.begin, source.latte tag.end #e7c500 bold
source.latte keyword.control #80b7ff
source.latte keyword.operator.logical #80b7ff underline
source.latte constant.numeric #ff6161 bold
source.js, source.js meta.object-literal punctuation, source.js meta.template.expression, source.js storage.type.function.arrow #ffffff
source.js comment, source.js comment storage, source.js comment storage.type #95927e
source.js support.function, source.js support.class.builtin, source.js meta.function punctuation.accessor #ebebeb italic bold
source.js string, source.js meta.object-literal string punctuation #ffa2ea
source.js constant.language #b086ee bold
source.js storage, source.js variable.language.this, source.js keyword.control, source.js keyword.operator.expression, source.js keyword.operator.new, source.js meta.method.declaration storage.type.property, source.js meta.method.declaration storage.type.function, source.js meta.method.declaration meta.var.expr storage, source.js support.class.builtin, source.js support.type.object, source.js support.variable.property #80b7ff
source.js keyword.operator.logical #80b7ff underline
source.js variable.other.object, source.js variable.other.readwrite, source.js meta.export.default variable.other.readwrite, source.js meta.block variable.parameter #46d4ff
source.js meta.template punctuation.definition.template-expression #ffffff
source.js variable.other.constant, source.js support.constant #aaeaaa bold
source.js meta.export entity.name, source.js meta.export entity.other.inherited-class, source.js support.class #aaeaaa
source.js meta.function-call variable.other.object.property, source.js meta.function-call entity.name, source.js meta.objectliteral meta.object-literal.key, source.js meta.class variable.other.property, source.js variable.other.object.property, source.js variable.other.property, source.js entity.name.function #d2f386
source.js meta.method.declaration storage, source.js variable.parameter, source.js meta.definition.variable, source.js meta.definition.variable entity.name.function, source.js meta.definition.variable variable.other.readwrite, source.js entity.name.type.class, source.js meta.class meta.definition.method entity.name, source.js meta.definition.function entity.name, source.js meta.definition.variable variable.other.constant, source.js meta.definition.function entity.name.function, source.js meta.definition.property, source.js meta.import variable.other.readwrite.alias #e7c500 bold
source.js constant.numeric #ff6161 bold
source.js.jsx meta.tag.js.jsx keyword.operator.assignment, source.js.jsx meta.tag.js.jsx punctuation, source.js.jsx meta.tag.js.jsx meta.embedded #ffffff
source.js.jsx meta.tag.js.jsx comment punctuation #95927e
source.js.jsx meta.tag punctuation.definition.tag, source.js.jsx meta.tag entity.name #ec4fb8
source.js.jsx meta.tag.js.jsx punctuation.definition.string #ffa2ea
source.js.jsx meta.tag.js.jsx meta.tag.attributes #8ae5c9
source.js.jsx meta.tag.js.jsx support.class.component #aaeaaa
source.ts, source.ts meta.object-literal punctuation, source.ts meta.template.expression, source.ts storage.type.function.arrow #ffffff
source.ts comment, source.ts comment storage, source.ts comment storage.type #95927e
source.ts support.function, source.ts support.class.builtin, source.ts meta.function punctuation.accessor #ebebeb italic bold
source.ts string, source.ts meta.object-literal string punctuation #ffa2ea
source.ts constant.language #b086ee bold
source.ts storage, source.ts variable.language.this, source.ts keyword.control, source.ts keyword.operator.expression, source.ts keyword.operator.new, source.ts meta.method.declaration storage.type.property, source.ts meta.method.declaration storage.type.function, source.ts meta.method.declaration meta.var.expr storage, source.ts support.class.builtin, source.ts support.type.object, source.ts support.variable.property, source.ts meta.return.type support.type.primitive, source.ts meta.type.annotation support.type.primitive, source.ts meta.type.annotation keyword.operator.type.ts, source.ts meta.type.annotation support.type.builtin, source.ts meta.type.declaration support.type.primitive, source.ts meta.type.parameters support.type #80b7ff
source.ts keyword.operator.logical #80b7ff underline
source.ts variable.other.object, source.ts variable.other.readwrite, source.ts meta.export.default variable.other.readwrite, source.ts meta.block variable.parameter #46d4ff
source.ts meta.template punctuation.definition.template-expression #ffffff
source.ts variable.other.constant, source.ts support.constant #aaeaaa bold
source.ts meta.export entity.name, source.ts meta.export entity.other.inherited-class, source.ts meta.class entity.other, source.ts support.class, source.ts meta.type.annotation entity.name.type, source.ts meta.return.type entity.name.type, source.ts meta.type.declaration entity.name.type, source.ts meta.type.parameters entity.name.type #aaeaaa
source.ts meta.type.parameters, source.ts meta.type.parameters entity.name.type, source.ts meta.type.parameters support.type — italic underline
source.ts meta.function-call variable.other.object.property, source.ts meta.function-call entity.name, source.ts meta.objectliteral meta.object-literal.key, source.ts meta.class variable.other.property, source.ts variable.other.object.property, source.ts variable.other.property, source.ts entity.name.function, source.ts variable.other.enummember, source.ts meta.definition.property variable.object.property #d2f386
source.ts meta.method.declaration storage, source.ts variable.parameter, source.ts meta.definition.variable, source.ts meta.definition.variable entity.name.function, source.ts meta.definition.variable variable.other.readwrite, source.ts entity.name.type.class, source.ts meta.class meta.definition.method entity.name, source.ts meta.definition.function entity.name, source.ts meta.definition.variable variable.other.constant, source.ts meta.definition.function entity.name.function, source.ts meta.definition.property, source.ts entity.name.type, source.ts meta.import variable.other.readwrite.alias, source.ts meta.type.declaration entity.name.type.alias #e7c500 bold
source.ts constant.numeric #ff6161 bold
source.ts meta.parameters keyword.operator.optional #00e78f bold
source.tsx, source.tsx meta.object-literal punctuation, source.tsx meta.template.expression, source.tsx storage.type.function.arrow #ffffff
source.tsx comment, source.tsx comment storage, source.tsx comment storage.type #95927e
source.tsx support.function, source.tsx support.class.builtin, source.tsx meta.function punctuation.accessor #ebebeb italic bold
source.tsx string, source.tsx meta.object-literal string punctuation #ffa2ea
source.tsx constant.language #b086ee bold
source.tsx storage, source.tsx variable.language.this, source.tsx keyword.control, source.tsx keyword.operator.expression, source.tsx keyword.operator.new, source.tsx meta.method.declaration storage.type.property, source.tsx meta.method.declaration storage.type.function, source.tsx meta.method.declaration meta.var.expr storage, source.tsx support.class.builtin, source.tsx support.type.object, source.tsx support.variable.property, source.tsx meta.return.type support.type.primitive, source.tsx meta.type.annotation support.type.primitive, source.tsx meta.type.annotation keyword.operator.type.ts, source.tsx meta.type.annotation support.type.builtin, source.tsx meta.type.declaration support.type.primitive, source.tsx meta.type.parameters support.type #80b7ff
source.tsx keyword.operator.logical #80b7ff underline
source.tsx variable.other.object, source.tsx variable.other.readwrite, source.tsx meta.export.default variable.other.readwrite, source.tsx meta.block variable.parameter #46d4ff
source.tsx meta.template punctuation.definition.template-expression #ffffff
source.tsx variable.other.constant, source.tsx support.constant #aaeaaa bold
source.tsx meta.export entity.name, source.tsx meta.export entity.other.inherited-class, source.tsx meta.class entity.other, source.tsx support.class, source.tsx meta.type.annotation entity.name.type, source.tsx meta.return.type entity.name.type, source.tsx meta.type.declaration entity.name.type, source.tsx meta.type.parameters entity.name.type #aaeaaa
source.tsx meta.type.parameters, source.tsx meta.type.parameters entity.name.type, source.tsx meta.type.parameters support.type — italic underline
source.tsx meta.function-call variable.other.object.property, source.tsx meta.function-call entity.name, source.tsx meta.objectliteral meta.object-literal.key, source.tsx meta.class variable.other.property, source.tsx variable.other.object.property, source.tsx variable.other.property, source.tsx entity.name.function, source.tsx variable.other.enummember, source.tsx meta.definition.property variable.object.property #d2f386
source.tsx meta.method.declaration storage, source.tsx variable.parameter, source.tsx meta.definition.variable, source.tsx meta.definition.variable entity.name.function, source.tsx meta.definition.variable variable.other.readwrite, source.tsx entity.name.type.class, source.tsx meta.class meta.definition.method entity.name, source.tsx meta.definition.function entity.name, source.tsx meta.definition.variable variable.other.constant, source.tsx meta.definition.function entity.name.function, source.tsx meta.definition.property, source.tsx entity.name.type, source.tsx meta.import variable.other.readwrite.alias, source.tsx meta.type.declaration entity.name.type.alias #e7c500 bold
source.tsx constant.numeric #ff6161 bold
source.tsx meta.parameters keyword.operator.optional #00e78f bold
source.tsx meta.tag keyword.operator.assignment, source.tsx meta.tag punctuation, source.tsx meta.tag meta.embedded #ffffff
source.tsx meta.tag comment punctuation #95927e
source.tsx meta.tag punctuation.definition.tag, source.tsx meta.tag entity.name #ec4fb8
source.tsx meta.tag punctuation.definition.string #ffa2ea
source.tsx meta.tag meta.tag.attributes #8ae5c9
source.tsx meta.tag support.class.component #aaeaaa
source.json comment #95927e
source.json string.quoted #ffa2ea
source.json support.type.property-name #ec4fb8 bold
source.json constant.numeric #ff6161 bold
source.json constant.language #b086ee bold
source.coffee comment #95927e
source.coffee string #ffa2ea
source.coffee punctuation.definition.escape.backslash #ffa2e942
source.sql keyword.operator #ffffff
source.sql comment #95927e
source.sql keyword, source.sql storage #80b7ff
source.sql string.quoted.other.backtick #46d4ff
source.sql meta.create #e7c500 bold
source.sql constant.numeric #ff6161 bold
source.ini punctuation.separator.key-value #ffffff
source.ini comment #95927e
source.ini entity.name.section #ec4fb8 bold
source.ini keyword.other.definition #e7c500 bold
source.apacheconf entity.helper #aaeaaa
source.apacheconf string.replacement #80b7ff
source.apacheconf comment #95927e
source.apacheconf entity.tag, source.apacheconf punctuation.definition.tag #ec4fb8 bold
source.apacheconf string.regexp, source.apacheconf string.value #ffa2ea
source.apacheconf keyword #e7c500 bold
text.html.markdown meta.tag meta.attribute .separator.key-value, text.html.markdown #ffffff
text.html.markdown meta.paragraph, text.html.markdown meta.link.reference string.other.link.title #cfcfce
text.html.markdown markup #d68455 bold
text.html.markdown markup.list punctuation.definition.list.begin #ffffff bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code #d2f386 italic
text.html.markdown meta.tag meta.attribute #8ae5c9
text.html.markdown markup.heading #ffc400 bold
text.html.markdown meta.link markup #b086ee italic underline
text.html.markdown meta.link string.other.link.title, text.html.markdown meta.link punctuation.definition.string, text.html.markdown meta.link.reference constant.other.reference.link, text.html.markdown meta.link.reference punctuation.definition, text.html.markdown meta.link.reference punctuation.separator #b994f0 bold underline
text.html.markdown meta.image markup #e966bd italic underline
text.html.markdown meta.image string.other.link.description, text.html.markdown meta.image punctuation.definition.string #e966bd bold underline
source.shell comment #95927e
source.shell entity.name #80b7ff
source.shell constant #aaeaaa
source.shell string #ffa2ea
source.shell variable #46d4ff
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*
Galastri Dark Theme For VS Code | Coding Theme 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 } !` ; }
