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.background #1c0333 activityBar.border #00000000 activityBar.dropBackground #c1ff7455 activityBar.foreground #c1ff7455 activityBarBadge.background #c1ff74 activityBarBadge.foreground #1c0333 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #f9fff0 — comment #5e4f6c — comment.block #8b8192 — string, string.quoted #d793ff — string.regexp, string.regexp keyword.other, punctuation.definition.template-expression
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Photophore Theme — Photophore Theme
badge.background
#c1ff74
badge.foreground #1c0333
button.background #c1ff74
button.foreground #1c0333
button.hoverBackground #d793ff
contrastBorder #1c0333
debugExceptionWidget.background #1c0333
debugExceptionWidget.border #d793ff
debugToolBar.background #1c0333
diffEditor.insertedTextBackground #5effaa44
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #ff82da44
diffEditor.removedTextBorder #00000000
dropdown.background #1c0333
dropdown.border #00000000
dropdown.foreground #f9fff0
editor.background #1c0333
editor.findMatchHighlightBackground #5effaa44
editor.findRangeHighlightBackground #f9fff022
editor.foreground #f9fff0
editor.hoverHighlightBackground #f9fff011
editor.inactiveSelectionBackground #f9fff011
editor.lineHighlightBackground #f9fff011
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #f9fff022
editor.selectionBackground #38234b
editor.selectionHighlightBackground #f9fff00a
editor.wordHighlightBackground #38234b
editor.wordHighlightStrongBackground #2d1641
editorCursor.foreground #8b8192
editorError.foreground #ff82da
editorGroupHeader.tabsBackground #1c0333
editorGroupHeader.tabsBorder #1c0333
editorGutter.addedBackground #5effaa44
editorGutter.deletedBackground #ff82da44
editorGutter.modifiedBackground #c1ff7444
editorHoverWidget.background #2d1641
editorHoverWidget.border #c1ff74
editorIndentGuide.activeBackground #5e4f6c
editorIndentGuide.background #38234b
editorLineNumber.foreground #8b8192
editorMarkerNavigation.background #1c0333
editorMarkerNavigationError.background #ff82da
editorMarkerNavigationWarning.background #ff82da
editorOverviewRuler.commonContentForeground #d793ff
editorOverviewRuler.currentContentForeground #d793ff
editorOverviewRuler.incomingContentForeground #d793ff
editorRuler.foreground #8b8192
editorSuggestWidget.background #2d1641
editorSuggestWidget.border #5e4f6c
editorSuggestWidget.foreground #f9fff0
editorWarning.foreground #ff82da
editorWidget.background #1c0333
errorForeground #ff82da
extensionButton.prominentBackground #d793ff
extensionButton.prominentForeground #1c0333
extensionButton.prominentHoverBackground #d793ff
focusBorder #00000000
foreground #f9fff0
gitDecoration.conflictingResourceForeground #ff82da
gitDecoration.ignoredResourceForeground #8b8192
gitDecoration.modifiedResourceForeground #c1ff74
gitDecoration.untrackedResourceForeground #5effaa
input.background #2d1641
input.border #c1ff7444
input.foreground #f9fff0
input.placeholderForeground #8b8192
inputOption.activeBorder #f9fff0
inputValidation.errorBackground #ff82da
inputValidation.errorBorder #ff82da
inputValidation.infoBackground #d793ff
inputValidation.infoBorder #d793ff
inputValidation.warningBackground #ff82da44
inputValidation.warningBorder #ff82da44
list.activeSelectionBackground #38234b
list.activeSelectionForeground #f9fff0
list.errorForeground #ff82da
list.focusBackground #483559
list.focusForeground #f9fff0
list.highlightForeground #f9fff0
list.hoverBackground #2d1641
list.hoverForeground #f9fff0
list.inactiveSelectionBackground #38234b
list.inactiveSelectionForeground #f9fff0
list.invalidItemForeground #ff82da
list.warningForeground #ff82da
merge.currentHeaderBackground #d793ff
merge.incomingHeaderBackground #d793ff
panel.background #1c0333
panel.border #38234b
panelTitle.activeBorder #c1ff74
panelTitle.activeForeground #f9fff0
panelTitle.inactiveForeground #8b8192
peekView.border #d793ff
peekViewEditor.matchHighlightBackground #5effaa44
peekViewResult.fileForeground #f9fff0
peekViewResult.lineForeground #f9fff0
peekViewResult.matchHighlightBackground #5effaa44
peekViewResult.selectionForeground #f9fff0
peekViewTitle.background #1c0333
peekViewTitleLabel.foreground #f9fff0
pickerGroup.foreground #d793ff
progressBar.background #d793ff
scrollbarSlider.activeBackground #38234b
scrollbarSlider.background #483559
scrollbarSlider.hoverBackground #38234b
settings.checkboxBackground #38234b
settings.checkboxBorder #00000000
settings.checkboxForeground #f9fff0
settings.dropdownBackground #38234b
settings.dropdownBorder #00000000
settings.inactiveSelectedItemBorder #c1ff74
settings.modifiedItemForeground #c1ff74
settings.numberInputBackground #38234b
settings.numberInputBorder #00000000
settings.textInputBackground #38234b
settings.textInputBorder #00000000
sideBar.background #250d3a
sideBar.border #00000000
sideBar.foreground #f9fff0
sideBarSectionHeader.background #1c0333
sideBarSectionHeader.foreground #8b8192
sideBarTitle.foreground #f9fff0
statusBar.background #1c0333
statusBar.border #1c0333
statusBar.debuggingBackground #ff82da44
statusBar.foreground #f9fff088
statusBar.noFolderBackground #1c0333
tab.activeBackground #38234b
tab.activeBorder #c1ff74
tab.activeForeground #f9fff0
tab.border #1c0333
tab.inactiveBackground #2d1641
tab.inactiveForeground #8b8192
tab.unfocusedActiveBorder #1c0333
terminal.ansiBlack #b7b3b7
terminal.ansiBlue #5effaa
terminal.ansiBrightBlack #b7b3b7
terminal.ansiBrightBlue #d793ff
terminal.ansiBrightCyan #d793ff
terminal.ansiBrightGreen #5effaa
terminal.ansiBrightMagenta #c1ff74
terminal.ansiBrightRed #ff82da
terminal.ansiBrightWhite #f9fff0
terminal.ansiBrightYellow #e3ffc0
terminal.ansiCyan #d793ff
terminal.ansiGreen #5effaa
terminal.ansiMagenta #a386ff
terminal.ansiRed #ff82da
terminal.ansiWhite #f9fff0
terminal.ansiYellow #e3ffc0
textLink.activeForeground #5effaa
textLink.foreground #5effaa
titleBar.activeBackground #1c0333
titleBar.activeForeground #8b8192
titleBar.inactiveForeground #8b8192 #e3ffc0
string.template meta.template.expression, string.template.js #a386ff —
constant.language.boolean #5effaa —
support.constant.math #e3ffc0 —
constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #5effaa —
constant.character, constant.other #e3ffc0 —
support.constant, keyword.other.special-method, keyword.other.new #5effaa —
support.constant.json #e3ffc0 —
constant.character.escape #5effaa —
constant.numeric, constant.character.numeric #e3ffc0 —
punctuation.accessor, keyword #b7b3b7 —
keyword.other.unit #c1ff74 —
constant.language.null #5effaa —
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js #a386ff —
entity.name.class, meta.class entity.name.type.class #e3ffc0 —
entity.other.inherited-class #d793ff —
entity.name.function #e3ffc0 —
variable.parameter #d793ff —
punctuation.definition.tag, meta.tag #f9fff0 —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #f9fff0 —
variable.other.jsdoc, variable.other.phpdoc #d793ff —
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html #c1ff74 —
meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tag — bold
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag #d793ff —
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag #5effaa —
punctuation.definition.tag.html #5effaa —
entity.other.attribute-name #e3ffc0 —
meta.attribute string.quoted #a386ff —
entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name #c1ff74 —
entity.name.tag.custom #e3ffc0 —
constant.character.entity.named #a386ff —
meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag #c1ff7499 italic
support.constant.meta.property-value #5effaa —
support.type, support.class #e3ffc0 —
support.variable.dom #e3ffc0 —
keyword.operator.relational #c1ff74 —
keyword.operator.assignment #c1ff74 —
meta.delimiter.period #c1ff74 —
variable.parameter.function #5effaa —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #d793ff —
meta.property-list entity.name.tag.reference #a386ff —
constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css #5effaa —
constant.other.color #c1ff74 —
entity.other.attribute-name.id #d793ff —
meta.property-name #d793ff —
punctuation.definition.parameters #f9fff0 —
keyword.control.operator #5effaa —
keyword.operator.logical #c1ff74 —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #a386ff —
variable.language #a386ff —
variable.other.property #c1ff74 —
variable.other.object.property #f9fff0 —
entity.name.function #e3ffc0 —
keyword.operator.comparison #c1ff74 —
invalid, invalid.deprecated #ff82da —
invalid.unimplemented #ff82da —
support.variable.property #5effaa —
support.variable.property.dom.js #5effaa —
variable.function #5effaa —
variable.interpolation #a386ff —
meta.function-call #e3ffc0 —
punctuation.section.embedded #a386ff —
variable.assignment.coffee #5effaa —
variable.parameter.function.coffee #f9fff0 —
variable.assignment.coffee #5effaa —
variable.other.readwrite.cs #f9fff0 —
entity.name.type.class.cs, storage.type.cs #e3ffc0 —
entity.name.type.namespace.cs #c1ff74 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #a386ff —
keyword.control.at-rule, keyword.control.at-rule punctuation.definition #5effaa bold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.css #5effaa bold
source.css keyword.other.unit, source.css constant.numeric #c1ff74 —
meta.attribute-selector.css entity.other.attribute-name.attribute #5effaa —
support.type.property-name.css #f9fff0 —
meta.property-value.scss, meta.property-value.scss support.type.property-name.css #e3ffc0 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #e3ffc0 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #5effaa —
entity.name.tag.scss, entity.name.tag.sass #a386ff —
keyword.other.unit.scss, keyword.other.unit.sass #c1ff74 —
support.function.misc.scss, support.function.misc.sass #d793ff —
meta.directive.vue entity.other.attribute-name #c1ff74 —
source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string #a386ff —
meta.directive.vue string.quoted.single.js #5effaa —
source.vue meta.tag string.quoted #f9fff0 —
source.vue entity.name.tag.template.html — bold
source.vue entity.name.tag.script.html — bold
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #e3ffc0 —
source.elixir entity.name.function #e3ffc0 —
source.elixir punctuation.definition.string #d793ff —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #e3ffc0 —
source.elixir .punctuation.binary.elixir #c1ff74 —
source.go meta.function-call.go #e3ffc0 —
meta.class entity.name.type.class.js #e3ffc0 —
meta.method.declaration storage.type.js #e3ffc0
meta.js punctuation.definition.js #f9fff0 —
variable.other.meta.import.js, meta.import.js variable.other #c1ff74 —
source.js keyword.control #5effaa —
support.type.object.module.js #e3ffc099 —
source.js keyword.control.conditional #5effaa —
constant.numeric.hex.js #5effaa —
variable.parameter.function.js #d793ff —
variable.other.readwrite.js #f9fff0 —
string.quoted.double.js meta.object-literal.key #c1ff74 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #f9fff0 —
meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag #f9fff0 —
variable.js, variable.other.js #f9fff0 —
entity.name.type.js, entity.name.type.module.js #e3ffc0 —
meta.object-literal.key.js string.quoted, meta.object-literal.key.js #c1ff74 —
support.type.property-name.json #a386ff —
string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json #d793ff —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #5effaa —
variable.other.ruby #f9fff0 —
constant.language.symbol.hashkey.ruby #5effaa —
entity.name.tag.less #a386ff —
meta.attribute-selector.less entity.other.attribute-name.attribute #5effaa —
markup.heading.markdown #e3ffc0 —
markup.italic.markdown #a386ff italic
markup.bold.markdown #f9fff0 bold
markup.quote.markdown #d793ff italic
markup.inline.raw.markdown #d793ff —
markup.underline.link.markdown, markup.underline.link.image.markdown #d793ff —
string.other.link.title.markdown, string.other.link.description.markdown #f9fff0 —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #e3ffc0 —
punctuation.definition.metadata.markdown #a386ff —
beginning.punctuation.definition.list.markdown #c1ff74 —
support.class.php #e3ffc0 —
meta.function-call.php punctuation #f9fff0 —
variable.other.global.php #e3ffc0 —
variable.other.global.php punctuation.definition.variable #e3ffc0 —
constant.language.python #5effaa —
variable.parameter.function.python, meta.function-call.arguments.python #d793ff —
punctuation.python #f9fff0 —
entity.name.function.decorator.python #e3ffc0 —
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts #f9fff0 —
entity.name.type.ts, entity.name.type.tsx #e3ffc0 —
support.class.node.ts, support.class.node.tsx #e3ffc0 —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #f9fff0 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block #f9fff0 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #e3ffc0 —
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx #e3ffc0 —
entity.name.tag.yaml #5effaa —
comment.block.javadoc keyword.other.documentation #c1ff7490 —
comment.block.javadoc entity.name.type.class #e3ffc090 —
comment.block.javadoc variable.parameter #d793ff90 —
punctuation.separator #b7b3b7 —
string.quoted.double.java #e3ffc0 —
storage.type.generic.java #5effaa —
variable.other.object.java #f9fff0 —
meta.method-call.java entity.name.function.java #d793ff —
storage.modifier.import.java, meta.import.java storage.modifier.java #c1ff7499 —
keyword.other.import.java #d793ff99 —
meta.import.java punctuation #f9fff099 —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation —
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, comment — italic
token.error-token #ff82da —
token.debug-token #d793ff —
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*
Photophore Theme | 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 } !` ;
}