Skip to main content
Home Theme VS Code Oceanish Blue Theme Just a simple weird oceanish blue color theme, was made for learning purpose.
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 #000b26f7 activityBar.border #ffffff00 activityBar.foreground #8b97fff7 activityBar.inactiveForeground #a39bff66 activityBarBadge.background #5d6efff7 activityBarBadge.foreground #ffffff 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 #b1c5ff — variable.other.generic-type.haskell #7b83ff — storage.type.haskell #4977e2 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Oceanish Blue Theme — oceanish-blue
badge.background #4d4d4d
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #1c80d7
breadcrumb.background #000a21f7
breadcrumb.focusForeground #1c80d7
breadcrumb.foreground #7497e8f7
button.background #001956f7
button.foreground #ffffff
button.hoverBackground #052a82
button.secondaryBackground #001634
button.secondaryForeground #a8b3c9
button.secondaryHoverBackground #052a82
checkbox.background #001649
checkbox.border #00000000
checkbox.foreground #cccccc
debugExceptionWidget.background #333333
debugExceptionWidget.border #474747
debugToolBar.background #333333
debugToolBar.border #474747
diffEditor.border #444444
diffEditor.insertedTextBackground #9bb95510
diffEditor.removedTextBackground #c9333318
dropdown.background #001649
dropdown.border #00000000
dropdown.foreground #cccccc
editor.background #000717f7
editor.findMatchBackground #001e3d
editor.findMatchBorder #001e3d
editor.findMatchHighlightBackground #1400a155
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #3a3d4166
editor.findRangeHighlightBorder #ffffff00
editor.foldBackground #264f784d
editor.foreground #a6deff
editor.hoverHighlightBackground #264f7840
editor.inactiveSelectionBackground #000f24
editor.lineHighlightBackground #ffffff0A
editor.lineHighlightBorder #ffffff00
editor.rangeHighlightBackground #ffffff0b
editor.rangeHighlightBorder #ffffff00
editor.selectionBackground #001e3d
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #001e3d
editor.wordHighlightBackground #575757b8
editor.wordHighlightStrongBackground #004972b8
editorBracketMatch.background #000b64
editorBracketMatch.border #000b64
editorCodeLens.foreground #346aa3
editorCursor.background #000000
editorCursor.foreground #aeafad
editorError.background #B73A3400
editorError.border #ffffff00
editorError.foreground #f48771
editorGroup.border #444444
editorGroup.emptyBackground #000717f7
editorGroupHeader.border #ffffff00
editorGroupHeader.tabsBackground #000e2ef7
editorGroupHeader.tabsBorder #ffffff00
editorGutter.addedBackground #587c0c
editorGutter.background #000717f7
editorGutter.commentRangeForeground #c5c5c5
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #c5c5c5
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #000d2cf7
editorHoverWidget.border #ffffff00
editorHoverWidget.foreground #a6b4ff
editorIndentGuide.activeBackground #1b2947f7
editorIndentGuide.background #182747
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #75beff
editorLineNumber.activeForeground #7d7fff
editorLineNumber.foreground #2d3e64
editorLink.activeForeground #50aaf5
editorMarkerNavigation.background #00133ff7
editorMarkerNavigationError.background #6b2214af
editorMarkerNavigationInfo.background #75beff7a
editorMarkerNavigationWarning.background #be9c006c
editorOverviewRuler.background #25252500
editorOverviewRuler.border #7f7f7f4d
editorRuler.foreground #5a5a5a
editorSuggestWidget.background #000d2cf7
editorSuggestWidget.border #ffffff00
editorSuggestWidget.foreground #a6b4ff
editorSuggestWidget.highlightForeground #4d8aff
editorSuggestWidget.selectedBackground #000b49
editorWarning.background #A9904000
editorWarning.border #ffffff00
editorWarning.foreground #cca700
editorWhitespace.foreground #e3e4e229
editorWidget.background #000b26f7
editorWidget.foreground #cccccc
editorWidget.resizeBorder #5F5F5F
focusBorder #007fd4
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 #001649
input.border #00000000
input.foreground #cccccc
input.placeholderForeground #a6a6a6
inputOption.activeBackground #007fd466
inputOption.activeBorder #007acc00
inputOption.activeForeground #ffffff
list.activeSelectionBackground #094771
list.activeSelectionForeground #c0c4ff
list.dropBackground #383b3d
list.focusBackground #062f4a
list.focusForeground #cccccc
list.highlightForeground #0097fb
list.hoverBackground #646eff12
list.hoverForeground #7b83ff
list.inactiveSelectionBackground #13185c
list.inactiveSelectionForeground #d1d3fd
listFilterWidget.background #7b83ff30
listFilterWidget.noMatchesOutline #ffffff00
listFilterWidget.outline #ffffff00
menu.background #252526
menu.border #00000085
menu.foreground #cccccc
menu.selectionBackground #094771
menu.selectionBorder #00000000
menu.selectionForeground #ffffff
menu.separatorBackground #bbbbbb
menubar.selectionBackground #ffffff1a
menubar.selectionForeground #cccccc
merge.commonContentBackground #212121
merge.commonHeaderBackground #383838
merge.currentContentBackground #27403B
merge.currentHeaderBackground #367366
merge.incomingContentBackground #28384B
merge.incomingHeaderBackground #395F8F
minimap.background #000717f7
minimap.errorHighlight #f48771
minimap.findMatchHighlight #001e3d
minimap.selectionHighlight #001e3d
minimap.warningHighlight #cca700
minimapGutter.addedBackground #587c0c
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #ffffff00
notificationCenterHeader.background #000b26f7
notificationCenterHeader.foreground #cccccc
notifications.background #000f32f7
notifications.border #01010f
notifications.foreground #cccccc
notificationsErrorIcon.foreground #f48771
notificationsInfoIcon.foreground #75beff
notificationsWarningIcon.foreground #cca700
notificationToast.border #ffffff00
panel.background #000b26f7
panel.border #ffffff00
panelSection.border #80808059
panelTitle.activeBorder #e7e7e7
panelTitle.activeForeground #e7e7e7
panelTitle.inactiveForeground #e7e7e799
peekView.border #007acc
peekViewEditor.background #00072e
peekViewEditor.matchHighlightBackground #04007399
peekViewEditor.matchHighlightBorder #00072e
peekViewEditorGutter.background #00072e
peekViewResult.background #000521
peekViewResult.fileForeground #ffffff
peekViewResult.lineForeground #bbbbbb
peekViewResult.matchHighlightBackground #ea5c004d
peekViewResult.selectionBackground #3399ff33
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #00072e
peekViewTitleDescription.foreground #ccccccb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #3f3f46
pickerGroup.foreground #3794ff
progressBar.background #0e70c0
scrollbar.shadow #000000
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #79797966
scrollbarSlider.hoverBackground #646464b3
selection.background #256aa7
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #000e2ef7
sideBar.border #ffffff00
sideBar.dropBackground #383b3d
sideBar.foreground #7b83ff
sideBarSectionHeader.background #7b83ff14
sideBarSectionHeader.border #ffffff00
sideBarSectionHeader.foreground #7b83ff
sideBarTitle.foreground #bbbbbb
statusBar.background #000b26f7
statusBar.debuggingBackground #cc6633
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 #00174bf7
tab.activeBorder #00000000
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #ffffff00
tab.hoverBackground #001443f7
tab.hoverBorder #ffffff00
tab.hoverForeground #92a4d9
tab.inactiveBackground #000e2ef7
tab.inactiveForeground #6a85c0f7
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 #cccccc
terminal.selectionBackground #ffffff40
terminalCursor.background #002171f7
terminalCursor.foreground #ffffff
textLink.foreground #3794ff
titleBar.activeBackground #000b26f7
titleBar.activeForeground #cccccc
titleBar.border #00000000
titleBar.inactiveBackground #3c3c3c99
titleBar.inactiveForeground #cccccc99
tree.indentGuidesStroke #7b83ff2c
walkThrough.embeddedEditorBackground #00000050
widget.shadow #0000005c #b1c5ff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #a6deff —
variable.parameter.function.language.special.self.python #48ddff —
storage.modifier.lifetime.rust #a6deff —
support.function.std.rust #1c8aff —
entity.name.lifetime.rust #48ddff —
variable.language.rust #b1c5ff —
support.constant.edge #7b83ff —
constant.other.character-class.regexp #b1c5ff —
keyword.operator.quantifier.regexp #4977e2 —
punctuation.definition.string.begin,punctuation.definition.string.end #2a97a3 —
variable.parameter.function #a6deff —
comment markup.link #44567d —
markup.changed.diff #48ddff —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #1c8aff —
markup.inserted.diff #2a97a3 —
markup.deleted.diff #b1c5ff —
meta.function.c,meta.function.cpp #b1c5ff —
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 #a6deff —
punctuation.separator.key-value #a6deff —
keyword.operator.expression.import #1c8aff —
support.constant.math #48ddff —
support.constant.property.math #4977e2 —
variable.other.constant #48ddff —
storage.type.annotation.java, storage.type.object.array.java #48ddff —
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 #a6deff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #48ddff —
keyword.operator.instanceof.java #7b83ff —
meta.definition.variable.name.java #b1c5ff —
keyword.operator.logical #7cb5ff —
keyword.operator.bitwise #7cb5ff —
keyword.operator.channel #7cb5ff —
support.constant.property-value.scss,support.constant.property-value.css #4977e2 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #7cb5ff —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #4977e2 —
punctuation.separator.list.comma.css #a6deff —
support.constant.color.w3c-standard-color-name.css #4977e2 —
support.type.vendored.property-name.css #7cb5ff —
support.module.node,support.type.object.module,support.module.node #48ddff —
entity.name.type.module #48ddff —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #b1c5ff —
support.constant.json #4977e2 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #7b83ff —
support.type.object.console #b1c5ff —
support.variable.property.process #4977e2 —
entity.name.function,support.function.console #1c8aff —
keyword.operator.misc.rust #a6deff —
keyword.operator.sigil.rust #7b83ff —
keyword.operator.delete #7b83ff —
support.type.object.dom #7cb5ff —
support.variable.dom,support.variable.property.dom #b1c5ff —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #7cb5ff —
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 #7b83ff —
punctuation.separator.delimiter #a6deff —
punctuation.separator.c,punctuation.separator.cpp #7b83ff —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #7cb5ff —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #7b83ff —
variable.parameter.function.language.python #4977e2 —
support.type.python #7cb5ff —
keyword.operator.logical.python #7b83ff —
variable.parameter.function.python #4977e2 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #a6deff —
meta.function-call.generic.python #1c8aff —
constant.character.format.placeholder.other.python #4977e2 —
keyword.operator.assignment.compound #7b83ff —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #7cb5ff —
entity.name.namespace #48ddff —
variable.language #48ddff —
token.variable.parameter.java #a6deff —
import.storage.java #48ddff —
token.package.keyword #7b83ff —
entity.name.function, meta.require, support.function.any-method, variable.function #1c8aff —
entity.name.type.namespace #48ddff —
support.class, entity.name.type.class #48ddff —
entity.name.class.identifier.namespace.type #48ddff —
entity.name.class, variable.other.class.js, variable.other.class.ts #48ddff —
variable.other.class.php #b1c5ff —
control.elements, keyword.operator.less #4977e2 —
keyword.other.special-method #1c8aff —
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 #7b83ff —
token.storage.type.java #48ddff —
support.type.property-name #a6deff —
support.constant.property-value #a6deff —
support.constant.font-name #4977e2 —
entity.other.inherited-class #48ddff —
constant.other.symbol #7cb5ff —
punctuation.definition.constant #4977e2 —
entity.other.attribute-name #4977e2 —
entity.other.attribute-name.id #1c8aff normal
entity.other.attribute-name.class.css #4977e2 normal
markup.heading punctuation.definition.heading, entity.name.section #1c8aff —
keyword.other.unit #b1c5ff —
markup.bold,todo.bold #4977e2 —
punctuation.definition.bold #48ddff —
markup.italic, punctuation.definition.italic,todo.emphasis #7b83ff —
entity.name.section.markdown #b1c5ff —
punctuation.definition.heading.markdown #b1c5ff —
punctuation.definition.list.begin.markdown #b1c5ff —
markup.heading.setext #a6deff —
punctuation.definition.bold.markdown #4977e2 —
markup.inline.raw.markdown #2a97a3 —
markup.inline.raw.string.markdown #2a97a3 —
punctuation.definition.list.markdown #b1c5ff —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #b1c5ff —
beginning.punctuation.definition.list.markdown #b1c5ff —
punctuation.definition.metadata.markdown #b1c5ff —
markup.underline.link.markdown,markup.underline.link.image.markdown #7b83ff —
string.other.link.title.markdown,string.other.link.description.markdown #1c8aff —
constant.character.escape #7cb5ff —
punctuation.section.embedded, variable.interpolation #b1c5ff —
punctuation.section.embedded.begin,punctuation.section.embedded.end #7b83ff —
invalid.illegal.bad-ampersand.html #a6deff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #b1c5ff —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #b1c5ff —
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 #2a97a3 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #7cb5ff —
support.type.property-name.json #b1c5ff —
support.type.property-name.json punctuation #b1c5ff —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #7b83ff —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #7b83ff —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #48ddff —
keyword.operator.error-control.php #7b83ff —
keyword.operator.type.php #7b83ff —
punctuation.section.array.begin.php #a6deff —
punctuation.section.array.end.php #a6deff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #48ddff —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #1c8aff —
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 #a6deff —
support.constant.core.rust #4977e2 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #4977e2 —
entity.name.goto-label.php,support.other.php #1c8aff —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #7cb5ff —
keyword.operator.regexp.php #7b83ff —
keyword.operator.comparison.php #7cb5ff —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #7b83ff —
meta.function.decorator.python #1c8aff —
support.token.decorator.python,meta.function.decorator.identifier.python #7cb5ff —
function.parameter #a6deff —
function.parameter.ruby, function.parameter.cs #a6deff —
constant.language.symbol.ruby #7cb5ff —
inline-color-decoration rgb-value #4977e2 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #48ddff —
block.scope.end,block.scope.begin #a6deff —
entity.name.variable.local.cs #b1c5ff —
token.error-token #f44747 —
token.debug-token #7b83ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #7b83ff —
meta.template.expression #a6deff —
keyword.operator.module #7b83ff —
support.type.type.flowtype #1c8aff —
support.type.primitive #48ddff —
meta.property.object #b1c5ff —
variable.parameter.function.js #b1c5ff —
keyword.other.template.begin #2a97a3 —
keyword.other.template.end #2a97a3 —
keyword.other.substitution.begin #2a97a3 —
keyword.other.substitution.end #2a97a3 —
keyword.operator.assignment #7cb5ff —
keyword.operator.assignment.go #48ddff —
keyword.operator.arithmetic.go, keyword.operator.address.go #7b83ff —
entity.name.package.go #48ddff —
support.type.prelude.elm #7cb5ff —
support.constant.elm #4977e2 —
punctuation.quasi.element #7b83ff —
constant.character.entity #b1c5ff —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #7cb5ff —
entity.global.clojure #48ddff —
meta.symbol.clojure #b1c5ff —
constant.keyword.clojure #7cb5ff —
meta.arguments.coffee, variable.parameter.function.coffee #b1c5ff —
meta.scope.prerequisites.makefile #b1c5ff —
storage.modifier.import.groovy #48ddff —
meta.method.groovy #1c8aff —
meta.definition.variable.name.groovy #b1c5ff —
meta.definition.class.inherited.classes.groovy #2a97a3 —
support.variable.semantic.hlsl #48ddff —
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 #7b83ff —
text.variable, text.bracketed #b1c5ff —
support.type.swift, support.type.vb.asp #48ddff —
entity.name.function.xi #48ddff —
entity.name.class.xi #7cb5ff —
constant.character.character-class.regexp.xi #b1c5ff —
constant.regexp.xi #7b83ff —
keyword.control.xi #7cb5ff —
beginning.punctuation.definition.quote.markdown.xi #2a97a3 —
beginning.punctuation.definition.list.markdown.xi #44567d —
constant.character.xi #1c8aff —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #44567d —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #48ddff —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #b1c5ff —
meta.brace.square #a6deff —
comment, punctuation.definition.comment #44567d italic
markup.quote.markdown #44567d —
punctuation.definition.block.sequence.item.yaml #a6deff —
constant.language.symbol.elixir #7cb5ff —
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 } !` ;
}
Oceanish Blue Theme | Coding Theme