Skip to main content
Home Theme VS Code The One Theme This is the very first version of a theme inspired by high fantasy works in literature, games and so on, enjoy!
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 #38291a activityBar.background #1f1000 activityBar.foreground #b68a6a activityBar.inactiveForeground #8a5833 activityBarBadge.background #8a5833 activityBarBadge.foreground #1f1000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle keyword.operator.assignment #b68a6a — string #8fb244 — keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #416AB6 punctuation.definition.string.begin,punctuation.definition.string.end #faf5e5 — variable.other.property
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
The One Theme — The One Theme Dark
badge.background #b68a6a
badge.foreground #1f1000
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1f1000
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #faf5e5
button.background #8a5833
button.foreground #faf5e5
button.hoverBackground #b68a6a
button.secondaryBackground #3a3d41
button.secondaryForeground #faf5e5
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #2b2821
debugExceptionWidget.border #b68a6a
debugToolBar.background #2b2821
debugToolBar.border #b68a6a
diffEditor.border #b68a6a
diffEditor.insertedTextBackground #8fb2443c
diffEditor.removedTextBackground #d73d3d43
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #1f1000
editor.findMatchBackground #4e3c27
editor.findMatchBorder #faf5e5
editor.findMatchHighlightBackground #4e3c27
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #38291a
editor.foreground #faf5e5
editor.hoverHighlightBackground #4e3c27
editor.inactiveSelectionBackground #38291a
editor.lineHighlightBackground #a4563c24
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #4e3c27
editor.selectionHighlightBackground #453421
editor.selectionHighlightBorder #b68a6a
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #4e3c27
editorBracketMatch.background #8a5833
editorBracketMatch.border #faf5e5
editorCodeLens.foreground #b68a6a
editorCursor.background #000000
editorCursor.foreground #A4563C
editorError.background #e21e253c
editorError.border #e21e26
editorError.foreground #e21e26
editorGroup.border #b68a6a
editorGroup.emptyBackground #1f1000
editorGroupHeader.tabsBackground #1f1000
editorGutter.addedBackground #8fb244
editorGutter.background #1f1000
editorGutter.commentRangeForeground #b68a6a
editorGutter.deletedBackground #d73d3d
editorGutter.foldingControlForeground #b68a6a
editorGutter.modifiedBackground #d7bc3d
editorHoverWidget.background #38291a
editorHoverWidget.border #38291a
editorHoverWidget.foreground #faf5e5
editorIndentGuide.activeBackground #8a5833
editorIndentGuide.background #453421
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #258080
editorLineNumber.activeForeground #A4563C
editorLineNumber.foreground #4e3c27
editorLink.activeForeground #faf5e5
editorMarkerNavigation.background #2b2821
editorMarkerNavigationError.background #c1253e
editorMarkerNavigationInfo.background #258080
editorMarkerNavigationWarning.background #f9dfb1
editorOverviewRuler.background #1f1000
editorOverviewRuler.border #7f7f7f00
editorRuler.foreground #8a5833
editorSuggestWidget.background #453421
editorSuggestWidget.border #38291a
editorSuggestWidget.foreground #faf5e5
editorSuggestWidget.highlightForeground #f6ca7d
editorSuggestWidget.selectedBackground #faf5e5
editorWarning.background #a9914000
editorWarning.border #d7bc3d
editorWarning.foreground #d7bc3d
editorWhitespace.foreground #eecab0
editorWidget.background #1f1000
editorWidget.foreground #faf5e5
editorWidget.resizeBorder #b68a6a
focusBorder #b68a6a
foreground #faf5e5
gitDecoration.addedResourceForeground #8fb244
gitDecoration.conflictingResourceForeground #808ec3
gitDecoration.deletedResourceForeground #d73d3d
gitDecoration.ignoredResourceForeground #8a5933
gitDecoration.modifiedResourceForeground #d7bc3d
gitDecoration.stageDeletedResourceForeground #e21e26
gitDecoration.stageModifiedResourceForeground #f6ca7d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #8a8a8a
icon.foreground #e2dcdb
input.background #4e3c27
input.foreground #faf5e5
input.placeholderForeground #b68a6a
inputOption.activeBackground #eecab0
inputOption.activeBorder #007acc00
inputOption.activeForeground #1f1000
list.activeSelectionBackground #faf5e5
list.activeSelectionForeground #1f1000
list.dropBackground #453421
list.focusBackground #faf5e5
list.focusForeground #b68a6a
list.highlightForeground #b68a6a
list.hoverBackground #453421
list.hoverForeground #eecab0
list.inactiveSelectionBackground #1f1000
list.inactiveSelectionForeground #b68a6a
listFilterWidget.background #8a5833
listFilterWidget.noMatchesOutline #be110000
listFilterWidget.outline #00000000
menu.background #1f1000
menu.border #00000000
menu.foreground #faf5e5
menu.selectionBackground #8a5833
menu.selectionBorder #00000000
menu.selectionForeground #faf5e5
menu.separatorBackground #8a5833
menubar.selectionBackground #b68a6a
menubar.selectionForeground #faf5e5
merge.commonContentBackground #2b2821
merge.commonHeaderBackground #b68a6a
merge.currentContentBackground #2580807c
merge.currentHeaderBackground #59cdcf7d
merge.incomingContentBackground #31284b
merge.incomingHeaderBackground #58398f
minimap.background #1f1000
minimap.errorHighlight #f1353c
minimap.findMatchHighlight #b68a6a
minimap.selectionHighlight #88755b60
minimap.warningHighlight #f9dfb1
minimapGutter.addedBackground #8fb244
minimapGutter.deletedBackground #c1253e
minimapGutter.modifiedBackground #f9dfb1
notificationCenter.border #47474700
notificationCenterHeader.background #2b2821
notificationCenterHeader.foreground #faf5e5
notifications.background #4e3c27
notifications.border #30303100
notifications.foreground #faf5e5
notificationsErrorIcon.foreground #d73d3d
notificationsInfoIcon.foreground #59cecf
notificationsWarningIcon.foreground #d7bc3d
notificationToast.border #47474700
panel.background #38291a
panel.border #38291a
panelSection.border #80808059
panelTitle.activeBorder #b68a6a
panelTitle.activeForeground #b68a6a
panelTitle.inactiveForeground #8a5933
peekView.border #59cecf
peekViewEditor.background #27403b
peekViewEditor.matchHighlightBackground #d7bc3dc1
peekViewEditor.matchHighlightBorder #f9dfb1
peekViewEditorGutter.background #27403b
peekViewResult.background #252526
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1e1e1e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #faf5e5
pickerGroup.foreground #8a5833
progressBar.background #f9dfb1
scrollbar.shadow #000000
scrollbarSlider.activeBackground #d77f3d
scrollbarSlider.background #8a5833
scrollbarSlider.hoverBackground #b68a6a
selection.background #f6ca7d8e
settings.focusedRowBackground #ffffff07
settings.headerForeground #e2dcdb
sideBar.background #38291a
sideBar.dropBackground #8a58337e
sideBar.foreground #faf5e5
sideBarSectionHeader.background #453421
sideBarSectionHeader.foreground #faf5e5
sideBarTitle.foreground #b68a6a
statusBar.background #1f1000
statusBar.debuggingBackground #cc6633
statusBar.debuggingForeground #ffffff
statusBar.foreground #b68a6a
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #2b2821
statusBarItem.remoteBackground #1f1000
statusBarItem.remoteForeground #b68a6a
tab.activeBackground #1f1000
tab.activeBorder #8a583300
tab.activeBorderTop #8a5833
tab.activeForeground #b68a6a
tab.border #8a5833
tab.inactiveBackground #4e3c27
tab.inactiveForeground #b68a6a
terminal.ansiBlack #1f1000
terminal.ansiBlue #416AB6
terminal.ansiBrightBlack #666666
terminal.ansiBrightBlue #59cecf
terminal.ansiBrightCyan #258080
terminal.ansiBrightGreen #8fb244
terminal.ansiBrightMagenta #855eb0
terminal.ansiBrightRed #d73d3d
terminal.ansiBrightWhite #faf5e5
terminal.ansiBrightYellow #f9dfb1
terminal.ansiCyan #258080
terminal.ansiGreen #8fb244
terminal.ansiMagenta #855eb0
terminal.ansiRed #d73d3d
terminal.ansiWhite #faf5e5
terminal.ansiYellow #d7bc3d
terminal.border #80808059
terminal.foreground #faf5e5
terminal.selectionBackground #8a5933
terminalCursor.background #b68a6a
terminalCursor.foreground #faf5e5
textLink.activeForeground #eecab0
textLink.foreground #A4563C
titleBar.activeBackground #1f1000
titleBar.activeForeground #b68a6a
titleBar.border #00000000
titleBar.inactiveBackground #282828
titleBar.inactiveForeground #b68a6a
tree.indentGuidesStroke #faf5e5
walkThrough.embeddedEditorBackground #00000050
widget.shadow #605b5300 keyword.operator.logical #416AB6 —
meta.function-call #d73d3d —
meta.function-call.arguments #faf5e5 —
constant.numeric #59cecf bold
punctuation.separator.key-value.mapping.yaml #A4563C bold
punctuation.definition.block.sequence.item.yaml #A4563C bold
string.unquoted.plain.out.yaml, string.quoted.double.yaml #8fb244 —
entity.name.tag.yaml #258080 bold
punctuation.definition.anchor.yaml, entity.name.type.anchor.yaml, constant.language.merge.yaml, variable.other.alias.yaml #416AB6 italic bold
punctuation.definition.alias.yaml #f9dfb1 italic bold
string.unquoted.block.yaml #8fb244 —
punctuation.definition.string.end.yaml, punctuation.definition.string.begin.yaml, keyword.control.flow.block-scalar.literal.yaml, keyword.control.flow.block-scalar.folded.yaml #808ec3 bold
punctuation.definition.sequence.begin.yaml,punctuation.definition.sequence.end.yaml #d7bc3d bold
constant.language.boolean.yaml #f9dfb1 italic bold
constant.language.symbol.elixir #03ff92 —
comment.line.double-slash,comment.block.documentation — italic
comment.line.number-sign.python, punctuation.definition.comment.python #8a5933bb
entity.other.inherited-class #A4563C —
keyword.control.import.python,keyword.control.flow.python #b68a6a
entity.name.namespace #FAF5E5 italic
constant.other.caps.python, constant.other.caps.python #d77f3d —
support.variable.magic.python #855eb0 —
storage.type.string.python #faf5e5 italic
support.type.exception.python #808ec3 —
storage.type.function.python #d77f3d —
keyword.operator.logical.python — italic bold
keyword.other.DML.sql — bold
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 #c1253e —
punctuation.definition.decorator.python #f9dfb1 —
variable.other.generic-type.haskell #808ec3 —
storage.type.haskell #d77f3d —
support.variable.magic.python #c1253e —
storage.type.class.python #c1253e —
meta.fstring.python #faf5e5 —
punctuation.separator,punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #faf5e5 —
storage.modifier.lifetime.rust #faf5e5 —
support.function.std.rust #59cecf —
entity.name.lifetime.rust #d7bc3d —
variable.language.rust #c1253e —
variable.language.self #03ff92 italic
support.constant.edge #808ec3 —
constant.other.character-class.regexp #c1253e —
keyword.operator.quantifier.regexp #d77f3d —
punctuation.definition.group #03ff92 —
comment markup.link #4e3c27 —
markup.changed.diff #d7bc3d —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #59cecf —
markup.inserted.diff #8fb244 —
markup.deleted.diff #c1253e —
meta.function.c,meta.function.cpp #c1253e —
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 #faf5e5 —
punctuation.separator.key-value #faf5e5 —
keyword.operator.expression.import #59cecf —
support.constant.math #d7bc3d —
support.constant.property.math #d77f3d —
variable.other.object #03ff92 italic
meta.type.annotation #03ff92 italic
punctuation.definition.typeparameters #03ff92 —
meta.return.type #03ff92 italic
storage.type.annotation.java, storage.type.object.array.java #d7bc3d —
variable.other.definition #03ff92 —
,meta.method.identifier.java,meta.method-call.java,meta.method.body.java #d7bc3d italic
storage.modifier.import.java #d7bc3d
storage.type.java #03ff92 italic
storage.type.generic.java #03ff92 italic
keyword.operator.instanceof.java #808ec3 —
meta.definition.variable.name.java #c1253e —
keyword.operator.bitwise #416AB6 —
keyword.operator.channel #416AB6 —
support.constant.property-value.scss,support.constant.property-value.css #d77f3d —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #416AB6 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #d77f3d —
punctuation.separator.list.comma.css #faf5e5 —
support.constant.color.w3c-standard-color-name.css #d77f3d —
support.type.vendored.property-name.css #416AB6 italic
support.module.node,support.type.object.module,support.module.node #d7bc3d —
meta.definition.method #03ff92 —
entity.name.type.module #d7bc3d —
meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #faf5e5 —
support.constant.json #d77f3d —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #808ec3 —
support.type.object.console #c1253e —
support.variable.property.process #d77f3d —
meta.decorator #03ff92 italic
meta.function, support.function.console #faf5e5 —
keyword.operator.misc.rust #faf5e5 —
keyword.operator.sigil.rust #808ec3 —
support.type.object.dom #416AB6 —
support.variable.dom,support.variable.property.dom #c1253e —
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 #808ec3 —
punctuation.separator.delimiter #faf5e5 —
punctuation.accessor #faf5e5 —
punctuation.separator.c,punctuation.separator.cpp #808ec3 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #416AB6 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #808ec3 —
support.type.python #416AB6 italic
keyword.operator.logical.python #f9dfb1 —
variable.parameter.function.python #d77f3d —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #faf5e5 —
variable.language.special.self.python,variable.language.special.cls.python #03ff92 —
constant.character.format.placeholder.other.python #d77f3d —
keyword.operator.assignment.compound #808ec3 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #416AB6 —
entity.name.namespace #d7bc3d —
variable.parameter.function-call #59cecf italic
variable.parameter.ts #03ff92 italic
variable.parameter.probably #03ff92 italic
variable.parameter.function #d73d3d italic
variable.language #d7bc3d italic
variable.language.dart #03ff92 —
variable.language.this #03ff92 italic
token.variable.parameter.java #faf5e5 —
import.storage.java #d7bc3d —
token.package.keyword #faf5e5 —
meta.require, support.function.any-method #59cecf —
entity.name.type.namespace #d7bc3d —
entity.name.type.class.python #f9dfb1 —
entity.name.class.identifier.namespace.type #d7bc3d —
entity.name.class, variable.other.class.js, variable.other.class.ts #d7bc3d —
support.class.component #03ff92 italic
support.class.dart #03ff92 italic
entity.name.type.class.cs #03ff92 —
entity.name.type.rust, entity.name.type.numeric.rust, entity.name.type.primitive.rust #03ff92 italic
entity.name.type.result, entity.name.type.lifetime #03ff92 italic
entity.name.type.go #03ff92 —
entity.name.type.option #03ff92 —
support.class.kotlin #03ff92 italic
entity.name.type.class.kotlin #03ff92 italic
entity.name.type.struct, entity.name.type.trait #03ff92 —
variable.other.class.php #c1253e —
keyword.control #808ec3 italic
control.elements, keyword.operator.less #d77f3d —
keyword.other.special-method #59cecf —
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 #808ec3 —
token.storage.type.java #d7bc3d —
storage.type.go #03ff92 italic
entity.name.function #d73d3d —
entity.name.function.decorator.python #f9dfb1 —
entity.name.function.macro #03ff92 —
support.type.metaclass #416AB6 italic
support.function.builtin #416AB6 —
support.type.property-name #d77f3d italic
support.constant.property-value #d77f3d —
support.constant.font-name #d77f3d —
constant.other.symbol #416AB6 —
punctuation.definition.constant #d77f3d —
entity.other.attribute-name #d77f3d italic
entity.other.attribute-name.id #59cecf italic
entity.other.attribute-name.class.css #d77f3d italic
variable.argument #03ff92 —
markup.heading punctuation.definition.heading, entity.name.section #59cecf —
keyword.other.unit #c1253e —
markup.bold,todo.bold #d7bc3d —
punctuation.definition.bold #d7bc3d —
markup.italic, punctuation.definition.italic,todo.emphasis #808ec3 —
entity.name.section.markdown #c1253e —
punctuation.definition.heading.markdown #c1253e —
punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown #d77f3d —
markup.heading.setext #faf5e5 —
punctuation.definition.bold.markdown #d77f3d —
markup.inline.raw.markdown #8fb244 —
markup.inline.raw.string.markdown #416AB6 —
punctuation.definition.list.markdown #c1253e —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #c1253e —
beginning.punctuation.definition.list.markdown #c1253e —
punctuation.definition.metadata.markdown #c1253e —
markup.underline.link.markdown,markup.underline.link.image.markdown #808ec3 —
string.other.link.title.markdown,string.other.link.description.markdown #59cecf —
string.regexp, constant.other.character-class.set.regexp, constant.other.character-class #416AB6 —
constant.character.numeric.regexp #03ff92 —
constant.character.escape #416AB6 —
punctuation.section.embedded, variable.interpolation #808ec3 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #808ec3 —
invalid.illegal.bad-ampersand.html #faf5e5 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #c1253e —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #c1253e —
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 #8fb244 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #416AB6 —
support.type.property-name.json #808ec3 italic
support.type.property-name.json punctuation #808ec3 italic
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #808ec3 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #808ec3 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #d7bc3d —
keyword.operator.error-control.php #808ec3 —
keyword.operator.type.php #808ec3 —
punctuation.section.array.begin.php #faf5e5 —
punctuation.section.array.end.php #faf5e5 —
invalid.illegal.non-null-typehinted.php #d73d3d —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #d7bc3d —
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 #faf5e5 —
support.constant.core.rust #d77f3d —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #d77f3d —
entity.name.goto-label.php,support.other.php #59cecf —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #416AB6 —
keyword.operator.regexp.php #808ec3 —
keyword.operator.comparison.php #416AB6 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #808ec3 —
support.token.decorator.python,meta.function.decorator.identifier.python #416AB6 —
function.parameter #faf5e5 —
function.parameter.ruby, function.parameter.cs #faf5e5 —
constant.language.symbol.ruby #416AB6 —
inline-color-decoration rgb-value #d77f3d —
constant.other.color #416AB6 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #d7bc3d italic
block.scope.end,block.scope.begin #faf5e5 —
entity.name.variable.local.cs #c1253e —
keyword.operator.arrow #03ff92 —
variable.other.object #03ff92 —
token.error-token #03ff92 —
token.debug-token #03ff92 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #808ec3 —
meta.template.expression #faf5e5 —
keyword.operator.module #808ec3 —
support.type.type.flowtype #59cecf —
support.type.primitive #d7bc3d —
meta.property.object #c1253e —
variable.parameter.function.js #c1253e —
keyword.other.template.begin #8fb244 —
keyword.other.template.end #8fb244 —
keyword.other.substitution.begin #8fb244 —
keyword.other.substitution.end #8fb244 —
keyword.operator.arithmetic.go, keyword.operator.address.go #808ec3 —
entity.name.package.go #d7bc3d —
support.type.prelude.elm #416AB6 —
support.constant.elm #d77f3d —
punctuation.quasi.element #808ec3 —
constant.character.entity #c1253e —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #416AB6 —
entity.global.clojure #d7bc3d —
meta.symbol.clojure #c1253e —
constant.keyword.clojure #416AB6 —
meta.arguments.coffee, variable.parameter.function.coffee #c1253e —
meta.scope.prerequisites.makefile #c1253e —
storage.modifier.import.groovy #d7bc3d —
meta.method.groovy #59cecf —
meta.definition.variable.name.groovy #c1253e —
meta.definition.class.inherited.classes.groovy #8fb244 —
support.variable.semantic.hlsl #d7bc3d —
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 #808ec3 —
text.variable, text.bracketed #c1253e —
support.type.swift, support.type.vb.asp #d7bc3d —
entity.name.function.xi #d7bc3d —
entity.name.class.xi #416AB6 —
constant.character.character-class.regexp.xi #c1253e —
constant.regexp.xi #808ec3 —
keyword.control.xi #416AB6 —
beginning.punctuation.definition.quote.markdown.xi #8fb244 —
beginning.punctuation.definition.list.markdown.xi #4e3c27 —
constant.character.xi #59cecf —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #4e3c27 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #d7bc3d —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #c1253e —
meta.brace.square #faf5e5 —
comment, punctuation.definition.comment #4e3c27 italic
markup.quote.markdown #4e3c27 —
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...
~/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 } ! ` ;
}
The One Theme | Coding Theme