Skip to main content
Home Theme VS Code almost monochromatic A (almost) monochromatic color theme with redish pink details.
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.activeBackground #1e1e1e activityBar.background #1e1e1e activityBar.foreground #d40046 activityBar.inactiveForeground #ffffff66 activityBarBadge.background #d40046 activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison #ff636a — variable.other.generic-type.haskell #ff636a — storage.type.haskell #ffffff — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
almost monochromatic — almost monochromatic
badge.background #d40046
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1e1e1e
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #d40046
button.foreground #ffffff
button.hoverBackground #d40046cf
button.secondaryBackground #363636
button.secondaryForeground #ffffff
button.secondaryHoverBackground #363636b1
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #363636
debugExceptionWidget.border #00000000
debugToolBar.background #363636
debugToolBar.border #00000000
diffEditor.border #3c3c3c
diffEditor.insertedTextBackground #5edb753a
diffEditor.removedTextBackground #c739393c
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1e1e1e
editor.findMatchBackground #ff639736
editor.findMatchBorder #ff639736
editor.findMatchHighlightBackground #d4004658
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3c3c3c70
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #ff639736
editor.foreground #ffffff
editor.hoverHighlightBackground #ff639736
editor.inactiveSelectionBackground #3c3c3c
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #262626
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #ff639736
editor.selectionHighlightBackground #3c3c3c
editor.selectionHighlightBorder #3c3c3c
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #ff639736
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #d40046
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #c73939
editorGroup.border #3c3c3c
editorGroup.emptyBackground #1e1e1e
editorGroupHeader.tabsBackground #262626
editorGutter.addedBackground #5edb89
editorGutter.background #1e1e1e
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #c73939
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #d40046
editorHoverWidget.background #262626
editorHoverWidget.border #3c3c3c
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #c6c6c6
editorLineNumber.foreground #858585
editorLink.activeForeground #d40046
editorMarkerNavigation.background #262626
editorMarkerNavigationError.background #c73939
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #ffb300
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #252526
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #d4d4d4
editorSuggestWidget.highlightForeground #0097fb
editorSuggestWidget.selectedBackground #062f4a
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #ffb300
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #d40046
focusBorder #d40046
foreground #cccccc
gitDecoration.addedResourceForeground #5edb89
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c73939
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e0b97e
gitDecoration.stageDeletedResourceForeground #c73939
gitDecoration.stageModifiedResourceForeground #e0b97e
gitDecoration.submoduleResourceForeground #8dc8ff
gitDecoration.untrackedResourceForeground #5edb89
icon.foreground #cccccc
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #d4004666
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #d40046
list.activeSelectionForeground #ffffff
list.dropBackground #3636368b
list.focusBackground #363636
list.focusForeground #ffffff
list.highlightForeground #d40046
list.hoverBackground #3636368b
list.hoverForeground #cccccc
list.inactiveSelectionBackground #363636
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #d4004680
listFilterWidget.noMatchesOutline #ff0000
listFilterWidget.outline #00000000
menu.background #262626
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #363636
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #282828
merge.commonHeaderBackground #383838
merge.currentContentBackground #4d324a
merge.currentHeaderBackground #663561
merge.incomingContentBackground #32465e
merge.incomingHeaderBackground #48759d
minimap.background #1e1e1e
minimap.errorHighlight #c73939
minimap.findMatchHighlight #ff639736
minimap.selectionHighlight #ff639736
minimap.warningHighlight #ffb300
minimapGutter.addedBackground #5edb89
minimapGutter.deletedBackground #c73939
minimapGutter.modifiedBackground #d40046
notificationCenter.border #3c3c3c
notificationCenterHeader.background #363636
notificationCenterHeader.foreground #cccccc
notifications.background #262626
notifications.border #3c3c3c
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #3c3c3c
panel.background #1e1e1e
panel.border #3c3c3c
panelSection.border #80808059
panelTitle.activeBorder #d40046
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #d40046
peekViewEditor.background #410015
peekViewEditor.matchHighlightBackground #d400467a
peekViewEditor.matchHighlightBorder #d40046
peekViewEditorGutter.background #410015
peekViewResult.background #262626
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ff639736
peekViewResult.selectionBackground #d4004670
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #00000000
pickerGroup.foreground #d40046
progressBar.background #d40046
scrollbar.shadow #d4004600
scrollbarSlider.activeBackground #d40046cf
scrollbarSlider.background #2d2d2d
scrollbarSlider.hoverBackground #363636
selection.background #d40046
settings.focusedRowBackground #ffffff07
settings.headerForeground #cccccc
sideBar.background #262626
sideBar.border #ff000000
sideBar.dropBackground #3636368b
sideBar.foreground #cccccc
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #d40046
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #bbbbbb
statusBar.background #2d2d2d
statusBar.border #ff000000
statusBar.debuggingBackground #d40046
statusBar.debuggingBorder #ff000000
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #2d2d2d
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #d40046
statusBarItem.remoteForeground #ffffff
tab.activeBackground #1e1e1e
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #262626
tab.inactiveBackground #2d2d2d
tab.inactiveForeground #ffffff80
terminal.ansiBlack #000000
terminal.ansiBlue #2472c8
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #3b8eea
terminal.ansiBrightCyan #29b8db
terminal.ansiBrightGreen #23d18b
terminal.ansiBrightMagenta #d670d6
terminal.ansiBrightRed #f14c4c
terminal.ansiBrightWhite #e5e5e5
terminal.ansiBrightYellow #f5f543
terminal.ansiCyan #11a8cd
terminal.ansiGreen #0dbc79
terminal.ansiMagenta #bc3fbc
terminal.ansiRed #cd3131
terminal.ansiWhite #e5e5e5
terminal.ansiYellow #e5e510
terminal.border #80808059
terminal.foreground #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #d40046
terminalCursor.foreground #ffffff
textLink.foreground #d40046
titleBar.activeBackground #3c3c3c
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #d40046
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #ff636a
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffffff —
variable.parameter.function.language.special.self.python #ffffff —
storage.modifier.lifetime.rust #ffffff —
support.function.std.rust #ecb9c5 —
entity.name.lifetime.rust #ffffff —
variable.language.rust #ff636a —
support.constant.edge #ff636a —
constant.other.character-class.regexp #ff636a —
keyword.operator.quantifier.regexp #ffffff —
punctuation.definition.string.begin,punctuation.definition.string.end #ecb9c5 —
variable.parameter.function #ffffff —
comment markup.link #666666 —
markup.changed.diff #ffffff —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #ecb9c5 —
markup.inserted.diff #ecb9c5 —
markup.deleted.diff #ff636a —
meta.function.c,meta.function.cpp #ff636a —
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c #ffffff —
punctuation.separator.key-value #ffffff —
keyword.operator.expression.import #ecb9c5 —
support.constant.math #ffffff —
support.constant.property.math #ffffff —
variable.other.constant #ffffff —
storage.type.annotation.java, storage.type.object.array.java #ffffff —
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java #ffffff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #ffffff —
keyword.operator.instanceof.java #ff636a —
meta.definition.variable.name.java #ff636a —
keyword.operator.logical #d40046 —
keyword.operator.bitwise #d40046 —
keyword.operator.channel #d40046 —
support.constant.property-value.scss,support.constant.property-value.css #ff636a —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #d40046 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ffffff —
punctuation.separator.list.comma.css #ffffff —
support.constant.color.w3c-standard-color-name.css #ffffff —
support.type.vendored.property-name.css #d40046 —
support.module.node,support.type.object.module,support.module.node #ffffff —
entity.name.type.module #ffffff —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff636a —
support.constant.json #ffffff —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #ff636a —
support.type.object.console #ff636a —
support.variable.property.process #ffffff —
entity.name.function,support.function.console #ecb9c5 —
keyword.operator.misc.rust #ffffff —
keyword.operator.sigil.rust #ff636a —
keyword.operator.delete #ff636a —
support.type.object.dom #d40046 —
support.variable.dom,support.variable.property.dom #ff636a —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #d40046 —
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp #ff636a —
punctuation.separator.delimiter #ff636a —
punctuation.separator.c,punctuation.separator.cpp #ff636a —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #d40046 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #ff636a —
variable.parameter.function.language.python #ffffff —
support.type.python #d40046 —
keyword.operator.logical.python #ff636a —
variable.parameter.function.python #ffffff —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ffffff —
meta.function-call.generic.python #ecb9c5 —
constant.character.format.placeholder.other.python #ffffff —
keyword.operator.assignment.compound #ff636a —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #d40046 —
entity.name.namespace #ffffff —
variable.language #ffffff —
token.variable.parameter.java #ffffff —
import.storage.java #ffffff —
token.package.keyword #ff636a —
entity.name.function, meta.require, support.function.any-method, variable.function #ecb9c5 —
entity.name.type.namespace #ffffff —
support.class, entity.name.type.class #ffffff —
entity.name.class.identifier.namespace.type #ffffff —
entity.name.class, variable.other.class.js, variable.other.class.ts #ffffff —
variable.other.class.php #ff636a —
control.elements, keyword.operator.less #ffffff —
keyword.other.special-method #ecb9c5 —
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void #ff636a —
token.storage.type.java #ffffff —
support.type.property-name #ff636a —
support.constant.property-value #ff636a —
support.constant.font-name #ff636a —
entity.other.inherited-class #ffffff —
constant.other.symbol #d40046 —
punctuation.definition.constant #ffffff —
entity.name.tag #ff636a bold italic
entity.other.attribute-name #ffffff —
entity.other.attribute-name.id #ecb9c5 —
entity.other.attribute-name.class.css #ffffff —
markup.heading punctuation.definition.heading, entity.name.section #ecb9c5 —
keyword.other.unit #ff636a —
markup.bold,todo.bold #ffffff —
punctuation.definition.bold #ffffff —
markup.italic, punctuation.definition.italic,todo.emphasis #ff636a —
entity.name.section.markdown #ff636a —
punctuation.definition.heading.markdown #ff636a —
punctuation.definition.list.begin.markdown #ff636a —
markup.heading.setext #ffffff —
punctuation.definition.bold.markdown #ffffff —
markup.inline.raw.markdown #ecb9c5 —
markup.inline.raw.string.markdown #ecb9c5 —
punctuation.definition.list.markdown #ff636a —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff636a —
beginning.punctuation.definition.list.markdown #ff636a —
punctuation.definition.metadata.markdown #ff636a —
markup.underline.link.markdown,markup.underline.link.image.markdown #ff636a —
string.other.link.title.markdown,string.other.link.description.markdown #ecb9c5 —
constant.character.escape #d40046 —
punctuation.section.embedded, variable.interpolation #ff636a —
punctuation.section.embedded.begin,punctuation.section.embedded.end #ff636a —
invalid.illegal.bad-ampersand.html #ffffff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff636a —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff636a —
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #ecb9c5 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #d40046 —
support.type.property-name.json #ff636a —
support.type.property-name.json punctuation #ff636a —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #ff636a —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #ff636a —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #ffffff —
keyword.operator.error-control.php #ff636a —
keyword.operator.type.php #ff636a —
punctuation.section.array.begin.php #ffffff —
punctuation.section.array.end.php #ffffff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #ffffff —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #ecb9c5 —
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php #ffffff —
support.constant.core.rust #ffffff —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #ffffff —
entity.name.goto-label.php,support.other.php #ecb9c5 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #d40046 —
keyword.operator.regexp.php #ff636a —
keyword.operator.comparison.php #d40046 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #ff636a —
meta.function.decorator.python #ecb9c5 —
support.token.decorator.python,meta.function.decorator.identifier.python #d40046 —
function.parameter #ffffff —
function.parameter.ruby, function.parameter.cs #ffffff —
constant.language.symbol.ruby #d40046 —
inline-color-decoration rgb-value #ffffff —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #ffffff —
block.scope.end,block.scope.begin #ffffff —
entity.name.variable.local.cs #ff636a —
token.error-token #f44747 —
token.debug-token #ff636a —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #ff636a —
meta.template.expression #ffffff —
keyword.operator.module #ff636a —
support.type.type.flowtype #ecb9c5 —
support.type.primitive #ffffff —
meta.property.object #ff636a —
variable.parameter.function.js #ff636a —
keyword.other.template.begin #ecb9c5 —
keyword.other.template.end #ecb9c5 —
keyword.other.substitution.begin #ecb9c5 —
keyword.other.substitution.end #ecb9c5 —
keyword.operator.assignment #d40046 —
keyword.operator.assignment.go #ffffff —
keyword.operator.arithmetic.go, keyword.operator.address.go #ff636a —
entity.name.package.go #ffffff —
support.type.prelude.elm #d40046 —
support.constant.elm #ffffff —
punctuation.quasi.element #ff636a —
constant.character.entity #ff636a —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #d40046 —
entity.global.clojure #ffffff —
meta.symbol.clojure #ff636a —
constant.keyword.clojure #d40046 —
meta.arguments.coffee, variable.parameter.function.coffee #ff636a —
meta.scope.prerequisites.makefile #ff636a —
storage.modifier.import.groovy #ffffff —
meta.method.groovy #ecb9c5 —
meta.definition.variable.name.groovy #ff636a —
meta.definition.class.inherited.classes.groovy #ecb9c5 —
support.variable.semantic.hlsl #ffffff —
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl #ff636a —
text.variable, text.bracketed #ff636a —
support.type.swift, support.type.vb.asp #ffffff —
entity.name.function.xi #ffffff —
entity.name.class.xi #d40046 —
constant.character.character-class.regexp.xi #ff636a —
constant.regexp.xi #ff636a —
keyword.control.xi #d40046 —
beginning.punctuation.definition.quote.markdown.xi #ecb9c5 —
beginning.punctuation.definition.list.markdown.xi #666666 —
constant.character.xi #ecb9c5 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #666666 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #ffffff —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff636a —
meta.brace.square #ffffff —
comment, punctuation.definition.comment #666666 italic
markup.quote.markdown #666666 —
punctuation.definition.block.sequence.item.yaml #ffffff —
constant.language.symbol.elixir #d40046 —
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super — italic
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
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 } !` ;
}
almost monochromatic | Coding Theme