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 — Caio - Santos 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#FFFFFF15
activityBar.activeBorder#FFFFFF
activityBar.background#000000
activityBar.border#000000
activityBar.dropBorder#FFFFFF
activityBar.foreground#FFFFFF
activityBar.inactiveForeground#AAAAAA
activityBarBadge.background#FFFFFF
activityBarBadge.foreground#000000
activityBarTop.activeBorder#FFFFFF
activityBarTop.dropBorder#FFFFFF
activityBarTop.foreground#FFFFFF
activityBarTop.inactiveForeground#AAAAAA
badge.background#000000
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#F5F5F5
breadcrumb.focusForeground#000000
breadcrumb.foreground#555555
breadcrumbPicker.background#FFFFFF
button.background#000000
button.border#00000033
button.foreground#FFFFFF
button.hoverBackground#333333
button.secondaryBackground#E0E0E0
button.secondaryForeground#000000
button.secondaryHoverBackground#CCCCCC
button.separator#FFFFFF
charts.blue#0066CC
charts.foreground#000000
charts.green#007700
charts.lines#666666
charts.orange#CC6600
charts.purple#CC00CC
charts.red#CC0000
charts.yellow#CCCC00
chat.avatarBackground#000000
chat.avatarForeground#FFFFFF
chat.requestBorder#CCCCCC
chat.slashCommandBackground#F0F0F0
chat.slashCommandForeground#000000
commandCenter.activeBackground#00000015
commandCenter.activeForeground#000000
commandCenter.background#F5F5F5
commandCenter.border#CCCCCC
commandCenter.foreground#333333
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#CC0000
debugConsole.infoForeground#0066CC
debugConsole.sourceForeground#000000
debugConsole.warningForeground#CCCC00
debugConsoleInputIcon.foreground#000000
debugExceptionWidget.background#FFE6E6
debugExceptionWidget.border#CC0000
debugIcon.breakpointCurrentStackframeForeground#CC0000
debugIcon.breakpointDisabledForeground#AAAAAA
debugIcon.breakpointForeground#CC0000
debugIcon.breakpointUnverifiedForeground#FF9900
debugIcon.continueForeground#0066CC
debugIcon.disconnectForeground#CC0000
debugIcon.pauseForeground#CCCC00
debugIcon.restartForeground#007700
debugIcon.startForeground#007700
debugIcon.stepBackForeground#0066CC
debugIcon.stepIntoForeground#0066CC
debugIcon.stepOutForeground#0066CC
debugIcon.stepOverForeground#0066CC
debugIcon.stopForeground#CC0000
debugTokenExpression.boolean#0000CC
debugTokenExpression.error#CC0000
debugTokenExpression.name#000000
debugTokenExpression.number#0000CC
debugTokenExpression.string#007700
debugTokenExpression.value#0066CC
debugToolBar.background#F0F0F0
debugToolBar.border#CCCCCC
debugView.stateLabelBackground#F0F0F0
debugView.stateLabelForeground#000000
debugView.valueChangedHighlight#0066CCAA
descriptionForeground#555555
diffEditor.border#CCCCCC
diffEditor.diagonalFill#CCCCCC
diffEditor.insertedLineBackground#00770022
diffEditor.insertedTextBackground#00770022
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#CC000022
diffEditor.removedTextBackground#CC000022
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#F5F5F5
diffEditorGutter.insertedLineBackground#00770022
diffEditorGutter.removedLineBackground#CC000022
diffEditorOverview.insertedForeground#007700
diffEditorOverview.removedForeground#CC0000
disabledForeground#888888
dropdown.background#FFFFFF
dropdown.border#CCCCCC
dropdown.foreground#000000
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.findMatchBackground#FFFF0066
editor.findMatchBorder#CCCC00
editor.findMatchHighlightBackground#FFFF0033
editor.findMatchHighlightBorder#FFFF0066
editor.findRangeHighlightBackground#F0F0F044
editor.focusedStackFrameHighlightBackground#CCCC0044
editor.foldBackground#00000011
editor.foreground#000000
editor.hoverHighlightBackground#00000011
editor.inactiveSelectionBackground#E6E6E6
editor.lineHighlightBackground#F5F5F5
editor.lineHighlightBorder#E0E0E0
editor.linkedEditingBackground#E0E0E0
editor.rangeHighlightBackground#F0F0F044
editor.selectionBackground#E0E0E0
editor.selectionForeground#000000
editor.selectionHighlightBackground#EEEEEE
editor.selectionHighlightBorder#CCCCCC
editor.stackFrameHighlightBackground#FFFF0044
editor.wordHighlightBackground#F0F0F033
editor.wordHighlightBorder#00000033
editor.wordHighlightStrongBackground#00000011
editor.wordHighlightStrongBorder#00000033
editorBracketHighlight.foreground1#000000
editorBracketHighlight.foreground2#333333
editorBracketHighlight.foreground3#666666
editorBracketHighlight.foreground4#777777
editorBracketHighlight.foreground5#888888
editorBracketHighlight.foreground6#999999
editorBracketHighlight.unexpectedBracket.foreground#CC0000
editorBracketMatch.background#E0E0E0
editorBracketMatch.border#999999
editorBracketPairGuide.activeBackground1#000000
editorBracketPairGuide.activeBackground2#333333
editorBracketPairGuide.activeBackground3#666666
editorBracketPairGuide.activeBackground4#777777
editorBracketPairGuide.activeBackground5#888888
editorBracketPairGuide.activeBackground6#999999
editorCodeLens.foreground#999999
editorCursor.background#FFFFFF
editorCursor.foreground#000000
editorError.border#00000000
editorError.foreground#CC0000
editorGhostText.border#00000000
editorGhostText.foreground#00000077
editorGroup.border#CCCCCC
editorGroup.dropBackground#00000015
editorGroupHeader.border#CCCCCC
editorGroupHeader.noTabsBackground#F5F5F5
editorGroupHeader.tabsBackground#F0F0F0
editorGroupHeader.tabsBorder#CCCCCC
editorGutter.addedBackground#007700
editorGutter.background#FFFFFF
editorGutter.commentRangeForeground#999999
editorGutter.deletedBackground#CC0000
editorGutter.modifiedBackground#0066CC
editorHint.border#00000000
editorHint.foreground#0066CC
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#CCCCCC
editorIndentGuide.activeBackground1#BBBBBB
editorIndentGuide.background1#DDDDDD
editorInfo.border#00000000
editorInfo.foreground#0066CC
editorInlayHint.background#F0F0F0
editorInlayHint.foreground#666666
editorInlayHint.typeBackground#F0F0F0
editorInlayHint.typeForeground#666666
editorLightBulb.foreground#CCCC00
editorLightBulbAutoFix.foreground#CCCC00
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#AAAAAA
editorLink.activeForeground#000000
editorMarkerNavigation.background#F5F5F5
editorMarkerNavigationError.background#FFE6E6
editorMarkerNavigationInfo.background#E6E6FF
editorMarkerNavigationWarning.background#FFFAE6
editorOverviewRuler.addedForeground#007700
editorOverviewRuler.border#CCCCCC
editorOverviewRuler.bracketMatchForeground#00000066
editorOverviewRuler.deletedForeground#CC0000
editorOverviewRuler.errorForeground#CC0000
editorOverviewRuler.findMatchForeground#CCCC00
editorOverviewRuler.infoForeground#0066CC
editorOverviewRuler.modifiedForeground#0066CC
editorOverviewRuler.rangeHighlightForeground#00000044
editorOverviewRuler.selectionHighlightForeground#00000022
editorOverviewRuler.warningForeground#CCCC00
editorOverviewRuler.wordHighlightForeground#00000044
editorOverviewRuler.wordHighlightStrongForeground#00000066
editorPane.background#FAFAFA
editorRuler.foreground#DDDDDD
editorStickyScroll.background#F5F5F5
editorStickyScrollHover.background#EEEEEE
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#CCCCCC
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#E0E0E0
editorSuggestWidget.selectedIconForeground#000000
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000088
editorWarning.border#00000000
editorWarning.foreground#CCCC00
editorWhitespace.foreground#DDDDDD
editorWidget.background#F5F5F5
editorWidget.border#CCCCCC
editorWidget.foreground#000000
editorWidget.resizeBorder#000000
errorForeground#CC0000
errorLens.errorForeground#CC000099
errorLens.hintForeground#0066CC99
errorLens.infoForeground#0066CC99
errorLens.warningForeground#CCCC0099
extensionBadge.remoteBackground#000000
extensionBadge.remoteForeground#FFFFFF
extensionButton.background#CCCCCC
extensionButton.foreground#000000
extensionButton.hoverBackground#BBBBBB
extensionButton.prominentBackground#000000DD
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#333333
focusBorder#000000
foreground#333333
gitDecoration.addedResourceForeground#007700
gitDecoration.conflictingResourceForeground#CCCC00
gitDecoration.deletedResourceForeground#CC0000
gitDecoration.ignoredResourceForeground#888888
gitDecoration.modifiedResourceForeground#0066CC
gitDecoration.renamedResourceForeground#0066CC
gitDecoration.stageDeletedResourceForeground#CC0000
gitDecoration.stageModifiedResourceForeground#0066CC
gitDecoration.untrackedResourceForeground#007700
icon.foreground#333333
inlineChat.background#FFFFFF
inlineChat.border#CCCCCC
inlineChat.regionHighlight#00000015
inlineChat.shadow#00000022
inlineChatDiff.inserted#00770022
inlineChatDiff.removed#CC000022
inlineChatInput.background#FFFFFF
inlineChatInput.border#CCCCCC
inlineChatInput.focusBorder#000000
inlineChatInput.placeholderForeground#888888
input.background#FFFFFF
input.border#CCCCCC
input.foreground#000000
input.placeholderForeground#888888
inputOption.activeBackground#DDDDDD
inputOption.activeBorder#00000000
inputOption.activeForeground#000000
inputOption.hoverBackground#EEEEEE
inputValidation.errorBackground#FFE6E6
inputValidation.errorBorder#CC0000
inputValidation.infoBackground#E6E6FF
inputValidation.infoBorder#0000CC
inputValidation.warningBackground#FFFAE6
inputValidation.warningBorder#CCCC00
keybindingLabel.background#F0F0F0
keybindingLabel.border#CCCCCC
keybindingLabel.bottomBorder#AAAAAA
keybindingLabel.foreground#000000
list.activeSelectionBackground#E0E0E0
list.activeSelectionForeground#000000
list.deemphasizedForeground#777777
list.dropBackground#00000010
list.errorForeground#CC0000
list.focusBackground#DDDDDD
list.focusForeground#000000
list.highlightForeground#000000
list.hoverBackground#EEEEEE
list.hoverForeground#000000
list.inactiveSelectionBackground#F0F0F0
list.inactiveSelectionForeground#000000
list.warningForeground#997700
listFilterWidget.background#F0F0F0
listFilterWidget.noMatchesOutline#CC0000
listFilterWidget.outline#000000
menu.background#FFFFFF
menu.border#CCCCCC
menu.foreground#000000
menu.selectionBackground#EEEEEE
menu.selectionForeground#000000
menu.separatorBackground#CCCCCC
menubar.selectionBackground#EEEEEE
menubar.selectionForeground#000000
merge.border#CCCCCC
merge.commonContentBackground#CCCC0022
merge.commonHeaderBackground#CCCC0044
merge.currentContentBackground#00770022
merge.currentHeaderBackground#00770044
merge.incomingContentBackground#0000CC22
merge.incomingHeaderBackground#0000CC44
mergeEditor.change.background#00770022
mergeEditor.change.word.background#00770044
mergeEditor.conflict.handled.minimapOverViewRuler#007700
mergeEditor.conflict.handledFocused.border#007700
mergeEditor.conflict.handledUnfocused.border#00770088
mergeEditor.conflict.unhandled.minimapOverViewRuler#CCCC00
mergeEditor.conflict.unhandledFocused.border#CCCC00
mergeEditor.conflict.unhandledUnfocused.border#CCCC0088
minimap.background#FAFAFA
minimap.errorHighlight#CC0000
minimap.findMatchHighlight#FFFF0066
minimap.selectionHighlight#00000033
minimap.warningHighlight#CCCC00
minimapGutter.addedBackground#007700
minimapGutter.deletedBackground#CC0000
minimapGutter.modifiedBackground#0066CC
multiDiffEditor.border#CCCCCC
multiDiffEditor.headerBackground#F0F0F0
notebook.cellBorderColor#CCCCCC
notebook.cellEditorBackground#FFFFFF
notebook.cellInsertionIndicator#000000
notebook.cellStatusBarItemHoverBackground#EEEEEE
notebook.cellToolbarSeparator#CCCCCC
notebook.editorBackground#FFFFFF
notebook.focusedCellBorder#000000
notebook.focusedEditorBorder#000000
notebook.inactiveFocusedCellBorder#CCCCCC
notebook.inactiveSelectedCellBorder#CCCCCC
notebook.outputContainerBackgroundColor#F5F5F5
notebook.selectedCellBackground#F0F0F0
notebook.selectedCellBorder#000000
notebook.symbolHighlightBackground#FFFF0066
notebookScrollbarSlider.activeBackground#00000044
notebookScrollbarSlider.background#00000022
notebookScrollbarSlider.hoverBackground#00000033
notebookStatusErrorIcon.foreground#CC0000
notebookStatusRunningIcon.foreground#0066CC
notebookStatusSuccessIcon.foreground#007700
notificationCenter.border#CCCCCC
notificationCenterHeader.background#F0F0F0
notificationCenterHeader.foreground#000000
notificationLink.foreground#0066CC
notifications.background#FFFFFF
notifications.border#CCCCCC
notifications.foreground#000000
notificationsErrorIcon.foreground#CC0000
notificationsInfoIcon.foreground#0066CC
notificationsWarningIcon.foreground#CCCC00
notificationToast.border#CCCCCC
panel.background#F5F5F5
panel.border#CCCCCC
panel.dropBorder#000000
panelInput.border#CCCCCC
panelSection.border#CCCCCC
panelSection.dropBackground#00000010
panelSectionHeader.background#EEEEEE
panelSectionHeader.border#CCCCCC
panelSectionHeader.foreground#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#666666
peekView.border#000000
peekViewEditor.background#F5F5F5
peekViewEditor.matchHighlightBackground#FFFF0066
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#F5F5F5
peekViewEditorStickyScroll.background#F0F0F0
peekViewResult.background#F0F0F0
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#333333
peekViewResult.matchHighlightBackground#FFFF0066
peekViewResult.selectionBackground#00000022
peekViewResult.selectionForeground#000000
peekViewTitle.background#FFFFFF
peekViewTitleDescription.foreground#333333
peekViewTitleLabel.foreground#000000
pickerGroup.border#CCCCCC
pickerGroup.foreground#000000
profileBadge.background#000000
profileBadge.foreground#FFFFFF
progressBar.background#000000
quickInput.background#FFFFFF
quickInput.foreground#000000
quickInputList.focusBackground#000000
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#FFFFFF
quickInputTitle.background#F0F0F0
sash.hoverBorder#000000
scmGraph.foreground1#000000
scmGraph.foreground2#0066CC
scmGraph.foreground3#007700
scmGraph.foreground4#CCCC00
scmGraph.foreground5#CC0000
scmGraph.historyItemAdditionsForeground#007700
scmGraph.historyItemBaseRefColor#CC0000
scmGraph.historyItemDefaultLabelForeground#000000
scmGraph.historyItemDeletionsForeground#CC0000
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#0066CC
scmGraph.historyItemRemoteRefColor#007700
scrollbar.shadow#00000033
scrollbarSlider.activeBackground#00000044
scrollbarSlider.background#00000026
scrollbarSlider.hoverBackground#00000033
selection.background#00000040
settings.headerForeground#000000
settings.modifiedItemIndicator#000000
sideBar.background#F0F0F0
sideBar.border#CCCCCC
sideBar.dropBackground#E0E0E0
sideBar.foreground#333333
sideBarSectionHeader.background#E6E6E6
sideBarSectionHeader.border#CCCCCC
sideBarSectionHeader.foreground#000000
sideBarStickyScroll.background#EEEEEE
sideBarStickyScroll.shadow#00000022
sideBarTitle.foreground#000000
statusBar.background#000000
statusBar.border#000000
statusBar.debuggingBackground#CC6600
statusBar.debuggingBorder#CC6600
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#333333
statusBar.noFolderBorder#333333
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#333333
statusBarItem.compactHoverBackground#333333
statusBarItem.errorBackground#CC0000
statusBarItem.errorForeground#FFFFFF
statusBarItem.errorHoverBackground#FF0000
statusBarItem.errorHoverForeground#FFFFFF
statusBarItem.hoverBackground#444444
statusBarItem.hoverForeground#FFFFFF
statusBarItem.offlineBackground#888888
statusBarItem.offlineForeground#FFFFFF
statusBarItem.offlineHoverBackground#AAAAAA
statusBarItem.prominentBackground#444444
statusBarItem.prominentForeground#FFFFFF
statusBarItem.prominentHoverBackground#666666
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#FFFFFF
statusBarItem.remoteHoverBackground#333333
statusBarItem.remoteHoverForeground#FFFFFF
statusBarItem.warningBackground#CCCC00
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#FFFF00
statusBarItem.warningHoverForeground#000000
tab.activeBackground#FFFFFF
tab.activeBorder#000000
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.activeModifiedBorder#0066CC
tab.border#CCCCCC
tab.hoverBackground#FFFFFF
tab.hoverForeground#000000
tab.inactiveBackground#F0F0F0
tab.inactiveForeground#666666
tab.inactiveModifiedBorder#0066CC99
tab.lastPinnedBorder#CCCCCC
tab.unfocusedActiveBorder#666666
tab.unfocusedActiveForeground#333333
tab.unfocusedHoverForeground#000000
tab.unfocusedInactiveForeground#777777
terminal.ansiBlack#000000
terminal.ansiBlue#0000CC
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#0000FF
terminal.ansiBrightCyan#00FFFF
terminal.ansiBrightGreen#00FF00
terminal.ansiBrightMagenta#FF00FF
terminal.ansiBrightRed#FF0000
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#008B8B
terminal.ansiGreen#007700
terminal.ansiMagenta#CC00CC
terminal.ansiRed#CC0000
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#CCCC00
terminal.background#FFFFFF
terminal.foreground#000000
terminal.selectionBackground#00000022
terminal.selectionForeground#000000
terminalCursor.background#FFFFFF
terminalCursor.foreground#000000
terminalStickyScrollHover.background#F0F0F0
textBlockQuote.background#F0F0F0
textBlockQuote.border#000000
textCodeBlock.background#F0F0F0
textLink.activeForeground#333333
textLink.foreground#000000
textPreformat.foreground#333333
textSeparator.foreground#000000
titleBar.activeBackground#000000
titleBar.activeForeground#FFFFFF
titleBar.border#000000
titleBar.inactiveBackground#333333
titleBar.inactiveForeground#CCCCCC
toolbar.activeBackground#EEEEEE
toolbar.hoverBackground#DDDDDD
tree.indentGuidesStroke#CCCCCC
walkThrough.embeddedEditorBackground#F5F5F5
welcomePage.progress.background#F0F0F0
welcomePage.progress.foreground#000000
welcomePage.tileBackground#FFFFFF
welcomePage.tileBorder#CCCCCC
welcomePage.tileHoverBackground#F0F0F0
widget.shadow#00000022
window.activeBorder#FFFFFF
window.inactiveBorder#CCCCCC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source	#777777	italic
constant, support.constant.core.php	#0000CC	—
constant.numeric, constant.language, constant.character, constant.other	#0066CC	—
variable, variable.language, variable.other.readwrite, variable.parameter, meta.method.body, entity.name.variable, punctuation.definition.variable	#000000	—
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	#555555	—
keyword, keyword.control, keyword.control.conditional, keyword.control.import, keyword.control.export, keyword.control.flow, keyword.control.from, keyword.control.return, keyword.operator.new, keyword.operator.expression, storage.modifier, storage.type.class	#000099	bold
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, variable.function, entity.name.function-call	#000000	bold
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, entity.name.class, entity.name.type.class	#000099	—
string, string.template, string.quoted.single, string.quoted.double, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end	#007700	—
punctuation, meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.terminator, punctuation.separator, meta.tag.xml, meta.tag.preprocessor.xml	#555555	—
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.assignment, keyword.operator.relational, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math, keyword.operator.ternary	#000000	—
entity.name.tag, punctuation.definition.tag	#000099	bold
entity.other.attribute-name	#333333	italic
variable.other.property, variable.other.object.property, meta.object-literal.key, entity.name.tag.css, support.type.property-name	#444444	—
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	#444444	—
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, JSXNested	#000000	—
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	#000099	—
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, storage.type.enum, storage.type.interface, storage.type.type, keyword.storage.modifier	#000099	—
entity.name.function.constructor	#000099	bold
support.constant.property-value, support.constant.font-name	#0066CC	—
keyword.other.unit	#0066CC	—
constant.other.color	#0066CC	—
markup.bold, punctuation.definition.bold	#000000	bold
markup.italic, punctuation.definition.italic	#000000	italic
markup.heading, entity.name.section, punctuation.definition.heading	#000000	bold
markup.underline.link, markup.underline.link.image	#0066CC	—
markup.quote, punctuation.definition.quote.begin	#007700	italic
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#0066CC	—
fenced_code.block.language	#000099	—
punctuation.definition.list.begin	#000000	—
markup.inserted, markup.inserted.git_gutter	#007700	—
markup.deleted, markup.deleted.git_gutter	#CC0000	—
markup.changed, markup.changed.git_gutter	#0066CC	—
markup.table	#000000	—
string.regexp	#CC00CC	—
constant.character.escape	#0066CC	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#0066CC	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#000099	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#555555	—
invalid, invalid.illegal	#CC0000	—
invalid.deprecated	#CC00CC	—
meta.diff.header.from-file, meta.diff.header.to-file	#0066CC	—
markup.inserted.diff, punctuation.definition.inserted.diff	#007700	—
markup.deleted.diff, punctuation.definition.deleted.diff	#CC0000	—
source.json meta.structure.dictionary.json support.type.property-name.json	#000000	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#444444	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#666666	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#888888	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#555555	—

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