Skip to main content
Home Theme VS Code Olive Light Theme A simple light theme for VS Code with an olive accent!
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 #fbfbfb activityBar.foreground #1d1d1d activityBar.inactiveForeground #8c8c8c activityBarBadge.background #618048 activityBarBadge.foreground #ffffff badge.background #c4c4c4 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 #be535b — variable.other.generic-type.haskell #bb50d1 — storage.type.haskell #c08145 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Olive Light Theme — Olive Light Theme
badge.foreground
#333333
breadcrumb.activeSelectionForeground #4e4e4e
breadcrumb.background #fbfbfb
breadcrumb.focusForeground #4e4e4e
breadcrumb.foreground #616161cc
button.background #618048
button.foreground #ffffff
button.hoverBackground #4f683b
button.secondaryBackground #353833
button.secondaryForeground #ffffff
button.secondaryHoverBackground #2e302d
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 #fbfbfb
editor.findMatchBackground #ffefbc
editor.findMatchBorder #ffefbc
editor.findMatchHighlightBackground #dfdfdf
editor.findMatchHighlightBorder #dfdfdf
editor.findRangeHighlightBackground #e6f2ca4d
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #fff6d9
editor.foreground #4d4d4d
editor.hoverHighlightBackground #eaf0d8
editor.inactiveSelectionBackground #ede6d0
editor.lineHighlightBackground #fdf7e3
editor.lineHighlightBorder #fdf7e3
editor.rangeHighlightBackground #e6f2ca4d
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #f4e3b1
editor.selectionHighlightBackground #f4e3b1
editor.selectionHighlightBorder #f4e3b1
editor.wordHighlightBackground #f4e3b1
editor.wordHighlightBorder #f4e3b1
editor.wordHighlightStrongBackground #f4e3b1
editor.wordHighlightStrongBorder #f4e3b1
editorBracketMatch.background #0064001a
editorBracketMatch.border #b9b9b9
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #686868
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f27064
editorGroup.border #c2c2c2
editorGroup.emptyBackground #fbfbfb
editorGroupHeader.tabsBackground #fbfbfb
editorGroupHeader.tabsBorder #fbfbfb
editorGutter.addedBackground #81b88b
editorGutter.background #fbfbfb
editorGutter.commentRangeForeground #424242
editorGutter.deletedBackground #ca4b51
editorGutter.foldingControlForeground #424242
editorGutter.modifiedBackground #5699c7
editorHoverWidget.background #fafafa
editorHoverWidget.border #c8c8c8
editorHoverWidget.foreground #616161
editorIndentGuide.activeBackground1 #939393
editorIndentGuide.background1 #e0e0e0
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #64c4d3
editorLineNumber.activeForeground #545454
editorLineNumber.foreground #b2b2b2
editorLink.activeForeground #79cbc7
editorMarkerNavigation.background #fbfbfb
editorMarkerNavigationError.background #e48d85
editorMarkerNavigationInfo.background #81bbc9
editorMarkerNavigationWarning.background #e6c980
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #d3d3d3
editorSuggestWidget.background #fafafa
editorSuggestWidget.border #c8c8c8
editorSuggestWidget.foreground #6f6f6f
editorSuggestWidget.highlightForeground #618048
editorSuggestWidget.selectedBackground #d8e6cd
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #e9a700
editorWhitespace.foreground #33333333
editorWidget.background #f3f3f3
editorWidget.foreground #616161
editorWidget.resizeBorder #c7c7c7
focusBorder #618048
foreground #5e5e5e
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 #5e5e5e
input.background #ffffff
input.border #00000000
input.foreground #616161
input.placeholderForeground #767676
inputOption.activeBackground #c0d5b1
inputOption.activeBorder #007acc00
inputOption.activeForeground #000000
list.activeSelectionBackground #d8e6cd
list.activeSelectionForeground #618048
list.dropBackground #6180481e
list.focusBackground #d4d9cf
list.focusForeground #616161
list.highlightForeground #618048
list.hoverBackground #e8e8e8
list.hoverForeground #616161
list.inactiveSelectionBackground #6180481e
list.inactiveSelectionForeground #618048
listFilterWidget.background #d0e2c2
listFilterWidget.noMatchesOutline #f2a7a0
listFilterWidget.outline #00000000
menu.background #fafafa
menu.border #c0c0c000
menu.foreground #616161
menu.selectionBackground #618048
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #d3d3d3
menubar.selectionBackground #f0f0f0
menubar.selectionBorder #f7f7f7
menubar.selectionForeground #333333
merge.commonContentBackground #E5E5E5
merge.commonHeaderBackground #BFBFBF
merge.currentContentBackground #DBF4EF
merge.currentHeaderBackground #A4E3D6
merge.incomingContentBackground #DBECFF
merge.incomingHeaderBackground #A6CFFF
minimap.background #fbfbfb
minimap.errorHighlight #f27064
minimap.findMatchHighlight #f7e4a8
minimap.selectionHighlight #ecdaa2
minimap.warningHighlight #e9a700
minimapGutter.addedBackground #81b88b
minimapGutter.deletedBackground #ca4b51
minimapGutter.modifiedBackground #5699c7
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 #fbfbfb
panel.border #618048
panelSection.border #cbd7c1
panelTitle.activeBorder #618048
panelTitle.activeForeground #424242
panelTitle.inactiveForeground #424242bf
peekView.border #acb7be
peekViewEditor.background #e5ebee
peekViewEditor.matchHighlightBackground #f7e4a8
peekViewEditor.matchHighlightBorder #f7e4a8
peekViewEditorGutter.background #e5ebee
peekViewResult.background #e7ecee
peekViewResult.fileForeground #565656
peekViewResult.lineForeground #646465
peekViewResult.matchHighlightBackground #fff3cc
peekViewResult.selectionBackground #d3e6ca
peekViewResult.selectionForeground #618048
peekViewTitle.background #ebecec
peekViewTitleDescription.foreground #616161e6
peekViewTitleLabel.foreground #333333
pickerGroup.border #cccedb
pickerGroup.foreground #618048
progressBar.background #618048
scrollbar.shadow #dddddd
scrollbarSlider.activeBackground #64646499
scrollbarSlider.background #64646420
scrollbarSlider.hoverBackground #77777780
selection.background #61804876
settings.focusedRowBackground #ffffff07
settings.headerForeground #5e5e5e
sideBar.background #fbfbfb
sideBar.dropBackground #6180481e
sideBar.foreground #5e5e5e
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #ffffff00
sideBarSectionHeader.foreground #616161
sideBarTitle.foreground #6f6f6f
statusBar.background #fbfbfb
statusBar.debuggingBackground #e09974
statusBar.debuggingForeground #ffffff
statusBar.foreground #5e5e5e
statusBar.noFolderBackground #a9a99d
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #7b946d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #fbfbfb
tab.activeBorder #618048
tab.activeBorderTop #00000000
tab.activeForeground #333333
tab.border #f3f3f300
tab.hoverBackground #fbfbfb
tab.hoverBorder #618048
tab.inactiveBackground #fbfbfb
tab.inactiveForeground #333333b3
terminal.ansiBlack #000000
terminal.ansiBlue #5190d5
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #70aef2
terminal.ansiBrightCyan #46bcd9
terminal.ansiBrightGreen #55cfa2
terminal.ansiBrightMagenta #d37abd
terminal.ansiBrightRed #f56363
terminal.ansiBrightWhite #a1a1a1
terminal.ansiBrightYellow #b8b830
terminal.ansiCyan #47a0b6
terminal.ansiGreen #47b88e
terminal.ansiMagenta #d360b6
terminal.ansiRed #b22b2b
terminal.ansiWhite #5e5e5e
terminal.ansiYellow #a5a528
terminal.border #cbd7c1
terminal.foreground #5e5e5e
terminal.selectionBackground #fcf4d9
terminalCursor.background #618048
terminalCursor.foreground #424242
textLink.foreground #83a16b
titleBar.activeBackground #fbfbfb
titleBar.activeForeground #5e5e5e
titleBar.border #00000000
titleBar.inactiveBackground #c2c2bc
titleBar.inactiveForeground #33333399
tree.indentGuidesStroke #a9a9a9
walkThrough.embeddedEditorBackground #00000050
widget.shadow #00000029 #be535b
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #4d4d4d —
variable.parameter.function.language.special.self.python #c09950 —
storage.modifier.lifetime.rust #4d4d4d —
support.function.std.rust #4181b6 —
entity.name.lifetime.rust #c09950 —
variable.language.rust #be535b —
support.constant.edge #bb50d1 —
constant.other.character-class.regexp #be535b —
keyword.operator.quantifier.regexp #c08145 —
punctuation.definition.string.begin,punctuation.definition.string.end #639440 —
variable.parameter.function #4d4d4d —
comment markup.link #8e8e8e —
markup.changed.diff #c09950 —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #4181b6 —
markup.inserted.diff #639440 —
markup.deleted.diff #be535b —
meta.function.c,meta.function.cpp #be535b —
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 #4d4d4d —
punctuation.separator.key-value #4d4d4d —
keyword.operator.expression.import #4181b6 —
support.constant.math #c09950 —
support.constant.property.math #c08145 —
variable.other.constant #c09950 —
storage.type.annotation.java, storage.type.object.array.java #c09950 —
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 #4d4d4d —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #c09950 —
keyword.operator.instanceof.java #bb50d1 —
meta.definition.variable.name.java #be535b —
keyword.operator.logical #3d8c96 —
keyword.operator.bitwise #3d8c96 —
keyword.operator.channel #3d8c96 —
support.constant.property-value.scss,support.constant.property-value.css #c08145 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #3d8c96 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #c08145 —
punctuation.separator.list.comma.css #4d4d4d —
support.constant.color.w3c-standard-color-name.css #c08145 —
support.type.vendored.property-name.css #3d8c96 —
support.module.node,support.type.object.module,support.module.node #c09950 —
entity.name.type.module #c09950 —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #be535b —
support.constant.json #c08145 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #bb50d1 —
support.type.object.console #be535b —
support.variable.property.process #c08145 —
entity.name.function,support.function.console #4181b6 —
keyword.operator.misc.rust #4d4d4d —
keyword.operator.sigil.rust #bb50d1 —
keyword.operator.delete #bb50d1 —
support.type.object.dom #3d8c96 —
support.variable.dom,support.variable.property.dom #be535b —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #3d8c96 —
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 #bb50d1 —
punctuation.separator.delimiter #4d4d4d —
punctuation.separator.c,punctuation.separator.cpp #bb50d1 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #3d8c96 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #bb50d1 —
variable.parameter.function.language.python #c08145 —
support.type.python #3d8c96 —
keyword.operator.logical.python #bb50d1 —
variable.parameter.function.python #c08145 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #4d4d4d —
meta.function-call.generic.python #4181b6 —
constant.character.format.placeholder.other.python #c08145 —
keyword.operator.assignment.compound #bb50d1 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #3d8c96 —
entity.name.namespace #c09950 —
variable.language #c09950 —
token.variable.parameter.java #4d4d4d —
import.storage.java #c09950 —
token.package.keyword #bb50d1 —
entity.name.function, meta.require, support.function.any-method, variable.function #4181b6 —
entity.name.type.namespace #c09950 —
support.class, entity.name.type.class #c09950 —
entity.name.class.identifier.namespace.type #c09950 —
entity.name.class, variable.other.class.js, variable.other.class.ts #c09950 —
variable.other.class.php #be535b —
control.elements, keyword.operator.less #c08145 —
keyword.other.special-method #4181b6 —
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 #bb50d1 —
token.storage.type.java #c09950 —
support.type.property-name #4d4d4d —
support.constant.property-value #4d4d4d —
support.constant.font-name #c08145 —
entity.other.inherited-class #c09950 —
constant.other.symbol #3d8c96 —
punctuation.definition.constant #c08145 —
entity.other.attribute-name #c08145 —
entity.other.attribute-name.id #4181b6
entity.other.attribute-name.class.css #c08145
markup.heading punctuation.definition.heading, entity.name.section #4181b6 —
keyword.other.unit #be535b —
markup.bold,todo.bold #c08145 —
punctuation.definition.bold #c09950 —
markup.italic, punctuation.definition.italic,todo.emphasis #bb50d1 —
entity.name.section.markdown #be535b —
punctuation.definition.heading.markdown #be535b —
punctuation.definition.list.begin.markdown #be535b —
markup.heading.setext #4d4d4d —
punctuation.definition.bold.markdown #c08145 —
markup.inline.raw.markdown #639440 —
markup.inline.raw.string.markdown #639440 —
punctuation.definition.list.markdown #be535b —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #be535b —
beginning.punctuation.definition.list.markdown #be535b —
punctuation.definition.metadata.markdown #be535b —
markup.underline.link.markdown,markup.underline.link.image.markdown #bb50d1 —
string.other.link.title.markdown,string.other.link.description.markdown #4181b6 —
constant.character.escape #3d8c96 —
punctuation.section.embedded, variable.interpolation #be535b —
punctuation.section.embedded.begin,punctuation.section.embedded.end #bb50d1 —
invalid.illegal.bad-ampersand.html #4d4d4d —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #be535b —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #be535b —
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 #639440 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #3d8c96 —
support.type.property-name.json #be535b —
support.type.property-name.json punctuation #be535b —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #bb50d1 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #bb50d1 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #c09950 —
keyword.operator.error-control.php #bb50d1 —
keyword.operator.type.php #bb50d1 —
punctuation.section.array.begin.php #4d4d4d —
punctuation.section.array.end.php #4d4d4d —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #c09950 —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #4181b6 —
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 #4d4d4d —
support.constant.core.rust #c08145 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #c08145 —
entity.name.goto-label.php,support.other.php #4181b6 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #3d8c96 —
keyword.operator.regexp.php #bb50d1 —
keyword.operator.comparison.php #3d8c96 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #bb50d1 —
meta.function.decorator.python #4181b6 —
support.token.decorator.python,meta.function.decorator.identifier.python #3d8c96 —
function.parameter #4d4d4d —
function.parameter.ruby, function.parameter.cs #4d4d4d —
constant.language.symbol.ruby #3d8c96 —
inline-color-decoration rgb-value #c08145 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #c09950 —
block.scope.end,block.scope.begin #4d4d4d —
entity.name.variable.local.cs #be535b —
token.error-token #f44747 —
token.debug-token #bb50d1 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #bb50d1 —
meta.template.expression #4d4d4d —
keyword.operator.module #bb50d1 —
support.type.type.flowtype #4181b6 —
support.type.primitive #c09950 —
meta.property.object #be535b —
variable.parameter.function.js #be535b —
keyword.other.template.begin #639440 —
keyword.other.template.end #639440 —
keyword.other.substitution.begin #639440 —
keyword.other.substitution.end #639440 —
keyword.operator.assignment #3d8c96 —
keyword.operator.assignment.go #c09950 —
keyword.operator.arithmetic.go, keyword.operator.address.go #bb50d1 —
entity.name.package.go #c09950 —
support.type.prelude.elm #3d8c96 —
support.constant.elm #c08145 —
punctuation.quasi.element #bb50d1 —
constant.character.entity #be535b —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #3d8c96 —
entity.global.clojure #c09950 —
meta.symbol.clojure #be535b —
constant.keyword.clojure #3d8c96 —
meta.arguments.coffee, variable.parameter.function.coffee #be535b —
meta.scope.prerequisites.makefile #be535b —
storage.modifier.import.groovy #c09950 —
meta.method.groovy #4181b6 —
meta.definition.variable.name.groovy #be535b —
meta.definition.class.inherited.classes.groovy #639440 —
support.variable.semantic.hlsl #c09950 —
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 #bb50d1 —
text.variable, text.bracketed #be535b —
support.type.swift, support.type.vb.asp #c09950 —
entity.name.function.xi #c09950 —
entity.name.class.xi #3d8c96 —
constant.character.character-class.regexp.xi #be535b —
constant.regexp.xi #bb50d1 —
keyword.control.xi #3d8c96 —
beginning.punctuation.definition.quote.markdown.xi #639440 —
beginning.punctuation.definition.list.markdown.xi #8e8e8e —
constant.character.xi #4181b6 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #8e8e8e —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #c09950 —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #be535b —
meta.brace.square #4d4d4d —
comment, punctuation.definition.comment #8e8e8e italic
markup.quote.markdown #8e8e8e —
punctuation.definition.block.sequence.item.yaml #4d4d4d —
constant.language.symbol.elixir #3d8c96 —
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
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 } !` ;
}
Olive Light Theme | Coding Theme