Skip to main content
Homer 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.background #353434 activityBar.border #353434 activityBar.dropBackground #FED90F activityBar.foreground #828080 activityBarBadge.background #FED90F activityBarBadge.foreground #353434 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #969BA7 — string #FED90F — string.quoted #FED90F — support.constant.math #70D1FE — constant.numeric, constant.character.numeric
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
background
#353434
badge.background #353434
badge.foreground #f8f8f8
button.background #f8f8f8
button.foreground #353434
button.hoverBackground #f8f8f8
contrastBorder #353434
debugExceptionWidget.background #353434
debugExceptionWidget.border #969BA7
debugToolBar.background #353434
diffEditor.insertedTextBackground #cef29625
diffEditor.insertedTextBorder #cef29625
diffEditor.removedTextBackground #ff419e25
diffEditor.removedTextBorder #ff419e25
dropdown.background #353434
dropdown.border #4f4d4d
dropdown.foreground #f8f8f8
editor.background #353434
editor.findMatchBackground #49495075
editor.findMatchHighlightBackground #d1b27175
editor.findRangeHighlightBackground #49495075
editor.foreground #f8f8f8
editor.hoverHighlightBackground #494950
editor.inactiveSelectionBackground #3d3d43
editor.lineHighlightBackground #49495075
editor.lineHighlightBorder #49495075
editor.rangeHighlightBackground #49495075
editor.selectionBackground #494950
editor.selectionHighlightBackground #55555d
editor.wordHighlightBackground #969ba775
editor.wordHighlightStrongBackground #49495075
editorCursor.foreground #FED90F
editorError.foreground #FF419E
editorGroupHeader.tabsBackground #353434
editorGroupHeader.tabsBorder #353434
editorGutter.addedBackground #cef296
editorGutter.deletedBackground #FF419E
editorGutter.modifiedBackground #70D1FE
editorHoverWidget.background #353434
editorHoverWidget.border #969BA7
editorIndentGuide.activeBackground #969BA7
editorIndentGuide.background #4f4d4d
editorLineNumber.foreground #969BA7
editorLink.activeForeground #fff1a7
editorMarkerNavigation.background #353434
editorMarkerNavigationError.background #FF419E
editorMarkerNavigationWarning.background #D1B271
editorOverviewRuler.addedForeground #cef296
editorOverviewRuler.commonContentForeground #FED90F
editorOverviewRuler.currentContentForeground #FED90F
editorOverviewRuler.deletedForeground #FF419E
editorOverviewRuler.errorForeground #FF419E
editorOverviewRuler.incomingContentForeground #FED90F
editorOverviewRuler.modifiedForeground #70D1FE
editorOverviewRuler.warningForeground #D1B271
editorRuler.foreground #969BA7
editorWarning.foreground #D1B271
editorWidget.background #353434
errorForeground #FF419E
extensionButton.prominentBackground #f8f8f8
extensionButton.prominentForeground #353434
extensionButton.prominentHoverBackground #f8f8f8
focusBorder #353434
foreground #f8f8f8
gitDecoration.addedResourceForeground #cef296
gitDecoration.deletedResourceForeground #FF419E
gitDecoration.modifiedResourceForeground #70D1FE
gitDecoration.untrackedResourceForeground #cef296
input.border #969BA7
input.foreground #f8f8f8
input.placeholderForeground #f8f8f8
inputOption.activeBorder #f8f8f8
inputValidation.errorBackground #FF419E
inputValidation.errorBorder #FF419E
inputValidation.infoBackground #FED90F
inputValidation.infoBorder #FED90F
inputValidation.warningBackground #D1B271
inputValidation.warningBorder #D1B271
list.activeSelectionBackground #4f4d4d
list.activeSelectionForeground #f8f8f8
list.errorForeground #FF419E
list.focusBackground #686666
list.focusForeground #f8f8f8
list.highlightForeground #f8f8f8
list.hoverBackground #686666
list.hoverForeground #f8f8f8
list.inactiveSelectionForeground #f8f8f8
list.warningForeground #D1B271
merge.currentHeaderBackground #FED90F
merge.incomingHeaderBackground #FED90F
notification.background #353434
notification.buttonForeground #353434
notification.errorBackground #FF419E
notification.errorForeground #353434
notification.foreground #f8f8f8
notification.infoBackground #FED90F
notification.infoForeground #353434
notification.warningBackground #D1B271
notification.warningForeground #353434
panel.background #353434
panel.border #4f4d4d
panelTitle.activeBorder #FED90F
panelTitle.activeForeground #f8f8f8
peekView.border #FED90F
peekViewEditor.matchHighlightBackground #494950
peekViewResult.fileForeground #f8f8f8
peekViewResult.lineForeground #f8f8f8
peekViewResult.matchHighlightBackground #494950
peekViewResult.selectionForeground #f8f8f8
peekViewTitle.background #353434
peekViewTitleLabel.foreground #f8f8f8
pickerGroup.foreground #FED90F
progressBar.background #FED90F
scrollbarSlider.activeBackground #4f4d4d
scrollbarSlider.background #49495075
scrollbarSlider.hoverBackground #4f4d4d
sideBar.background #2f2e2e
sideBar.border #353434
sideBar.foreground #f8f8f8
sideBarSectionHeader.background #4f4d4d
sideBarSectionHeader.foreground #f8f8f8
sideBarTitle.foreground #f8f8f8
statusBar.background #353434
statusBar.border #353434
statusBar.foreground #969BA7
statusBar.noFolderBackground #353434
tab.activeBackground #353434
tab.activeBorder #353434
tab.activeForeground #f8f8f8
tab.border #353434
tab.inactiveBackground #353434
tab.inactiveForeground #969BA7
tab.unfocusedActiveBorder #353434
terminal.ansiBlack #353434
terminal.ansiBlue #70d1fe
terminal.ansiBrightBlack #353434
terminal.ansiBrightBlue #70d1fe
terminal.ansiBrightCyan #d1b271
terminal.ansiBrightGreen #cef296
terminal.ansiBrightMagenta #FF419E
terminal.ansiBrightRed #FF419E
terminal.ansiBrightWhite #f8f8f8
terminal.ansiBrightYellow #FED90F
terminal.ansiCyan #d1b271
terminal.ansiGreen #cef296
terminal.ansiMagenta #FF419E
terminal.ansiRed #FF419E
terminal.ansiWhite #f8f8f8
terminal.ansiYellow #70D1FE
textLink.activeForeground #fff1a7
textLink.foreground #FED90F
textPreformat.foreground #70D1FE
titleBar.activeForeground #f8f8f8 #cef296
constant.language, punctuation.definition.constant, variable.other.constant #f8f8f8 —
constant.character, constant.other #70D1FE —
constant.character.escape #cef296 —
string.regexp, string.regexp keyword.other #FED90F —
meta.function punctuation.separator.comma #f8f8f8 —
punctuation.accessor, keyword #D1B271 —
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js #FF419E —
entity.name.class, meta.class entity.name.type.class #70D1FE —
entity.other.inherited-class #FED90F —
entity.name.function #70D1FE —
variable.parameter #FED90F —
punctuation.definition.tag, meta.tag #f8f8f8 —
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx, meta.tag.html #FF419E —
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag #FF419E —
entity.other.attribute-name #70D1FE —
entity.name.tag.custom #70D1FE —
support.function, support.constant #70D1FE —
support.constant.meta.property-value #cef296 —
support.type, support.class #70D1FE —
support.variable.dom #70D1FE —
invalid.deprecated #f8f8f8 —
keyword.operator.relational #D1B271 —
keyword.operator.assignment #D1B271 —
comment.line.double-slash #969BA7 —
constant.language.null #cef296 —
meta.delimiter.period #D1B271 —
constant.language.boolean #cef296 —
variable.parameter.function #cef296 —
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag #FED90F —
meta.property-list entity.name.tag.reference #FF419E —
constant.other.color.rgb-value punctuation.definition.constant #cef296 —
constant.other.color #D1B271 —
keyword.other.unit #D1B271 —
entity.other.attribute-name.id #70D1FE —
meta.property-name #FED90F —
entity.name.tag.doctype, meta.tag.sgml.doctype #D1B271 —
punctuation.definition.parameters #f8f8f8 —
keyword.control.operator #cef296 —
keyword.operator.logical #D1B271 —
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance #FF419E —
variable.other.property, variable.other.object.property #cef296 —
entity.name.function #70D1FE —
keyword.operator.comparison #D1B271 —
support.constant, keyword.other.special-method, keyword.other.new #cef296 —
invalid.unimplemented #f8f8f8 —
variable.language #FF419E —
support.variable.property #cef296 —
variable.function #70D1FE —
variable.interpolation #FF419E —
meta.function-call #70D1FE —
punctuation.section.embedded #FF419E —
string.template meta.template.expression #FF419E —
variable.assignment.coffee #cef296 —
variable.parameter.function.coffee #f8f8f8 —
variable.assignment.coffee #cef296 —
variable.other.readwrite.cs #f8f8f8 —
entity.name.type.class.cs, storage.type.cs #70D1FE —
entity.name.type.namespace.cs #D1B271 —
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css #FF419E —
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass #FF419E —
keyword.other.unit.css #D1B271 —
meta.attribute-selector.css entity.other.attribute-name.attribute #cef296 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #70D1FE —
source.elixir entity.name.function #70D1FE —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #70D1FE —
source.elixir punctuation.definition.string #FED90F —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #70D1FE —
source.elixir .punctuation.binary.elixir #D1B271 —
source.go meta.function-call.go #70D1FE —
entity.other.attribute-name.id.html #70D1FE —
punctuation.definition.tag.html #cef296 —
meta.tag.sgml.doctype.html #D1B271 —
meta.class entity.name.type.class.js #70D1FE —
meta.method.declaration storage.type.js #70D1FE normal
meta.js punctuation.definition.js #f8f8f8 —
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc #f8f8f8 —
variable.other.jsdoc, variable.other.phpdoc #FED90F —
variable.other.meta.import.js, meta.import.js variable.other #f8f8f8 —
variable.parameter.function.js #FED90F —
variable.other.readwrite.js #f8f8f8 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #f8f8f8 —
meta.jsx.children.js.jsx, meta.jsx.children.js.jsx #FED90F —
punctuation.section.embedded.begin.js.jsx, punctuation.section.embedded.end.js.jsx #f8f8f8 —
variable.js, variable.other.js #f8f8f8 —
entity.name.type.js, entity.name.type.module.js #70D1FE —
support.type.property-name.json #FF419E —
support.constant.json #70D1FE —
meta.structure.dictionary.value.json string.quoted.double #FED90F —
string.quoted.double.json punctuation.definition.string.json #FED90F —
meta.structure.dictionary.json meta.structure.dictionary.value constant.language #cef296 —
variable.other.ruby #f8f8f8 —
constant.language.symbol.hashkey.ruby #cef296 —
entity.name.tag.less #FF419E —
keyword.other.unit.css #D1B271 —
meta.attribute-selector.less entity.other.attribute-name.attribute #cef296 —
markup.heading.markdown #70D1FE —
markup.italic.markdown #D1B271 italic
markup.bold.markdown #70D1FE bold
markup.quote.markdown #FED90F italic
markup.inline.raw.markdown #FED90F —
markup.underline.link.markdown, markup.underline.link.image.markdown #FED90F —
string.other.link.title.markdown, string.other.link.description.markdown #f8f8f8 —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #70D1FE —
punctuation.definition.metadata.markdown #FF419E —
beginning.punctuation.definition.list.markdown #70D1FE —
support.class.php #70D1FE —
meta.function-call.php punctuation #f8f8f8 —
variable.other.global.php #70D1FE —
variable.other.global.php punctuation.definition.variable #70D1FE —
constant.language.python #cef296 —
variable.parameter.function.python, meta.function-call.arguments.python #FED90F —
punctuation.python #f8f8f8 —
entity.name.function.decorator.python #70D1FE —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #70D1FE —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #cef296 —
entity.name.tag.scss, entity.name.tag.sass #FF419E —
keyword.other.unit.scss, keyword.other.unit.sass #D1B271 —
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 #f8f8f8 —
entity.name.type.ts, entity.name.type.tsx #70D1FE —
support.class.node.ts, support.class.node.tsx #70D1FE —
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type #f8f8f8 —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block #f8f8f8 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #70D1FE —
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx #f8f8f8 —
entity.name.tag.yaml #cef296 —
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, 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.operator.or.regexp, punctuation.definintion.string, punctuation — normal
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*
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 } !` ;
}