DS Temas

Name: DS Temas
Author: FelipeSantos92Dev

Publisher: FelipeSantos92DevThemes in package: 10

Temas desenvolvidos com base nas cores preferenciais dos alunos do curso de Desenvolvimento de Sistemas de Valinhos

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

DS Temas — Giovanni - Palmeiras Away

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#008542
activityBar.activeBorder#FFFFFF
activityBar.background#00A650
activityBar.border#008542
activityBar.dropBorder#FFFFFF33
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#FFFFFFAA
activityBarBadge.background#FFFFFF
activityBarBadge.foreground#008542
activityBarTop.activeBorder#FFFFFF
activityBarTop.dropBorder#FFFFFF33
activityBarTop.foreground#FFFFFF
activityBarTop.inactiveForeground#FFFFFFAA
badge.background#00A650
badge.foreground#FFFFFF
breadcrumb.background#F5FAF5
breadcrumbPicker.background#FFFFFF
button.background#00A650
button.border#00000026
button.foreground#FFFFFF
button.hoverBackground#00C35F
button.secondaryBackground#E6F5E6
button.secondaryForeground#00A650
button.secondaryHoverBackground#C9E6CA
button.separator#C9E6CA
charts.blue#0076C5
charts.foreground#00A650
charts.green#00A650
charts.lines#00A650
charts.orange#FF7135
charts.purple#E66DFF
charts.red#D62C2C
charts.yellow#FFB638
checkbox.foreground#00A650
commandCenter.activeBackground#008542
commandCenter.activeForeground#FFFFFF
commandCenter.background#00A650
commandCenter.border#008542
commandCenter.foreground#FFFFFF
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#D62C2C
debugConsole.infoForeground#0076C5
debugConsole.warningForeground#FFB638
debugExceptionWidget.background#FFFFFF
debugExceptionWidget.border#E6F5E6
debugIcon.breakpointCurrentStackframeForeground#D62C2C
debugIcon.breakpointDisabledForeground#d62c2c80
debugIcon.breakpointForeground#D62C2C
debugIcon.continueForeground#00A650
debugIcon.disconnectForeground#D62C2C
debugIcon.pauseForeground#D62C2C
debugIcon.restartForeground#00E074
debugIcon.startForeground#00E074
debugIcon.stepBackForeground#00A650
debugIcon.stepIntoForeground#00A650
debugIcon.stepOutForeground#00A650
debugIcon.stepOverForeground#00A650
debugIcon.stopForeground#D62C2C
debugToolBar.background#F5FAF5
descriptionForeground#00A650CC
diffEditor.border#E6F5E6
diffEditor.diagonalFill#F5FAF5
diffEditor.insertedLineBackground#00A6501a
diffEditor.insertedTextBackground#00A65026
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#ffb6384d
diffEditor.moveActive.border#ffb638b3
diffEditor.removedLineBackground#d62c2c1a
diffEditor.removedTextBackground#d62c2c26
diffEditor.removedTextBorder#00000000
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#00A65025
diffEditorOverview.removedForeground#D62C2C30
disabledForeground#00A6504D
dropdown.background#F5FAF5
dropdown.border#E6F5E6
dropdown.foreground#00A650
dropdown.listBackground#F5FAF5
editor.background#FFFFFF
editor.findMatchBackground#00A65030
editor.findMatchBorder#00A65060
editor.findMatchHighlightBackground#00A6503D
editor.findMatchHighlightBorder#00A6505C
editor.foldBackground#00A65033
editor.foldPlaceholderForeground#00A650
editor.foreground#00A650
editor.hoverHighlightBackground#00A6504D
editor.inactiveSelectionBackground#00A6504D
editor.lineHighlightBackground#00A6500F
editor.lineHighlightBorder#00A65026
editor.linkedEditingBackground#00A65033
editor.rangeHighlightBackground#00A6503D
editor.selectionBackground#00A6504D
editor.selectionForeground#00A650
editor.selectionHighlightBackground#00A65015
editor.selectionHighlightBorder#00A6504D
editor.wordHighlightBackground#00A65033
editor.wordHighlightBorder#00A6504A
editor.wordHighlightStrongBackground#00A6504D
editorBracketHighlight.foreground1#00A650
editorBracketHighlight.foreground2#00C35F
editorBracketHighlight.foreground3#00E074
editorBracketHighlight.foreground4#008742
editorBracketHighlight.foreground5#00D569
editorBracketHighlight.foreground6#00F683
editorBracketHighlight.unexpectedBracket.foreground#D62C2C
editorBracketMatch.background#00A6504D
editorBracketMatch.border#00A65073
editorCodeLens.foreground#00A65080
editorCursor.background#FFFFFF
editorCursor.foreground#00A650
editorError.border#00000000
editorError.foreground#D62C2C
editorGhostText.border#00000000
editorGhostText.foreground#00A65070
editorGroup.border#E6F5E6
editorGroup.dropBackground#00A65015
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#FFFFFF
editorGroupHeader.tabsBackground#F5FAF5
editorGroupHeader.tabsBorder#E6F5E6
editorGutter.addedBackground#00E074cc
editorGutter.background#FFFFFF
editorGutter.commentRangeForeground#F5FAF5
editorGutter.deletedBackground#D62C2Ccc
editorGutter.modifiedBackground#28A9FFcc
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#E6F5E6
editorIndentGuide.activeBackground1#00A650CC
editorIndentGuide.background1#00A65033
editorInfo.border#00000000
editorInlayHint.background#00A65012
editorInlayHint.foreground#00A65090
editorInlayHint.typeBackground#A95EFF15
editorInlayHint.typeForeground#A95EFFaa
editorLineNumber.activeForeground#00A650
editorLineNumber.foreground#00A65080
editorLink.activeForeground#00A650
editorMarkerNavigation.background#F5FAF5
editorMarkerNavigationError.background#D62C2C90
editorMarkerNavigationInfo.background#28A9FF90
editorMarkerNavigationWarning.background#FFB63890
editorOverviewRuler.addedForeground#00E07480
editorOverviewRuler.border#E6F5E6
editorOverviewRuler.deletedForeground#d62c2c80
editorOverviewRuler.errorForeground#D62C2C
editorOverviewRuler.incomingContentForeground#00E07480
editorOverviewRuler.infoForeground#28a9ff80
editorOverviewRuler.modifiedForeground#28a9ff80
editorOverviewRuler.selectionHighlightForeground#00A65080
editorOverviewRuler.warningForeground#FFB638
editorRuler.foreground#00A65033
editorStickyScroll.shadow#00000033
editorStickyScrollHover.background#F0F9F0
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#E6F5E6
editorSuggestWidget.foreground#00A650
editorSuggestWidget.highlightForeground#00C35F
editorSuggestWidget.selectedBackground#E6F5E6
editorSuggestWidget.selectedIconForeground#00A650
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#FFB638
editorWhitespace.foreground#00A65060
editorWidget.background#F5FAF5
editorWidget.border#E6F5E6
editorWidget.resizeBorder#00A65050
errorForeground#D62C2C
errorLens.errorForeground#D62C2C99
errorLens.hintForeground#28A9FF99
errorLens.infoForeground#28A9FF99
errorLens.warningForeground#FFB63899
extensionButton.background#00A650
extensionButton.foreground#FFFFFF
extensionButton.hoverBackground#00C35F
extensionButton.prominentBackground#00A6509d
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#00C35F
focusBorder#00A65066
foreground#00A650
gitDecoration.conflictingResourceForeground#00A650
gitDecoration.deletedResourceForeground#D62C2C
gitDecoration.ignoredResourceForeground#00A65080
gitDecoration.modifiedResourceForeground#28A9FF
gitDecoration.untrackedResourceForeground#00E074
icon.foreground#00A650AA
inlineChat.background#F5FAF5
inlineChat.border#E6F5E6
inlineChatInput.background#FFFFFF
inlineChatInput.border#E6F5E6
inlineChatInput.focusBorder#00A65066
input.background#FFFFFF
input.border#E6F5E6
input.foreground#00A650
input.placeholderForeground#00A65080
inputOption.activeBackground#E6F5E6
inputOption.activeBorder#00000000
inputOption.activeForeground#00A650
inputOption.hoverBackground#C9E6CA
inputValidation.errorBackground#F5FAF5
inputValidation.errorBorder#FFB638
inputValidation.infoBackground#F5FAF5
inputValidation.infoBorder#00A650
inputValidation.warningBackground#F5FAF5
inputValidation.warningBorder#FFB638
keybindingLabel.background#F5FAF5
keybindingLabel.border#C9E6CA
keybindingLabel.bottomBorder#C9E6CA
keybindingLabel.foreground#00A650
list.activeSelectionBackground#E6F5E6
list.activeSelectionForeground#00A650
list.dropBackground#00A65015
list.errorForeground#D62C2C
list.focusBackground#E6F5E6
list.focusForeground#00A650
list.highlightForeground#00C35F
list.hoverBackground#F0F9F0
list.hoverForeground#00A650
list.inactiveSelectionBackground#F0F9F0
list.inactiveSelectionForeground#00A650
list.warningForeground#FFB638
menu.background#FFFFFF
menu.border#E6F5E6
menu.foreground#00A650
menu.selectionForeground#00A650
menu.separatorBackground#E6F5E665
menubar.selectionBackground#F5FAF5
menubar.selectionForeground#00A650
merge.border#E6F5E6
merge.commonContentBackground#FFB63830
merge.commonHeaderBackground#FFB63880
merge.currentContentBackground#00E07430
merge.currentHeaderBackground#00E07480
merge.incomingContentBackground#28A9FF30
merge.incomingHeaderBackground#28A9FF80
minimap.background#FFFFFF
minimap.errorHighlight#D62C2C
minimap.findMatchHighlight#00A650
minimap.selectionHighlight#00A650
minimap.selectionOccurrenceHighlight#00A650
minimap.warningHighlight#FFB638
minimapGutter.addedBackground#00E074
minimapGutter.deletedBackground#D62C2C
minimapGutter.modifiedBackground#28A9FF
notificationCenterHeader.background#F5FAF5
notificationCenterHeader.foreground#00A650
notificationLink.foreground#00C35F
notifications.background#FFFFFF
notifications.border#E6F5E6
notifications.foreground#00A650
notificationsErrorIcon.foreground#D62C2C
notificationsInfoIcon.foreground#28A9FF
notificationsWarningIcon.foreground#FF7135
panel.background#F5FAF5
panel.border#E6F5E6
panel.dropBorder#00A65080
panelInput.border#E6F5E6
panelSection.border#E6F5E6
panelSectionHeader.background#F0F9F0
panelSectionHeader.border#E6F5E6
panelSectionHeader.foreground#00A650
panelTitle.activeBorder#00A650
panelTitle.activeForeground#00A650
panelTitle.inactiveForeground#00A650AA
peekView.border#E6F5E6
peekViewEditor.background#F8FCF8
peekViewEditor.matchHighlightBackground#00A65040
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#F8FCF8
peekViewEditorStickyScroll.background#F0F9F0
peekViewResult.background#F5FAF5
peekViewResult.fileForeground#00A650
peekViewResult.lineForeground#00A650
peekViewResult.matchHighlightBackground#00A65040
peekViewResult.selectionBackground#E6F5E6
peekViewResult.selectionForeground#00A650
peekViewTitle.background#F0F9F0
peekViewTitleDescription.foreground#00A650
peekViewTitleLabel.foreground#00A650
pickerGroup.border#E6F5E6
pickerGroup.foreground#00A650
profileBadge.background#00A650
profileBadge.foreground#FFFFFF
progressBar.background#00A650
quickInput.background#FFFFFF
quickInput.foreground#00A650
quickInputList.focusBackground#E6F5E6
quickInputList.focusForeground#00A650
quickInputList.focusIconForeground#00A650
quickInputTitle.background#F5FAF5
sash.hoverBorder#00A65050
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#00A6504D
scrollbarSlider.background#00A65026
scrollbarSlider.hoverBackground#00A65033
selection.background#00A65060
settings.headerForeground#00A650
settings.modifiedItemIndicator#00A650
sideBar.background#F5FAF5
sideBar.border#E6F5E6
sideBar.foreground#00A650
sideBarSectionHeader.background#F5FAF5
sideBarSectionHeader.border#E6F5E6
sideBarSectionHeader.foreground#00A650
sideBarStickyScroll.background#F0F9F0
sideBarStickyScroll.shadow#00000033
sideBarTitle.foreground#00A650
statusBar.background#00A650
statusBar.border#008542
statusBar.debuggingBackground#008542
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#00A650
statusBar.noFolderBorder#008542
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#008542
statusBarItem.compactHoverBackground#008542
statusBarItem.errorBackground#d62c2c
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#da4141
statusBarItem.errorHoverForeground#FFFFFF
statusBarItem.hoverBackground#008542
statusBarItem.hoverForeground#FFFFFF
statusBarItem.offlineBackground#e66dff
statusBarItem.offlineForeground#FFFFFF
statusBarItem.offlineHoverBackground#ea87ff
statusBarItem.prominentBackground#008542
statusBarItem.prominentForeground#FFFFFF
statusBarItem.prominentHoverBackground#009E53
statusBarItem.remoteBackground#14e5d4
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#26ecdc
statusBarItem.remoteHoverForeground#00A650
statusBarItem.warningBackground#ffb638
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#ffbf51
statusBarItem.warningHoverForeground#000000
tab.activeBackground#FFFFFF
tab.activeBorder#FFFFFF
tab.activeBorderTop#00A650
tab.activeForeground#00A650
tab.border#E6F5E6
tab.hoverBackground#FFFFFF
tab.inactiveBackground#F5FAF5
tab.inactiveForeground#00A650AA
tab.lastPinnedBorder#E6F5E6
tab.unfocusedActiveBorder#FFFFFF
tab.unfocusedActiveForeground#00A650
tab.unfocusedHoverBackground#FFFFFF
tab.unfocusedInactiveForeground#00A650AA
terminal.ansiBlack#FFFFFF
terminal.ansiBlue#28A9FF
terminal.ansiBrightBlack#C9E6CA
terminal.ansiBrightBlue#28a9ff
terminal.ansiBrightCyan#00f9e5
terminal.ansiBrightGreen#00E074
terminal.ansiBrightMagenta#e66dff
terminal.ansiBrightRed#fc0606
terminal.ansiBrightWhite#00A650
terminal.ansiBrightYellow#ffb638
terminal.ansiCyan#14E5D4
terminal.ansiGreen#00A650
terminal.ansiMagenta#E66DFF
terminal.ansiRed#D62C2C
terminal.ansiWhite#00A650
terminal.ansiYellow#FFB638
terminal.background#F5FAF5
terminal.foreground#00A650
terminal.selectionForeground#00A650
terminalCursor.background#FFFFFF
terminalCursor.foreground#00A650
terminalStickyScrollHover.background#F0F9F0
textBlockQuote.background#28A9FF15
textBlockQuote.border#28A9FFb9
textCodeBlock.background#28A9FF15
textLink.activeForeground#00C35F
textLink.foreground#00A650
textPreformat.background#F0F9F0
textPreformat.foreground#00A650
textSeparator.foreground#00A650
titleBar.activeBackground#00A650
titleBar.activeForeground#FFFFFF
titleBar.border#008542
titleBar.inactiveBackground#00A650
titleBar.inactiveForeground#FFFFFFAA
toolbar.hoverBackground#E6F5E699
tree.indentGuidesStroke#00A65070
walkThrough.embeddedEditorBackground#FFFFFF
welcomePage.progress.background#F5FAF5
welcomePage.progress.foreground#00A650
welcomePage.tileBackground#F0F9F0
welcomePage.tileBorder#E6F5E6
welcomePage.tileHoverBackground#E6F5E6
widget.shadow#00000033

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, source.cpp meta.block.class.cpp meta.body.class.cpp, source.cpp meta.block.class.cpp meta.body.class.cpp meta.function.definition.special.constructor.cpp meta.body.function.definition.special.constructor.cpp	#00A650	—
entity.name.type	#00B85C	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#65A76590	italic
constant, support.constant.core.php	#00C462	—
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	#00A650	—
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	#00D26B	—
keyword.control.export, support.type.object.module	#00BE5C	—
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	#008F44	—
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	#00BE5C	—
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	#00BE5C	—
meta.object-literal.key, variable.object.property	#00A650	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml	#00BE5C	—
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	#00BE5C	—
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	#00A650A0	—
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, entity.other.attribute.lua	#00A650	—
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	#00E074	—
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	#00C35F	—
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	#00C35F90	—
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	#008542	—
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	#00A650	—
source.elm constant.type-constructor	#00A650	—
source.elm storage.type	#008542	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#008542	—
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	#00C35F	—
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	#D62C2C	—
source.diff meta.diff.header.command	#0076C5	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#00A650	—
support.variable.liquid, support.class.liquid	#00A650	—
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	#008542	—
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	#008542AA	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#00BE5C	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#008542	—
fenced_code.block.language	#008542	—
punctuation.definition.list.begin	#008542	—
entity.name.section, markup.heading.setext	#00BE5C	—
punctuation.definition.heading	#00BE5C	—
markup.underline.link, markup.underline.link.image	#008542	—
markup.bold, punctuation.definition.bold	#00A650	bold
markup.strikethrough, punctuation.definition.strikethrough	#A0A0A0	—
markup.italic, punctuation.definition.italic	#00A650	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#00E074	—
punctuation.definition.quote.begin	#008542	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#65A76590	italic
entity.other.attribute-name.pseudo-class	#00D26B	—
entity.other.attribute-name.pseudo-element	#00D26B	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#00E074	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#00E074	—
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	#00A650	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#008542	—
entity.name.tag.reference, meta.property-list	#00A650	—
keyword.other.unit	#00A650	—
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html	#00A650	—
constant.numeric	#00A650	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#008542	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}