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 Home

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#005C2833
activityBar.activeBorder#005C28
activityBar.background#005C28
activityBar.border#004520
activityBar.dropBorder#FFFFFF33
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#AAAAAA
activityBarBadge.background#FFFFFF
activityBarBadge.foreground#005C28
activityBarTop.activeBorder#FFFFFF
activityBarTop.dropBorder#FFFFFF33
activityBarTop.foreground#FFFFFF
activityBarTop.inactiveForeground#AAAAAA
badge.background#FFFFFF
badge.foreground#005C28
breadcrumb.background#00702E
breadcrumbPicker.background#005C28
button.background#FFFFFF80
button.border#FFFFFF26
button.foreground#005C28
button.hoverBackground#FFFFFF99
button.secondaryBackground#004520
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#003A1C
button.separator#003A1C
charts.blue#0076C5
charts.foreground#FFFFFF
charts.green#008B17
charts.lines#FFFFFF
charts.orange#FF7135
charts.purple#E66DFF
charts.red#D62C2C
charts.yellow#FFB638
checkbox.foreground#FFFFFF
commandCenter.activeBackground#FFFFFF60
commandCenter.activeForeground#005C2890
commandCenter.background#00702E
commandCenter.border#004520
commandCenter.foreground#FFFFFF
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#D62C2C
debugConsole.infoForeground#0076C5
debugConsole.warningForeground#FFB638
debugExceptionWidget.background#005C28
debugExceptionWidget.border#004520
debugIcon.breakpointCurrentStackframeForeground#D62C2C
debugIcon.breakpointDisabledForeground#d62c2c80
debugIcon.breakpointForeground#D62C2C
debugIcon.continueForeground#FFFFFF
debugIcon.disconnectForeground#D62C2C
debugIcon.pauseForeground#D62C2C
debugIcon.restartForeground#42DD76
debugIcon.startForeground#42DD76
debugIcon.stepBackForeground#FFFFFF
debugIcon.stepIntoForeground#FFFFFF
debugIcon.stepOutForeground#FFFFFF
debugIcon.stepOverForeground#FFFFFF
debugIcon.stopForeground#D62C2C
debugToolBar.background#004520
descriptionForeground#FFFFFFCC
diffEditor.border#004520
diffEditor.diagonalFill#005C28
diffEditor.insertedLineBackground#42dd761a
diffEditor.insertedTextBackground#42dd7626
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#42DD7625
diffEditorOverview.removedForeground#D62C2C30
disabledForeground#FFFFFF4D
dropdown.background#004520
dropdown.border#003A1C
dropdown.foreground#FFFFFF
dropdown.listBackground#004520
editor.background#00702E
editor.findMatchBackground#FFFFFF30
editor.findMatchBorder#FFFFFF60
editor.findMatchHighlightBackground#FFFFFF3D
editor.findMatchHighlightBorder#FFFFFF5C
editor.foldBackground#00000033
editor.foldPlaceholderForeground#FFFFFFB3
editor.foreground#FFFFFF
editor.hoverHighlightBackground#FFFFFF4D
editor.inactiveSelectionBackground#FFFFFF4D
editor.lineHighlightBackground#FFFFFF0F
editor.lineHighlightBorder#FFFFFF26
editor.linkedEditingBackground#28a9ff33
editor.rangeHighlightBackground#FFFFFF3D
editor.selectionBackground#FFFFFF4D
editor.selectionForeground#FFFFFF
editor.selectionHighlightBackground#FFFFFF15
editor.selectionHighlightBorder#FFFFFF4D
editor.wordHighlightBackground#FFFFFF73
editor.wordHighlightBorder#FFFFFF8A
editor.wordHighlightStrongBackground#FFFFFF4D
editorBracketHighlight.foreground1#FFFFFF
editorBracketHighlight.foreground2#E6E6E6
editorBracketHighlight.foreground3#CCCCCC
editorBracketHighlight.foreground4#B3B3B3
editorBracketHighlight.foreground5#999999
editorBracketHighlight.foreground6#808080
editorBracketHighlight.unexpectedBracket.foreground#D62C2C
editorBracketMatch.background#FFFFFF4D
editorBracketMatch.border#FFFFFF73
editorCodeLens.foreground#FFFFFF80
editorCursor.background#005C28
editorCursor.foreground#FFFFFF
editorError.border#00000000
editorError.foreground#D62C2C
editorGhostText.border#00000000
editorGhostText.foreground#FFFFFF70
editorGroup.border#004520
editorGroup.dropBackground#FFFFFF15
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#00702E
editorGroupHeader.tabsBackground#005C28
editorGroupHeader.tabsBorder#004520
editorGutter.addedBackground#42DD76cc
editorGutter.background#00702E
editorGutter.commentRangeForeground#005C28
editorGutter.deletedBackground#D62C2Ccc
editorGutter.modifiedBackground#28A9FFcc
editorHoverWidget.background#004520
editorHoverWidget.border#003A1C
editorIndentGuide.activeBackground1#FFFFFFCC
editorIndentGuide.background1#FFFFFF33
editorInfo.border#00000000
editorInlayHint.background#FFFFFF20
editorInlayHint.foreground#FFFFFF90
editorInlayHint.typeBackground#A95EFF30
editorInlayHint.typeForeground#A95EFFaa
editorLineNumber.activeForeground#FFFFFF
editorLineNumber.foreground#FFFFFFAA
editorLink.activeForeground#FFFFFF
editorMarkerNavigation.background#005C28
editorMarkerNavigationError.background#D62C2C90
editorMarkerNavigationInfo.background#28A9FF90
editorMarkerNavigationWarning.background#FFB63890
editorOverviewRuler.addedForeground#42dd7680
editorOverviewRuler.border#004520
editorOverviewRuler.deletedForeground#d62c2c80
editorOverviewRuler.errorForeground#D62C2C
editorOverviewRuler.incomingContentForeground#42dd7680
editorOverviewRuler.infoForeground#28a9ff80
editorOverviewRuler.modifiedForeground#28a9ff80
editorOverviewRuler.selectionHighlightForeground#FFFFFF80
editorOverviewRuler.warningForeground#FFB638
editorRuler.foreground#FFFFFF33
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#008036
editorSuggestWidget.background#004520
editorSuggestWidget.border#003A1C
editorSuggestWidget.foreground#FFFFFF
editorSuggestWidget.highlightForeground#FFFFFF
editorSuggestWidget.selectedBackground#003A1C
editorSuggestWidget.selectedIconForeground#FFFFFF
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#FFB638
editorWhitespace.foreground#FFFFFF60
editorWidget.background#004520
editorWidget.border#003A1C
editorWidget.resizeBorder#FFFFFF50
errorForeground#D62C2C
errorLens.errorForeground#D62C2C99
errorLens.hintForeground#28A9FF99
errorLens.infoForeground#28A9FF99
errorLens.warningForeground#FFB63899
extensionButton.background#FFFFFF80
extensionButton.foreground#005C28
extensionButton.hoverBackground#FFFFFF99
extensionButton.prominentBackground#FFFFFF9d
extensionButton.prominentForeground#005C28
extensionButton.prominentHoverBackground#FFFFFF
focusBorder#FFFFFF66
foreground#FFFFFF
gitDecoration.conflictingResourceForeground#FFFFFF
gitDecoration.deletedResourceForeground#D62C2C
gitDecoration.ignoredResourceForeground#AAAAAA
gitDecoration.modifiedResourceForeground#28A9FF
gitDecoration.untrackedResourceForeground#42DD76
icon.foreground#FFFFFFAA
inlineChat.background#004520
inlineChat.border#003A1C
inlineChatInput.background#003A1C
inlineChatInput.border#003A1C
inlineChatInput.focusBorder#FFFFFF66
input.background#004520
input.border#003A1C
input.foreground#FFFFFF
input.placeholderForeground#FFFFFF80
inputOption.activeBackground#FFFFFF66
inputOption.activeBorder#00000000
inputOption.activeForeground#005C28
inputOption.hoverBackground#003A1C
inputValidation.errorBackground#004520
inputValidation.errorBorder#FFB638
inputValidation.infoBackground#004520
inputValidation.infoBorder#FFFFFF
inputValidation.warningBackground#004520
inputValidation.warningBorder#FFB638
keybindingLabel.background#004520
keybindingLabel.border#006C2E
keybindingLabel.bottomBorder#006C2E
keybindingLabel.foreground#FFFFFF
list.activeSelectionBackground#FFFFFF33
list.activeSelectionForeground#FFFFFF
list.dropBackground#FFFFFF15
list.errorForeground#D62C2C
list.focusBackground#FFFFFF40
list.focusForeground#FFFFFF
list.highlightForeground#FFFFFF
list.hoverBackground#FFFFFF33
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#FFFFFF40
list.inactiveSelectionForeground#FFFFFF
list.warningForeground#FFB638
menu.background#004520
menu.border#003A1C
menu.foreground#FFFFFF
menu.selectionForeground#FFFFFF
menu.separatorBackground#00452065
menubar.selectionBackground#004520
menubar.selectionForeground#FFFFFF
merge.border#004520
merge.commonContentBackground#FFB63830
merge.commonHeaderBackground#FFB63880
merge.currentContentBackground#42DD7630
merge.currentHeaderBackground#42DD7680
merge.incomingContentBackground#28A9FF30
merge.incomingHeaderBackground#28A9FF80
minimap.background#00702E
minimap.errorHighlight#D62C2C
minimap.findMatchHighlight#FFFFFF
minimap.selectionHighlight#FFFFFF
minimap.selectionOccurrenceHighlight#FFFFFF
minimap.warningHighlight#FFB638
minimapGutter.addedBackground#42DD76
minimapGutter.deletedBackground#D62C2C
minimapGutter.modifiedBackground#28A9FF
notificationCenterHeader.background#004520
notificationCenterHeader.foreground#FFFFFF
notificationLink.foreground#FFFFFF
notifications.background#004520
notifications.border#003A1C
notifications.foreground#FFFFFF
notificationsErrorIcon.foreground#D62C2C
notificationsInfoIcon.foreground#28A9FF
notificationsWarningIcon.foreground#FF7135
panel.background#005C28
panel.border#004520
panel.dropBorder#FFFFFF80
panelInput.border#003A1C
panelSection.border#004520
panelSectionHeader.background#004520
panelSectionHeader.border#003A1C
panelSectionHeader.foreground#FFFFFF
panelTitle.activeBorder#FFFFFF
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#FFFFFFAA
peekView.border#004520
peekViewEditor.background#005C28
peekViewEditor.matchHighlightBackground#FFFFFF40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#005C28
peekViewEditorStickyScroll.background#008036
peekViewResult.background#004520
peekViewResult.fileForeground#FFFFFF
peekViewResult.lineForeground#FFFFFF
peekViewResult.matchHighlightBackground#FFFFFF80
peekViewResult.selectionBackground#FFFFFF33
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#004520
peekViewTitleDescription.foreground#FFFFFF
peekViewTitleLabel.foreground#FFFFFF
pickerGroup.border#004520
pickerGroup.foreground#FFFFFF
profileBadge.background#FFFFFF
profileBadge.foreground#005C28
progressBar.background#FFFFFF
quickInput.background#004520
quickInput.foreground#FFFFFF
quickInputList.focusBackground#FFFFFF33
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#005C28
sash.hoverBorder#FFFFFF50
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#FFFFFF4D
scrollbarSlider.background#FFFFFF26
scrollbarSlider.hoverBackground#FFFFFF33
selection.background#FFFFFF60
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#FFFFFF
sideBar.background#005C28
sideBar.border#004520
sideBar.foreground#FFFFFFCC
sideBarSectionHeader.background#005C28
sideBarSectionHeader.border#004520
sideBarSectionHeader.foreground#FFFFFF
sideBarStickyScroll.background#004520
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#FFFFFF
statusBar.background#005C28
statusBar.border#004520
statusBar.debuggingBackground#006C2E
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#005C28
statusBar.noFolderBorder#004520
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#004520
statusBarItem.compactHoverBackground#FFFFFFCC
statusBarItem.errorBackground#d62c2c
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#da4141
statusBarItem.errorHoverForeground#FFFFFF
statusBarItem.hoverBackground#006C2E
statusBarItem.hoverForeground#FFFFFF
statusBarItem.offlineBackground#e66dff
statusBarItem.offlineForeground#FFFFFF
statusBarItem.offlineHoverBackground#ea87ff
statusBarItem.prominentBackground#003A1C
statusBarItem.prominentForeground#FFFFFF
statusBarItem.prominentHoverBackground#FFFFFF66
statusBarItem.remoteBackground#14e5d4
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#26ecdc
statusBarItem.remoteHoverForeground#005C28
statusBarItem.warningBackground#ffb638
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#ffbf51
statusBarItem.warningHoverForeground#005C28
tab.activeBackground#00702E
tab.activeBorder#00702E
tab.activeBorderTop#FFFFFF
tab.activeForeground#FFFFFF
tab.border#004520
tab.hoverBackground#00702E
tab.inactiveBackground#005C28
tab.inactiveForeground#FFFFFFAA
tab.lastPinnedBorder#004520
tab.unfocusedActiveBorder#00702E
tab.unfocusedActiveForeground#FFFFFF
tab.unfocusedHoverBackground#00702E
tab.unfocusedInactiveForeground#FFFFFFAA
terminal.ansiBlack#003A1C
terminal.ansiBlue#28A9FF
terminal.ansiBrightBlack#006C2E
terminal.ansiBrightBlue#28a9ff
terminal.ansiBrightCyan#00f9e5
terminal.ansiBrightGreen#21fe6b
terminal.ansiBrightMagenta#e66dff
terminal.ansiBrightRed#fc0606
terminal.ansiBrightWhite#fbfbfb
terminal.ansiBrightYellow#ffb638
terminal.ansiCyan#14E5D4
terminal.ansiGreen#42DD76
terminal.ansiMagenta#E66DFF
terminal.ansiRed#D62C2C
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFB638
terminal.background#005C28
terminal.foreground#FFFFFF
terminal.selectionForeground#FFFFFF
terminalCursor.background#005C28
terminalCursor.foreground#FFFFFF
terminalStickyScrollHover.background#008036
textBlockQuote.background#28A9FF34
textBlockQuote.border#28A9FFb9
textCodeBlock.background#28A9FF34
textLink.activeForeground#FFFFFF
textLink.foreground#FFFFFF
textPreformat.background#006C2E
textPreformat.foreground#FFFFFF
textSeparator.foreground#FFFFFF
titleBar.activeBackground#004520
titleBar.activeForeground#FFFFFF
titleBar.border#003A1C
titleBar.inactiveBackground#004520
titleBar.inactiveForeground#FFFFFFAA
toolbar.hoverBackground#FFFFFF60
tree.indentGuidesStroke#FFFFFF70
walkThrough.embeddedEditorBackground#00702E
welcomePage.progress.background#004520
welcomePage.progress.foreground#FFFFFF
welcomePage.tileBackground#FFFFFF10
welcomePage.tileBorder#FFFFFF20
welcomePage.tileHoverBackground#FFFFFF20
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	#7CFC00	—
entity.name.type	#ADFF2F	—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#65A765	italic
constant, support.constant.core.php	#FFFFFF	—
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	#E8E8E8	—
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	#FFFFFF	—
keyword.control.export, support.type.object.module	#9ACD32	—
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	#FFFFFF	—
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	#9ACD32	—
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	#9ACD32	—
meta.object-literal.key, variable.object.property	#FFFFFF	—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml	#9ACD32	—
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	#9ACD32	—
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	#E0E0E0	—
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	#7CFC00	—
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	#ADFF2F	—
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	#FFFFFF	—
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	#FFFFFFB3	—
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	#90EE90	—
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	#FFFFFF	—
source.elm constant.type-constructor	#FFFFFF	—
source.elm storage.type	#90EE90	—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html	#90EE90	—
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	#7CFC00	—
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	#FFFFFF	—
source.diff meta.diff.header.command	#ADFF2F	—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified	#7CFC00	—
support.variable.liquid, support.class.liquid	#FFFFFF	—
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	#ADFF2F	—
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	#ADFFAFaa	—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php	#9ACD32	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#90EE90	—
fenced_code.block.language	#90EE90	—
punctuation.definition.list.begin	#ADFF2F	—
entity.name.section, markup.heading.setext	#9ACD32	—
punctuation.definition.heading	#9ACD32	—
markup.underline.link, markup.underline.link.image	#ADFF2F	—
markup.bold, punctuation.definition.bold	#FFFFFF	bold
markup.strikethrough, punctuation.definition.strikethrough	#FFFFFFAA	—
markup.italic, punctuation.definition.italic	#7CFC00	italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#ADFF2F	—
punctuation.definition.quote.begin	#ADFF2F	—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out	#90EE90AA	italic
entity.other.attribute-name.pseudo-class	#FFFFFF	—
entity.other.attribute-name.pseudo-element	#FFFFFF	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#ADFF2F	—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity	#ADFF2F	—
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	#FFFFFF	—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity	#90EE90	—
entity.name.tag.reference, meta.property-list	#7CFC00	—
keyword.other.unit	#7CFC00	—
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html	#7CFC00	—
constant.numeric	#7CFC00	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#ADFF2F	—

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