Skip to main content
Home Theme VS Code One EyeCare Theme (OneDark) A dark theme for Visual Studio Code inspired by the Atom One Dark theme. This theme is designed to be easy on the eyes and focuses on the syntax highlighting of the code. This theme will help you to focus on the code and reduce the 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.background #1E2227 activityBar.foreground #d7dae0 activityBarBadge.background #4d78cc activityBarBadge.foreground #e6e6e6 badge.background #21252C button.background #404754 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded #ABB2BF — 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 #D46870 — variable.other.generic-type.haskell #B469CA — storage.type.haskell #C18A57
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
One EyeCare Theme (OneDark) — One Eye Care - Extreme Eye Care
button.secondaryBackground
#30333d
button.secondaryForeground #c0bdbd
checkbox.border #404754
debugToolBar.background #1e2227
descriptionForeground #abb2bf
diffEditor.insertedTextBackground #00809b33
dropdown.background #1e2227
dropdown.border #1e2227
editor.background #21252C
editor.findMatchBackground #42557b25
editor.findMatchBorder #457dff80
editor.findMatchHighlightBackground #6199ff30
editor.foreground #abb2bf
editor.lineHighlightBackground #2c313cbb
editor.selectionBackground #67769650
editor.selectionHighlightBackground #e6e6e610
editor.selectionHighlightBorder #dddddd40
editor.wordHighlightBackground #d2e0ff15
editor.wordHighlightBorder #7f848e50
editor.wordHighlightStrongBackground #abb2bf20
editor.wordHighlightStrongBorder #7f848e50
editorBracketHighlight.foreground1 #d19a66
editorBracketHighlight.foreground2 #9186CC
editorBracketHighlight.foreground3 #56b6c2
editorBracketHighlight.unexpectedBracket.foreground #e6e6e6
editorBracketMatch.background #515a6b50
editorBracketMatch.border #515a6b90
editorCursor.background #e6e6e6c9
editorCursor.foreground #528bff
editorError.foreground #ee0000
editorGroup.background #181a1f
editorGroup.border #181a1f
editorGroupHeader.tabsBackground #1E2227
editorGutter.addedBackground #10986840
editorGutter.deletedBackground #9a353d60
editorGutter.modifiedBackground #948b6050
editorHoverWidget.background #1e2227
editorHoverWidget.border #181a1f
editorHoverWidget.highlightForeground #61afef
editorIndentGuide.activeBackground #c8c8c859
editorIndentGuide.background #3b4048
editorInlayHint.background #2c313c
editorInlayHint.foreground #abb2bf
editorLineNumber.activeForeground #6b717d
editorLineNumber.foreground #404754
editorMarkerNavigation.background #1e2227
editorOverviewRuler.addedBackground #10986840
editorOverviewRuler.deletedBackground #9a353d60
editorOverviewRuler.modifiedBackground #948b6050
editorRuler.foreground #abb2bf26
editorSuggestWidget.background #1E2227
editorSuggestWidget.border #1E2227
editorSuggestWidget.foreground #abb2bf
editorSuggestWidget.selectedBackground #2c313a
editorSuggestWidget.selectedForeground #d7dae0
editorWarning.foreground #d19a66
editorWhitespace.foreground #e6e6e615
editorWidget.background #1e2227
focusBorder #3e4452
gitDecoration.ignoredResourceForeground #636b78
input.background #1D1F23
input.foreground #abb2bf
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #323842
list.focusForeground #e6e6e6
list.highlightForeground #d7dae0
list.hoverBackground #2c313a
list.hoverForeground #abb2bf
list.inactiveSelectionBackground #323842
list.inactiveSelectionForeground #d7dae0
list.warningForeground #d19a66
menu.foreground #abb2bf
menu.separatorBackground #343a45
minimapGutter.addedBackground #10986840
minimapGutter.deletedBackground #9a353d60
minimapGutter.modifiedBackground #948b6050
panel.background #1e2227
panel.border #21252C
panelSectionHeader.background #1e2227
peekViewEditor.background #1D1F23
peekViewEditor.matchHighlightBackground #29244b
peekViewResult.background #22262b
scrollbar.shadow #111
scrollbarSlider.activeBackground #747d9150
scrollbarSlider.background #4e566650
scrollbarSlider.hoverBackground #5a637580
settings.focusedRowBackground #21252C
settings.headerForeground #e6e6e6
sideBar.background #1E2227
sideBar.foreground #abb2bf
sideBarSectionHeader.background #21252C
sideBarSectionHeader.foreground #abb2bf
statusBar.background #1E2227
statusBar.debuggingBackground #cc6633
statusBar.debuggingBorder #00000000
statusBar.debuggingForeground #e6e6e6
statusBar.focusBorder #3e4452
statusBar.foreground #9da5b4
statusBar.noFolderBackground #1E2227
statusBarItem.remoteBackground #4d78cc
statusBarItem.remoteForeground #e6e6e6
tab.activeBackground #21252C
tab.activeBorder #00000000
tab.activeBorderTop #abb2bf30
tab.activeForeground #abb2bf
tab.activeModifiedBorder #abb2bf50
tab.border #00000000
tab.hoverBackground #323842
tab.inactiveBackground #1E2227
tab.inactiveModifiedBorder #abb2bf50
tab.lastPinnedBorder #00000000
tab.unfocusedActiveModifiedBorder #abb2bf50
tab.unfocusedHoverBackground #323842
tab.unfocusedInactiveModifiedBorder #abb2bf50
terminal.ansiBlack #4A4F5A
terminal.ansiBlue #61AFEF
terminal.ansiBrightBlack #616A7B
terminal.ansiBrightBlue #93CFFF
terminal.ansiBrightCyan #82D2DC
terminal.ansiBrightGreen #C2DEAD
terminal.ansiBrightMagenta #E0A8F1
terminal.ansiBrightRed #FE808A
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #D1A47A
terminal.ansiCyan #56B6C2
terminal.ansiGreen #97C775
terminal.ansiMagenta #C678DD
terminal.ansiRed #EE5D69
terminal.ansiWhite #CCCCCC
terminal.ansiYellow #B68353
terminal.background #1e2227
terminal.border #3e4452
terminal.foreground #ABB2BF
terminal.selectionBackground #FFFF0060
textBlockQuote.background #2e3440
textBlockQuote.border #4b5362
textLink.foreground #61afef
textPreformat.foreground #d19a66
titleBar.activeBackground #1E2227
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #1e2227
titleBar.inactiveForeground #6b717d
tree.indentGuidesStroke #e6e6e61d
walkThrough.embeddedEditorBackground #2e3440
welcomePage.buttonHoverBackground #404754 support.variable.magic.python #D46870 —
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ABB2BF —
variable.parameter.function.language.special.self.python #D2AE6B —
variable.parameter.function.language.special.cls.python #D2AE6B —
storage.modifier.lifetime.rust #ABB2BF —
support.function.std.rust #589DD7 —
entity.name.lifetime.rust #D2AE6B —
variable.language.rust #D46870 —
support.constant.edge #B469CA —
constant.other.character-class.regexp #D46870 —
keyword.operator.word #B469CA —
keyword.operator.quantifier.regexp #C18A57 —
variable.parameter.function #ABB2BF —
comment markup.link #5C6370 —
markup.changed.diff #D2AE6B —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #589DD7 —
markup.inserted.diff #89AE6E —
markup.deleted.diff #D46870 —
meta.function.c,meta.function.cpp #D46870 —
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 #ABB2BF —
punctuation.separator.key-value #ABB2BF —
keyword.operator.expression.import #589DD7 —
support.constant.math #D2AE6B —
support.constant.property.math #C18A57 —
variable.other.constant #D2AE6B —
storage.type.annotation.java, storage.type.object.array.java #D2AE6B —
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 #ABB2BF —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #D2AE6B —
keyword.operator.instanceof.java #B469CA —
meta.definition.variable.name.java #D46870 —
keyword.operator.logical #43ACB9 —
keyword.operator.bitwise #43ACB9 —
keyword.operator.channel #43ACB9 —
support.constant.property-value.scss,support.constant.property-value.css #C18A57 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #43ACB9 —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #C18A57 —
punctuation.separator.list.comma.css #ABB2BF —
support.constant.color.w3c-standard-color-name.css #C18A57 —
support.type.vendored.property-name.css #43ACB9 —
support.module.node,support.type.object.module,support.module.node #D2AE6B —
entity.name.type.module #D2AE6B —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #D46870 —
support.constant.json #C18A57 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #B469CA —
support.type.object.console #D46870 —
support.variable.property.process #C18A57 —
entity.name.function,support.function.console #589DD7 —
keyword.operator.misc.rust #ABB2BF —
keyword.operator.sigil.rust #B469CA —
keyword.operator.delete #B469CA —
support.type.object.dom #43ACB9 —
support.variable.dom,support.variable.property.dom #D46870 —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #43ACB9 —
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 #B469CA —
punctuation.separator.delimiter #ABB2BF —
punctuation.separator.c,punctuation.separator.cpp #B469CA —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #43ACB9 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #B469CA —
variable.parameter.function.language.python #C18A57 —
support.type.python #43ACB9 —
keyword.operator.logical.python #B469CA —
variable.parameter.function.python #C18A57 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ABB2BF —
meta.function-call.generic.python #589DD7 —
constant.character.format.placeholder.other.python #C18A57 —
keyword.operator.assignment.compound #B469CA —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #43ACB9 —
entity.name.namespace #D2AE6B —
variable.language #D2AE6B —
token.variable.parameter.java #ABB2BF —
import.storage.java #D2AE6B —
token.package.keyword #B469CA —
entity.name.function, meta.require, support.function.any-method, variable.function #589DD7 —
entity.name.type.namespace #D2AE6B —
support.class,entity.name.type.class #D2AE6B —
entity.name.class.identifier.namespace.type #D2AE6B —
entity.name.class, variable.other.class.js, variable.other.class.ts #D2AE6B —
variable.other.class.php #D46870 —
control.elements,keyword.operator.less #C18A57 —
keyword.other.special-method #589DD7 —
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 #B469CA —
token.storage.type.java #D2AE6B —
support.type.property-name #ABB2BF —
support.constant.property-value #ABB2BF —
support.constant.font-name #C18A57 —
constant.other.symbol #43ACB9 —
punctuation.definition.constant #C18A57 —
entity.other.attribute-name #C18A57 —
markup.heading punctuation.definition.heading,entity.name.section #589DD7 —
keyword.other.unit #D46870 —
markup.bold,todo.bold #C18A57 —
punctuation.definition.bold #D2AE6B —
markup.italic,punctuation.definition.italic,todo.emphasis #B469CA —
entity.name.section.markdown #D46870 —
punctuation.definition.heading.markdown #D46870 —
punctuation.definition.list.begin.markdown #D2AE6B —
markup.heading.setext #ABB2BF —
punctuation.definition.bold.markdown #C18A57 —
markup.inline.raw.markdown #89AE6E —
markup.inline.raw.string.markdown #89AE6E —
punctuation.definition.raw.markdown #D2AE6B —
punctuation.definition.list.markdown #D2AE6B —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #D46870 —
beginning.punctuation.definition.list.markdown #D46870 —
punctuation.definition.metadata.markdown #D46870 —
markup.underline.link.markdown,markup.underline.link.image.markdown #B469CA —
string.other.link.title.markdown,string.other.link.description.markdown #589DD7 —
markup.raw.monospace.asciidoc #89AE6E —
punctuation.definition.asciidoc #D2AE6B —
markup.list.asciidoc #D2AE6B —
markup.link.asciidoc,markup.other.url.asciidoc #B469CA —
string.unquoted.asciidoc,markup.other.url.asciidoc #589DD7 —
punctuation.section.embedded,variable.interpolation #D46870 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #B469CA —
invalid.illegal.bad-ampersand.html #ABB2BF —
invalid.illegal.unrecognized-tag.html #D46870 —
invalid.deprecated #FFFFFF —
invalid.deprecated.entity.other.attribute-name.html #C18A57 —
invalid.unimplemented #FFFFFF —
source.json meta.structure.dictionary.json>string.quoted.json #D46870 —
source.json meta.structure.dictionary.json>string.quoted.json>punctuation.string #D46870 —
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 #89AE6E —
source.json meta.structure.dictionary.json>constant.language.json,source.json meta.structure.array.json>constant.language.json #43ACB9 —
support.type.property-name.json #D46870 —
support.type.property-name.json punctuation #D46870 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #B469CA —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #B469CA —
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php #D2AE6B —
keyword.operator.error-control.php #B469CA —
keyword.operator.type.php #B469CA —
punctuation.section.array.begin.php #ABB2BF —
punctuation.section.array.end.php #ABB2BF —
invalid.illegal.non-null-typehinted.php #F44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #D2AE6B —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #589DD7 —
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 #ABB2BF —
support.constant.core.rust #C18A57 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #C18A57 —
entity.name.goto-label.php,support.other.php #589DD7 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #43ACB9 —
keyword.operator.regexp.php #B469CA —
keyword.operator.comparison.php #43ACB9 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #B469CA —
meta.function.decorator.python #589DD7 —
support.token.decorator.python,meta.function.decorator.identifier.python #43ACB9 —
function.parameter #ABB2BF —
function.parameter.ruby,function.parameter.cs #ABB2BF —
constant.language.symbol.ruby #43ACB9 —
inline-color-decoration rgb-value #C18A57 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #D2AE6B —
block.scope.end,block.scope.begin #ABB2BF —
entity.name.variable.local.cs #D46870 —
token.error-token #F44747 —
token.debug-token #B469CA —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #B469CA —
meta.template.expression #ABB2BF —
keyword.operator.module #B469CA —
support.type.type.flowtype #589DD7 —
support.type.primitive #D2AE6B —
meta.property.object #D46870 —
variable.parameter.function.js #D46870 —
keyword.other.template.begin #89AE6E —
keyword.other.template.end #89AE6E —
keyword.other.substitution.begin #89AE6E —
keyword.other.substitution.end #89AE6E —
keyword.operator.assignment #43ACB9 —
keyword.operator.assignment.go #D2AE6B —
keyword.operator.arithmetic.go, keyword.operator.address.go #B469CA —
entity.name.package.go #D2AE6B —
support.type.prelude.elm #43ACB9 —
support.constant.elm #C18A57 —
punctuation.quasi.element #B469CA —
constant.character.entity #D46870 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #43ACB9 —
entity.global.clojure #D2AE6B —
meta.symbol.clojure #D46870 —
constant.keyword.clojure #43ACB9 —
meta.arguments.coffee, variable.parameter.function.coffee #D46870 —
meta.scope.prerequisites.makefile #D46870 —
storage.modifier.import.groovy #D2AE6B —
meta.method.groovy #589DD7 —
meta.definition.variable.name.groovy #D46870 —
meta.definition.class.inherited.classes.groovy #89AE6E —
support.variable.semantic.hlsl #D2AE6B —
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 #B469CA —
text.variable, text.bracketed #D46870 —
support.type.swift, support.type.vb.asp #D2AE6B —
entity.name.function.xi #D2AE6B —
entity.name.class.xi #43ACB9 —
constant.character.character-class.regexp.xi #D46870 —
constant.regexp.xi #B469CA —
keyword.control.xi #43ACB9 —
beginning.punctuation.definition.quote.markdown.xi #89AE6E —
beginning.punctuation.definition.list.markdown.xi #7F848E —
constant.character.xi #589DD7 —
constant.other.color.rgb-value.xi #FFFFFF —
punctuation.definition.tag.xi #5C6370 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #D2AE6B —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #D46870 —
meta.brace.square #ABB2BF —
markup.quote.markdown #5C6370 —
punctuation.definition.block.sequence.item.yaml #ABB2BF —
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir #43ACB9 —
entity.name.variable.parameter.cs #D2AE6B —
entity.name.variable.field.cs #D46870 —
markup.underline — underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #BE5046 —
support.other.namespace.php #ABB2BF —
variable.other.object #D2AE6B —
variable.other.constant.property #D46870 —
entity.other.inherited-class #D2AE6B —
variable.other.readwrite.c #D46870 —
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php #ABB2BF —
constant.numeric.decimal.asm.x86_64 #B469CA —
support.other.parenthesis.regexp #C18A57 —
constant.character.escape #43ACB9 —
entity.other.attribute-name.id, entity.other.attribute-name.class #589DD7 —
punctuation.definition.string #43ACB9 —
punctuation.definition.tag #989898 —
punctuation.definition.comment #5C6370 —
variable.language.this, variable.language.arguments #C18A57 —
keyword.control.at-rule.charset.css, keyword.control.at-rule.import.css, keyword.control.at-rule.font-face.css, keyword.control.at-rule.page.css, keyword.control.at-rule.media.css, keyword.operator.logical.only.media.css, keyword.operator.logical.and.media.css, support.constant.media.css, keyword.control.at-rule.counter-style.css, keyword.control.at-rule.document.css, keyword.control.at-rule.supports.css, keyword.control.at-rule.viewport.css, keyword.control.at-rule.font-feature-values.css, keyword.control.at-rule.styleset.css, keyword.control.at-rule.namespace.css, keyword.control.at-rule.css, keyword.control.at-rule.css, keyword.control.at-rule.keyframes.css, entity.other.keyframe-offset.css, entity.other.keyframe-offset.percentage.css, keyword.control.at-rule.charset.scss, keyword.control.content.scss, keyword.control.each.scss, keyword.control.operator, keyword.control.else.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.fontface.scss, keyword.control.for.scss, keyword.control.at-rule.forward.scss, keyword.control.at-rule.function.scss, keyword.control.if.scss, keyword.control.at-rule.import.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.keyframes.scss, keyword.operator.logical.scss, keyword.control.operator.css.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.namespace.scss, keyword.control.at-rule.page.scss, keyword.control.at-rule.at-root.scss, keyword.control.at-rule.supports.scss, keyword.control.at-rule.use.scss, keyword.control.return.scss, keyword.control.warn.scss, keyword.control.while.scss, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.from, keyword.control.as, keyword.control.flow, variable.language.super, storage.modifier #8E5F9E —
support.type.object.module — 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 } ! ` ;
}
One EyeCare Theme (OneDark) | Coding Theme