Skip to main content
Home Theme VS Code Theme Burton A nocturnal VSCode color theme inspired by Tim Burton's imaginative movie worlds
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 #0f0f25 activityBar.foreground #9fee42 activityBar.inactiveForeground #838383 activityBarBadge.background #fafafa activityBarBadge.foreground #151920 badge.background #cdcdcd tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #676F7D italic punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts #C678DD — string.template.js #E5C07B — meta.template.expression.js #ABB2BF —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Theme Burton — theme-burton
badge.foreground
#151920
breadcrumb.activeSelectionForeground #9fee42
breadcrumb.background #0f0f25
breadcrumb.focusForeground #9fee42
breadcrumb.foreground #838383
breadcrumbPicker.background #151920
button.background #ae66b618
button.foreground #cdcdcd
button.hoverBackground #ae66b618
checkbox.border #3b4048
debugToolBar.background #151920
diffEditor.insertedTextBackground #00809b33
dropdown.background #0f0f25
dropdown.border #181a1f
editor.background #0f0f25
editor.findMatchHighlightBackground #314365
editor.foreground #cdcdcd
editor.lineHighlightBackground #ae66b618
editor.selectionBackground #308db86c
editorBracketMatch.border #9fee42
editorCursor.foreground #f8f8f0
editorError.foreground #c24038
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #0f0f25
editorGroupHeader.tabsBorder #220525
editorHoverWidget.background #0f0f25
editorHoverWidget.border #181a1f
editorIndentGuide.background #3b4048
editorLineNumber.activeForeground #9fee42
editorLineNumber.foreground #495162
editorLink.activeForeground #e6c62f
editorRuler.foreground #484848
editorSuggestWidget.background #151920
editorSuggestWidget.border #9fee42
editorSuggestWidget.selectedBackground #2c313a
editorWhitespace.foreground #484a50
editorWidget.background #0f0f25
extensionButton.prominentBackground #ae66b618
gitDecoration.addedResourceForeground #39dcdc
gitDecoration.modifiedResourceForeground #29e7ae
gitDecoration.untrackedResourceForeground #cdcdcd8e
input.background #1e1c2b
input.border #05090f
input.foreground #9fee42
inputOption.activeBorder #ae66b6
list.activeSelectionBackground #ae66b618
list.activeSelectionForeground #d7dae0
list.dropBackground #ae66b618
list.errorForeground #e65480
list.focusBackground #ae66b618
list.highlightForeground #9fee42
list.hoverBackground #0f0f25
list.inactiveSelectionBackground #0f0f25
list.inactiveSelectionForeground #cdcdcd
mergeEditor.change.word.background #151920
mergeEditor.conflict.handled.minimapOverViewRuler #9fee42
mergeEditor.conflict.unhandled.minimapOverViewRuler #ae66b6
notifications.background #151920
peekView.border #9fee42
peekViewEditor.background #0f0f25
peekViewEditor.matchHighlightBackground #1c212b
peekViewResult.background #151529
peekViewTitle.background #1c212b
scrollbarSlider.activeBackground #9fee42
scrollbarSlider.background #4e566680
scrollbarSlider.hoverBackground #5a637580
sideBar.background #151529
sideBar.foreground #cdcdcd
sideBarSectionHeader.background #0f0f25
sideBarSectionHeader.border #27279c
sideBarSectionHeader.foreground #cdcdcd
sideBarTitle.foreground #9fee42
statusBar.background #0f0f25
statusBar.debuggingBackground #2e2e8d
statusBar.foreground #9fee42
statusBar.noFolderBackground #2e2e8d
statusBarItem.hoverBackground #2e2e8d
tab.activeBackground #0f0f25
tab.activeBorder #9fee42
tab.activeForeground #9fee42
tab.activeModifiedBorder #9fee42
tab.border #0f0f25
tab.hoverBackground #0f0f25
tab.inactiveBackground #151529
terminal.background #0f0f25
titleBar.activeBackground #0f0f25
titleBar.activeForeground #cdcdcd
titleBar.inactiveBackground #0f0f25
titleBar.inactiveForeground #cdcdcd
tree.indentGuidesStroke #cdcdcd60 string.embedded.begin, string.embedded.end
constant.language #56B6C2 —
constant.character, constant.other #56B6C2 —
variable.language #E06C75 —
variable.readwrite, variable.readwrite.other.block #61AFEF —
keyword, keyword.operator.logical, keyword.operator.constructor #E06C75 —
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #61AFEF —
variable.other.object #61AFEF —
variable.other.property, variable.other.block #ABB2BF —
entity.other.inherited-class #98C379 —
entity.name.function, support.function #98C379 —
variable.parameter #D19A66 italic
entity.name.function-call #ABB2BF —
function.support.builtin, function.support.core #98C379 —
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx #E06C75 —
entity.name.tag.class, entity.name.tag.id #56B6C2 —
entity.other.attribute-name #98C379 —
support.type, support.variable #56B6C2 —
support.dictionary.json #56B6C2 —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #ABB2BF —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #98C379 —
variable.css, variable.scss, variable.less, variable.sass #56B6C2 —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #E5C07B —
unit.css, unit.scss, unit.less, unit.sass #C678DD —
function.css, function.scss, function.less, function.sass #56B6C2 —
invalid.deprecated #F8F8F0 —
structure.dictionary.property-name.json #56B6C2 —
string.detected-link #61AFEF —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56B6C2A0 —
entity.name.filename.find-in-files #E5C07B —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown #696969 none
markup.underline.link.markdown #61AFEF —
markup.bold.markdown — bold
punctuation.definition.bold.markdown #696969 none
markup.heading.markdown #E06C75 bold
punctuation.definition.heading.markdown #696969 none
markup.quote.markdown #98C379 —
meta.separator.markdown #C678DD bold
markup.raw.inline.markdown, markup.raw.block.markdown #56B6C2 —
punctuation.definition.list_item.markdown #FFFFFF bold
keyword - keyword.operator #E6C62F —
entity.name.class #DC396A —
entity.name.function #39DCDC —
entity.name.variable #CDCDCD —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #E6C62F —
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, meta.tag.js, meta.embedded.expression.js, meta.block.js, meta.arrow.js, meta.var.expr.js, source.js, punctuation.definition.tag.begin.ts, punctuation.definition.tag.end.ts, meta.tag.ts, meta.embedded.expression.ts, meta.tag.ts, meta.tag.tsx, meta.block.ts, meta.block.tsx, meta.arrow.ts, meta.arrow.tsx, meta.var.expr.ts, meta.var.expr.tsx, source.ts, source.tsx #2FACE6 —
meta.jsx.children.ts, meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children.ts, meta.jsx.children.tsx #CDCDCD —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #B759C2 —
variable.other.readwrite.alias.tsx, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts #2FACE6 —
meta.block.ts, meta.block.tsx, meta.block.js, meta.block.jsx #C4C4C4 —
variable.other.readwrite.ts, meta.object.member.ts, variable.other.readwrite.tsx, meta.object.member.tsx, variable.other.readwrite.js, meta.object.member.js, variable.other.readwrite.jsx, meta.object.member.jsx #30C5C5 —
support.class.component.tsx, entity.name.tag.tsx, meta.embedded.expression.tsx, meta.block.tsx, meta.var.expr.tsx, source.tsx, support.class.component.jsx, entity.name.tag.jsx, meta.embedded.expression.jsx, meta.block.jsx, meta.var.expr.jsx, source.jsx, support.class.component.js, support.class.component.ts, entity.name.tag.js, entity.name.tag.ts, meta.embedded.expression.js, meta.embedded.expression.ts, meta.block.js, meta.block.ts, meta.var.expr.js, meta.var.expr.ts, source.js, source.ts #2FACE6 —
variable.object.property.tsx, meta.definition.property.tsx, meta.field.declaration.tsx, meta.interface.tsx, variable.other.constant.tsx, meta.definition.variable.tsx, meta.var-single-variable.expr.tsx, meta.var.expr.tsx, meta.block.tsx, meta.arrow.tsx, meta.var.expr.tsx, source.tsx, variable.object.property.jsx, variable.object.property.js, variable.object.property.ts, meta.definition.property.jsx, meta.definition.property.js, meta.definition.property.ts, meta.field.declaration.jsx, meta.field.declaration.js, meta.field.declaration.ts, meta.interface.jsx, meta.interface.js, meta.interface.ts, variable.other.constant.jsx, variable.other.constant.js, variable.other.constant.ts, meta.definition.variable.jsx, meta.definition.variable.js, meta.definition.variable.ts, meta.var-single-variable.expr.jsx, meta.var-single-variable.expr.js, meta.var-single-variable.expr.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, meta.block.jsx, meta.block.js, meta.block.ts, meta.arrow.jsx, meta.arrow.js, meta.arrow.ts, meta.var.expr.jsx, meta.var.expr.js, meta.var.expr.ts, source.jsx, source.js, source.ts #2FACE6 —
variable.parameter.ts, meta.parameter.object-binding-pattern.ts, meta.parameters.ts, variable.parameter.tsx, meta.parameter.object-binding-pattern.tsx, meta.parameters.tsx, variable.parameter.js, meta.parameter.object-binding-pattern.js, meta.parameters.js, variable.parameter.jsx, meta.parameter.object-binding-pattern.jsx, meta.parameters.jsx #AE66B6 —
entity.other.inherited-class.ts, meta.interface.ts, entity.other.inherited-class.tsx, meta.interface.tsx, entity.other.inherited-class.js, meta.interface.js, entity.other.inherited-class.jsx, meta.interface.jsx, entity.other.inherited-class.jsx, meta.interface.jsx #39DCDC —
entity.other.attribute-name #B759C2 —
entity.name.variable.parameter, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #DC8D39 —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #AE66B6 —
keyword.operator, keyword.operator.logical.ts, meta.embedded.expression.ts, keyword.operator.logical.tsx, meta.embedded.expression.tsx, keyword.operator.logical.js, meta.embedded.expression.js, keyword.operator.logical.jsx, meta.embedded.expression.jsx #B9355D —
support.type.property-name.css, meta.property-name.css, meta.property-list.css, source.stylable #2FACE6 —
token.error-token #F44747 —
token.debug-token #B267E6 —
punctuation.definition.comment #7F6E99 —
meta.embedded.assembly #BCBFB9 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #E8CC5A —
variable.other.readwrite.ts, meta.object.member.ts, variable.other.readwrite.tsx, meta.object.member.tsx, variable.other.readwrite.js, meta.object.member.js, variable.other.readwrite.jsx, meta.object.member.jsx #91B8FA —
meta.embedded.assembly #BCBFB9 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #E8CC5A —
variable.other.readwrite.ts, meta.object.member.ts, variable.other.readwrite.tsx, meta.object.member.tsx, variable.other.readwrite.js, meta.object.member.js, variable.other.readwrite.jsx, meta.object.member.jsx #91B8FA —
variable.parameter.ts, meta.parameter.object-binding-pattern.ts, meta.parameters.ts, variable.parameter.tsx, meta.parameter.object-binding-pattern.tsx, meta.parameters.tsx, variable.parameter.js, meta.parameter.object-binding-pattern.js, meta.parameters.js, variable.parameter.jsx, meta.parameter.object-binding-pattern.jsx, meta.parameters.jsx #BB8AFF —
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*
Theme Burton | 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 } !` ;
}