Skip to main content
Comfy | 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 #1E2233 activityBar.border #23283d60 activityBar.foreground #DADADA activityBarBadge.background #859BEE activityBarBadge.foreground #4b5077 badge.background #23283d30 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #EACA8B — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #C9AD77 — constant.other.php #EACA8B —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.foreground
#4F5D92
breadcrumb.activeSelectionForeground #4F5D92
breadcrumb.background #23283d
breadcrumb.focusForeground #DADADA
breadcrumb.foreground #6E84D1
breadcrumbPicker.background #23283d
button.background #7289da90
contrastBorder #7289da75
debugToolBar.background #23283d
diffEditor.insertedTextBackground #a2bd8c3b
diffEditor.removedTextBackground #bd616a3b
dropdown.background #23283d
dropdown.border #E4E4E410
editor.background #23283d
editor.findMatchBackground #7288d875
editor.findMatchBorder #4F5D92
editor.findMatchHighlightBackground #4F5D9250
editor.findMatchHighlightBorder #E4E4E430
editor.foreground #DADADA
editor.lineHighlightBackground #23283d50
editor.selectionBackground #7288D830
editor.selectionHighlightBackground #4F5D926b
editor.selectionHighlightBorder #7288D8f0
editorBracketMatch.background #23283d
editorBracketMatch.border #EACA8B7f
editorCursor.foreground #EACA8B
editorError.foreground #CE867070
editorGroup.border #23283d30
editorGroupHeader.tabsBackground #23283d
editorGutter.addedBackground #C9AD7760
editorGutter.deletedBackground #BD616A60
editorGutter.modifiedBackground #CE8670
editorHoverWidget.background #23283d
editorHoverWidget.border #E4E4E410
editorIndentGuide.activeBackground #515978
editorIndentGuide.background #51597870
editorInfo.foreground #7288D870
editorLineNumber.activeForeground #7288D8
editorLineNumber.foreground #4F5D92c0
editorLink.activeForeground #DADADA
editorMarkerNavigation.background #DADADA05
editorOverviewRuler.border #23283d
editorOverviewRuler.errorForeground #CE867040
editorOverviewRuler.findMatchForeground #4F5D92
editorOverviewRuler.infoForeground #7288D840
editorOverviewRuler.warningForeground #EACA8B70
editorRuler.foreground #515978
editorSuggestWidget.background #23283d
editorSuggestWidget.border #E4E4E410
editorSuggestWidget.foreground #DADADA
editorSuggestWidget.highlightForeground #EACA8B
editorSuggestWidget.selectedBackground #16182420
editorWarning.foreground #C9AD77
editorWhitespace.foreground #DADADA40
editorWidget.background #23283d
editorWidget.border #EACA8B
editorWidget.resizeBorder #4F5D92
extensionButton.prominentBackground #C9AD7790
extensionButton.prominentHoverBackground #CE8670
focusBorder #E4E4E400
gitDecoration.conflictingResourceForeground #EACA8B
gitDecoration.deletedResourceForeground #BD616A
gitDecoration.ignoredResourceForeground #4F5D92
gitDecoration.modifiedResourceForeground #CE8670
gitDecoration.untrackedResourceForeground #A2BD8C
input.background #3A4056
input.border #E4E4E410
input.foreground #DADADA
input.placeholderForeground #DADADA60
inputOption.activeBackground #DADADA30
inputOption.activeBorder #DADADA30
inputValidation.errorBorder #CE867050
inputValidation.infoBorder #7288D850
inputValidation.warningBorder #EACA8B50
list.activeSelectionBackground #343c56
list.activeSelectionForeground #f0f0f0
list.focusBackground #3A4056
list.focusForeground #dadada
list.highlightForeground #dadada
list.hoverBackground #3A4056
list.hoverForeground #E4E4E4
list.inactiveSelectionBackground #151b3150
list.inactiveSelectionForeground #4F5D92
list.warningForeground #EACA8B
listFilterWidget.background #23283d30
listFilterWidget.noMatchesOutline #23283d30
listFilterWidget.outline #23283d30
menu.background #23283df8
menu.border #4F5D9250
menu.foreground #DADADA
menu.selectionBackground #3A4056
menu.selectionBorder #23283d30
menu.selectionForeground #DADADA
menu.separatorBackground #DADADA
menubar.selectionBackground #3A4056
menubar.selectionBorder #4F5D9250
menubar.selectionForeground #DADADA
minimap.background #23283d
minimapGutter.addedBackground #CE8670
minimapGutter.deletedBackground #BD616A
minimapGutter.modifiedBackground #C9AD77
minimapSlider.activeBackground #C9AD77b0
minimapSlider.background #C9AD7780
minimapSlider.hoverBackground #C9AD77a0
notificationLink.foreground #4F5D92
notifications.background #23283d
notifications.foreground #DADADA
panel.background #23283d
panel.border #23283d60
panelTitle.activeBorder #4F5D92
panelTitle.activeForeground #E4E4E4
panelTitle.inactiveForeground #DADADA
peekView.border #23283d30
peekViewEditor.background #DADADA05
peekViewEditor.matchHighlightBackground #4F5D9250
peekViewEditorGutter.background #DADADA05
peekViewResult.background #DADADA05
peekViewResult.matchHighlightBackground #4F5D9250
peekViewResult.selectionBackground #4F5D9270
peekViewTitle.background #DADADA05
peekViewTitleDescription.foreground #DADADA60
pickerGroup.foreground #4F5D92
progressBar.background #4F5D92
scrollbar.shadow #23283d00
scrollbarSlider.activeBackground #4F5D92cc
scrollbarSlider.background #4F5D92bb
scrollbarSlider.hoverBackground #4F5D92ee
selection.background #4F5D92
settings.checkboxBackground #23283d
settings.checkboxForeground #DADADA
settings.dropdownBackground #23283d
settings.dropdownForeground #DADADA
settings.headerForeground #4F5D92
settings.modifiedItemIndicator #CE8670
settings.numberInputBackground #23283d
settings.numberInputForeground #DADADA
settings.textInputBackground #23283d
settings.textInputForeground #DADADA
sideBar.background #23283d
sideBar.border #191F2E50
sideBar.foreground #7288D8
sideBarSectionHeader.background #23283d
sideBarSectionHeader.border #23283d60
sideBarSectionHeader.foreground #DADADA
sideBarTitle.foreground #E2E2E2
statusBar.background #1E2233
statusBar.border #10132060
statusBar.debuggingBackground #b89e6f
statusBar.debuggingForeground #ffffff
statusBar.foreground #DADADA
statusBar.noFolderBackground #23283d
statusBarItem.hoverBackground #4F5D9220
statusBarItem.remoteBackground #4F5D92
statusBarItem.remoteForeground #23283d
tab.activeBackground #4F5D9250
tab.activeBorder #4F5D92
tab.activeForeground #E4E4E4
tab.activeModifiedBorder #CE8670
tab.border #23283d
tab.inactiveBackground #4F5D9220
tab.inactiveForeground #DADADAaf
tab.unfocusedActiveBackground #4F5D9240
tab.unfocusedActiveBorder #4F5D92
tab.unfocusedActiveForeground #DADADA
tab.unfocusedInactiveBackground #4F5D9210
tab.unfocusedInactiveForeground #DADADA7f
terminal.ansiBlack #23283d
terminal.ansiBlue #728ADC
terminal.ansiBrightBlack #4F5D92
terminal.ansiBrightBlue #728ADC
terminal.ansiBrightCyan #4D5D96
terminal.ansiBrightGreen #A3BE8C
terminal.ansiBrightMagenta #B48EAD
terminal.ansiBrightRed #879DF0
terminal.ansiBrightWhite #F0F0F0
terminal.ansiBrightYellow #EBCB8B
terminal.ansiCyan #6E86D5
terminal.ansiGreen #A3BE8C
terminal.ansiMagenta #B48EAD
terminal.ansiRed #6E86D5
terminal.ansiWhite #E4E4E4
terminal.ansiYellow #EBCB8B
terminalCursor.background #23283d
terminalCursor.foreground #EACA8B
textLink.activeForeground #DADADA
textLink.foreground #4F5D92
titleBar.activeBackground #23283d
titleBar.activeForeground #DADADA
titleBar.border #23283d60
titleBar.inactiveBackground #23283d
titleBar.inactiveForeground #4F5D92
tree.indentGuidesStroke #515978
widget.shadow #23283d30 invalid, invalid.illegal #CE8670 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #6E84D1 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #b69d6b —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment.block.css #8f8f8f italic
text.html.derivative #DADADA —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #DADADA —
entity.name.tag.html #4F5D92 bold
variable.parameter.js, variable.parameter.keyframe-list.css #EACA8B —
storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js #6E84D1
variable.other.object.js, entity.name.function, variable.other.constant.js, variable.other.property.js #dadada —
string, string.quoted.double.html, variable.other.object.property.js, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #CE8670 —
string.quoted.double.json #EACA8B —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #859BEE —
support.other.variable, string.other.link, markup.table #DADADA —
constant.numeric, constant.numeric.dec.python, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other #d08770 —
constant.language.python #ebcb8b —
punctuation.separator.key-value.html #B69D6B —
variable.parameter.function.language.special, variable.parameter #CE8670 —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #A2BD8C
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #EACA8B —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #6E84D1 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, keyword.control.import.python #ebcb8bd0 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #7288D8 italic
entity.other.attribute-name, support.function #EACA8B —
entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, keyword.control.flow.python, support.constant, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #EACA8B —
entity.name.tag.wildcard.css #da97cd bold
entity.other.attribute-name.class #EACA8B —
source.scss keyword.control #EACA8B —
constant.character.escape #859BEE —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #DADADA italic
support.type.property-name.json #CE8670 —
text.html.markdown, punctuation.definition.list_item.markdown #DADADA —
text.html.markdown markup.inline.raw.markdown #EACA8B —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #4F5D9250 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #6E84D1 bold
markup.underline #7288D8 underline
markup.quote punctuation.definition.blockquote.markdown #4F5D9250 —
string.other.link.description.title.markdown #EACA8B —
constant.other.reference.link.markdown #EACA8B —
punctuation.definition.raw.markdown, punctuation.definition.markdown #859BEE —
variable.language.fenced.markdown #4F5D92 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #859BEE —
meta.function-call.arguments.python #d08770 —
meta.function-call.generic.python #6e85d3b5 —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}