Skip to main content
Home Theme VS Code Obito Akatsuki Theme Un thème VSCode sombre inspiré d'Obito et de l'Akatsuki.
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 #0d0c0c activityBar.background #0d0c0c activityBar.border #ea0000 activityBar.foreground #e83903 activityBar.inactiveForeground #ff2400 activityBarBadge.background #ff3000 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 #ff0014 — variable.other.generic-type.haskell #ff3c00 — storage.type.haskell #ffffff — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Obito Akatsuki Theme — Obito Akatsuki Theme
activityBarBadge.foreground
#000000
badge.background #4d4d4d
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #e0e0e0
breadcrumb.background #1e1e1e
breadcrumb.focusForeground #e0e0e0
breadcrumb.foreground #cccccccc
button.background #ff3b00
button.foreground #ffffff
button.hoverBackground #1177bb
button.secondaryBackground #ff3b00
button.secondaryForeground #ffffff
button.secondaryHoverBackground #45494e
checkbox.background #3c3c3c
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95533
diffEditor.removedTextBackground #ff000033
dropdown.background #3c3c3c
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #0d0c0c
editor.findMatchBackground #515c6a
editor.findMatchBorder #74879f
editor.findMatchHighlightBackground #ea5c0055
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #e8d5d5
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #79808878
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #282828
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #6a707524
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #495F77
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #0064001a
editorBracketMatch.border #888888
editorCodeLens.foreground #999999
editorCursor.background #ffffff
editorCursor.foreground #ff0000
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #0d0c0c
editorGroupHeader.border #ffffff00
editorGroupHeader.tabsBackground #252526
editorGutter.addedBackground #587c0c
editorGutter.background #1e1e1e
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #252526
editorHoverWidget.border #454545
editorHoverWidget.foreground #cccccc
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #ff0000
editorLineNumber.foreground #ffffff
editorLink.activeForeground #4e94ce
editorMarkerNavigation.background #2d2d30
editorMarkerNavigationError.background #f48771
editorMarkerNavigationInfo.background #75beff
editorMarkerNavigationWarning.background #cca700
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #0c0c0f
editorSuggestWidget.border #454545
editorSuggestWidget.foreground #ffffff
editorSuggestWidget.highlightForeground #ff3c00
editorSuggestWidget.selectedBackground #1f3747
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #252526
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #020202
foreground #ffffff
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #6c6cc4
gitDecoration.deletedResourceForeground #c74e39
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #c74e39
gitDecoration.stageModifiedResourceForeground #e2c08d
gitDecoration.submoduleResourceForeground #8db9e2
gitDecoration.untrackedResourceForeground #73c991
icon.foreground #ffffff
input.background #3c3c3c
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #094771
list.activeSelectionForeground #ffffff
list.dropBackground #1b1717
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #e43b08
list.hoverBackground #6bacbc
list.hoverForeground #cccccc
list.inactiveSelectionBackground #2e2727
list.inactiveSelectionForeground #cccccc
listFilterWidget.background #ffffff
listFilterWidget.noMatchesOutline #8e8b8b
listFilterWidget.outline #00000000
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #094771
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #88818104
menubar.selectionForeground #cccccc
merge.commonContentBackground #28282800
merge.commonHeaderBackground #38383800
merge.currentContentBackground #27403b00
merge.currentHeaderBackground #36736600
merge.incomingContentBackground #28384b00
merge.incomingHeaderBackground #39608f00
minimap.background #0d0c0c
minimap.errorHighlight #f48771
minimap.findMatchHighlight #515c6a00
minimap.selectionHighlight #6a707524
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #474747
notificationCenterHeader.background #303031
notificationCenterHeader.foreground #cccccc
notifications.background #252526
notifications.border #303031
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #474747
panel.background #0a0a0a
panel.border #80808059
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #001f33
peekViewEditor.matchHighlightBackground #ff8f0099
peekViewEditor.matchHighlightBorder #ee931e
peekViewEditorGutter.background #001f33
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 #3f3f46
pickerGroup.foreground #ffffff
progressBar.background #ff6000
scrollbar.shadow #ff5400
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #ff3c003c
scrollbarSlider.hoverBackground #6d61617a
selection.background #0a5190
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #0d0d0d
sideBar.border #ff0000
sideBar.dropBackground #1b1717
sideBar.foreground #ffffff
sideBarSectionHeader.background #00000000
sideBarSectionHeader.border #cccccc33
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #ffffff
statusBar.background #007acc
statusBar.debuggingBackground #0f0c0c
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #68217a
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #ffffff1f
statusBarItem.remoteBackground #16825d
statusBarItem.remoteForeground #ffffff
tab.activeBackground #1e1e1e
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #252526
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 #f7f1f1
terminal.selectionBackground #ffffff40
terminalCursor.background #0087FF
terminalCursor.foreground #ffffff
textLink.foreground #21528a
titleBar.activeBackground #0d0b0b
titleBar.activeForeground #ffffff
titleBar.border #f77b67
titleBar.inactiveBackground #0a0a0a
titleBar.inactiveForeground #ff3000
tree.indentGuidesStroke #585858
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #ff0014
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #e8d5d5 —
variable.parameter.function.language.special.self.python #fffdfa —
storage.modifier.lifetime.rust #e8d5d5 —
support.function.std.rust #008cff —
entity.name.lifetime.rust #fffdfa —
variable.language.rust #ff0014 —
support.constant.edge #ff3c00 —
constant.other.character-class.regexp #ff0014 —
keyword.operator.quantifier.regexp #ffffff —
punctuation.definition.string.begin,punctuation.definition.string.end #fff116 —
variable.parameter.function #e8d5d5 —
comment markup.link #059d32 —
markup.changed.diff #fffdfa —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #008cff —
markup.inserted.diff #fff116 —
markup.deleted.diff #ff0014 —
meta.function.c,meta.function.cpp #ff0014 —
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 #e8d5d5 —
punctuation.separator.key-value #e8d5d5 —
keyword.operator.expression.import #008cff —
support.constant.math #fffdfa —
support.constant.property.math #ffffff —
variable.other.constant #fffdfa —
storage.type.annotation.java, storage.type.object.array.java #fffdfa —
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 #e8d5d5 —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #fffdfa —
keyword.operator.instanceof.java #ff3c00 —
meta.definition.variable.name.java #ff0014 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #ffffff —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #56b6c2 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #ffffff —
punctuation.separator.list.comma.css #e8d5d5 —
support.constant.color.w3c-standard-color-name.css #ffffff —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #fffdfa —
entity.name.type.module #fffdfa —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #ff0014 —
support.constant.json #ffffff —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #ff3c00 —
support.type.object.console #ff0014 —
support.variable.property.process #ffffff —
entity.name.function,support.function.console #008cff —
keyword.operator.misc.rust #e8d5d5 —
keyword.operator.sigil.rust #ff3c00 —
keyword.operator.delete #ff3c00 —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #ff0014 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #56b6c2 —
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 #ff3c00 —
punctuation.separator.delimiter #e8d5d5 —
punctuation.separator.c,punctuation.separator.cpp #ff3c00 —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #ff3c00 —
variable.parameter.function.language.python #ffffff —
support.type.python #56b6c2 —
keyword.operator.logical.python #ff3c00 —
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 #e8d5d5 —
meta.function-call.generic.python #008cff —
constant.character.format.placeholder.other.python #ffffff —
keyword.operator.assignment.compound #ff3c00 —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #fffdfa —
variable.language #fffdfa —
token.variable.parameter.java #e8d5d5 —
import.storage.java #fffdfa —
token.package.keyword #ff3c00 —
entity.name.function, meta.require, support.function.any-method, variable.function #008cff —
entity.name.type.namespace #fffdfa —
support.class, entity.name.type.class #fffdfa —
entity.name.class.identifier.namespace.type #fffdfa —
entity.name.class, variable.other.class.js, variable.other.class.ts #fffdfa —
variable.other.class.php #ff0014 —
control.elements, keyword.operator.less #ffffff —
keyword.other.special-method #008cff —
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 #ff3c00 —
token.storage.type.java #fffdfa —
support.type.property-name #e8d5d5 —
support.constant.property-value #e8d5d5 —
support.constant.font-name #ffffff —
entity.other.inherited-class #fffdfa —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #ffffff —
entity.other.attribute-name #ffffff —
entity.other.attribute-name.id #008cff bold strikethrough
entity.other.attribute-name.class.css #ffffff bold strikethrough
markup.heading punctuation.definition.heading, entity.name.section #008cff —
keyword.other.unit #ff0014 —
markup.bold,todo.bold #ffffff —
punctuation.definition.bold #fffdfa —
markup.italic, punctuation.definition.italic,todo.emphasis #ff3c00 —
entity.name.section.markdown #ff0014 —
punctuation.definition.heading.markdown #ff0014 —
punctuation.definition.list.begin.markdown #ff0014 —
markup.heading.setext #e8d5d5 —
punctuation.definition.bold.markdown #ffffff —
markup.inline.raw.markdown #fff116 —
markup.inline.raw.string.markdown #fff116 —
punctuation.definition.list.markdown #ff0014 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ff0014 —
beginning.punctuation.definition.list.markdown #ff0014 —
punctuation.definition.metadata.markdown #ff0014 —
markup.underline.link.markdown,markup.underline.link.image.markdown #ff3c00 —
string.other.link.title.markdown,string.other.link.description.markdown #008cff —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #ff0014 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #ff3c00 —
invalid.illegal.bad-ampersand.html #e8d5d5 —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #ff0014 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #ff0014 —
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 #fff116 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #ff0014 —
support.type.property-name.json punctuation #ff0014 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #ff3c00 —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #ff3c00 —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #fffdfa —
keyword.operator.error-control.php #ff3c00 —
keyword.operator.type.php #ff3c00 —
punctuation.section.array.begin.php #e8d5d5 —
punctuation.section.array.end.php #e8d5d5 —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #fffdfa —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #008cff —
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 #e8d5d5 —
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 #008cff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #ff3c00 —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #ff3c00 —
meta.function.decorator.python #008cff —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #e8d5d5 —
function.parameter.ruby, function.parameter.cs #e8d5d5 —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #ffffff —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #fffdfa —
block.scope.end,block.scope.begin #e8d5d5 —
entity.name.variable.local.cs #ff0014 —
token.error-token #f44747 —
token.debug-token #ff3c00 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #ff3c00 —
meta.template.expression #e8d5d5 —
keyword.operator.module #ff3c00 —
support.type.type.flowtype #008cff —
support.type.primitive #fffdfa —
meta.property.object #ff0014 —
variable.parameter.function.js #ff0014 —
keyword.other.template.begin #fff116 —
keyword.other.template.end #fff116 —
keyword.other.substitution.begin #fff116 —
keyword.other.substitution.end #fff116 —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #fffdfa —
keyword.operator.arithmetic.go, keyword.operator.address.go #ff3c00 —
entity.name.package.go #fffdfa —
support.type.prelude.elm #56b6c2 —
support.constant.elm #ffffff —
punctuation.quasi.element #ff3c00 —
constant.character.entity #ff0014 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #fffdfa —
meta.symbol.clojure #ff0014 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #ff0014 —
meta.scope.prerequisites.makefile #ff0014 —
storage.modifier.import.groovy #fffdfa —
meta.method.groovy #008cff —
meta.definition.variable.name.groovy #ff0014 —
meta.definition.class.inherited.classes.groovy #fff116 —
support.variable.semantic.hlsl #fffdfa —
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 #ff3c00 —
text.variable, text.bracketed #ff0014 —
support.type.swift, support.type.vb.asp #fffdfa —
entity.name.function.xi #fffdfa —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #ff0014 —
constant.regexp.xi #ff3c00 —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #fff116 —
beginning.punctuation.definition.list.markdown.xi #059d32 —
constant.character.xi #008cff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #059d32 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #fffdfa —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff0014 —
meta.brace.square #e8d5d5 —
comment, punctuation.definition.comment #059d32 italic
markup.quote.markdown #059d32 —
punctuation.definition.block.sequence.item.yaml #e8d5d5 —
constant.language.symbol.elixir #56b6c2 —
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 } !` ;
}
Obito Akatsuki Theme | Coding Theme