Skip to main content
Home Theme VS Code Quirky Contrast Theme Theme made with colors that are quirky and minimal but also provide good contrast
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 #0d0d0d activityBar.background #0d0d0d activityBar.border #dddddd00 activityBar.foreground #ff8080 activityBar.inactiveForeground #6d9dbd activityBarBadge.background #eded88 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 #dddddd — variable.other.generic-type.haskell #6d9dbd — storage.type.haskell #eded88 — support.variable.magic.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Quirky Contrast Theme — Quirky Contract Theme
activityBarBadge.foreground
#1d1d1d
badge.background #eded88
badge.foreground #1d1d1d
breadcrumb.activeSelectionForeground #dddddd
breadcrumb.background #1d1d1d
breadcrumb.focusForeground #dddddd
breadcrumb.foreground #6d6d6d
button.background #ff8080
button.foreground #1d1d1d
button.hoverBackground #ff8080a7
button.secondaryBackground #6d6d6d
button.secondaryForeground #dddddd
button.secondaryHoverBackground #6d6d6da7
checkbox.background #2d2d2d
checkbox.border #dddddd00
checkbox.foreground #dddddd
debugExceptionWidget.background #2d2d2d
debugExceptionWidget.border #dddddd28
debugToolBar.background #2d2d2d
debugToolBar.border #dddddd28
diffEditor.border #6d6d6d
diffEditor.insertedTextBackground #66b28b33
diffEditor.insertedTextBorder #dddddd00
diffEditor.removedTextBackground #ff6e6e33
dropdown.background #2d2d2d
dropdown.border #dddddd00
dropdown.foreground #dddddd
editor.background #1d1d1d
editor.findMatchBackground #1d1d1d
editor.findMatchBorder #eded88
editor.findMatchHighlightBackground #dddddd00
editor.findMatchHighlightBorder #dddddd
editor.findRangeHighlightBackground #54545462
editor.findRangeHighlightBorder #dddddd00
editor.foldBackground #6d6d6d20
editor.foreground #dddddd
editor.hoverHighlightBackground #6d6d6d7a
editor.inactiveSelectionBackground #3d3d3d4a
editor.lineHighlightBackground #3d3d3d7a
editor.lineHighlightBorder #dddddd00
editor.rangeHighlightBackground #34343462
editor.rangeHighlightBorder #dddddd00
editor.selectionBackground #3d3d3d7a
editor.selectionHighlightBackground #6d6d6d7a
editor.selectionHighlightBorder #dddddd00
editor.wordHighlightBackground #6d6d6d7a
editor.wordHighlightBorder #dddddd00
editor.wordHighlightStrongBackground #6d6d6d7a
editor.wordHighlightStrongBorder #dddddd00
editorBracketHighlight.foreground1 #2d2d2d
editorBracketHighlight.foreground2 #6d6d6d
editorBracketHighlight.foreground3 #2d2d2d
editorBracketHighlight.foreground4 #6d6d6d
editorBracketHighlight.foreground5 #2d2d2d
editorBracketHighlight.foreground6 #6d6d6d
editorBracketHighlight.unexpectedBracket.foreground #6d6d6d
editorBracketMatch.background #6d6d6d7c
editorBracketMatch.border #dddddd00
editorBracketPairGuide.background1 #2d2d2d
editorBracketPairGuide.background2 #6d6d6d
editorBracketPairGuide.background3 #2d2d2d
editorBracketPairGuide.background4 #6d6d6d
editorBracketPairGuide.background5 #2d2d2d
editorBracketPairGuide.background6 #6d6d6d
editorCodeLens.foreground #6d6d6d
editorCursor.background #1d1d1d
editorCursor.foreground #dddddd
editorError.background #B73A3400
editorError.border #dddddd00
editorError.foreground #ff8080c5
editorGroup.border #dddddd00
editorGroup.emptyBackground #1d1d1d
editorGroupHeader.border #dddddd00
editorGroupHeader.tabsBackground #0d0d0d
editorGroupHeader.tabsBorder #dddddd00
editorGutter.addedBackground #0c7c2d
editorGutter.background #1d1d1d
editorGutter.commentRangeForeground #dddddd
editorGutter.deletedBackground #94151b
editorGutter.foldingControlForeground #dddddd
editorGutter.modifiedBackground #0c7d9d
editorHoverWidget.background #2d2d2d
editorHoverWidget.border #dddddd00
editorHoverWidget.foreground #eded88
editorIndentGuide.activeBackground1 #6d6d6d
editorIndentGuide.background1 #1d1d1d
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #6d9dbdc5
editorLineNumber.activeForeground #dddddd
editorLineNumber.foreground #6d6d6d
editorLink.activeForeground #6d9dbd
editorMarkerNavigation.background #2d2d2d
editorMarkerNavigationError.background #ff8080
editorMarkerNavigationInfo.background #6d9dbd
editorMarkerNavigationWarning.background #eded88
editorOverviewRuler.background #dddddd00
editorOverviewRuler.border #dddddd00
editorRuler.foreground #6d6d6d
editorSuggestWidget.background #2d2d2d
editorSuggestWidget.border #dddddd00
editorSuggestWidget.foreground #6d6d6d
editorSuggestWidget.highlightForeground #ff8080
editorSuggestWidget.selectedBackground #3d3d3d
editorWarning.background #A9904000
editorWarning.border #dddddd00
editorWarning.foreground #eded88c5
editorWhitespace.foreground #9f9f9f7c
editorWidget.background #2d2d2d
editorWidget.foreground #dddddd
editorWidget.resizeBorder #6d9dbd
focusBorder #eded88
foreground #dddddd
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #8282c4
gitDecoration.deletedResourceForeground #c06c5d
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #9f4434
gitDecoration.stageModifiedResourceForeground #ab7f3d
gitDecoration.submoduleResourceForeground #4b7ead
gitDecoration.untrackedResourceForeground #4b8a61
icon.foreground #dddddd
input.background #2d2d2d
input.border #dddddd00
input.foreground #dddddd
input.placeholderForeground #6d6d6d
inputOption.activeBackground #6d6d6d
inputOption.activeBorder #dddddd00
inputOption.activeForeground #dddddd
list.activeSelectionBackground #6d6d6d
list.activeSelectionForeground #dddddd
list.dropBackground #2d2d2d
list.focusBackground #2d2d2d
list.focusForeground #dddddd
list.highlightForeground #ff8080
list.hoverBackground #6d6d6d
list.hoverForeground #dddddd
list.inactiveSelectionBackground #2d2d2d
list.inactiveSelectionForeground #dddddd
listFilterWidget.background #6d6d6d
listFilterWidget.noMatchesOutline #dddddd00
listFilterWidget.outline #dddddd00
menu.background #1d1d1d
menu.border #6d6d6d4a
menu.foreground #dddddd
menu.selectionBackground #2d2d2d
menu.selectionBorder #dddddd00
menu.selectionForeground #dddddd
menu.separatorBackground #6d6d6d
menubar.selectionBackground #1d1d1d
menubar.selectionBorder #dddddd00
menubar.selectionForeground #eded88
merge.commonContentBackground #28282888
merge.commonHeaderBackground #38383888
merge.currentContentBackground #27403B88
merge.currentHeaderBackground #36736688
merge.incomingContentBackground #28384B88
merge.incomingHeaderBackground #395F8F88
minimap.background #1d1d1d
minimap.errorHighlight #ff8080c5
minimap.findMatchHighlight #1d1d1d76
minimap.selectionHighlight #3d3d3d7a
minimap.warningHighlight #eded88c5
minimapGutter.addedBackground #0c7c2d
minimapGutter.deletedBackground #94151b
minimapGutter.modifiedBackground #0c7d9d
notificationCenter.border #dddddd00
notificationCenterHeader.background #0d0d0d
notificationCenterHeader.foreground #dddddd
notifications.background #2d2d2d
notifications.border #dddddd00
notifications.foreground #dddddd
notificationsErrorIcon.foreground #ff8080
notificationsInfoIcon.foreground #6d9dbd
notificationsWarningIcon.foreground #eded88
notificationToast.border #dddddd00
panel.background #1d1d1d
panel.border #6d6d6d
panelSection.border #6d9dbd
panelTitle.activeBorder #ff8080
panelTitle.activeForeground #ff8080
panelTitle.inactiveForeground #6d6d6d
peekView.border #dddddd00
peekViewEditor.background #2d2d2d
peekViewEditor.matchHighlightBackground #6d9dbd3d
peekViewEditor.matchHighlightBorder #dddddd00
peekViewEditorGutter.background #2d2d2d
peekViewResult.background #0d0d0d
peekViewResult.fileForeground #dddddd
peekViewResult.lineForeground #949494
peekViewResult.matchHighlightBackground #6d9dbd3d
peekViewResult.selectionBackground #6d9dbd3d
peekViewResult.selectionForeground #dddddd
peekViewTitle.background #0d0d0d
peekViewTitleDescription.foreground #6d6d6d
peekViewTitleLabel.foreground #dddddd
pickerGroup.border #dddddd00
pickerGroup.foreground #6d9dbd
progressBar.background #eded88
scrollbar.shadow #6d6d6d
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #99999970
scrollbarSlider.hoverBackground #b6b6b6b3
selection.background #6d6d6d
settings.focusedRowBackground #ffffff07
settings.headerForeground #dddddd
sideBar.background #0d0d0d
sideBar.border #dddddd00
sideBar.dropBackground #2d2d2d
sideBar.foreground #dddddd
sideBarSectionHeader.background #dddddd00
sideBarSectionHeader.border #dddddd00
sideBarSectionHeader.foreground #6d6d6d
sideBarTitle.foreground #eded88
statusBar.background #0d0d0d
statusBar.border #dddddd00
statusBar.debuggingBackground #eded88
statusBar.debuggingBorder #dddddd00
statusBar.debuggingForeground #1d1d1d
statusBar.foreground #6d6d6d
statusBar.noFolderBackground #6d9dbd
statusBar.noFolderBorder #dddddd00
statusBar.noFolderForeground #1d1d1d
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #2d2d2d
statusBarItem.remoteBackground #2d2d2d
statusBarItem.remoteForeground #dddddd
tab.activeBackground #1d1d1d
tab.activeBorder #1d1d1d
tab.activeBorderTop #6d6d6d
tab.activeForeground #dddddd
tab.border #dddddd00
tab.hoverBackground #2d2d2d
tab.hoverBorder #dddddd00
tab.hoverForeground #ffffff
tab.inactiveBackground #0d0d0d
tab.inactiveForeground #6d6d6d
terminal.ansiBlack #000000
terminal.ansiBlue #6d9dbd
terminal.ansiBrightBlack #545454
terminal.ansiBrightBlue #74BCFF
terminal.ansiBrightCyan #74BCFF
terminal.ansiBrightGreen #d9ce9b
terminal.ansiBrightMagenta #e64444
terminal.ansiBrightRed #e64444
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #d9ce9b
terminal.ansiCyan #6d9dbd
terminal.ansiGreen #eded88
terminal.ansiMagenta #ff8080
terminal.ansiRed #ff8080
terminal.ansiWhite #dddddd
terminal.ansiYellow #eded88
terminal.border #6d9dbd
terminal.foreground #dddddd
terminal.selectionBackground #2d2d2d
terminalCursor.background #2d2d2d
terminalCursor.foreground #dddddd
textLink.foreground #6d9dbd
titleBar.activeBackground #0d0d0d
titleBar.activeForeground #dddddd
titleBar.border #dddddd00
titleBar.inactiveBackground #2d2d2d
titleBar.inactiveForeground #cccccc
tree.indentGuidesStroke #6d6d6d
walkThrough.embeddedEditorBackground #00000050
widget.shadow #dddddd00 #dddddd
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python #dddddd —
variable.parameter.function.language.special.self.python #dddddd —
storage.modifier.lifetime.rust #dddddd —
support.function.std.rust #ff8080 —
entity.name.lifetime.rust #dddddd —
variable.language.rust #dddddd —
support.constant.edge #6d9dbd —
constant.other.character-class.regexp #dddddd —
keyword.operator.quantifier.regexp #eded88 —
punctuation.definition.string.begin,punctuation.definition.string.end #eded88 —
variable.parameter.function #dddddd —
comment markup.link #6d6d6d —
markup.changed.diff #dddddd —
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff #ff8080 —
markup.inserted.diff #eded88 —
markup.deleted.diff #dddddd —
meta.function.c,meta.function.cpp #dddddd —
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 #dddddd —
punctuation.separator.key-value #dddddd —
keyword.operator.expression.import #ff8080 —
support.constant.math #dddddd —
support.constant.property.math #eded88 —
variable.other.constant #dddddd —
storage.type.annotation.java, storage.type.object.array.java #dddddd —
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 #dddddd —
storage.modifier.import.java,storage.type.java,storage.type.generic.java #dddddd —
keyword.operator.instanceof.java #6d9dbd —
meta.definition.variable.name.java #dddddd —
keyword.operator.logical #dddddd —
keyword.operator.bitwise #dddddd —
keyword.operator.channel #dddddd —
support.constant.property-value.scss,support.constant.property-value.css #eded88 —
keyword.operator.css,keyword.operator.scss,keyword.operator.less #dddddd —
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss #eded88 —
punctuation.separator.list.comma.css #dddddd —
support.constant.color.w3c-standard-color-name.css #eded88 —
support.type.vendored.property-name.css #dddddd —
support.module.node,support.type.object.module,support.module.node #dddddd —
entity.name.type.module #dddddd —
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node #dddddd —
support.constant.json #eded88 —
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof #6d9dbd —
support.type.object.console #dddddd —
support.variable.property.process #eded88 —
entity.name.function,support.function.console #ff8080 —
keyword.operator.misc.rust #dddddd —
keyword.operator.sigil.rust #6d9dbd —
keyword.operator.delete #6d9dbd —
support.type.object.dom #dddddd —
support.variable.dom,support.variable.property.dom #dddddd —
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational #dddddd —
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 #6d9dbd —
punctuation.separator.delimiter #dddddd —
punctuation.separator.c,punctuation.separator.cpp #6d9dbd —
support.type.posix-reserved.c,support.type.posix-reserved.cpp #dddddd —
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp #6d9dbd —
variable.parameter.function.language.python #eded88 —
support.type.python #dddddd —
keyword.operator.logical.python #6d9dbd —
variable.parameter.function.python #eded88 —
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python #dddddd —
meta.function-call.generic.python #ff8080 —
constant.character.format.placeholder.other.python #eded88 —
keyword.operator.assignment.compound #6d9dbd —
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts #dddddd —
entity.name.namespace #dddddd —
variable.language #dddddd —
token.variable.parameter.java #dddddd —
import.storage.java #dddddd —
token.package.keyword #6d9dbd —
entity.name.function, meta.require, support.function.any-method, variable.function #ff8080 —
entity.name.type.namespace #dddddd —
support.class, entity.name.type.class #dddddd —
entity.name.class.identifier.namespace.type #dddddd —
entity.name.class, variable.other.class.js, variable.other.class.ts #dddddd —
variable.other.class.php #dddddd —
control.elements, keyword.operator.less #eded88 —
keyword.other.special-method #ff8080 —
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 #6d9dbd —
token.storage.type.java #dddddd —
support.type.property-name #dddddd —
support.constant.property-value #dddddd —
support.constant.font-name #eded88 —
entity.other.inherited-class #dddddd —
constant.other.symbol #dddddd —
punctuation.definition.constant #eded88 —
entity.other.attribute-name #eded88 —
entity.other.attribute-name.id #ff8080 —
entity.other.attribute-name.class.css #eded88 —
markup.heading punctuation.definition.heading, entity.name.section #ff8080 —
keyword.other.unit #dddddd —
markup.bold,todo.bold #eded88 —
punctuation.definition.bold #dddddd —
markup.italic, punctuation.definition.italic,todo.emphasis #6d9dbd —
entity.name.section.markdown #dddddd —
punctuation.definition.heading.markdown #dddddd —
punctuation.definition.list.begin.markdown #dddddd —
markup.heading.setext #dddddd —
punctuation.definition.bold.markdown #eded88 —
markup.inline.raw.markdown #eded88 —
markup.inline.raw.string.markdown #eded88 —
punctuation.definition.list.markdown #dddddd —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #dddddd —
beginning.punctuation.definition.list.markdown #dddddd —
punctuation.definition.metadata.markdown #dddddd —
markup.underline.link.markdown,markup.underline.link.image.markdown #6d9dbd —
string.other.link.title.markdown,string.other.link.description.markdown #ff8080 —
constant.character.escape #dddddd —
punctuation.section.embedded, variable.interpolation #dddddd —
punctuation.section.embedded.begin,punctuation.section.embedded.end #6d9dbd —
invalid.illegal.bad-ampersand.html #dddddd —
invalid.deprecated #ffffff —
invalid.unimplemented #ffffff —
source.json meta.structure.dictionary.json > string.quoted.json #dddddd —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #dddddd —
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 #eded88 —
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json #dddddd —
support.type.property-name.json #dddddd —
support.type.property-name.json punctuation #dddddd —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #6d9dbd —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #6d9dbd —
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php #dddddd —
keyword.operator.error-control.php #6d9dbd —
keyword.operator.type.php #6d9dbd —
punctuation.section.array.begin.php #dddddd —
punctuation.section.array.end.php #dddddd —
invalid.illegal.non-null-typehinted.php #f44747 —
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php #dddddd —
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php #ff8080 —
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 #dddddd —
support.constant.core.rust #eded88 —
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php #eded88 —
entity.name.goto-label.php,support.other.php #ff8080 —
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php #dddddd —
keyword.operator.regexp.php #6d9dbd —
keyword.operator.comparison.php #dddddd —
keyword.operator.heredoc.php,keyword.operator.nowdoc.php #6d9dbd —
meta.function.decorator.python #ff8080 —
support.token.decorator.python,meta.function.decorator.identifier.python #dddddd —
function.parameter #dddddd —
function.parameter.ruby, function.parameter.cs #dddddd —
constant.language.symbol.ruby #dddddd —
inline-color-decoration rgb-value #eded88 —
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx #dddddd —
block.scope.end,block.scope.begin #dddddd —
entity.name.variable.local.cs #dddddd —
token.error-token #f44747 —
token.debug-token #6d9dbd —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #6d9dbd —
meta.template.expression #dddddd —
keyword.operator.module #6d9dbd —
support.type.type.flowtype #ff8080 —
support.type.primitive #dddddd —
meta.property.object #dddddd —
variable.parameter.function.js #dddddd —
keyword.other.template.begin #eded88 —
keyword.other.template.end #eded88 —
keyword.other.substitution.begin #eded88 —
keyword.other.substitution.end #eded88 —
keyword.operator.assignment #dddddd —
keyword.operator.assignment.go #dddddd —
keyword.operator.arithmetic.go, keyword.operator.address.go #6d9dbd —
entity.name.package.go #dddddd —
support.type.prelude.elm #dddddd —
support.constant.elm #eded88 —
punctuation.quasi.element #6d9dbd —
constant.character.entity #dddddd —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #dddddd —
entity.global.clojure #dddddd —
meta.symbol.clojure #dddddd —
constant.keyword.clojure #dddddd —
meta.arguments.coffee, variable.parameter.function.coffee #dddddd —
meta.scope.prerequisites.makefile #dddddd —
storage.modifier.import.groovy #dddddd —
meta.method.groovy #ff8080 —
meta.definition.variable.name.groovy #dddddd —
meta.definition.class.inherited.classes.groovy #eded88 —
support.variable.semantic.hlsl #dddddd —
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 #6d9dbd —
text.variable, text.bracketed #dddddd —
support.type.swift, support.type.vb.asp #dddddd —
entity.name.function.xi #dddddd —
entity.name.class.xi #dddddd —
constant.character.character-class.regexp.xi #dddddd —
constant.regexp.xi #6d9dbd —
keyword.control.xi #dddddd —
beginning.punctuation.definition.quote.markdown.xi #eded88 —
beginning.punctuation.definition.list.markdown.xi #6d6d6d —
constant.character.xi #ff8080 —
constant.other.color.rgb-value.xi #ffffff —
punctuation.definition.tag.xi #6d6d6d —
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition #dddddd —
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #dddddd —
meta.brace.square #dddddd —
comment, punctuation.definition.comment #6d6d6d italic
markup.quote.markdown #6d6d6d —
punctuation.definition.block.sequence.item.yaml #dddddd —
constant.language.symbol.elixir #dddddd —
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 } !` ;
}
Quirky Contrast Theme | Coding Theme