Skip to main content
Home Theme VS Code GoLang Oceanic Theme GoLang Oceanic Color Theme for those who prefer who light theme
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 #52c1da26 activityBar.activeBorder #52c1da activityBar.background #e9ebed activityBar.border #c9ced2 activityBar.dropBorder #95abb033 activityBar.foreground #52c1da tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir, punctuation.tag.liquid support.class.liquid, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell punctuation.definition.variable.powershell, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell #DD7404 — entity.name.type #6B8D16 — comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
GoLang Oceanic Theme — GoLang Oceanic Theme
activityBar.inactiveForeground
#9fb0b6
activityBarBadge.background #52c1da
activityBarBadge.foreground #e9ebed
activityBarTop.activeBorder #52c1da
activityBarTop.dropBorder #95abb033
activityBarTop.foreground #52c1da
activityBarTop.inactiveForeground #afb8bb
badge.background #52c1da
badge.foreground #e9ebed
breadcrumb.background #f3f4f5
breadcrumbPicker.background #ffffff
button.background #52c1da75
button.border #52c1da75
button.foreground #1f3a41
button.hoverBackground #52c1da90
button.secondaryBackground #52c1da20
button.secondaryForeground #1f3a41
button.secondaryHoverBackground #52c1da35
charts.blue #0f8fe4
charts.foreground #1f3a41
charts.green #18ac31
charts.lines #1f3a41
charts.orange #dd7404
charts.purple #dd39bf
charts.red #df3c3c
charts.yellow #d49408
checkbox.foreground #1f3a41
commandCenter.activeBackground #f9f9fa60
commandCenter.activeForeground #00000090
commandCenter.background #f3f4f5
commandCenter.border #c9ced2
commandCenter.foreground #95abb0
contrastActiveBorder #00000000
contrastBorder #00000000
debugConsole.errorForeground #c13838
debugConsole.infoForeground #3398db
debugConsole.warningForeground #c9a022
debugExceptionWidget.background #f9f9fa
debugExceptionWidget.border #c9ced2
debugIcon.breakpointCurrentStackframeForeground #c13838
debugIcon.breakpointDisabledForeground #c1383880
debugIcon.breakpointForeground #c13838
debugIcon.continueForeground #3398db
debugIcon.disconnectForeground #c13838
debugIcon.pauseForeground #c13838
debugIcon.restartForeground #37ae6f
debugIcon.startForeground #37ae6f
debugIcon.stepBackForeground #3398db
debugIcon.stepIntoForeground #3398db
debugIcon.stepOutForeground #3398db
debugIcon.stepOverForeground #3398db
debugIcon.stopForeground #c13838
debugToolBar.background #e5eff2
descriptionForeground #1f3a414d
diffEditor.border #c9ced2
diffEditor.diagonalFill #ffffff
diffEditor.insertedLineBackground #37ae6f1a
diffEditor.insertedTextBackground #37ae6f26
diffEditor.insertedTextBorder #00000000
diffEditor.move.border #d494084d
diffEditor.moveActive.border #d49408b3
diffEditor.removedLineBackground #c138381a
diffEditor.removedTextBackground #c1383826
diffEditor.removedTextBorder #00000000
diffEditorGutter.insertedLineBackground #00000000
diffEditorGutter.removedLineBackground #00000000
diffEditorOverview.insertedForeground #37ae6f25
diffEditorOverview.removedForeground #c1383830
disabledForeground #1f3a414d
dropdown.background #edeff0
dropdown.border #d7dbde
dropdown.foreground #1f3a41
dropdown.listBackground #edeff0
editor.background #f3f4f5
editor.findMatchBackground #52c1da30
editor.findMatchBorder #52c1da60
editor.findMatchHighlightBackground #52c1da3d
editor.findMatchHighlightBorder #52c1da5c
editor.foldBackground #e9ebed
editor.foreground #1f3a41
editor.hoverHighlightBackground #52c1da4d
editor.inactiveSelectionBackground #52c1da4d
editor.lineHighlightBackground #52c1da0f
editor.lineHighlightBorder #52c1da26
editor.linkedEditingBackground #0092f333
editor.rangeHighlightBackground #52c1da3d
editor.selectionBackground #52c1da4d
editor.selectionForeground #1f3a41
editor.selectionHighlightBackground #52c1da15
editor.selectionHighlightBorder #52c1da4d
editor.wordHighlightBackground #52c1da26
editor.wordHighlightBorder #52c1da5c
editor.wordHighlightStrongBackground #52c1da4d
editorBracketHighlight.foreground1 #6095CA
editorBracketHighlight.foreground2 #dd39bf
editorBracketHighlight.foreground3 #0f8fe4
editorBracketHighlight.foreground4 #9244ec
editorBracketHighlight.foreground5 #00aaaa
editorBracketHighlight.foreground6 #ec4476
editorBracketHighlight.unexpectedBracket.foreground #c13838
editorBracketMatch.background #52c1da4d
editorBracketMatch.border #52c1da73
editorCodeLens.foreground #00000080
editorCursor.background #52c1da
editorCursor.foreground #d49408
editorError.border #00000000
editorError.foreground #c13838
editorGhostText.border #00000000
editorGhostText.foreground #1f3a4170
editorGroup.border #c9ced2
editorGroup.dropBackground #52c1da15
editorGroupHeader.border #00000000
editorGroupHeader.noTabsBackground #f3f4f5
editorGroupHeader.tabsBackground #e9ebed
editorGroupHeader.tabsBorder #c9ced2
editorGutter.addedBackground #37ae6fcc
editorGutter.background #f3f4f5
editorGutter.commentRangeForeground #f9f9fa
editorGutter.deletedBackground #c13838cc
editorGutter.modifiedBackground #3398dbcc
editorHoverWidget.background #f9f9fa
editorHoverWidget.border #c9ced2
editorIndentGuide.activeBackground1 #95abb0cc
editorIndentGuide.background1 #95abb033
editorInfo.border #00000000
editorInlayHint.background #00000020
editorInlayHint.foreground #00000090
editorInlayHint.typeBackground #9244ec30
editorInlayHint.typeForeground #9244ecaa
editorLineNumber.activeForeground #3c4247
editorLineNumber.foreground #b7c3c8
editorLink.activeForeground #1f3a41
editorMarkerNavigation.background #e9ebed
editorMarkerNavigationError.background #c1383890
editorMarkerNavigationInfo.background #3398db90
editorMarkerNavigationWarning.background #c9a02290
editorOverviewRuler.addedForeground #37ae6f80
editorOverviewRuler.border #c9ced2
editorOverviewRuler.deletedForeground #c1383880
editorOverviewRuler.errorForeground #c13838
editorOverviewRuler.incomingContentForeground #37ae6f80
editorOverviewRuler.infoForeground #3398db80
editorOverviewRuler.modifiedForeground #3398db80
editorOverviewRuler.selectionHighlightForeground #52c1da80
editorOverviewRuler.warningForeground #c9a022
editorRuler.foreground #95abb033
editorStickyScroll.border #c9ced2
editorStickyScroll.shadow #eeeff1
editorStickyScrollHover.background #fbfcfc
editorSuggestWidget.background #f9f9fa
editorSuggestWidget.border #c9ced2
editorSuggestWidget.foreground #000000
editorSuggestWidget.highlightForeground #d49408
editorSuggestWidget.selectedBackground #e5e7e9
editorSuggestWidget.selectedIconForeground #1f3a41
editorUnnecessaryCode.border #00000000
editorUnnecessaryCode.opacity #000000aa
editorWarning.border #00000000
editorWarning.foreground #d49408
editorWhitespace.foreground #95abb060
editorWidget.background #f9f9fa
editorWidget.border #d7dbde
editorWidget.resizeBorder #52c1da50
errorForeground #c13838
extensionButton.background #52c1da60
extensionButton.foreground #1f3a41
extensionButton.hoverBackground #52c1da90
extensionButton.prominentBackground #52c1da9d
extensionButton.prominentForeground #1f3a41
extensionButton.prominentHoverBackground #52c1da
focusBorder #bbc1c7
foreground #000000
gitDecoration.conflictingResourceForeground #52c1da
gitDecoration.deletedResourceForeground #c13838
gitDecoration.ignoredResourceForeground #95abb0
gitDecoration.modifiedResourceForeground #3398db
gitDecoration.untrackedResourceForeground #37ae6f
icon.foreground #000000aa
inlineChat.background #ffffff
inlineChat.border #d7dbde
inlineChatInput.background #f9f9fa
inlineChatInput.border #d7dbde
inlineChatInput.focusBorder #bbc1c7
input.background #edeff0
input.border #d7dbde
input.foreground #1f3a41
input.placeholderForeground #a0a8af
inputOption.activeBackground #a0a8af
inputOption.activeBorder #00000000
inputOption.activeForeground #1f3a41
inputOption.hoverBackground #d7dbde
inputValidation.errorBackground #f9f9fa
inputValidation.errorBorder #d49408
inputValidation.infoBackground #f9f9fa
inputValidation.infoBorder #52c1da
inputValidation.warningBackground #f9f9fa
inputValidation.warningBorder #d49408
keybindingLabel.background #f9f9fa
keybindingLabel.border #95abb0
keybindingLabel.bottomBorder #95abb0
keybindingLabel.foreground #000000
list.activeSelectionBackground #95abb033
list.activeSelectionForeground #1f3a41
list.dropBackground #52c1da15
list.errorForeground #c13838
list.focusBackground #52c1da40
list.focusForeground #000000
list.highlightForeground #d49408
list.hoverBackground #95abb00d
list.hoverForeground #000000
list.inactiveSelectionBackground #95abb01f
list.inactiveSelectionForeground #1f3a41
list.warningForeground #c9a022
menu.background #f9f9fa
menu.border #c9ced2
menu.foreground #000000
menu.selectionForeground #000000
menu.separatorBackground #c9ced265
menubar.selectionBackground #f9f9fa
menubar.selectionForeground #000000
merge.border #c9ced2
merge.commonContentBackground #d4940830
merge.commonHeaderBackground #d4940880
merge.currentContentBackground #37ae6f30
merge.currentHeaderBackground #37ae6f80
merge.incomingContentBackground #3398db30
merge.incomingHeaderBackground #3398db80
minimap.background #f3f4f5
minimap.errorHighlight #c13838
minimap.findMatchHighlight #52c1da
minimap.selectionHighlight #52c1da
minimap.selectionOccurrenceHighlight #52c1da
minimap.warningHighlight #c9a022
minimapGutter.addedBackground #37ae6f
minimapGutter.deletedBackground #c13838
minimapGutter.modifiedBackground #3398db
notificationCenterHeader.background #f9f9fa
notificationCenterHeader.foreground #1f3a41
notificationLink.foreground #d49408
notifications.background #f9f9fa
notifications.border #c9ced2
notifications.foreground #000000
notificationsErrorIcon.foreground #df3c3c
notificationsInfoIcon.foreground #0f8fe4
notificationsWarningIcon.foreground #dd7404
panel.background #eeeff1
panel.border #c9ced2
panel.dropBorder #95abb080
panelInput.border #d7dbde
panelSection.border #c9ced2
panelSectionHeader.background #e0e2e5
panelSectionHeader.border #c9ced2
panelSectionHeader.foreground #1f3a41
panelTitle.activeBorder #52c1da
panelTitle.activeForeground #52c1da
panelTitle.inactiveForeground #95abb0
peekView.border #c9ced2
peekViewEditor.background #fefefe
peekViewEditor.matchHighlightBackground #f9f9fa40
peekViewEditor.matchHighlightBorder #00000000
peekViewEditorGutter.background #fefefe
peekViewEditorStickyScroll.background #fbfcfc
peekViewResult.background #fafafb
peekViewResult.fileForeground #1f3a41
peekViewResult.lineForeground #000000
peekViewResult.matchHighlightBackground #52c1da80
peekViewResult.selectionBackground #52c1da33
peekViewResult.selectionForeground #1f3a41
peekViewTitle.background #ffffff
peekViewTitleDescription.foreground #1f3a41
peekViewTitleLabel.foreground #1f3a41
pickerGroup.border #c9ced2
pickerGroup.foreground #1f3a41
profileBadge.background #52c1da
profileBadge.foreground #f3f4f5
progressBar.background #d49408
quickInput.background #fbfcfc
quickInput.foreground #000000
quickInputList.focusBackground #95abb033
quickInputList.focusForeground #000000
quickInputList.focusIconForeground #95abb0
quickInputTitle.background #e9ebed
sash.hoverBorder #52c1da50
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #52c1da40
scrollbarSlider.background #52c1da20
scrollbarSlider.hoverBackground #52c1da30
selection.background #52c1da60
settings.headerForeground #52c1da
settings.modifiedItemIndicator #52c1da
sideBar.background #e9ebed
sideBar.border #c9ced2
sideBar.foreground #000000cc
sideBarSectionHeader.background #e9ebed
sideBarSectionHeader.border #c9ced2
sideBarSectionHeader.foreground #1f3a41
sideBarTitle.foreground #95abb0
statusBar.background #f3f4f5
statusBar.border #c9ced2
statusBar.debuggingBackground #d7eaf0
statusBar.debuggingForeground #245966
statusBar.foreground #00000080
statusBar.noFolderBackground #e9ebed
statusBar.noFolderBorder #c9ced2
statusBar.noFolderForeground #000000cc
statusBarItem.activeBackground #f9f9fa
statusBarItem.errorBackground #c13838
statusBarItem.errorForeground #000000
statusBarItem.errorHoverBackground #ca4848
statusBarItem.errorHoverForeground #f3f4f5
statusBarItem.hoverBackground #bae0ea
statusBarItem.hoverForeground #1f3a41
statusBarItem.offlineBackground #dd39bf
statusBarItem.offlineForeground #140311
statusBarItem.offlineHoverBackground #e14fc6
statusBarItem.prominentBackground #d7dbde
statusBarItem.prominentForeground #1f3a41
statusBarItem.prominentHoverBackground #bbc1c7
statusBarItem.remoteBackground #00aaaa
statusBarItem.remoteForeground #000000
statusBarItem.remoteHoverBackground #00c3c3
statusBarItem.remoteHoverForeground #f3f4f5
statusBarItem.warningBackground #c9a022
statusBarItem.warningForeground #000000
statusBarItem.warningHoverBackground #dbaf2a
statusBarItem.warningHoverForeground #f3f4f5
tab.activeBackground #f3f4f5
tab.activeBorder #f3f4f5
tab.activeBorderTop #52c1da
tab.activeForeground #52c1da
tab.border #c9ced2
tab.hoverBackground #f3f4f5
tab.inactiveBackground #e9ebed
tab.inactiveForeground #95abb0
tab.lastPinnedBorder #c9ced2
tab.unfocusedActiveBorder #f3f4f5
tab.unfocusedActiveForeground #52c1da
tab.unfocusedHoverBackground #f3f4f5
tab.unfocusedInactiveForeground #95abb0
terminal.ansiBlack #f3f4f5
terminal.ansiBlue #3398db
terminal.ansiBrightBlack #1f3a4166
terminal.ansiBrightBlue #0f9fff
terminal.ansiBrightCyan #00aaaa
terminal.ansiBrightGreen #15d06d
terminal.ansiBrightMagenta #ff17d5
terminal.ansiBrightRed #e61313
terminal.ansiBrightWhite #407886
terminal.ansiBrightYellow #dc9700
terminal.ansiCyan #00aaaa
terminal.ansiGreen #37ae6f
terminal.ansiMagenta #dd39bf
terminal.ansiRed #c13838
terminal.ansiWhite #1f3a41
terminal.ansiYellow #d49408
terminal.background #eeeff1
terminal.foreground #1f3a41
terminal.selectionForeground #1f3a41
terminalCursor.background #f3f4f5
terminalCursor.foreground #d49408
terminalStickyScrollHover.background #fbfcfc
textBlockQuote.background #3398db34
textBlockQuote.border #3398dbb9
textCodeBlock.background #3398db34
textLink.activeForeground #3398db
textLink.foreground #3398db
textPreformat.background #eac389
textPreformat.foreground #412d02
textSeparator.foreground #52c1da
titleBar.activeBackground #e9ebed
titleBar.activeForeground #95abb0
titleBar.border #c9ced2
titleBar.inactiveBackground #c9ced2
titleBar.inactiveForeground #95abb0
toolbar.hoverBackground #95abb060
tree.indentGuidesStroke #95abb070
walkThrough.embeddedEditorBackground #f3f4f5
welcomePage.progress.background #f9f9fa
welcomePage.progress.foreground #52c1da
welcomePage.tileBackground #00000010
welcomePage.tileBorder #00000020
welcomePage.tileHoverBackground #00000020
widget.shadow #c9ced230 #183E4859
constant, support.constant.core.php #DF3C3C —
meta.section.struct.go variable.other.field.go, meta.section.struct.go variable.other.declaration.go, source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative, source.graphql meta.selections variable.other.alias.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql variable.graphql, source.graphql variable.arguments.graphql, JSXNested #00569B —
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter #DD39BF —
keyword.control.export, support.type.object.module #D49408 —
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, punctuation.output.liquid support.variable.liquid, meta.function.echo.edge source.js keyword.operator.error-control.js, entity.name.type.variant.gdscript, entity.name.function.powershell #0F8FE4 —
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include, keyword.other.import.java #D49408 —
keyword.package.go, keyword.operator.pointer.go, keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.new, keyword.other.phpdoc, keyword.other.use.php, keyword.operator.logical.python, keyword.other.import.static.groovy, keyword.other.import.groovy, punctuation.definition.attribute.swift, source.svelte meta.scope.tag.main.svelte meta.tag.start.svelte variable.function.svelte, meta.directive.on.svelte entity.name.type.svelte, keyword.other.special-method.elixir, keyword.edge, entity.name.function.edge, support.constant.edge, keyword.other.gdscript, keyword.other.onready.gdscript, source.graphql meta.fragment.graphql keyword.on.graphql, source.graphql meta.type.interface.graphql keyword.implements.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql keyword.operator.nulltype.graphql, source.graphql meta.variables.graphql keyword.operator.nulltype.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql keyword.operator.nulltype.graphql, keyword.operator.class.php, keyword.operator.spread.php, keyword.operator.type.php, keyword.operator.increment-decrement.php, keyword.operator.increment-increment.php, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.operator.string.php, keyword.operator.ternary.php, keyword.operator.variadic.php, keyword.operator.nullable-type.php, keyword.other.use-as.php, keyword.import.go, keyword.operator.address.go, keyword.operator.null-coalescing, keyword.operator.arrow, keyword.struct.go, keyword.operator.liquid, keyword.operator.optional.ts, keyword.cmake, keyword.codetag.notation #FC694D —
meta.object-literal.key, variable.object.property #1F3A41 —
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml #D49408 —
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua, keyword.operator.assignment, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math #D49408 —
punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, keyword.operator.assignment.tsx, meta.definition.method.signature.java, meta.class.body.groovy, meta.definition.method.groovy meta.method.body.java meta.declaration.assertion.groovy, punctuation.definition.list.begin.erlang, meta.expression.parenthesized, meta.definition.function.swift meta.parameter-clause.swift, source.swift meta.function-call.swift, punctuation.section.embedded.end.swift source.swift, source.lua, meta.function.lua, punctuation.definition.keyword.svelte, source.svelte meta.scope.tag.SpeakerPicture.svelte meta.tag.start.svelte entity.other.attribute-name.svelte, expression.embbeded.vue punctuation.definition.tag.begin.html.vue, expression.embbeded.vue punctuation.definition.tag.end.html.vue, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql meta.brace.square.graphql, punctuation.output.liquid, text.html.liquid meta.tag.liquid punctuation.definition.tag.end.liquid, JSXAttrs keyword.operator.assignment.jsx, meta.tag.attributes.js keyword.operator.assignment.js #1F3A4160 —
entity.name.package.go, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php, meta.class.body.php storage.type.php, variable.parameter.function.swift entity.name.function.swift, variable.other.jsdoc, support.variable.drive.powershell #DD7404 —
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type, entity.name.type.class.java, support.class.php, entity.other.inherited-class.php, entity.name.type.class.groovy, storage.type.rust, entity.name.type.class.swift, source.svelte meta.script.svelte source.ts entity.name.label.ts, meta.directive.on.svelte keyword.control.svelte, storage.type.const.gdscript, storage.type.var.gdscript, source.graphql declaration.meta.type keyword, source.graphql meta.type.interface.graphql keyword.type.graphql, source.graphql keyword.schema.graphql, source.graphql keyword.operation.graphql, source.graphql meta.enum.graphql keyword.enum.graphql, source.graphql meta.fragment.graphql keyword.fragment.graphql, storage.type.trait.php, keyword.type.go, keyword.var.go, storage.type.powershell, keyword.const.go, keyword.storage.modifier #FC7295 —
string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end.html source.js-ignored-vscode, punctuation.definition.string.end.html source.js, punctuation.definition.string.end.html.vue, punctuation.definition.string.end.html source.ts, punctuation.definition.string.end.html source.tsx, punctuation.definition.string.end.html source.js.jsx, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url, constant.other.symbol.quoted.single.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.begin.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.end.erlang, meta.import.ts punctuation.definition.variable.svelte, punctuation.definition.string.end.html source.css-ignored-vscode, text.html.edge punctuation.definition.variable.js, string.unquoted.plain.out.yaml, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, punctuation.definition.string.end.html source.css, string.quoted.double.html source.css #1c9d89 —
string.quoted.docstring.multi.python, string.quoted.double.block.python punctuation.definition.string.end.python, string.quoted.double.block.python punctuation.definition.string.begin.python, string.quoted.double.block.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python #18AC3160 —
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, meta.definition.type.body.swift meta.function-call.swift, meta.definition.type.class.swift meta.inheritance-clause.swift, variable.other.constant.elixir, source.graphql declaration.meta.type support, source.graphql meta.selections, source.graphql meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql, source.graphql meta.fragment.graphql entity.name.fragment.graphql, entity.name.type.class.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php, meta.group.simple.subexpression.powershell meta.scriptblock.powershell storage.type.powershell #9567A6 —
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake #4E89A7 —
source.elm constant.type-constructor #EC4476 —
source.elm storage.type #9244EC —
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html #9244EC —
source.diff meta.diff.header.to-file, source.diff markup.inserted.diff, source.diff punctuation.definition.to-file.diff, source.diff punctuation.definition.inserted.diff #18AC31 —
source.diff punctuation.definition.from-file.diff, source.diff meta.diff.header.from-file, source.diff markup.deleted.diff, source.diff punctuation.definition.deleted.diff #DF3C3C —
source.diff meta.diff.header.command #0F8FE4 —
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified #DD7404 —
support.variable.liquid, support.class.liquid #EC4476 —
text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte #0F8FE4 —
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html #0F8FE4AA —
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php #D49408 —
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown #9244EC —
fenced_code.block.language #9244EC —
punctuation.definition.list.begin #0F8FE4 —
punctuation.definition.list.begin #0F8FE4 —
entity.name.section, markup.heading.setext #D49408 —
punctuation.definition.heading #D49408 —
markup.underline.link, markup.underline.link.image #0F8FE4 —
markup.bold, punctuation.definition.bold #EC4476 bold
markup.strikethrough, punctuation.definition.strikethrough #DF3C3C —
markup.italic, punctuation.definition.italic #DD7404 italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin #DD39BF —
punctuation.definition.quote.begin #0F8FE4 —
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out #95ABB0 italic
entity.other.attribute-name.pseudo-class #DD39BF —
entity.other.attribute-name.pseudo-element #DD39BF —
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity #00AAAA —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity #00AAAA —
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css #1F3A41 —
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity #9244EC —
entity.name.tag.reference, meta.property-list #DD7404 —
keyword.other.unit #DD7404 —
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html #DD7404 —
entity.name.tag.css, meta.property-list.scss entity.name.tag.css #0F8FE4 —
token.error-token #CD3131 —
token.debug-token #800080 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
main*
Button.tsx
fetchUser
31
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
GoLang Oceanic Theme | Coding Theme