Skip to main content
Home Theme VS Code Myoptic Eye Care A light theme for your eyes. Utilizing generated colors designed to help you read your code better with less eye strain.
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 #ffffff activityBar.background #ffffff activityBar.border #ffffff activityBar.foreground #8a8a8a activityBar.inactiveForeground #90909066 activityBarBadge.background #ffc379 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 #ff8c00 — variable.other.generic-type.haskell #b22222 — storage.type.haskell #228b7c — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Myoptic Eye Care — Myoptic Theme
activityBarBadge.foreground
#ffffff
badge.background #c4c4c4
badge.foreground #333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #ffffff
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #616161cc
button.background #007acc
button.foreground #ffffff
button.hoverBackground #0062a3
button.secondaryBackground #5f6a79
button.secondaryForeground #ffffff
button.secondaryHoverBackground #4c5561
checkbox.background #ffffff
checkbox.border #00000000
checkbox.foreground #616161
debugExceptionWidget.background #f3f3f3
debugExceptionWidget.border #d5d5d5
debugToolBar.background #f3f3f3
debugToolBar.border #d5d5d5
diffEditor.border #d7d7d7
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #ffffff
dropdown.border #00000000
dropdown.foreground #616161
editor.background #ffffff
editor.findMatchBackground #b2222222
editor.findMatchBorder #b22222
editor.findMatchHighlightBackground #b2222222
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #9933cc18
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #ff8c001c
editor.foreground #222222
editor.hoverHighlightBackground #b2222222
editor.inactiveSelectionBackground #9933cc18
editor.lineHighlightBackground #ffffff0a
editor.lineHighlightBorder #ff8c001c
editor.rangeHighlightBackground #b2222222
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #9933cc18
editor.selectionHighlightBackground #b2222222
editor.selectionHighlightBorder #b22222
editor.wordHighlightBackground #b2222222
editor.wordHighlightStrongBackground #b2222222
editorBracketMatch.background #ff8c0083
editorBracketMatch.border #ff8c0083
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #b22222
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #b22222
editorGroup.border #e7e7e7
editorGroup.emptyBackground #ffffff
editorGroupHeader.tabsBackground #f3f3f3
editorGutter.addedBackground #81b88b
editorGutter.background #ffffff
editorGutter.commentRangeForeground #c7c7c7
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #c7c7c7
editorGutter.modifiedBackground #66afe0
editorHoverWidget.background #ffffff
editorHoverWidget.border #ff8c00
editorHoverWidget.foreground #616161
editorIndentGuide.activeBackground #ff8c0083
editorIndentGuide.background #f2f2f2
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #66afe0
editorLineNumber.activeForeground #717171
editorLineNumber.foreground #c7c7c7
editorLink.activeForeground #9933cc
editorMarkerNavigation.background #ffffff
editorMarkerNavigationError.background #b22222
editorMarkerNavigationInfo.background #66afe0
editorMarkerNavigationWarning.background #ff8c00
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #f2f2f2
editorSuggestWidget.background #f3f3f3
editorSuggestWidget.border #c8c8c8
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #ff8c00
editorSuggestWidget.selectedBackground #ff8c001c
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #94949433
editorWidget.background #f3f3f3
editorWidget.foreground #616161
editorWidget.resizeBorder #c7c7c7
focusBorder #ff8c00
foreground #222222
gitDecoration.addedResourceForeground #587c0c
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #ad0707
gitDecoration.ignoredResourceForeground #8e8e90
gitDecoration.modifiedResourceForeground #895503
gitDecoration.stageDeletedResourceForeground #ad0707
gitDecoration.stageModifiedResourceForeground #895503
gitDecoration.submoduleResourceForeground #1258a7
gitDecoration.untrackedResourceForeground #007100
icon.foreground #222222
input.background #ffffff
input.border #00000000
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #0090f133
inputOption.activeBorder #007acc00
inputOption.activeForeground #000000
list.activeSelectionBackground #ff8c001c
list.activeSelectionForeground #222222
list.dropBackground #d6ebff
list.focusBackground #d6ebff
list.focusForeground #616161
list.highlightForeground #ff8c00
list.hoverBackground #ff8c001c
list.hoverForeground #222222
list.inactiveSelectionBackground #ff8c001c
list.inactiveSelectionForeground #a1a1a1
listFilterWidget.background #efc1ad
listFilterWidget.noMatchesOutline #be1100
listFilterWidget.outline #00000000
menu.background #ffffff
menu.border #00000085
menu.foreground #616161
menu.selectionBackground #0060c0
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #888888
menubar.selectionBackground #0000001a
menubar.selectionForeground #333333
merge.commonContentBackground #E5E5E5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #ffffff
minimap.errorHighlight #b22222
minimap.findMatchHighlight #b2222222
minimap.selectionHighlight #9933cc18
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #66afe0
notificationCenter.border #d5d5d5
notificationCenterHeader.background #e7e7e7
notificationCenterHeader.foreground #616161
notifications.background #f3f3f3
notifications.border #e7e7e7
notifications.foreground #616161
notificationsErrorIcon.foreground #e51400
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #e9a700
notificationToast.border #d5d5d5
panel.background #ffffff
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #424242
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #ff8c00
peekViewEditor.background #fdf8ff
peekViewEditor.matchHighlightBackground #9933cc18
peekViewEditor.matchHighlightBorder #9933cc18
peekViewEditorGutter.background #fdf8ff
peekViewResult.background #fdf8ff
peekViewResult.fileForeground #1e1e1e
peekViewResult.lineForeground #646465
peekViewResult.matchHighlightBackground #9933cc18
peekViewResult.selectionBackground #9933cc18
peekViewResult.selectionForeground #6c6c6c
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #333333
pickerGroup.border #cccedb
pickerGroup.foreground #0066bf
progressBar.background #0e70c0
scrollbar.shadow #ff8c0083
scrollbarSlider.activeBackground #00000099
scrollbarSlider.background #64646466
scrollbarSlider.hoverBackground #646464b3
selection.background #ff8c0083
settings.focusedRowBackground #ffffff07
settings.headerForeground #222222
sideBar.background #ffffff
sideBar.border #ffffff
sideBar.dropBackground #d6ebff
sideBar.foreground #a1a1a1
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #61616130
sideBarSectionHeader.foreground #616161
sideBarTitle.foreground #6f6f6f
statusBar.background #ffffff
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #000000
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ff8c001c
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #ffffff
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #333333
tab.border #f3f3f3
tab.inactiveBackground #ececec
tab.inactiveForeground #333333b3
terminal.ansiBlack #000000
terminal.ansiBlue #0451a5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #0451a5
terminal.ansiBrightCyan #0598bc
terminal.ansiBrightGreen #14ce14
terminal.ansiBrightMagenta #bc05bc
terminal.ansiBrightRed #cd3131
terminal.ansiBrightWhite #a5a5a5
terminal.ansiBrightYellow #b5ba00
terminal.ansiCyan #0598bc
terminal.ansiGreen #00bc00
terminal.ansiMagenta #bc05bc
terminal.ansiRed #cd3131
terminal.ansiWhite #555555
terminal.ansiYellow #949800
terminal.border #80808059
terminal.foreground #333333
terminal.selectionBackground #00000040
terminalCursor.background #b22222
terminalCursor.foreground #b22222
textLink.foreground #006ab1
titleBar.activeBackground #dddddd
titleBar.activeForeground #333333
titleBar.border #00000000
titleBar.inactiveBackground #dddddd99
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #a9a9a9
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #ff8c00
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #222222 —
variable.parameter.function.language.special.self.python #004a8b —
storage.modifier.lifetime.rust #222222 —
support.function.std.rust #9933cc —
entity.name.lifetime.rust #004a8b —
variable.language.rust #ff8c00 —
support.constant.edge #b22222 —
constant.other.character-class.regexp #ff8c00 —
keyword.operator.quantifier.regexp #228b7c —
punctuation.definition.string.begin,punctuation.definition.string.end #228b22 —
variable.parameter.function #222222 —
comment markup.link #c7c7c7 —
markup.changed.diff #004a8b —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #9933cc —
markup.inserted.diff #228b22 —
markup.deleted.diff #ff8c00 —
meta.function.c,meta.function.cpp #ff8c00 —
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 #222222 —
punctuation.separator.key-value #222222 —
keyword.operator.expression.import #9933cc —
support.constant.math #004a8b —
support.constant.property.math #228b7c —
variable.other.constant #004a8b —
storage.type.annotation.java, storage.type.object.array.java #004a8b —
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 #222222 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #004a8b —
keyword.operator.instanceof.java #b22222 —
meta.definition.variable.name.java #ff8c00 —
keyword.operator.logical #9933cc —
keyword.operator.bitwise #9933cc —
keyword.operator.channel #9933cc —
support.constant.property-value.scss,support.constant.property-value.css #228b7c —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #9933cc —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #228b7c —
punctuation.separator.list.comma.css #222222 —
support.constant.color.w3c-standard-color-name.css #228b7c —
support.type.vendored.property-name.css #9933cc —
support.module.node,support.type.object.module,support.module.node #004a8b —
entity.name.type.module #004a8b —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff8c00 —
support.constant.json #228b7c —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #b22222 —
support.type.object.console #ff8c00 —
support.variable.property.process #228b7c —
entity.name.function,support.function.console #9933cc —
keyword.operator.misc.rust #222222 —
keyword.operator.sigil.rust #b22222 —
keyword.operator.delete #b22222 —
support.type.object.dom #9933cc —
support.variable.dom,support.variable.property.dom #ff8c00 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #9933cc —
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 #b22222 —
punctuation.separator.delimiter #222222 —
punctuation.separator.c,punctuation.separator.cpp #b22222 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #9933cc —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #b22222 —
variable.parameter.function.language.python #228b7c —
support.type.python #9933cc —
keyword.operator.logical.python #b22222 —
variable.parameter.function.python #228b7c —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #222222 —
meta.function-call.generic.python #9933cc —
constant.character.format.placeholder.other.python #228b7c —
keyword.operator.assignment.compound #b22222 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #9933cc —
entity.name.namespace #004a8b —
variable.language #004a8b —
token.variable.parameter.java #222222 —
import.storage.java #004a8b —
token.package.keyword #b22222 —
entity.name.function, meta.require, support.function.any-method, variable.function #9933cc —
entity.name.type.namespace #004a8b —
support.class, entity.name.type.class #004a8b —
entity.name.class.identifier.namespace.type #004a8b —
entity.name.class, variable.other.class.js, variable.other.class.ts #004a8b —
variable.other.class.php #ff8c00 —
control.elements, keyword.operator.less #228b7c —
keyword.other.special-method #9933cc —
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 #b22222 —
token.storage.type.java #004a8b —
support.type.property-name #222222 —
support.constant.property-value #222222 —
support.constant.font-name #228b7c —
entity.other.inherited-class #004a8b —
constant.other.symbol #9933cc —
punctuation.definition.constant #228b7c —
entity.other.attribute-name #FF8C00 —
entity.other.attribute-name.id #9933cc normal
entity.other.attribute-name.class.css #228b7c normal
markup.heading punctuation.definition.heading, entity.name.section #9933cc —
keyword.other.unit #ff8c00 —
markup.bold,todo.bold #228b7c —
punctuation.definition.bold #004a8b —
markup.italic, punctuation.definition.italic,todo.emphasis #b22222 —
entity.name.section.markdown #ff8c00 —
punctuation.definition.heading.markdown #ff8c00 —
punctuation.definition.list.begin.markdown #ff8c00 —
markup.heading.setext #222222 —
punctuation.definition.bold.markdown #228b7c —
markup.inline.raw.markdown #228b22 —
markup.inline.raw.string.markdown #228b22 —
punctuation.definition.list.markdown #ff8c00 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff8c00 —
beginning.punctuation.definition.list.markdown #ff8c00 —
punctuation.definition.metadata.markdown #ff8c00 —
markup.underline.link.markdown,markup.underline.link.image.markdown #b22222 —
string.other.link.title.markdown,string.other.link.description.markdown #9933cc —
constant.character.escape #9933cc —
punctuation.section.embedded, variable.interpolation #ff8c00 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #b22222 —
invalid.illegal.bad-ampersand.html #222222 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff8c00 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff8c00 —
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 #228b22 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #9933cc —
support.type.property-name.json #ff8c00 —
support.type.property-name.json punctuation #ff8c00 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #b22222 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #b22222 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #004a8b —
keyword.operator.error-control.php #b22222 —
keyword.operator.type.php #b22222 —
punctuation.section.array.begin.php #222222 —
punctuation.section.array.end.php #222222 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #004a8b —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #9933cc —
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 #222222 —
support.constant.core.rust #228b7c —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #228b7c —
entity.name.goto-label.php,support.other.php #9933cc —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #9933cc —
keyword.operator.regexp.php #b22222 —
keyword.operator.comparison.php #9933cc —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #b22222 —
meta.function.decorator.python #9933cc —
support.token.decorator.python,meta.function.decorator.identifier.python #9933cc —
function.parameter #222222 —
function.parameter.ruby, function.parameter.cs #222222 —
constant.language.symbol.ruby #9933cc —
inline-color-decoration rgb-value #228b7c —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #004a8b —
block.scope.end,block.scope.begin #222222 —
entity.name.variable.local.cs #ff8c00 —
token.error-token #f44747 —
token.debug-token #b22222 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #b22222 —
meta.template.expression #222222 —
keyword.operator.module #b22222 —
support.type.type.flowtype #9933cc —
support.type.primitive #004a8b —
meta.property.object #ff8c00 —
variable.parameter.function.js #ff8c00 —
keyword.other.template.begin #228b22 —
keyword.other.template.end #228b22 —
keyword.other.substitution.begin #228b22 —
keyword.other.substitution.end #228b22 —
keyword.operator.assignment #9933cc —
keyword.operator.assignment.go #004a8b —
keyword.operator.arithmetic.go, keyword.operator.address.go #b22222 —
entity.name.package.go #004a8b —
support.type.prelude.elm #9933cc —
support.constant.elm #228b7c —
punctuation.quasi.element #b22222 —
constant.character.entity #ff8c00 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #9933cc —
entity.global.clojure #004a8b —
meta.symbol.clojure #ff8c00 —
constant.keyword.clojure #9933cc —
meta.arguments.coffee, variable.parameter.function.coffee #ff8c00 —
meta.scope.prerequisites.makefile #ff8c00 —
storage.modifier.import.groovy #004a8b —
meta.method.groovy #9933cc —
meta.definition.variable.name.groovy #ff8c00 —
meta.definition.class.inherited.classes.groovy #228b22 —
support.variable.semantic.hlsl #004a8b —
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 #b22222 —
text.variable, text.bracketed #ff8c00 —
support.type.swift, support.type.vb.asp #004a8b —
entity.name.function.xi #004a8b —
entity.name.class.xi #9933cc —
constant.character.character-class.regexp.xi #ff8c00 —
constant.regexp.xi #b22222 —
keyword.control.xi #9933cc —
beginning.punctuation.definition.quote.markdown.xi #228b22 —
beginning.punctuation.definition.list.markdown.xi #c7c7c7 —
constant.character.xi #9933cc —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #c7c7c7 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #004a8b —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff8c00 —
meta.brace.square #222222 —
comment, punctuation.definition.comment #c7c7c7 italic
markup.quote.markdown #c7c7c7 —
punctuation.definition.block.sequence.item.yaml #222222 —
constant.language.symbol.elixir #9933cc —
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
variable.other.property.tsx #222222
comment.line.double-slash,comment.block.documentation — italic
keyword.control.import.python,keyword.control.flow.python — italic
markup.italic.markdown — italic
punctuation.definition.tag.begin.liquid #66afe0 italic
punctuation.definition.tag.end.liquid #66afe0 italic
punctuation.output.liquid #00008B
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
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
fetchUser
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 } !` ;
}
Myoptic Eye Care | Coding Theme