Skip to main content
Home Theme VS Code JA Colour Theme JA Colour Theme, that stands for 'just another Colour Theme', because - and let's be honest - there are a ton! But if you like simplicity and focus on what you're actually doing: Coding! Then this might be the right theme for you. In a simplistic B&W style combined with Vermillion Red, Sky Blue and
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 #26272A activityBar.activeBorder #e34234 activityBar.activeFocusBorder #e34234 activityBar.background #000000 activityBar.dropBorder #e34234 activityBar.foreground #e34234 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 #7fcf61 — variable.other.generic-type.haskell #5ab7d4df — storage.type.haskell #cf79ff — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
JA Colour Theme — JA Colour Theme
activityBar.inactiveForeground
#418da5
activityBarBadge.background #e34234
activityBarBadge.foreground #ffffff
badge.background #e34234
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #ffffff
breadcrumb.background #26272a
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #b6b6b6cc
button.background #26272a
button.foreground #ffffff
button.hoverBackground #e34234
button.secondaryBackground #26272a
button.secondaryForeground #ffffff
button.secondaryHoverBackground #000000
checkbox.background #313236
checkbox.border #5ab7d432
checkbox.foreground #ffffff
debugExceptionWidget.background #000000
debugExceptionWidget.border #00000000
debugToolBar.background #000000
debugToolBar.border #000000
diffEditor.border #ffffff40
diffEditor.insertedTextBackground #5ab7d433
diffEditor.insertedTextBorder #00000000
diffEditor.removedTextBackground #e3423433
diffEditor.removedTextBorder #00000000
dropdown.background #313236
dropdown.border #5ab7d432
dropdown.foreground #ffffff
editor.background #26272a
editor.findMatchBackground #00000078
editor.findMatchBorder #ffffff3a
editor.findMatchHighlightBackground #e3423480
editor.findMatchHighlightBorder #ffffff00
editor.findRangeHighlightBackground #5ab7d426
editor.findRangeHighlightBorder #5ab7d41e
editor.foldBackground #0000004e
editor.foreground #ffffff
editor.hoverHighlightBackground #00000070
editor.inactiveSelectionBackground #5ab7d426
editor.lineHighlightBackground #5ab7d426
editor.lineHighlightBorder #00000000
editor.rangeHighlightBackground #26272a
editor.rangeHighlightBorder #b4777700
editor.selectionBackground #e3423426
editor.selectionHighlightBackground #00000078
editor.selectionHighlightBorder #ffffff3a
editor.wordHighlightBackground #00000080
editor.wordHighlightBorder #ffffff
editor.wordHighlightStrongBackground #e3423400
editor.wordHighlightStrongBorder #ffffff
editorBracketMatch.background #000000
editorBracketMatch.border #ffffff
editorCodeLens.foreground #cbcbcb
editorCursor.background #000000
editorCursor.foreground #ffffff
editorError.background #08010100
editorError.border #00000000
editorError.foreground #e34234
editorGroup.border #ffffff40
editorGroup.emptyBackground #26272a
editorGroupHeader.border #00000000
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #5ab7d432
editorGutter.addedBackground #4dbf86
editorGutter.background #26272a
editorGutter.commentRangeForeground #cbcbcb
editorGutter.deletedBackground #e34234
editorGutter.foldingControlForeground #cbcbcb
editorGutter.modifiedBackground #5ab7d4
editorHoverWidget.background #000000
editorHoverWidget.border #000000
editorHoverWidget.foreground #ffffff
editorIndentGuide.activeBackground #5ab7d4ed
editorIndentGuide.background #000000
editorInfo.background #00000000
editorInfo.border #00000000
editorInfo.foreground #5ab7d4b9
editorLineNumber.activeForeground #5ab7d4
editorLineNumber.foreground #cbcbcb
editorLink.activeForeground #5ab7d4
editorMarkerNavigation.background #000000
editorMarkerNavigationError.background #e34234
editorMarkerNavigationInfo.background #5ab7d4
editorMarkerNavigationWarning.background #f9f871
editorOverviewRuler.background #00000000
editorOverviewRuler.border #06060600
editorRuler.foreground #7b7b7b
editorSuggestWidget.background #000000
editorSuggestWidget.border #000000
editorSuggestWidget.foreground #ffffff
editorSuggestWidget.highlightForeground #e34234
editorSuggestWidget.selectedBackground #5ab7d433
editorWarning.background #00000000
editorWarning.border #00000000
editorWarning.foreground #f9f871a9
editorWhitespace.foreground #ffffff29
editorWidget.background #000000
editorWidget.foreground #ffffffa7
editorWidget.resizeBorder #00000000
focusBorder #e34234
foreground #ffffff
gitDecoration.addedResourceForeground #4dbf86
gitDecoration.conflictingResourceForeground #59a2d3
gitDecoration.deletedResourceForeground #e34234
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #e34234
gitDecoration.stageModifiedResourceForeground #f9f871
gitDecoration.submoduleResourceForeground #5ab7d4
gitDecoration.untrackedResourceForeground #8572b4
icon.foreground #ffffff
input.background #313236
input.border #5ab7d432
input.foreground #ffffff
input.placeholderForeground #ffffff89
inputOption.activeBackground #e34234
inputOption.activeBorder #e34234
inputOption.activeForeground #ffffff
list.activeSelectionBackground #e34234
list.activeSelectionForeground #ffffff
list.dropBackground #5ab7d432
list.focusBackground #000000
list.focusForeground #ffffff
list.highlightForeground #e34234
list.hoverBackground #5ab7d432
list.hoverForeground #ffffff
list.inactiveSelectionBackground #5ab7d46a
list.inactiveSelectionForeground #ffffff
listFilterWidget.background #e34234
listFilterWidget.noMatchesOutline #000000
listFilterWidget.outline #ffffff
menu.background #26272a
menu.border #5ab7d490
menu.foreground #ffffff
menu.selectionBackground #e34234
menu.selectionBorder #ffffff00
menu.selectionForeground #ffffff
menu.separatorBackground #5ab7d4
menubar.selectionBackground #ffffff1a
menubar.selectionBorder #ffffff80
menubar.selectionForeground #5ab7d4
merge.commonContentBackground #3f404533
merge.commonHeaderBackground #3f404566
merge.currentContentBackground #4dbf8633
merge.currentHeaderBackground #4dbf8666
merge.incomingContentBackground #5ab7d433
merge.incomingHeaderBackground #5ab7d466
minimap.background #26272a
minimap.errorHighlight #e34234
minimap.findMatchHighlight #00000078
minimap.selectionHighlight #e3423426
minimap.warningHighlight #f9f871a9
minimapGutter.addedBackground #4dbf86
minimapGutter.deletedBackground #e34234
minimapGutter.modifiedBackground #5ab7d4
notificationCenter.border #00000000
notificationCenterHeader.background #26272a
notificationCenterHeader.foreground #ffffff
notifications.background #000000
notifications.border #5ab7d432
notifications.foreground #ffffff
notificationsErrorIcon.foreground #e34234
notificationsInfoIcon.foreground #5ab7d4
notificationsWarningIcon.foreground #f9f871
notificationToast.border #00000000
panel.background #000000
panel.border #5ab7d44e
panelSection.border #5ab7d4
panelTitle.activeBorder #e34234
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #5ab7d4
peekView.border #00000000
peekViewEditor.background #000000
peekViewEditor.matchHighlightBackground #000000
peekViewEditor.matchHighlightBorder #ffffff
peekViewEditorGutter.background #000000
peekViewResult.background #1e1e1e
peekViewResult.fileForeground #c9c9c9
peekViewResult.lineForeground #bababa
peekViewResult.matchHighlightBackground #e34234
peekViewResult.selectionBackground #5ab7d433
peekViewResult.selectionForeground #ffffff
peekViewTitle.background #1B1B1B
peekViewTitleDescription.foreground #ffffffb3
peekViewTitleLabel.foreground #ffffff
pickerGroup.border #5ab7d4
pickerGroup.foreground #5ab7d4
progressBar.background #e34234
scrollbar.shadow #e3423444
scrollbarSlider.activeBackground #e34234
scrollbarSlider.background #ffffff10
scrollbarSlider.hoverBackground #5ab7d432
selection.background #000000
settings.focusedRowBackground #ffffff07
settings.headerForeground #ffffff
sideBar.background #26272a
sideBar.border #5ab7d432
sideBar.dropBackground #5ab7d432
sideBar.foreground #ffffff
sideBarSectionHeader.background #26272a
sideBarSectionHeader.border #5ab7d432
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #ffffff
statusBar.background #000000
statusBar.border #ffffffAA
statusBar.debuggingBackground #e34234
statusBar.debuggingBorder #ffffff
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #000000
statusBar.noFolderBorder #000000
statusBar.noFolderForeground #ffffff
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #26272a
statusBarItem.remoteBackground #e34234
statusBarItem.remoteForeground #ffffff
tab.activeBackground #26272a
tab.activeBorder #e34234
tab.activeBorderTop #00000000
tab.activeForeground #ffffff
tab.border #5ab7d432
tab.hoverBackground #26272a
tab.hoverBorder #5ab7d432
tab.inactiveBackground #000000
tab.inactiveForeground #cdcdcd80
terminal.ansiBlack #2e2e2e
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 #5ab7d4
terminal.foreground #cccccc
terminal.selectionBackground #5ab7d432
terminalCursor.background #e34234
terminalCursor.foreground #ffffff
textLink.foreground #5ab7d4
titleBar.activeBackground #000000
titleBar.activeForeground #ffffff
titleBar.border #ffffff00
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #ffffff46
tree.indentGuidesStroke #5ab7d4
walkThrough.embeddedEditorBackground #00000050
widget.shadow #5ab7d470 #7fcf61
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #ffffff —
variable.parameter.function.language.special.self.python #e5c07b —
storage.modifier.lifetime.rust #ffffff —
support.function.std.rust #e34234 —
entity.name.lifetime.rust #e5c07b —
variable.language.rust #7fcf61 —
support.constant.edge #5ab7d4df —
constant.other.character-class.regexp #7fcf61 —
keyword.operator.quantifier.regexp #cf79ff —
punctuation.definition.string.begin,punctuation.definition.string.end #6a90ff —
variable.parameter.function #ffffff —
comment markup.link #abd78685 —
markup.changed.diff #e5c07b —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #e34234 —
markup.inserted.diff #6a90ff —
markup.deleted.diff #7fcf61 —
meta.function.c,meta.function.cpp #7fcf61 —
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 #ffffff —
punctuation.separator.key-value #ffffff —
keyword.operator.expression.import #e34234 —
support.constant.math #e5c07b —
support.constant.property.math #cf79ff —
variable.other.constant #e5c07b —
storage.type.annotation.java, storage.type.object.array.java #e5c07b —
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 #ffffff —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #e5c07b —
keyword.operator.instanceof.java #5ab7d4df —
meta.definition.variable.name.java #7fcf61 —
keyword.operator.logical #56b6c2 —
keyword.operator.bitwise #56b6c2 —
keyword.operator.channel #56b6c2 —
support.constant.property-value.scss,support.constant.property-value.css #cf79ff —
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 #cf79ff —
punctuation.separator.list.comma.css #ffffff —
support.constant.color.w3c-standard-color-name.css #cf79ff —
support.type.vendored.property-name.css #56b6c2 —
support.module.node,support.type.object.module,support.module.node #e5c07b —
entity.name.type.module #e5c07b —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #7fcf61 —
support.constant.json #cf79ff —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #5ab7d4df —
support.type.object.console #7fcf61 —
support.variable.property.process #cf79ff —
entity.name.function,support.function.console #e34234 —
keyword.operator.misc.rust #ffffff —
keyword.operator.sigil.rust #5ab7d4df —
keyword.operator.delete #5ab7d4df —
support.type.object.dom #56b6c2 —
support.variable.dom,support.variable.property.dom #7fcf61 —
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 #5ab7d4df —
punctuation.separator.delimiter #ffffff —
punctuation.separator.c,punctuation.separator.cpp #5ab7d4df —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #56b6c2 —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #5ab7d4df —
variable.parameter.function.language.python #cf79ff —
support.type.python #56b6c2 —
keyword.operator.logical.python #5ab7d4df —
variable.parameter.function.python #cf79ff —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #ffffff —
meta.function-call.generic.python #e34234 —
constant.character.format.placeholder.other.python #cf79ff —
keyword.operator.assignment.compound #5ab7d4df —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #56b6c2 —
entity.name.namespace #e5c07b —
variable.language #e5c07b —
token.variable.parameter.java #ffffff —
import.storage.java #e5c07b —
token.package.keyword #5ab7d4df —
entity.name.function, meta.require, support.function.any-method, variable.function #e34234AA —
entity.name.type.namespace #e5c07bEE —
support.class, entity.name.type.class #e5c07bEE —
entity.name.class.identifier.namespace.type #e5c07bEE —
entity.name.class, variable.other.class.js, variable.other.class.ts #e5c07bEE —
variable.other.class.php #7fcf61 —
entity.name.type #e5c07bEE —
keyword.control #5ab7d4df —
control.elements, keyword.operator.less #cf79ff —
keyword.other.special-method #e3423498 —
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 #5ab7d4df —
token.storage.type.java #e5c07b —
support.type.property-name #ffffff —
support.constant.property-value #ffffff —
support.constant.font-name #cf79ff —
entity.other.inherited-class #e5c07b —
constant.other.symbol #56b6c2 —
punctuation.definition.constant #cf79ff —
entity.other.attribute-name #cf79ff —
entity.other.attribute-name.id #e34234AA —
entity.other.attribute-name.class.css #cf79ff —
markup.heading punctuation.definition.heading, entity.name.section #e34234AA —
keyword.other.unit #7fcf61 —
markup.bold,todo.bold #cf79ff —
punctuation.definition.bold #e5c07b —
markup.italic, punctuation.definition.italic,todo.emphasis #5ab7d4df —
entity.name.section.markdown #7fcf61 —
punctuation.definition.heading.markdown #7fcf61 —
punctuation.definition.list.begin.markdown #7fcf61 —
markup.heading.setext #ffffff —
punctuation.definition.bold.markdown #cf79ff —
markup.inline.raw.markdown #6a90ff —
markup.inline.raw.string.markdown #6a90ff —
punctuation.definition.list.markdown #7fcf61 —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #7fcf61 —
beginning.punctuation.definition.list.markdown #7fcf61 —
punctuation.definition.metadata.markdown #7fcf61 —
markup.underline.link.markdown,markup.underline.link.image.markdown #5ab7d4df —
string.other.link.title.markdown,string.other.link.description.markdown #e34234AA —
constant.character.escape #56b6c2 —
punctuation.section.embedded, variable.interpolation #7fcf61 —
punctuation.section.embedded.begin,punctuation.section.embedded.end #5ab7d4df —
invalid.illegal.bad-ampersand.html #ffffff —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #7fcf61 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #7fcf61 —
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 #6a90ff —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #56b6c2 —
support.type.property-name.json #7fcf61 —
support.type.property-name.json punctuation #7fcf61 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #5ab7d4df —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #5ab7d4df —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #e5c07b —
keyword.operator.error-control.php #5ab7d4df —
keyword.operator.type.php #5ab7d4df —
punctuation.section.array.begin.php #ffffff —
punctuation.section.array.end.php #ffffff —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #e5c07b —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #e34234 —
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 #ffffff —
support.constant.core.rust #cf79ff —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #cf79ff —
entity.name.goto-label.php,support.other.php #e34234 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #56b6c2 —
keyword.operator.regexp.php #5ab7d4df —
keyword.operator.comparison.php #56b6c2 —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #5ab7d4df —
meta.function.decorator.python #e34234 —
support.token.decorator.python,meta.function.decorator.identifier.python #56b6c2 —
function.parameter #ffffff —
function.parameter.ruby, function.parameter.cs #ffffff —
constant.language.symbol.ruby #56b6c2 —
inline-color-decoration rgb-value #cf79ff —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #e5c07b —
block.scope.end,block.scope.begin #ffffff —
entity.name.variable.local.cs #7fcf61 —
token.error-token #f44747 —
token.debug-token #5ab7d4df —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #5ab7d4df —
meta.template.expression #ffffff —
keyword.operator.module #5ab7d4df —
support.type.type.flowtype #e34234 —
support.type.primitive #e5c07b —
meta.property.object #7fcf61 —
variable.parameter.function.js #7fcf61 —
keyword.other.template.begin #6a90ff —
keyword.other.template.end #6a90ff —
keyword.other.substitution.begin #6a90ff —
keyword.other.substitution.end #6a90ff —
keyword.operator.assignment #56b6c2 —
keyword.operator.assignment.go #e5c07b —
keyword.operator.arithmetic.go, keyword.operator.address.go #5ab7d4df —
entity.name.package.go #e5c07b —
support.type.prelude.elm #56b6c2 —
support.constant.elm #cf79ff —
punctuation.quasi.element #5ab7d4df —
constant.character.entity #7fcf61 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #56b6c2 —
entity.global.clojure #e5c07b —
meta.symbol.clojure #7fcf61 —
constant.keyword.clojure #56b6c2 —
meta.arguments.coffee, variable.parameter.function.coffee #7fcf61 —
meta.scope.prerequisites.makefile #7fcf61 —
storage.modifier.import.groovy #e5c07b —
meta.method.groovy #e34234 —
meta.definition.variable.name.groovy #7fcf61 —
meta.definition.class.inherited.classes.groovy #6a90ff —
support.variable.semantic.hlsl #e5c07b —
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 #5ab7d4df —
text.variable, text.bracketed #7fcf61 —
support.type.swift, support.type.vb.asp #e5c07b —
entity.name.function.xi #e5c07b —
entity.name.class.xi #56b6c2 —
constant.character.character-class.regexp.xi #7fcf61 —
constant.regexp.xi #5ab7d4df —
keyword.control.xi #56b6c2 —
beginning.punctuation.definition.quote.markdown.xi #6a90ff —
beginning.punctuation.definition.list.markdown.xi #abd78685 —
constant.character.xi #e34234 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #abd78685 —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #e5c07b —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #7fcf61 —
meta.brace.square #ffffff —
comment, punctuation.definition.comment #abd78685 italic
markup.quote.markdown #abd78685 —
punctuation.definition.block.sequence.item.yaml #ffffff —
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...
~/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 } !` ;
}
JA Colour Theme | Coding Theme